|
JavaScript - Rolldown (showhide) Menu Problem In Opera
Greetings.
I"m having trouble trying to create a crossbrowser vertical menu with "showhide" submenus. When moving cursor above the submenu in Opera browser, it sometimes disappears. See here. I only guess it's because of hidden divs which however listen to the onmouseout event The code: Code: <script language="javascript">
<!--
function rolldown(number){
/*close others*/
for (i=1;i<=11;i=i+1){
var id='m' + i;
if(i != number){ document.getElementById(id).style.display='none';}
}
/*open this*/
var id='m' + number;
document.getElementById(id).style.display='inline';
}
-->
</script>
And the menu sections and submenus go like this: Code: <li onmouseover="rolldown(1);" class="m1"><a href="home.php">home</a>
</li>
<div id="m1" class="m1" onmouseover="rolldown(1);" onmouseout="javascript:document.getElementById('m1').style.display='none';">
<a href="1.php">1</a>
<br /><a href="2.php">2</a>
</div>
I tried to resolve the issue by destroying the divs' innerHTML, but the fun is it still works in my firefox but opera now even doesn't show the submenus. See here. My code for the latter changed to this: Code: function rolldown(number){
/*close others*/
for (i=1;i<=11;i=i+1){
var id='m' + i;
if(i != number){
document.getElementById(id).style.display='none';
document.getElementById(id).innerHTML='';
}
}
/*open this*/
if(number!=0){
var id='m' + number;
//definition of concrete submenus
switch(number)
{
case 1:
var htmlstring='<a href="a1.php">a1</a><br /><a href="a2.php">a2</a>';
break;
case 2:
var htmlstring='<a href="b1.php">b1</a><br /><a href="b2.php">b2</a>';
break;
default:
var htmlstring='';
}
document.getElementById(id).innerHTML=htmlstring;
document.getElementById(id).style.display='inline';
}
}
Can you help solve this whatever way? Thank you!! Similar Tutorialshttp://dannycremers.com/Untitled-3.html so far i've created this but i have one little thing i can't figure out one example: open the menu1 and menu2 links -> open the tab1a and tab1b links you'll see both TEXT MENU1 TAB1 and TEXT MENU2 TAB1 will open i don't want this.. i only want the last clicked link to be visible i managed to accomplish this in the seperate menu links (for example when you first open tab1a and then tab2a you'll only see the TEXT MENU1 TAB2 link) any ideas how i can solve this? thanks! DC (sorry for the slightly confusing numbering) Hey Guys, While I've been lurking around the forums in CSS and Flash this is my first post regarding Javascript. I'm setting up a navigation that displays its sub-links once you click the Navigation option, and am trying to tweak the code. The Site: http://www.psychreview.net Where to Look: The top right navigation. It works correctly, but they layer on top of each other - I'd like the user to click one of the toggles, and have the toggle show the right div AND hide the other two divs. The Javascript: (I use three functions because eventually I'll be swapping the images you click while the div's are active). Code: // JavaScript Document
function toggle1(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_home.png">';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_home.png">';
}
}
function toggle2(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_publications.png">';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_publications.png">';
}
}
function toggle3(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_resources.png">';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_resources.png">';
}
}
The html: Code: <!-- Navigation -->
<div id="nav">
<!-- Navigations Links -->
<a href="javascript:toggle1('nav_home_contents', 'imageDivLink');"><img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_home.png"></a>
<a href="javascript:toggle2('nav_publications_contents', 'imageDivLink');"><img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_publications.png"></a>
<a href="javascript:toggle3('nav_resources_contents', 'imageDivLink');"><img src="http://www.psychreview.net/wp-content/themes/ReView/images/nav_resources.png" class="padding"></a>
</div>
<!-- Navigation Drop Downs -->
<div class="nav_contents" id="nav_home_contents">
<ul>
<li><a href="http://www.psychreview.net/about/mission">About Us: Mission</a></li>
<li><a href="http://www.psychreview.net/about/about-the-authors">About Us: About the Authors</a></li>
<li><a href="#">ReView SpotLight</a></li>
</ul>
<ul>
<li><a href="#">Moment in ReView</a></li>
<li><a href="http://www.psychreview.net/contact-us">Contact Us</a></li>
<li class="spacer"> </li>
</ul>
</div>
<div class="nav_contents" id="nav_publications_contents">
<ul>
<li><a href="http://www.psychreview.net/search">Search Publications</a></li>
<li><a href="#">Featured Article</a></li>
<li><a href="http://www.psychreview.net/publications/free-articles">Free Articles</a></li>
</ul>
<ul>
<li><a href="http://www.psychreview.net/publications/request-a-topic">Request A Topic</a></li>
<li><a href="http://www.psychreview.net/publications/for-contributing-authors">For Contributing Authors</a></li>
<li class="spacer"> </li>
</ul>
</div>
<div class="nav_contents" id="nav_resources_contents">
<ul>
<li><a href="http://www.psychreview.net/resources/other-online-resources">Other Online Resources</a></li>
<li><a href="#">Definition of Terms</a></li>
<li class="spacer"> </li>
</ul>
</div>
Every time the user clicks one of the toggles, I want it to not only show the right div, but hide the other two. Any suggestions? Thanks guys. Hello. I have a submit-button: When clicked after validation i want the div containing button to hide and at the same time a new div to appear. With this code i can make the div with button disappear, but i cant get the hidden div to show up instead. Where am i going wrong? Im not too familiar with js.. JAVASCRIPT <!--script to close-button--> <script type="text/javascript" > function showHide(elementid){ if (document.getElementById(elementid).style.display == 'none'){ document.getElementById(elementid).style.display = ''; } else { document.getElementById(elementid).style.display = 'none'; } } <!--NOT WORKING script that should open-div--> function showhide(elementid){ if (document.getElementById(elementid).style.display == 'block'){ document.getElementById(elementid).style.display = 'none'; }else{ document.getElementById(elementid).style.display = 'block'; } } </script> CSS #info-visible { position: absolute; z-index: 1000; left: 200px; top: 100px; width: auto; height: auto; border: 2px solid #888; background: #000099; } #target { display: none; position: absolute; z-index: 1000; left: 500px; top: 100px; width: 400px; height: 400px; border: 2px solid #888; background: #009900; } HTML <div id="info-visible" > <p>visible div</p> <FORM NAME="submission" onSubmit="return myfunction()" action="javascript:showHide('info-visible'); showHide('target')" > <INPUT NAME="textfield" TYPE="TEXT"> <INPUT TYPE="SUBMIT" > </FORM> </div> <div id="target"><p>hidden div</p></div> I created a drawEllipse function for a Canvas library I'm making, and it works fine in Safari, Firefox, and Chrome, but in Opera, the rotation doesn't work. The function is as follows: Code: ctx.drawEllipse = function (fill, x, y, rad1, rad2, r) {
ctx.save();
if (r) {
ctx.translate(x, y);
ctx.rotate(r);
ctx.translate(-x, -y);
}
ctx.scale(rad1, rad2);
ctx.beginPath();
ctx.arc()(x / rad1, y / rad2, 1);
ctx[fill]();
ctx.restore();
};
When I add rotation to the ellipse, in Opera, it doesn't rotate and just gets bigger. I have no idea why. Can anyone suggest anything? Thanks, Julian I'm using a nice little script which replaces the usual file upload input with whatever image you want and then with JS makes sure that an invisible 'browse' button is underneath the mouse pointer whenever the mouse is moved over the image you want to use. Nice It works on every browser ie7 ie8 ie9 FF safari chrome but not on opera. On Opera the regular file input appears. I've had a good hoke round the 'net and I know there's loads of scripts which do similar things. But either they are too complicated for me to figure out how to use them eg uploadify (bit of a newbie) or they do similar things but just not as well - like making the custom image the same size as the file input would be (there's issues with that too). here's the script I'm using - there's not much to it How come it doesn't work in Opera grrrr... Is there anyway to fix it? This is perfect for what I want apart from not working in Opera Hello, I've searched high and low for some decent code that will allow a visitor to a website to bookmark the site through a hyperlink. The bookmarking is done through a javascript function that looks like this: Code: function OnBookmarkButtonClick (e)
{
if (window.sidebar)
{ // Mozilla Firefox Bookmark
window.sidebar.addPanel("TimeSheet", window.document.location,"");
}
else if (window.external)
{ // IE Favorite
window.external.AddFavorite( window.document.location, "TimeSheet");
}
}
I need to add some detection for Opera, Safari, and Chrome. Please note that it must be feature detection, not browser detection. But as I said, I've searched high and low for this, and couldn't find anything. Help is much appreciated. Hi everyone please i want to make a menu like the attached image i tried to make it with many software but i did not get the same view so can anyone help me? thanks in advance i am using chained combox in a form. in coda-slider. but (not first) in other tab chained combobox is not run (mycodes is in attachment) my codes is in attachment Hi Only a very simple beginner (thicko) so please don't laugh :-) I have a very basic allwebco website and in the root I have menu.js which puts a small menu on the top right of every webpage that calls it. The index.html page in the root calls this menu.js and also another page in a folder from the root calls it (I prefix menu.js in this page with '../' so as to step back to the root). Also on this sub-page I call another page which is in the same folder. This also calls up 'menu.js' and again I prefix it '../' in order to access it from the root, which is the preceding folder. However, on this second page, it does not display the menu. I have tried everything by prefixing it with '/', './', '../' and just leaving it as 'menu.js' but it will not find it. I suppose it is because it is a 'recursive' situation. ie keeps calling itself over and over? Can anyone help please? Thanks. Barry OK, I think this is an error with the js. I'm in the process of putting together a website in which when the user clicks on the nav bar, it drops down displaying the submenu. I'm working with HTML Kit and in the preview screen (which if I remember correctly is IE7) it works fine. However, when I save the file and open it up in any browser (FF, IE, Chrome)only kids and community work section works. I'm not seeing anything wrong. Does anyone have a clue what's going on? Or would it be a problem with the HTML/CSS EDIT: Guess I should post the link http://tinyurl.com/67w4epj hey im newish to javascript. ive completely handwritten this script, based on a working drop down menu script i had. this new script is supposed to incorporate the menu 'rolling' down. this is based on pixel increment by time. problems with the code: doesnt work at all with ie, only FF can only open one menu item per refresh of page when you go to click on a menu sub-item the menu disappears as soon as your mouse leaves the first header link. didnt have any of these problems with the basic drop down menu this is based on. so heres the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div, a, ul, li, body, {padding:0;margin:0; text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
li {font-size: 15px;}
body{margin:0;}
#container {width:800px; margin: 0 auto; font-family:Tahoma, Geneva, sans-serif;}
.drop {overflow: hidden; width: 180px; height: 20px; float: left; background: #f1f1f1; display: block; list-style:none; padding: 5px 10px; opacity: 0.9; filter: alpha(opacity=90); border-bottom: 1px solid blue;margin: 0;}
.menuItemHolder {width: 200px; height: 20px; float:left;}
.topLi {margin-bottom: 10px; text-align: center; font-size: 16px;}
.relDiv {border: 1px solid green; background: blue; color: #fff;}
#nav-container {height: 30px; margin: 0;}
/*THIS BIT SHOULD BE UNCOVERED IF USING 6 MENU ITEMS, (instead of 5)*/
.menuItemHolder {width: 160px;}
.drop {width: 140px;}
</style>
<script type="text/javascript">
height=20; //set initial height of top menu links
var timer_is_on=0; //set timer value to 0 (off)
function dropper(dropN)
{
menu = document.getElementById(dropN); //select menu to open
var links=menu.innerHTML; //select link holder
numLinks=(links.split("</li>").length-1); //calculate number of links in each link holder
height++; //increase value of height by '1' each time
maxHeight=10+(numLinks*18); //calculate height of expanded Li holder
if (height<=maxHeight) //code to run if menu is fully extended
{
menu.style.height=height+"px"; //reformat for pixel declaration
menu.style.position = "absolute"; //change menu to absolutely positioned
setTimeout("dropper("+dropN+")",10); //call function from within itself after 10 miliseconds
}
else
{
}
}
function doTimer(dropN)
{
if (!timer_is_on) //check if timer is set, if not, set it and redirect
{
timer_is_on=1;
dropper(dropN); //redirect to the function to bring the menu down
}
}
function backup(dropN)
{
menu = document.getElementById(dropN); //select menu to close
menu.style.height = '20px'; //change to closed height (height of first link only)
height=20; //change height variable back to 20
var timer_is_on=0; //reset time set variable to 0
}
</script>
</head>
<body>
<div id="nav-container">
<div class="menuItemHolder">
<ul id="1" class="drop" onMouseOver="doTimer('1');" onMouseOut="backup('1');">
<li class="topLi"><a href="#">Top bit</a></li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li>
</ul>
</div>
<div class="menuItemHolder">
<ul id="2" class="drop" onMouseOver="doTimer('2');" onMouseOut="backup('2');">
<li class="topLi"><a href="#" class="topLi">Longer Top bit</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 2</a></li>
</ul>
</div>
</body>
</html>
any help much appreciated now i am making a navigation menu using images by on mouse over function, i want to make a div that shows menu using css and javascript function plz find the attached image .. and try to help me Hi there. I recently put a news ticker on my work's homepage and it works fine. The only problem is that the drop-down menus above it are appearing behind the news ticker. I tried trouble-shooting for the last couple days to no avail. I am hoping someone might be able to give me some hints or a way to resolve this. Here is a link to the beta page, and below is the newsticker javascript I used. This is my first time posting here and I'm really new to the world of scripting so please let me know if there is anything else you might need to help me crack this thing. Thanks to everyone in advance. Code: // Create namespace
if (at == undefined) var at = {};
if (at.bartelme == undefined) at.bartelme = {};
// Newsticker Class
at.bartelme.newsticker = Class.create();
at.bartelme.newsticker.prototype = {
initialize: function()
{
// Get elements
this.interval = 10000;
this.container = $("newsticker");
this.messages = $A(this.container.getElementsByTagName("li"));
this.number_of_messages = this.messages.length;
if (this.number_of_messages == 0)
{
this.showError();
return false;
}
this.current_message = 0;
this.previous_message = null;
// Create toggle button
this.toggle_button = document.createElement("a");
this.toggle_button.href = "#";
this.toggle_button.id = "togglenewsticker";
this.toggle_button.innerHTML = "Toggle";
Event.observe(this.toggle_button, "click", this.toggle.bindAsEventListener(this), false);
this.hideMessages();
this.showMessage();
// Install timer
this.timer = setInterval(this.showMessage.bind(this), this.interval);
},
showMessage: function()
{
Effect.Appear(this.messages[this.current_message]);
setTimeout(this.fadeMessage.bind(this), this.interval-2000);
if (this.current_message < this.number_of_messages-1)
{
this.previous_message = this.current_message;
this.current_message = this.current_message + 1;
} else {
this.current_message = 0;
this.previous_message = this.number_of_messages - 1;
}
},
fadeMessage: function()
{
Effect.Fade(this.messages[this.previous_message]);
},
hideMessages: function()
{
this.messages.each(function(message)
{
Element.hide(message);
})
},
toggle: function()
{
Effect.BlindUp(this.container, 1000);
},
showError: function()
{
if (this.container.getElementsByTagName("ul").length == 0)
{
this.list = document.createElement("ul");
this.container.appendChild(this.list);
} else {
this.list = this.container.getElementsByTagName("ul")[0];
}
this.errorMessage = document.createElement("li");
this.errorMessage.className = "error";
this.errorMessage.innerHTML = "Could not retrieve data";
this.list.appendChild(this.errorMessage);
}
}
Event.observe(window, "load", function(){new at.bartelme.newsticker()}, false);
due to the version of dreamweaver i have (MX-2004) i have had to hand code a drop down menu myself however i have come across a problem. i'm not sure if the problem is in the Javascript, HTML, or CSS however here go when ever i hover over the menus dont drop down they cascade up and the other problem is that when ever i hover over one of the buttons a menu from another pops up and not the one that should. here is the codes so you can have a look javascript: Code: <script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function mopen(id)
{
mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
document.onclick = mclose;
</script>
HTML code Code: <table align="center" width="950px" border="0" cellpadding="0">
<tr>
<td height="50">
<div align="center">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="100%" height="48" align="center" bgcolor="#CF8D72">
<ul id="sddm"><li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<!-- travel guides drop menu -->
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Guides</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Africa</a>
<a href="#">Asia</a>
<a href="#">Australia</a>
<a href="#">Europe</a>
<a href="#">North America</a>
<a href="#">South America</a>
<a href="#">Vesas</a>
<a href="#">Carnas</a>
<a href="#">Driving Over Sea</a>
</div>
</li>
<!-- adventures drop menu -->
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Adventures</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">up & coming Adventures</a>
<a href="#">The Team</a>
<a href="#">the Journey</a>
<a href="#">pod casts</a>
<a href="#">Photo Gallery</a>
</div>
</li>
<!-- travel news drop menu -->
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Travel News</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Advice</a>
<a href="#">Destinations</a>
<a href="#">Holidays</a>
<a href="#">Cities</a>
<a href="#">Cruses</a>
<a href="#">Hotels</a>
<a href="#">Snow & skis</a>
<a href="#">Expats</a>
<a href="#">Watch Dog</a>
</div>
</li>
<li><a href="#">Forum</a></li>
<li><a href="#">Chatroom</a></li>
<li><a href="#">Travel Shop</a></li>
</ul>
<div style="clear:both"></div>
</td>
</tr>
</table>
</div></td>
and the CSS Code: #sddm
{
width: 99%;
margin:'margin-top' 'margin-right' 'margin-bottom' 'margin-left' 0px
font-weight: bold;
z-index: 30
}
#sddm li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: "Baskerville Old Face", Baskerville, "Times New Roman" bold 11px;
}
#sddm li a
{
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 90px;
background: url(/images/navigation/chromebg4.gif) center center repeat-x;
color: #000000;
text-align: center;
text-decoration: none;
}
#sddm li a:hover
{
background: url(image/navigation/chromebg4-over.gif) center center repeat-x;
}
#sddm div
{
position:absolute;
top: 0;
border: 1px solid #E8BEBE;
border-bottom-width: 0;
font: "Baskerville Old Face", Baskerville, "Times New Roman" 13px;
line-height:18px;
z-index:100;
background-color: white;
width: 140px;
visibility: hidden;
height: 296px;
}
#sddm div a
{
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: "Baskerville Old Face", Baskerville, "Times New Roman" 13px bold;
}
#sddm div a:hover
{ background-color: #FFECEC;
color: #000000;}
I am working on a new site wherein i have list of links in colomn. what i want is when i click on a link. that color of the text should change to indicate that the link is selected. I am not talking about roll over effect. even after the mouse is rolls out the color should still remain as it is to show that the link is still selected. how can i do this. How can javascript detect which link is selected. and save it may be in a variable. which changes each time i select a link. what script or logic should i use for this? I have two select menus, the second menu items should be determined based on the selected item of the first menu, and the problem I face is about using document.write() in adding the select menu items, when I write the items like this it work: Code: <select name="cities" >
<script type="text/javascript">
document.write("<option value=''>city1</option>");
document.write("<option value=''>city2</option>");
document.write("<option value=''>city3</option>");
</script>
</select>
but when I put them in a function they wrote as a text not a menu item, and I must use a function and use if or switch in it, so what's the solution? i m very new to this thread so i will try to be as clear as possible i m try to create a website where i n have inserted a menu (this menu template i found online which is free.) Code: <div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
<li><a href="#"><span>Cities</span></a>
<div><ul>
<li><a href="#"><span>Pune</span></a></li>
<li><a href="#"><span>Mumbai</span></a></li>
<li><a href="#"><span>Delhi</span></a></li>
<li><a href="#"><span>Madras</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Login</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li class="last"><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>
what i am trying to do here is when i click on city (one of the menu) it should read the values from database table (the table name is cityCode. this table contains two rows first cityName and second cityCode) n depending on which city is selected it should retrieve the code of that city. also where to save that retried value because i want to use that retried code to extract value from another table. Hello, I am working on my site http://www.alvadesign.com and trying to incorporate an image menu like the one at http://www.phatfusion.net/imagemenu/index.htm. I am new to javascripting and just begining to learn. I have the menu showing up now but not functioning upon rollover. This is all being done in a wordpress theme. This uses mootools.js and truthfully anything I did could be wrong at this point. Im not sure what im doing wrong and any help is greatly appreciated. Thank you, Alva www.alvadesign.com I am having two problems with the script. 1. Sometimes when the page opens the slideout submenu shows on the left side of page, this always happens when my browser is full screen. 2. After clicking on 2 or more submenu links the submenu then overlaps the verticle black bar. http://villagehomegoods.com Appreciate any help. |
|||||||