JavaScript - How Do I Open Up Javascript Menu As It Was In Previous Page
I have a menu that lists all the categories and sub categories, when someone clicks a main category it opens up the sub cats for it. if someone clicks one of the sub cats the page open up to show all items in that category.
But what I would like to find out is how do I get the menu to open up as it was so it shows the category and sub category open? Code: <!-- start show cat list --> <br><div style="font-weight: bold; font-size: 0.825em; padding: 0em 0em 0.3125em;">Select items by category</div> <ul class="catMenuItem"> <li><a style="background-image: url("images/triangle_down.gif");" href="#" class="titleTriangle"><span>cat1</span></a></li> <li style="display: block;" class="catSubMenu"> <a href="?cat=2">sub 1-2</a> (0)<br> <a href="?cat=7">sub 1-3</a> (2)<br> <a href="?cat=8">sub 1-4</a> (0)<br> <a href="?cat=9">sub 1-5</a> (0)<br> <br> </li> </ul> <ul class="catMenuItem"> <li><a href="#" class="titleTriangle"><span>cat2</span></a></li> <li style="display: none;" class="catSubMenu"> <a href="?cat=3">sub 2-1</a> (0)<br> <a href="?cat=4">sub 2-2</a> (0)<br> <a href="?cat=5">sub 2-3</a> (0)<br> <a href="?cat=6">sub 2-4</a> (1)<br> <br> </li> </ul> <ul class="catMenuItem"> <li><a href="#" class="titleTriangle"><span>cat3</span></a></li> <li style="display: none;" class="catSubMenu"> <br> </li> </ul> <ul class="catMenuItem"> <li><a href="#" class="titleTriangle"><span>cat4</span></a></li> <li style="display: none;" class="catSubMenu"> <br> </li> </ul> <ul class="catMenuItem"> <li><a href="#" class="titleTriangle"><span>cat5</span></a></li> <li style="display: none;" class="catSubMenu"> <br> </li> </ul> <script type="text/javascript"><!-- /* Categories Menu START */ var prevCat; function menu(newCat) { var mens; var anchors; if (prevCat) { mens = prevCat.parentNode.getElementsByTagName('li')[0]; anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_right.gif)'; prevCat.style.display = 'none'; } if (newCat != prevCat) { mens = newCat.parentNode.getElementsByTagName('li')[0]; anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_down.gif)'; newCat.style.display = 'block'; prevCat = newCat; } else { prevCat = null; } } onload = function() { var menus = document.getElementsByTagName('ul'); for (var a=0,x=menus.length; a<x; a++) { if (menus[a].className === 'catMenuItem') { menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function() { menu(this.parentNode.parentNode.getElementsByTagName('li')[1]); } menus[a].getElementsByTagName('li')[1].style.display = 'none'; } } } /* Categories Menu END */ --></script> <!-- end show cat list --> Similar TutorialsI tried to use the script to return the user to the previous page by clicking the link, and it did work, however, it would return me to the previous website I visited and not just the previous page within my site. Is there a way to override it by changing the code or is the code definitive? This was the code I had tried to use: Code: <a href="javascript:history.go(-1)">Back</a> Using onclick=window.open function in js to open a pdf file link in a new popup window. Works fine to display the file onscreen, but not if the user wants to save the file client-side to their computer. The right-hand-button context menu for the mouse will allow the user to download, but the file saved will be a html dump file for the webpage and the name of the file will be that for the webpage. Of course I can use the easy <a href> method for download links and the mouse context menu options will be as expected, but I can only use target="-blank" or target="_self" . I need a popup window to open. Could use : oncontextmenu="alert('Left click the link to open, and then SAVE from with the pdf viewer') to advise users how to save the file, and could use "javascript: void(0)" to eliminate most mouse context menu options, so the user won't bother try. So how can I get a link to a file which can be viewed in a popup window and downloaded using mouse right-hand context menu? Any advice massively appreciated! I have a website that is using ajax to keep the page up to date with the database information. I call this page through a file called start.php. Once index.php is loaded it has a menu with selections. I then want it to call a page called query.php in an iframe to update the information, but not open a new window. In the iframe the query.php will run and then redirect itself to blank.php. The code is as follows and any help would be much appreciated. I have tried several methods of doing this and they have been commented out because they didn't work or didn't do what I wanted them to do. I do not want to use window.open since IE doesn't work well with it. window.open does work by pop up windows but I want to stay away from them. The main code I am looking to get help on is in red under start.php. In start.php I will include the entire file. In index.php I'm only going to include the main sections I use for this snippit. In query.php I'm not going to include query.php since I beleive this file isn't important for this snippit. start.php Code: <html> <head> <title>Countries At War!</title> <body style="background-color:#B0C4DE;"> <script language="JavaScript" type="text/javascript"> //Gets the browser specific XmlHttpRequest Object function getXmlHttpRequestObject() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); //Not IE } else if(window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); //IE } else { //Display your error message here. //and inform the user they might want to upgrade //their browser. alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox."); } } //Get our browser specific XmlHttpRequest object. var receiveReq = getXmlHttpRequestObject(); //Initiate the asyncronous request function sayHello() { //If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call. if (receiveReq.readyState == 4 || receiveReq.readyState == 0) { //Setup the connection as a GET call to SayHello.html. //True explicity sets the request to asyncronous (default). receiveReq.open("GET", 'index.php', true); //Set the function that will be called when the XmlHttpRequest objects state changes. receiveReq.onreadystatechange = handleSayHello; //Make the actual request. receiveReq.send(null); } } //Called every time our XmlHttpRequest objects state changes. function handleSayHello() { //Check to see if the XmlHttpRequests state is finished. if (receiveReq.readyState == 4) { //Set the contents of our span element to the result of the asyncronous call. document.getElementById('span_result').innerHTML = receiveReq.responseText; } } function openMenu(query) { var myString = 'query.php?' + query; // window.open(myString, 'linkname', 'title=no, height=465, width=400, left=550, top=150, location=yes, resizable=no, menubar=no, scrollbars=no') //document.getElementById('engine').src = myString; //document.getElementById('engine').setAttribute('src',myString;); //top.frames['engine'].location.href = myString; pausecomp(1000); sayHello(); } function pausecomp(millis) { var date = new Date(); var curDate = null; do { curDate = new Date(); } while(curDate-date < millis); } </script> </head> <body> <a href="javascript:sayHello();">Say Hello</a><br /> <iframe src="blank.php" MarginWidth="0" transparent="yes" width="30" height="25" frameborder="0" scrolling="no" name="engine"> UPGRADE YOUR BROWSER</iframe> <span id="span_result"></span> <body onLoad="sayHello();"> </body> </html> index.php Code: <table width="100%" border="2" bordercolor="Black"> <tr><center> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=1');">Home</a></td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=2');">Jobs</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=3');">Travel</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=4');">Fight</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=5');">Inventory</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=6');">Properties</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=7');">Rewards<?php if($db_field['rewardpoints'] >= "1") print "(". $db_field['rewardpoints'] . ")";?></td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=8');">Profile<?php if($db_field['profilepoints'] >= "1") print "(". $db_field['profilepoints'] . ")";?></td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=9');">Alliances</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=10');">Options</td> </tr></center> </table> Thanks in advance for all the help. I have an older website consisting of frames (html). Now I want to password protect one page. So far I added the following Javascript which I found on youtube: <SCRIPT> function passWord() { var testV = 1; var pass1 = prompt('Please Enter Your Password',' '); while (testV < 3) { if (!pass1) history.go(-1); if (pass1.toLowerCase() == "letmein") { alert('You Got it Right!'); window.open('protectpage.html'); break; } testV+=1; var pass1 = prompt('Access Denied - Password Incorrect, Please Try Again.','Password'); } if (pass1.toLowerCase()!="password" & testV ==3) history.go(-1); return " "; } </SCRIPT> <CENTER> <FORM> <input type="button" value="Enter Protected Area" onClick="passWord()"> </FORM> </CENTER> This works but the protected page opens in a new window not in the main frame. What do I have to add and where? Will search engines pick up this page and display it on the public? Thank you. CT Evening folks I'm -very- green when it comes to Javascript, but I'm working my way up. The problem right now I'm running in to now is when trying to implement a website function that allows two buttons (previous, and next) to do their respective tasks. I can get the script to go forward and back, however when I jump to another page in the frame (this is all through iframes), when clicking either button, it will take me to the last page I had stopped on. A little hard to explain, but maybe seeing the code will give you a better idea. <script type="text/javascript"> var pNum=0; var maxPage=10; function next() { pNum++; if (pNum > maxPage) pNum=10; document.getElementById("frame").src="page"+pNum+".htm"; } function prev() { pNum--; if (pNum < 0) pNum=0; document.getElementById("frame").src="page"+pNum+".htm"; } </script> It's nothing fancy, but it's apparently keeping the last page it was on in memory instead of resetting itself, so when I go back to the start page it starts on page 0 and goes to page 10; right now I can stop on page 5, click a link to go back to the starting default page, and when using the 'next page' button it will start on 6 and go from there. Any help or advice would be appreciated. Hi, I want to restrict opening my popup window if it is already opened. For simple scenario, it is quite possible to do but in my case -- 1) When parent page is opening popup window, it is getting refreshed (required from client for some reason). 2) Once submit button is clicked from popup window, again parent page is getting refreshed (again its a requirement from client side). With these 2 conditions, I lost my saved value from variable and hence new popup is keep coming when the action is same. Currently I am using below code to open popup [CODE] function OpenWindow() { if(winPop && !winPop.closed) { alert("Popup is already open"); } else { winPop = window.open('MyPopupPage.aspx'); } } [CODE] Please help me to get rid of this problem. Thanks in advance. - Bhasker Hello all, I am currently working on a site for a friend and have reached a navigational problem I cannot figure out how to achieve... He has a list of products that link to relevant individual pages which also have next and previous buttons to browse all the product pages on the site (only 10 so no big deal). However, he wants to add additional lists that recommend products by category preference? So for example; 4 products may appeal to a particular category, but when you click the link to view one of the products shown the next and previous buttons scroll through the entire products pages! and not only the ones recommended?? IS it possible using Javascript to define which pages are linked to as next previous without having to create lots more html copies of content pages? I have a basic knowledge of Javascript but cannot find a workable answer or example using google. Any help would be much appreciated. Thanks in advance... Hi Guys, I need to put previous/next navigation button images on a lot of slides and was wondering if javascript could do the following: Firstly say my slides increment as: slide1.html slide2.html slide3.html slide4.html If i am on slide 3 I'd like javascript to identify previous button as slide2.html and next button as slide4.html and so on Some loop/array code that does if filename = slide3.html then set button left(left.lpg)) url to slide2.html and button right(right.jpg) url to slide4.html array[0] = slide1.html array[1] = slide2.html ... opening as _self i.e no pop up. Thanks Hi All, I am using a loop slider to scroll 4 pages. When I am on any page and click through the product on that. I go to the product but when I click the back button, it goes to the start of the slider rather then the page where I left it. How to go back in loop slider from a back button to the page where we left the scroller. Instead of going to the start of the scroller. It is annoying to go back again to start of the page and scroll all pages. Any help, Highly appreciated. Regards, Meenakshi. Hi everyone. New to javascript here.... I have a problem here. I know how to store a cookie and check a cookie... but i don't know how to calculate the time between current visit and previous visit... Example. I logged in @ 1pm and logged in again @ 3pm... It should a msg like "your last visit was 2 hours ago" Can any one enlighten me ? Thank you! Hi. Please help. I have a credit card donation page and what I wanted to do is after they click the submit button and transaction is successfult I wanted to capture the donation amount they enter from the donation page and show it to the next page. I know that is possible but I just don't know how to do it. I am new in Javascript and still consider as a baby. Can someone please help? Thanks in advance.
Ok ..... let's see if I can explain this so someone else can understand it! I have a menu created with AllWebMenus and after battling with it for some time to get it to show up on the pages !!!! i am now facing another problem..... I have a flash movie on the home page that it does not start unless i click the home button. I've tested locally without the menu and it works, so has to be the menu that is conflicting with it. the site is www.teiafirme.com I could just drop the menu and create another one, thing is I like those darn buttons... Anyone here have any experience with this kind of problem? if needed i can post the menu and flash code... Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once. Does anyone know how to do this please? Thanks so much for your help. I would like to create a 2-level menu similar to the one use in: http://www.pagina12.com.ar/diario/principal/index.html It is done with CSS? Thanks! Hi, I mainly do PHP/MySQL coding, but I wanted to add this Javascript Accordion Menu to my site: Javascript And CSS Tutorial - Accordion Menus | Switch on the Code It works fine, but I was wondering if there was a simple way to modify the code so that the currently open menu stays open from page to page instead of closing upon each page reload? Thanks for the help, --Anamaniac I have a slideshow on the "Projects" page. The javascript is external. There's a link on the homepage that when clicked needs to open the Projects page with the appropriate slide loaded. How do I do that? Here's the code I have for the slideshow: Code: var prev = document.getElementById('prev'); var next = document.getElementById('next'); var current = 0; function prevPic() { clearInterval(interval); if(current > 0) { current--; if(current == 0) { document.getElementById('next').src = "images/right_arrow.jpg"; document.getElementById('prev').src = "images/left_arrow_off.jpg"; } else { document.getElementById('next').src = "images/right_arrow.jpg"; document.getElementById('prev').src = "images/left_arrow.jpg"; } update(); } } function nextPic() { clearInterval(interval); if(current < slides.length - 1) { current++; if(current == slides.length - 1) { document.getElementById('next').src = "images/right_arrow_off.jpg"; document.getElementById('prev').src = "images/left_arrow.jpg"; } else { document.getElementById('next').src = "images/right_arrow.jpg"; document.getElementById('prev').src = "images/left_arrow.jpg"; } update(); } } function update() { var pic = slides[current]; document.getElementById('project_title').innerHTML = pic.title; document.getElementById('project_image').src = "images/slides/" + pic.image; document.getElementById('project_location').innerHTML = "<span>Location:</span> " + pic.location; document.getElementById('project_operation').innerHTML = "<span>Commercial Operation:</span> " + pic.commercial_operation; document.getElementById('counter').innerHTML = (current + 1) + " of " + slides.length; if(pic.link) { document.getElementById('project_link').style.display = "block"; document.getElementById('project_href').href = pic.link; } else { document.getElementById('project_link').style.display = "none"; } } //preload slides var images = []; for(i in slides) { var img = new Image(); img.src = "images/slides/" + slides[i].image; images.push(img); } Hello everyone, For some reason this jQuery/JavaScript code will not show my sub menus in my navigation bar. Here is the JavaScript: Code: $(function(){ var config = { sensitivity: 3, // number = sensitivity threshold (must be 1 or higher) interval: 200, // number = milliseconds for onMouseOver polling interval over: doOpen, // function = onMouseOver callback (REQUIRED) timeout: 200, // number = milliseconds delay before onMouseOut out: doClose // function = onMouseOut callback (REQUIRED) }; function doOpen() { $(this).addClass("hover"); $('ul:first',this).css('visibility', 'visible'); } function doClose() { $(this).removeClass("hover"); $('ul:first',this).css('visibility', 'hidden'); } $("ul.pMenu li").hoverIntent(config); $("ul.pMenu li ul li:has(ul)").find("a:first").append(" » "); }); My css that corresponds to this is: Code: .pMenu{ margin:0; padding:0; } #health{ width:10%; padding-left:14%; padding-right:2%; } #insurance{ width:13%; padding-right:2%; } #shopping{ width:12%; padding-right:2%; } #dating{ width:10%; padding-right:2%; } #education{ width:13%; } ul.pMenu li{ float:left; list-style:none; } ul.pMenu li a{ display:block; color:#FFF; background:#900; border:3px ridge #C00; text-decoration:none; text-shadow:1px 1px 1px #000; white-space:nowrap; padding-left:2%; padding-right:2%; padding-top:10px; padding-bottom:10px; } ul.pMenu li a:hover{ background:#FF0; border:3px ridge #FF6; color:#FF0; } ul.pMenu li ul{ margin:0; padding:0; position:absolute; visibility:hidden; } ul.pMenu li ul li{ float:none; display:inline; } ul.pMenu li ul li a{ width:auto; background:#CCC; border:1% outset #999; font-size:95%; padding:2%; padding-left:4%; padding-right:10%; text-shadow:1px 1px 1px #000; color:#000; } ul.pMenu li ul li a:hover{ background:#999; border:1% inset #666; text-decoration:blink; } ul.pMenu li ul li ul{ margin:0; padding:0; position:absolute; visibility:hidden; } /*IE 6 & 7 need inline block feature*/ ul.pMenu ul li a{ border-right:none; width:100%; display:inline-block; } ul.pMenu li ul li ul li{ float:none; display:inline; } ul.pMenu li ul li ul li a{ width:auto; background:#999; border:1% outset #666; text-shadow:1px 1px 1px #000; color:#FFF; } ul.pMenu li ul li ul li a:hover{ background:#999; border:1% inset #666; text-decoration:blink; } ul.pMenu li ul li ul li ul{ margin:0; padding:0; position:absolute; visibility:hidden; } ul.pMenu li ul li ul li{ float:none; display:inline; } ul.pMenu li ul li ul li a{ width:auto; background:#999; border:1% outset #666; text-shadow:1px 1px 1px #000; color:#FFF; } ul.pMenu li ul li ul li a:hover{ background:#999; border:1% inset #666; text-decoration:blink; } Ok, first let me explain what I try to do. I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible. When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible. So, here is the code I have so far: Code: <div id="topnav"> <ul> <li> <a href="index.html">Home</a> </li> <li> <a href="#">Over Meves</a> <ul class="submenu"> <li><a href="#" class="suba">Historie</a></li> <li><a href="#" class="suba">Onze mensen</a></li> <li><a href="#" class="suba">Werkzijze</a></li> </ul> </li> <li> <a href="vervolg3.html">Disciplines</a> <ul class="submenu"> <li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li> <li><a href="#" class="suba">Elektrotechniek</a></li> <li><a href="#" class="suba">Sanitaire techniek</a></li> <li><a href="#" class="suba">Energiebesparingstechniek</a></li> <li><a href="#" class="suba">Bouwfysica en geluid</a></li> <li><a href="#" class="suba">Diensten energiebesparing</a></li> </ul> </li> <li> <a href="#">Expertise</a> <ul class="submenu"> <li><a href="#" class="suba">Woningbouw & Utiliteit</a></li> <li><a href="#" class="suba">Zorg & Welzijn</a></li> <li><a href="#" class="suba">Milieu & Energie</a></li> <li><a href="#" class="suba">Beheer & Onderhoud</a></li> <li><a href="#" class="suba">EPA & EPC</a></li> <li><a href="#" class="suba">Legionella beheersing</a></li> </ul> </li> <li> <a href="#">Contact</a> <ul class="submenu"> <li><a href="#" class="suba">Adres & route</a></li> <li><a href="#" class="suba">Werken bij</a></li> </ul> </li> </ul> </div> The javascript: Code: <script type="text/javascript"> var ddmenuitem = 0; function jsddm_open() { jsddm_close(); ddmenuitem = $(this).find('ul.submenu').css('display', 'block'); } function jsddm_close() { if(ddmenuitem) ddmenuitem.css('display', 'none'); } $(document).ready(function() { $('#topnav > ul > li').bind('click', jsddm_open) $('#topnav ul li a.suba').click(function(e){ if ($(this).attr('class') != 'active'){ $('#topnav ul li a.suba').removeClass('active'); $(this).addClass('active'); } }); $("ul.submenu > li > a").each(function () { var currentURL = document.location.href; var thisURL = $(this).attr("href"); if (currentURL.indexOf(thisURL) != -1) { $(this).parents("ul.submenu").css('display', 'block'); } }); $('a').each(function () { var currentURL = document.location.href; var thisURL = $(this).attr('href'); if (currentURL = thisURL) { $(this).parents('ul.submenu').css('display', 'block'); } // else { // $(this).parents('ul.submenu').css('display', 'none'); // } }); }); </script> And the css: Code: #topnav ul { list-style: none; padding: 0; margin: 0; } #topnav ul li { float: left; margin: 0; padding: 0; } #topnav ul li a { padding: 5px 15px; color: #00537F; text-decoration: none; display: block; font-weight: bold; } #topnav ul li a:link { color: #FFF; text-decoration: none; } #topnav ul li a:visited { color: #FFF; text-decoration: none; } #topnav ul li a:hover { color: #FFF; text-decoration: underline; } #topnav ul li a.active { text-decoration: underline; color: #FFF; } /*#topnav ul li:hover .submenu { display:block; }*/ #topnav ul li ul.submenu { float: left; padding: 4px 0; position: absolute; left: 0; top: 24px; display: none; background: #e0e0e0; color: #00537F; } #topnav ul li ul.submenu a { display: inline; color: #00537F; padding: 4px 8px; } #topnav ul li ul.submenu li { border-right-width: 1px; border-right-style: solid; border-right-color: #00537F; } #topnav ul li ul.submenu li:last-child { border-right-style: none; } #topnav ul li ul.submenu a:link { color: #00537F; } #topnav ul li ul.submenu a:visited { color: #00537F; } #topnav ul li ul.submenu a:hover { text-decoration: underline; color: #00537F; } #topnav ul li ul.submenu li.active { text-decoration: underline; color: #00537F; } #topnav ul li ul.submenu a.active { text-decoration: underline; color: #00537F; } Hope I explained it clear. Thanks for any help. Hello, I've tried various things I've found online but cannot seem to get the right code to open the links in a drop down menu in a new window. Code: <form id="quicklinks" name="quicklinks" action=""> <select name="quicklinkitem" onchange="openWin(quicklinkitem.value)"> <option value="/lib/board.html">Select a Date</option> <option value="/lib/boardreports/03-08-12.pdf">March 8, 2012</option> <option value="/lib/boardreports/02-09-12.pdf">February 9, 2012</option> </select> </form> I appreciate any help. Elbee Hey guys, I have a quick question for you today I am coding a little login script, just password, the security is meant to be weak I'm using it as a teaching aid: Here is my problem, I want it to go to a page if the password is true, and go to another if it isnt, my code will explain. The window.open works but it takes you to another tab I want it to load in the same place. CODE:http://codepad.org/s34r3BQl Thanks in advanced Owen |