|
JavaScript - Menu Script Problem?
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? Similar TutorialsI am redoing a web site. We added some pop up menus to consolidate the navigation. I created the template in fireworks MX 2004. The pop up menu has no errors in Firefox. I have some problems in IE. When I first uploaded the page it wanted to know I should load blocked content. Keep in mind my IE 8 setting were set on default. Now without me changing IE settings it just does not load the pop up menus. Can anyone help me with making the code more compatible with IE. I would rather not have it ask me if I want to load blocked content. I also want the menus to pop up when visitors wave over them with the mouse. Here is the domain for the site. Kitchen Remodels Chino Kitchen & Bathroom Remodeling Senior Baths Wave your mouse over some of the blue buttons. The kitchens, cabinets, bathrooms and home improvement buttons should have a pop up when waving the mouse over them. Here is the code in the page. Code: <script language="JavaScript1.2" src="jss/menu.js"></script> <script language="JavaScript1.2" src="jss/mm_menu.js"></script> </head> <body> <script language="JavaScript1.2">mmLoadMenus();</script> Here is the java script code. Code: // JavaScript Document
<!--
function mmLoadMenus() {
if (window.mm_menu_0725085737_0) return;
window.mm_menu_0725085737_0 = new Menu("root",205,20,"Verdana, Arial, Helvetica, sans-serif",14,"#000000","#ffffff","#cccccc","#0099cc","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_0725085737_0.addMenuItem("Kitchen Remodeling","location='kitchen-remodeling.php'");
mm_menu_0725085737_0.addMenuItem("Budget Kitchen Remodeling","location='budget-kitchen-remodeling.php'");
mm_menu_0725085737_0.hideOnMouseOut=true;
mm_menu_0725085737_0.menuBorder=1;
mm_menu_0725085737_0.menuLiteBgColor='#ffffff';
mm_menu_0725085737_0.menuBorderBgColor='#0098a3';
mm_menu_0725085737_0.bgColor='#ffffff';
window.mm_menu_0725090038_1 = new Menu("root",145,20,"Verdana, Arial, Helvetica, sans-serif",14,"#000000","#ffffff","#cccccc","#0099cc","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_0725090038_1.addMenuItem("Kitchen Cabinets","location='kitchen-cabinets.php'");
mm_menu_0725090038_1.addMenuItem("Cabinet Refinishing","location='cabinet-refinishing.php'");
mm_menu_0725090038_1.addMenuItem("Cabinet Refacing","location='cabinet-refacing.php'");
mm_menu_0725090038_1.hideOnMouseOut=true;
mm_menu_0725090038_1.menuBorder=1;
mm_menu_0725090038_1.menuLiteBgColor='#ffffff';
mm_menu_0725090038_1.menuBorderBgColor='#0098a3';
mm_menu_0725090038_1.bgColor='#ffffff';
window.mm_menu_0725090215_2 = new Menu("root",167,20,"Verdana, Arial, Helvetica, sans-serif",14,"#000000","#ffffff","#cccccc","#0099cc","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_0725090215_2.addMenuItem("Bathroom Remodeling","location='bath-remodeling.php'");
mm_menu_0725090215_2.addMenuItem("Walk in Tubs","location='walk-in-tubs.php'");
mm_menu_0725090215_2.hideOnMouseOut=true;
mm_menu_0725090215_2.menuBorder=1;
mm_menu_0725090215_2.menuLiteBgColor='#ffffff';
mm_menu_0725090215_2.menuBorderBgColor='#0098a3';
mm_menu_0725090215_2.bgColor='#ffffff';
window.mm_menu_0725090242_3 = new Menu("root",161,20,"Verdana, Arial, Helvetica, sans-serif",14,"#000000","#ffffff","#cccccc","#0099cc","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_0725090242_3.addMenuItem("Home Improvement","location='home-improvement.php'");
mm_menu_0725090242_3.addMenuItem("Window Replacement","location='window-replacement.php'");
mm_menu_0725090242_3.addMenuItem("Furniture Refinishing","location='furniture-refinishing.php'");
mm_menu_0725090242_3.addMenuItem("General Contractor","location='about.php'");
mm_menu_0725090242_3.hideOnMouseOut=true;
mm_menu_0725090242_3.menuBorder=1;
mm_menu_0725090242_3.menuLiteBgColor='#ffffff';
mm_menu_0725090242_3.menuBorderBgColor='#0098a3';
mm_menu_0725090242_3.bgColor='#ffffff';
mm_menu_0725090242_3.writeMenus();
} // mmLoadMenus()
//-->
Hello, I have two simle part of code : 1. Create menu with 5 buttons - when I move mouse to button script will switch the button - this is from Dreamweaver standard code. Head part: <script type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_nbGroup(event, grpName) { //v6.0 var i,img,nbArr,args=MM_nbGroup.arguments; if (event == "init" && args.length > 2) { if ((img = MM_findObj(args[2])) != null && !img.MM_init) { img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src; if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array(); nbArr[nbArr.length] = img; for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = img.MM_dn = args[i+1]; nbArr[nbArr.length] = img; } } } else if (event == "over") { document.MM_nbOver = nbArr = new Array(); for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up); nbArr[nbArr.length] = img; } } else if (event == "out" ) { for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; } } else if (event == "down") { nbArr = document[grpName]; if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; } document[grpName] = nbArr = new Array(); for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up; nbArr[nbArr.length] = img; } } } //--> </script> and body part (my menu) <table border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="javascript:;" rel="nofollow" target="_top" onclick="MM_nbGroup('down','group1','Strona_glowna','images/strona_glowna_off.png',1)" onmouseover="MM_nbGroup('over','Strona_glowna','images/strona_glowna_on.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/strona_glowna_off.png" alt="" name="Strona_glowna" width="160" height="105" border="0" id="Strona_glowna" onload=""/></a> </td> <td><a href="javascript:;" rel="nofollow" target="_top" onclick="MM_nbGroup('down','group1','Onas','images/onas_off.png',1)" onmouseover="MM_nbGroup('over','Onas','images/onas_on.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/onas_off.png" alt="" name="Onas" width="114" height="105" border="0" id="Onas" onload="" /></a></td> <td><a href="javascript:;" rel="nofollow" target="_top" onclick="MM_nbGroup('down','group1','Menu','images/menu_off.png',1)" onmouseover="MM_nbGroup('over','Menu','images/menu_on.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/menu_off.png" alt="" name="Menu" width="112" height="105" border="0" id="Menu" onload="" /></a></td> <td><a href="javascript:;" rel="nofollow" target="_top" onclick="MM_nbGroup('down','group1','Galeria','images/galeria_off.png',1)" onmouseover="MM_nbGroup('over','Galeria','images/galeria_on.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/galeria_off.png" alt="" name="Galeria" width="119" height="105" border="0" id="Galeria" onload="" /></a></td> <td><a href="javascript:;" rel="nofollow" target="_top" onclick="MM_nbGroup('down','group1','Kontakt','images/kontakt_off.png',1)" onmouseover="MM_nbGroup('over','Kontakt','images/kontakt_on.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/kontakt_off.png" alt="" name="Kontakt" width="119" height="105" border="0" id="Kontakt" onload="" /></a></td> </tr> </table> I need to use area map on buttons: for example : <map name="map"> <area shape="poly" coords="19,99,140,48,114,27,17,68" href="/kursy2/html/" alt="Test" title="Test"> </map> I know that I need to add "usemap" part to img... like : <img src="images/kontakt_off.png" alt="" name="Kontakt" width="119" height="105" border="0" id="Kontakt" onload="" usemap="#map"/> And here is my problem. I need to modify javascript that everytime when i move my mouse pointer to my map area the button will be change....because now button is switch eveytime when I move mouse to every point on button ... Could you help me ??? Thank you a lot... This is my test page: http://www.thesacstudio.com/ccid_web...ndex_copy.html Am using Dynamic Drive's smooth menu javascript When viewed on a PC using IR the menu makes the page "jump" i am a Mac guy and at my limit of what to do. thanks for any assistance Hi, I have a .js file for creating a menus..in that i have a menu called 'reserved', i just want to remove the name from the menu i want the menu size should be the same as earlier.. what i need to do? Hello, I'm attempting to use the sfhover script to make my multilevel menu work in Internet Explorer 6. It does not seem to be having any effect. Sorry, I do not have experience with Javascript...I just found this solution online. Here's the code I'm using: Code: // JavaScript Document
//sfHover couresty of http://www.htmldog.com (http://www.htmldog.com/articles/suckerfish/dropdowns/)
sfHover = function() {
if(document.getElementById("nav")){
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhoverb"), "");
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
And the CSS for my menu is: Code: .button {
background:url(http://www.wdi-whq.com/images/page-elements/btn.gif) no-repeat;
border:none;
color:#CFF;
display:block;
font:13pt Verdana, Arial, sans-serif;
padding:11px 0;
text-align:center;
text-decoration:none;
height:48px;
width:176px;
}
.button:hover {
background:url(http://www.wdi-whq.com/images/page-elements/btn-over.gif) no-repeat;
color:#FFF;
display:block;
}
.button:active {
background:url(http://www.wdi-whq.com/images/page-elements/btn-click.gif) no-repeat;
color:#069;
display:block;
}
#sidebar1 {
float:left;
width:250px;
padding:10px 25px 0 25px;
position:relative;
z-index:2;
}
div#nav {
height:28px;
width:250px;
background:url(http://www.wdi-whq.com/images/page-elements/menu/menu-top.gif) top no-repeat;
margin:0;
padding-top:28px;
}
div#navbody {
background:url(http://www.wdi-whq.com/images/page-elements/menu/menu-bg.gif) repeat-y;
}
div#navbottom {
height:28px;
background:url(http://www.wdi-whq.com/images/page-elements/menu/menu-btm.gif) bottom no-repeat;
}
ul#navlist {
width:250px;
list-style-type:none;
padding:0;
margin:0;
}
ul#navlist a {
width:200px;
font:bold 11pt Verdana, Arial, sans-serif;
color:#FFF;
height:35px;
text-decoration:none;
padding:6px 0 0 50px;
display:block !important;
}
ul#navlist a:hover {
background:url(http://www.wdi-whq.com/images/page-elements/menu/btn-hilight.gif) left;
}
ul#navlist li {
height:35px;
background:url(http://www.wdi-whq.com/images/page-elements/menu/btn-normal.gif) bottom repeat-x;
position:relative;
}
ul#navlist ul {
list-style-type:none;
margin-left:250px;
padding:0px;
position:absolute;
top:0px;
visibility:hidden;
width:250px;
}
ul#navlist ul > li {
background:url(http://www.wdi-whq.com/images/page-elements/menu/btn-submenu.gif) bottom no-repeat;
}
ul#navlist li ul li a:hover {
background:url(http://www.wdi-whq.com/images/page-elements/menu/btn-submenu-hilight.gif) bottom no-repeat;
height:28px;
}
ul#navlist li:hover > ul {
visibility:visible;
}
Friends, i have a problem... I hope all pf you can solve my problem... It's all about Mega Menu JQuery. I already download the script in this javascriptkit.com And the problem is... I can't set the alignment of mega menu drop down because in this script to set the left alignment is using var menu left where this script is using calculation of windows width and mega menu size. in the example on javacriptkit.com using only one menu, how if in this case there is more than one menu? for example i already upload the picture to describe the problem. Picture 1 is i have put mega menu script and it's look good and fine. And then in the second menu where is the porblem begin. Picture 2 mega menu sliding on the left If i put the script in the third and more menu, the mega menu drop down sliding more left. It should be center. I' already found the problem script in .js but i'm still find the solutions... Pleas help me... my project is www.restomart.com ( already online ) and i want make a mega menu like www.surlatable.com ( online ) Pleas once again.HELP me .... Thanks so much... the script below should open a new window with a url specified in the select area. However, my script ignores the changes in the select area. it keeps opening the same page. I was wondering could someone take a look and tell me why? Thank you very much. <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Jump Menu</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript"> function jump_menu() { var i=document.getElementById("page_select").selectedIndex; document.getElementById("jump_to_page").onclick=function() { (i==0) ? alert("Please select a page to go"):window.open("http://www."+document.getElementById("page_select").options[i].value); } } window.onload=jump_menu; </script> </head> <body> <select id="page_select"> <option>Select a Page</option> <option value="yahoo.ca">Yahoo</option> <option value="topnews.ru">Top News</option> <option value="google.com">Google</option> <option value="amazon.com">Amazon</option> </select> <button type="button" id="jump_to_page">Go</button> </body> </html> </code> I have a form that was created in Adobe Professional. I have hidden the toolbars on initial view of the form, however, the people using the form have discovered how to un-hide them. Is there any Java Script that I can add to the document that will disable certain menu commands (i.e. "Attach to E-mail")?
I have a slideshow of quotes based on the "Ultimate Fade-in slideshow (v2.1)" at Dynamic Drive: http://www.dynamicdrive.com/dynamici...nslideshow.htm This is right under my navigation bar, and the drop-down menu items are hidden behind the javascript slideshow. You can see it he http://brookenelson.com/upticon/draft3/index.html Some background: The reason I did it this way because I first started out with a Flash banner with quotes fading in and out, and I ran into the problem with the drop-down menu items hiding behind the Flash... of course I Googled that and found the solution ( see he http://brookenelson.com/upticon/draft3/index2.html ) But in the meantime I played with the javascript slideshow and it worked better for me because it was easier to add new quotes just within the html, without having to go back and edit the Flash item. Anyway, so is there a solution to the drop-downs being hidden behind the .js slideshow? Or should I go back to the Flash? Or is there some other sort of solution or script that would fit my needs better? Many many many thanks in advance. p.s. I personally do not like the little quote slideshow I am using, in either form, but the client is insisting on it!! Hello, I'm building a simple custom dropdown menu for a web-site so that I can control look and feel as well as the behavior of an iframe. I've set it up so that when the user clicks on any of the menu's active components, an "if" sequence in the clickHandler() function is activated that gets the element's class. If the event occurred on a dropdown option, the event-target id is checked, and the appropriate function is called. At least this is how it's supposed to work. All of the drop-down options have been assigned the "dmo" class. When I test the menu and click on other elements, it works fine. But when I click the "dmo" drop-down options, nothing happens. Firebug and IE Explorer Developer Tools both show no errors, but on clicking a dropdown option, the correlate code doesn't run at all, and after hours of head-banging, I have no idea why. I need help on this one. Here's the code. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
BODY {
background:#000;
}
.DropMenu {
width:228px;
height:1.5em;
}
.DropMenu span {
color:#FFF;
font-size:0.875em;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
}
.DropMenuLabel {
float:left;
width:85px;
height:1.5em;
padding:0.2em 0 0 0;
text-indent:0.3em;
}
.DropMenuTopList {
width:130px;
float:left;
height:1.5em;
padding:0 0 0 0;
cursor:pointer;
}
.DropMenuTopList img {
padding:0.4em 0 0 0.3em;
cursor:pointer;
}
.DropMenu span {
color:#FFF;
font-size:.875em;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
vertical-align:center;
}
#dropMenuButton {
cursor:pointer;
}
#dropMenuOptions {
position:relative;
width:130px;
left:85px;
padding:0.2em 0 0 0;
visibility:hidden;
cursor:pointer;
}
.MenuList {
list-style-type:none;
top:0;
left:0;
width:100%;
margin:1.5em 0 0 0;
padding:0;
}
.MenuList li{
height:1.5em;
margin:0.2em 0 0 0;
padding:0;
width:100%;
background-color:#666;
border-color:#AAA;
border:0.5px solid;
text-indent:0.3em;
}
.dmo {
z-index:100;
}
</style>
<script type="text/javascript" language="javascript">
window.onload = function()
{
setBehavior();
}
function setBehavior()
{
/*
var downButton = document.getElementById('dropMenuButton')
downButton.onclick = new Function ( "showMenu()" );
*/
window.onclick = new Function ( "evt" , "clickHandler( evt )" );
}
function clickHandler( evt )
{
var dropMenu = document.getElementById('dropMenuOptions');
var e = evt;
var targ;
if (e.target) {targ = e.target}
else if (e.srcElement) {targ = e.srcElement}
var targClass = targ.getAttribute('class');
/* classnames
dmb - dropdown button - this should toggle the dropdown visibility on and off on click, and toggle visibility on over/out
dmo - option - once clicked, this should turn the dropdown visibility off
*/
var exclude = ("dmb" || "dmo")
if (targClass != exclude )
{
hideMenu()
}
else if (targClass == "dmb" )
{
if (dropMenu.style.visibility == "visible") { hideMenu() }
else showMenu();
}
else if (targClass == "dmo" )
{
if ( targ.id == "option1" ){ window.open(www.bing.com,"Bing") }
else if ( targ.id == "option2" ){ window.open(www.bing.com,"Bing") }
else if ( targ.id == "option3" ){ window.open(www.cuil.com,"Cuil") }
hideMenu();
}
}
function showMenu()
{
var dropMenu = document.getElementById('dropMenuOptions');
dropMenu.style.visibility= "visible";
}
function hideMenu()
{
var dropMenu = document.getElementById('dropMenuOptions');
dropMenu.style.visibility= "hidden";
}
</script>
</head>
<body>
<div id="customMenu" class="DropMenu">
<span>
<div class="DropMenuLabel">Options:</div>
<div class="DropMenuTopList dmb" id="dropMenuTopList">Temp Text
<img class="dmb" id="dropMenuButton" src="Assets/Buttons/DropMenuDownButton.png">
</img>
</div>
<div class="dmo DropMenuOptions" id="dropMenuOptions">
<ul id="menuList" class="dmo MenuList">
<li id="option1" class="dmo">Option1</li>
<li id="option2" class="dmo">Option2</li>
<li id="option3" class="dmo">Option3</li>
</ul>
</div>
</span>
</div>
</body>
</html>
Hello all, Firstly apologies for my javascript ignorance - I'm not a programmer, just someone thrust into programming since there's no-one else at my company who can do it. I found a nice js script online for a drop-down menu where the drop downs both expand to their full size and fade-in (very quickly) from transparent. The script in action can be seen on the script writer's site he http://sandbox.leigeber.com/dropdown-menu/index.html and the script is: Code: var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
with Code: var menu=new menu.dd("menu");
menu.init("menu","menuhover");
used on my html page to call the script. I'm using the script exactly as written and exactly as it is on the dude's demo page for it. However, some of my sub-menu items are wider than their parent items and in IE7 this means they are bound to the width of the parent until the animations have finished, and then pop-out to their full width (NB not an issue in FF3). I'm actually not too fussed about either the fade in or expand out effects (they'd be nice, but not at the expense of the IE7 bug) so I simply wanted to know what I should do to the script to turn off the effects, or make them instant - ie reduce the length of the effect to as short as possible. I understand I can get rid of the bug by specifying a width for the ul element in my css, but I'd rather not do that if I can help it. I'd appreciate anyone's insight on this. Thanks Tom 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 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 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 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 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? 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;}
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);
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 |
|||||||