JavaScript - Dynamic Drive > Switch Menu Issue
Hello all! I hope everyone had a great Holiday
I'm hoping someone can help me with a Switch Menu code. I borrowed and modded the code offered he http://www.dynamicdrive.com/dynamici...switchmenu.htm The site I'm trying to implement this menu on is: http://hardlyrhetoric.com/ste/projects.html Additional required files for this page a http://hardlyrhetoric.com/ste/tabcontent.js http://hardlyrhetoric.com/ste/tabcontent.css As you can see, the menu on the left will expand and collapse, revealing the sub-links perfectly fine. It will even display the content for each link in the first set of "Datacenters and Emergency Power" links, as it should. The problem is with each section after "Datacenters and Emergency Power" None of the links will display content in the right column the way the first set of links does. I've looked over the code for several hours... am I missing something basic??? Similar TutorialsHello, I have been noticing a really cool trend on the web and it is called the javascript carousel. Not the one from dynamic Drive. Here is an example of what I am talking about; carousel http://food.yahoo.com/;_ylt=AtuShzEA...hz75HDg9VIY.Y5 check on the bottom of the page where it says "try these recipes" I just love the circle indicating how many "pages there are. Do you know where I can find the tutorial or script for this effect? Thanks, Creations_Kash Hi all, I'm using the scripts from Dynamic Drive http://www.dynamicdrive.com/dynamici...edcollapse.htm to create a sliding collapsing/expanding div. I need to modify it slightly so instead of an image for the toggle, it has text hyperlink - changing from "Show More" to "Show Fewer". Can anyone help? Thanks Hello I have issue and question. My software is taking value "inputVal" and assign it to the variable inputValue for example: assdsf than value "inputTyp" and assign it to the variable inputType for example: string so I want now to switch betwean "inputType" using "switch case" Every case has some "code" inside. So if my software choosed for example: inputType which is for example STRING value I want to RUN case 'string': But it doesn;t works ;/ It doesn't goes to any case;/ what is wrong with the code ;/ every case should test according regular expressions is string a string or email is email or number is number etc... and result: "false or true" should be assign to new variables for example "inpNUMBER" "inpEMAIL" etc. please help here is a code Code: inputValue = scriptletContext.getLocal("inputVal"); inputType = scriptletContext.getLocal("inputTyp"); //scriptletResult = inputType; switch (inputType) { case 'number': scriptletResult=("inpNUMBER",/^[-+]?\d+(\.\d+)?$/.test(inputValue)); //scriptletContext.put("inpNUMBER",/^[-+]?\d+(\.\d+)?$/.test(inputValue)); case 'email': scriptletResult=("inpEMAIL",/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[(2([0-4]\d|5[0-5])|1?\d{1,2})(\.(2([0-4]\d|5[0-5])|1?\d{1,2})){3} \])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(inputValue)); //criptletContext.put("inpEMAIL",/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[(2([0-4]\d|5[0-5])|1?\d{1,2})(\.(2([0-4]\d|5[0-5])|1?\d{1,2})){3} \])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(inputValue)); case 'string': scriptletResult=("inpALPHA",/^[a-z0-9]+$/.test(inputValue)); //scriptletContext.put("inpALPHA",/^[a-z0-9]+$/.test(inputValue)); case 'ip': scriptletResult=("inpIP",/^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)+$/.test(inputValue)); //scriptletContext.put("inpIP",/^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)+$/.test(inputValue)); default: scriptletContext.put("errors",inputType) }; Hi, i am trying to add <tr> dynamically to <table><tbody>. I have tried someways nothing seems to be working.. i have an ajax service which returns the result string as <tr id='some'><td></td><td></td><td></td></tr>. 1) var tableBody =Tbl.getElementsByTagName("tbody")[0]; var tempDiv = document.createElement("div"); tempDiv.innerHTML = html; var children = tempDiv.childNodes; tableBody.appendChild(children[0]); Drawback : THis works only in chrome, other browsers split result string in to 3 div children, i tried var tempDiv = document.createElement("td"); does not work either 2) var newRow = document.createElement("tr"); newRow.setAttribute('id' , "SrchTr_"+data.rowNum); tableBody.appendChild(newRow); newRow.innerHTML = html; Drawback : this adds outside the table body as the reulst string has <tr> 3) i tried insertROW as well , nothing seems to be working I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code: var NoOffFirstLineMenus=7; // Number of first level items var LowBgColor='white'; // Background color when mouse is not over var LowSubBgColor='white'; // Background color when mouse is not over on subs var HighBgColor='black'; // Background color when mouse is over var HighSubBgColor='black'; // Background color when mouse is over on subs var FontLowColor='black'; // Font color when mouse is not over var FontSubLowColor='black'; // Font color subs when mouse is not over var FontHighColor='white'; // Font color when mouse is over var FontSubHighColor='white'; // Font color subs when mouse is over var BorderColor='black'; // Border color var BorderSubColor='black'; // Border color for subs var BorderWidth=1; // Border width var BorderBtwnElmnts=1; // Border between elements 1 or 0 var FontFamily="arial,comic sans ms,technical" // Font family menu items var FontSize=9; // Font size menu items var FontBold=1; // Bold menu items 1 or 0 var FontItalic=0; // Italic menu items 1 or 0 var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right' var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right' var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static var ChildOverlap=.2; // horizontal overlap child/ parent var ChildVerticalOverlap=.2; // vertical overlap child/ parent var StartTop=05; // Menu offset x coordinate var StartLeft=05; // Menu offset y coordinate var VerCorrect=0; // Multiple frames y correction var HorCorrect=0; // Multiple frames x correction var LeftPaddng=3; // Left padding var TopPaddng=2; // Top padding var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL var MenuFramesVertical=1; // Frames in cols or rows 1 or 0 var DissapearDelay=1000; // delay before menu folds in var TakeOverBgColor=1; // Menu frame takes over background color subitem frame var FirstLineFrame='navig'; // Frame where first level appears var SecLineFrame='space'; // Frame where sub levels appear var DocTargetFrame='space'; // Frame where target documents appear var TargetLoc=''; // span id for relative positioning var HideTop=0; // Hide first level when loading new document 1 or 0 var MenuWrap=1; // enables/ disables menu wrap 1 or 0 var RightToLeft=0; // enables/ disables right to left unfold 1 or 0 var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover var WebMasterCheck=0; // menu tree checking on or off 1 or 0 var ShowArrow=1; // Uses arrow gifs when 1 var KeepHilite=1; // Keep selected path highligthed var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height function BeforeStart(){return} function AfterBuild(){return} function BeforeFirstOpen(){return} function AfterCloseAll(){return} // Menu tree // MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width); // For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg" Menu1=new Array("Home","","",3); Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150); Menu1_2=new Array("Acknow","Acknowledgement.htm","",0); Menu1_3=new Array("Prayer","Prayer.htm","",0); Menu2=new Array("About Us","","",4); Menu2_1=new Array("Debra","bio.htm","",0,20,150); Menu2_2=new Array("Seamus","Seamus.htm","",0); Menu2_3=new Array("Locations","location.htm","",0); Menu2_4=new Array("Contact Us","contact.htm","",0); Menu3=new Array("Services","","",7); Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150); Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0); Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0); Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0); Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0); Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0); Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0); Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0); Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0); Menu6=new Array("Articles","","",3); Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150); Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0); Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0); Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0); Hi I have two drop down menus I want the first one has name of the folders and when change the other dropdown has names of the sub-folders of this folder i have the top folders at the first dropdown how can i have the subfolders at the second when change first? the problem is how to open folder if i have folders aaaaa has subfolders(1111,2222,2233) bbbbb has subfolders(3333,4422,2433) ccccc has subfolders(1131,2232,2532) and each folder has subfolders how can i have name of these subfolders when change the topfolders(aaaaa, bbbbb, ccccc) I have more than 1000 top folders and eachone have 10 subfolders already i have all topfolders at first dropdown ,i want to have subfolders at second automatic , any help?? I have been searching everywhere and have found a few of articles available regarding dropdown menu.. couldnt get exactly what i wanted.. i am not really good at javascript, or even programing..am trying my best. anyway~ Here is what i want. something simple if there is more than 1 data entity (count>1) (Case 1), then execute 'select(drop down)' else (count <=1)(Case 2), then just show the data entity itself. (i dun even want the dropdown box to appear) as below screenshot or the attachment I have a script getting me the dropdown menu as below, i wanna modify this but not sure where to start... -------------------------------- <div id="abcdefg"> <form id="setLanguage" action="{$request_uri}" method="post"> <select name="selectlanguage" id="selectlanguage" onchange="setLanguage(this.value)"> {foreach from=$languages key=k item=language name="languages"} <option value="{$language.id_lang}" {if $language.iso_code == $lang_iso} selected {/if} >{$language.name} </option> {/foreach} </select> <input type="hidden" name="id_lang" id="id_lang" value=""/> </form> </div> -------------------------------- Really appreciate your help with modifying this. Please try not to give me a totally new script (i bet it will/may work better but i wouldnt be able to understand..:-( so no point...) Hi, I have 3 selects in a form for day, month and year for the user to enter his/her birthday. What I'm looking for is a piece of code / script which will dynamically change the day dropdown menu dependent on the month which is selected to display the correct number of days, and also according to if it is a leap year. Ive tried looking on google but I'm not sure what the correct term is to look for? Could anyone please help? Thanks Hi Guys, I have a multi language cms site and need to be able to resize font to fit the div its contained in so eg if I have a 300px wide navbar with 13px text: home | about | contact | services | products and in Russian its: fgfgdg |gghgfdhggghgfhgfh | gfg |gfdgfgdfgfdgffd dgfdgdg | gdfgfgdfgfgdfg I would like the font size to reduce down to fit the 300px fixed width div from say 13px to 10px or whatever fits. so it would be like: fgfgdg |gghgfdhggghgfhgfh | gfg |gfdgfgdfgfdgffd dgfdgdg | gdfgfgdfgfgdfg I was looking at http://jsfiddle.net/e8B9j/2/show/ and was hoping someone could get it to work to suit the above. So as above u'd have say 5 menu item divs nested in a navbar div Code: <div id="navbar"> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> </div> ...or using ul and li's Any help greatly appreciated. Perhaps a jquery solution out there? Thanks Anyone have any issues with Safari in relation to javascript compatibility? I have a page that loads dynamically through user selections as follows: There is a set of three radio buttons. The user selects one and a div opens revealing a select box populated with entries related to the radio button selection. When the user makes a selection from the select box, one of two things happen. 1) If there are child records relating to their selection, a second div opens revealing another select box containing the child entries relating to the first select box choice. Or 2) if there are no child entries relating to the selection in the first select box, a div opens displaying a description relating to the selection they made in the first select box. The data is all coming from prepopulated javascript arrays. This works like a dream in IE and Chrome. Unfortunately, when we were in the final stages of testing before release to a live environment, we discovered it works in Safari only as far as the user makes a selection from the three radio buttons driving the opening of the first div layer containing the first select. At this point it stops working completely. On top of that, I can not find where in the latest release of Safari, that I can see any javascript errors (or if I even can). I am REALLY in need of help. Anything you can offer? Thanks!! Dmxsmith Ok, I seem to be stuck on one part of my code. A quick background, this is a website to showcase various photography services. First, I will lay out what I have: The Javascript for my menu (in the head section): Code: <script type="text/javascript"> <!-- var timeout = 200; var closetimer = 1; var items = 0; function dropit(id) { canclcls(); if(items) items.style.visibility = 'hidden'; items = document.getElementById(id); items.style.visibility = 'visible'; } function mclose() { if(items) items.style.visibility = 'hidden'; } function mcls() { closetimer = window.setTimeout(mclose, timeout); } function canclcls() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } document.onclick = mclose; // --> </script> Now, here is what I have in the body section Code: <div id="menu"> <ul id="control"> <li><a href="#" onmouseover="dropit('dropone')" onmouseout="mcls()">Wedding Portfolio</a> <div id="dropone" onmouseover="canclcls()" onmouseout="mcls()"> <a href="jamaicawed.html">Wedding in Jamaica</a> <a href="indianwed.html">Indian Wedding</a> </div> </li> <li><a href="#" onmouseover="dropit('m2')" onmouseout="mcls()">Model Portfolio</a> <div id="m2" onmouseover="canclcls()" onmouseout="mcls()"> <a href="emilymodel.html">Emily</a> <a href="nicolemodel.html">Nicole</a> </div> </li> <li><a href="#" onmouseover="dropit('m3')" onmouseout="mcls()">Other Works</a> <div id="m3" onmouseover="canclcls()" onmouseout="mcls()"> <a href="catalog.html">Catalog</a> <a href="#" onclick "alert">Boudoir</a> <a href="product.html">Product</a> </div> </li> <li><a href="#" onmouseover="dropit('m4')" onmouseout="mcls()">More</a> <div id="m4" onmouseover="canclcls()" onmouseout="mcls()"> <a href="aboutus.html">About Us</a> <a href="contact.html">Contact Us</a> </div> </li> </ul> </div> Ok, so the only thing I can't figure out how to do is create an onclick event for one of the menu items (boudoir) that confirms that the user is comfortable being exposed to a specific (topless) type of image. Would someone be kind enough to help? Well i want to implement something very similar to this (youtube). My javascript knowledges are low. I think it has something to be with onload and onclick events with links. Do i have to write a function and include it on the html page? Where do i have to put the diferent contents? I would prefer to separate html content and javascript since i have some variable to display from my template engine like {$name}, {$uploaded_date}, etc. Thanks in advance Hi Chaps, I have a dynamic list menu: PHP Code: <?php $currentCat = ''; $first = true ;?> <ul> <?php do { if ($currentCat != $row_rsCategory['catname']) { if (!$first) { echo "\n</ul>\n</li>\n"; } $currentCat = $row_rsCategory['catname']; ?> <li><?php echo $row_rsCategory['catname']; ?> <ul> <?php }?> <li><?php echo $row_rsCategory['galleryname']; ?></li> <?php $first = false; } while ($row_rsCategory = mysql_fetch_assoc($rsCategory)); ?> </ul> </li> </ul> I've tried looking for a show/hide script, to toggle category names/gallery names, but could only find ones that have static menu options, and have failed to edit existing code to fit....any help or guidence would be appreciated! I have an html file I've built with embedded Javascript (using ActiveX) that successfully reads a file on my local hard drive when I run the html file through my web browser (IE) locally. However, when I copy the html page up to a webserver and access it through the internet, it doesn't appear to be reading the local file. I'm assuming this can't be done because of security reasons? Am I correct in that? Is there any way using Javascript/ActiveX that you can get a webpage on the internet to access a file on the visitor's local drive? (other than cookies)
Can someone explain to me why my dropdown menu works on all my subpages but not on my home page? Just about done with this site to present to my client and need to get this working asap. PM me and I'll give you the URL. Thanks in advance! Respectfully, Len New to Javascript and been reading a lot of tutorials on the various things im trying to do with my website. One thing i cant figure out is my my menu doesnt dropdown as I want to have sublinks. I know this all has to do with my style.css. Here is the code I have, cant figure out where I got this wrong. [CODE] .menu {width:100%; height:67px; background:url(images/tail-menu.gif) 0 0 repeat-x #f00;} .menu li {float:left; font-size:1.333em; line-height:1.5em; text-transform:uppercase;} .menu li a {display:block; padding:21px 27px 22px 27px; color:#818080;} .menu li .active, .menu li a:hover {color:#fffefe; background:#f31301;} .menu .last-item a {padding:21px 32px 22px 27px; } .menu li span {width:100%; height:67px; background:url(images/tail-menu.gif); no-repeat center top;float: left} .menu li span.subhover {background-position: center bottom; cursor: pointer;} .menu li ul.subnav {list-style: none; position: absolute; left:0; top:35px; background:#f31301; margin:0; padding:0; width:170px;float:left; display:none; border: 1px solid #111} .menu li ul.subnav li{margin:0; padding:0; border-top: 1px solid #252525; border-bottom: 1px solid #444; clear: both; width: 100%;} [CODE] Any help is greatly appreciated. Hi there, My last 2 little annoyances are related to my Cufon main menu. I could use some assistance. http://www.lyricoperala.org/index3.html Sub-menu items are spaced too far apart. I've tried to set the top padding to 0px, but that doesn't seem to have made a difference. Finally, the last item is a CSS issue, but I'll mention it here just in case you, my code savior, happen to know the answer. I guess it's a z-index thing, but I haven't mastered this yet. My sub-sub-menu items are appearing UNDER the ticket image. I'd prefer that they show up above it, obviously. Thanks so much in advance! Best forum helpers EVER here! ~Laura Hi guys Im try to create a menu (http://valkesh.000space.com/) that will have 2 or 3 images loaded when hovering the item. As it currently is, I would like the first 20px to show green, and the rest to show Red. For now I am only using colors because eventually I would like to use images and have the Left and Right pics set at a fixed width and the center image growing appropriately. Below is the script I am using for the entire menu. Code: <html> <head> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { //Append a div with hover class to all the LI $('#navMenu li').append('<div class="left"><div class="right"></div></div>'); $('#navMenu li').hover( //Mouseover, fadeIn the hidden hover class function() { $(this).children('div').fadeIn('1000'); }, //Mouseout, fadeOut the hover class function() { $(this).children('div').fadeOut('1000'); }).click (function () { //Add selected class if user clicked on it $(this).addClass('selected'); }); }); //]]> </script> <style type="text/css"> #navMenu { margin:0; padding:0; list-style:none; font-family:arial; text-align:center; line-height:60px; } #navMenu li { background-color:Gray; float:left; width:120px; height:40px; line-height:40px; border:solid 1px black; position:relative; } #navMenu li a { z-index:20; display:block; height:40px; position:relative; color:Black; } #navMenu li .left { background-color:Green; position:absolute; width:20px; height:40px; top:0px; z-index:0; display:none; } #navMenu li .right { background-color:Red; position:absolute; width:100px; height:70px; top:0px; z-index:0; display:none; } #navMenu li.selected { background-color:Blue; } </style> </head> <body> <ul id="navMenu"> <li><a href="#">Test 1</a></li> <li><a href="#">Test 2</a></li> <li><a href="#">Test 3</a></li> </ul> </body> </html> I would appreciate any help given! Thanks Hi all, I'm having an issue with a slide out menu and would appreciate some assistance. I feel like its most likely an easy fix which has escaped me over the last couple of days. Basically, I'm using tabbed navigation panes in the center column of a 3-column CSS layout. I'm wanting to place a functional slide out menu in EACH tab. As of now, I have one working perfectly in the intial tab, but I'm unable to achieve the same functionality in the remaining tabs. I can get the content loaded, but it is completely expanded...losing the collapsing/slide out action(s). I have added code for the content to be loaded into the 2nd tab, but have left the rest blank. I figure if the issue for tab 2 is resolved, I can apply it to the rest of the tabs. I am 99% sure the issue resides in the slide-out-menu-new.js file, but I can't seem to figure out where the functionality is being lost. Please assist if you would like. It would be GREATLY appreciated...this is the last hurdle I have before adding real content to the site. Please find the zip file containing all associated code/files by visiting the link below (a quick page posted for storage purposes only). http://www.truckerslifeline.com/siteHelp Thanks! |