JavaScript - Accordian Menu Not Closing On Click
Hello all, I built a javascript accordian menu that works very well. However, after a menu is opened, I have to click on another menu to close the current one. I would like to be able to toggle opening and closing of a menu without having to interact with other menus.
I appreciate any help! Here is the Javascript code: Code: var expandFirstItemAutomatically = false; // Expand first menu item automatically ? var initMenuIdToExpand = false; // Id of menu item that should be initially expanded. the id is defined in the <li> tag. var expandMenuItemByUrl = true; // Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand var initialMenuItemAlwaysExpanded = true; var dhtmlgoodies_slmenuObj; var divToScroll = false; var ulToScroll = false; var divCounter = 1; var otherDivsToScroll = new Array(); var divToHide = false; var parentDivToHide = new Array(); var ulToHide = false; var offsetOpera = 0; if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1; var slideMenuHeightOfCurrentBox = 0; var objectsToExpand = new Array(); var initExpandIndex = 0; var alwaysExpanedItems = new Array(); var dg_activeItem = null; function popMenusToShow() { var obj = divToScroll; var endArray = new Array(); while(obj && obj.tagName!='BODY'){ if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){ var objFound = -1; for(var no=0;no<otherDivsToScroll.length;no++){ if(otherDivsToScroll[no]==obj){ objFound = no; } } if(objFound>=0){ otherDivsToScroll.splice(objFound,1); } } obj = obj.parentNode; } } function showSubMenu(e,inputObj) { if(this && this.tagName)inputObj = this.parentNode; if(inputObj && inputObj.tagName=='LI'){ divToScroll = inputObj.getElementsByTagName('DIV')[0]; for(var no=0;no<otherDivsToScroll.length;no++){ if(otherDivsToScroll[no]==divToScroll)return; } } hidingInProcess = false; if(otherDivsToScroll.length>0){ if(divToScroll){ if(otherDivsToScroll.length>0){ popMenusToShow(); } if(otherDivsToScroll.length>0){ autoHideMenus(); hidingInProcess = true; } } } if(divToScroll && !hidingInProcess){ divToScroll.style.display=''; otherDivsToScroll.length = 0; otherDivToScroll = divToScroll.parentNode; otherDivsToScroll.push(divToScroll); while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){ if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){ otherDivsToScroll.push(otherDivToScroll); } otherDivToScroll = otherDivToScroll.parentNode; } ulToScroll = divToScroll.getElementsByTagName('UL')[0]; if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub(); } if(e || inputObj) { if(dg_activeItem) { dg_activeItem.className = dg_activeItem.className.replace('coursefinder_activeItem',''); } var aTags = inputObj.getElementsByTagName('A'); if(aTags.length>0) { aTags[0].className = aTags[0].className + ' coursefinder_activeItem'; dg_activeItem = aTags[0]; if(aTags[0].href.indexOf('#') == -1 || aTags[0].href.indexOf('#') < aTags[0].href.length-1){ return true; } } } return false; } function autoHideMenus() { if(otherDivsToScroll.length>0){ divToHide = otherDivsToScroll[otherDivsToScroll.length-1]; parentDivToHide.length=0; var obj = divToHide.parentNode.parentNode.parentNode; while(obj && obj.tagName=='DIV'){ if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj); obj = obj.parentNode.parentNode.parentNode; } var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox); if(tmpHeight<0)tmpHeight=0; if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight + 'px'; ulToHide = divToHide.getElementsByTagName('UL')[0]; slideMenuHeightOfCurrentBox = ulToHide.offsetHeight; scrollUpMenu(); }else{ slideMenuHeightOfCurrentBox = 0; showSubMenu(); } } function scrollUpMenu() { var height = divToHide.offsetHeight; height-=15; if(height<0)height=0; divToHide.style.height = height + 'px'; for(var no=0;no<parentDivToHide.length;no++){ parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px'; } if(height>0){ setTimeout('scrollUpMenu()',0); }else{ divToHide.style.display='none'; otherDivsToScroll.length = otherDivsToScroll.length-1; autoHideMenus(); } } function scrollDownSub() { if(divToScroll){ var height = divToScroll.offsetHeight/1; var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height)); height = height +offsetMove ; divToScroll.style.height = height + 'px'; for(var no=1;no<otherDivsToScroll.length;no++){ var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove; otherDivsToScroll[no].style.height = tmpHeight + 'px'; } if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',0); else { divToScroll = false; ulToScroll = false; if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){ initExpandIndex++; showSubMenu(false,objectsToExpand[initExpandIndex]); } } } } function initSubItems(inputObj,currentDepth) { divCounter++; var div = document.createElement('DIV'); // Creating new div div.style.overflow = 'hidden'; div.style.position = 'relative'; div.style.display='none'; div.style.height = '1px'; div.id = 'slideDiv' + divCounter; div.className = 'slideMenuDiv' + currentDepth; inputObj.parentNode.appendChild(div); // Appending DIV as child element of <LI> that is parent of input <UL> div.appendChild(inputObj); // Appending <UL> to the div var menuItem = inputObj.getElementsByTagName('LI')[0]; while(menuItem){ if(menuItem.tagName=='LI'){ var aTag = menuItem.getElementsByTagName('A')[0]; aTag.className='slMenuItem_depth'+currentDepth; var subUl = menuItem.getElementsByTagName('UL'); if(subUl.length>0){ initSubItems(subUl[0],currentDepth+1); } aTag.onclick = showSubMenu; } menuItem = menuItem.nextSibling; } } function initSlideDownMenu() { dhtmlgoodies_slmenuObj = document.getElementById('coursefinder'); dhtmlgoodies_slmenuObj.style.visibility='visible'; var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0]; var mainMenuItem = mainUl.getElementsByTagName('LI')[0]; mainItemCounter = 1; while(mainMenuItem){ if(mainMenuItem.tagName=='LI'){ var aTag = mainMenuItem.getElementsByTagName('A')[0]; aTag.className='slMenuItem_depth1'; var subUl = mainMenuItem.getElementsByTagName('UL'); if(subUl.length>0){ mainMenuItem.id = 'mainMenuItem' + mainItemCounter; initSubItems(subUl[0],2); aTag.onclick = showSubMenu; mainItemCounter++; } } mainMenuItem = mainMenuItem.nextSibling; } if(location.search.indexOf('mainMenuItemToSlide')>=0){ var items = location.search.split('&'); for(var no=0;no<items.length;no++){ if(items[no].indexOf('mainMenuItemToSlide')>=0){ values = items[no].split('='); showSubMenu(false,document.getElementById('mainMenuItem' + values[1])); initMenuIdToExpand = false; } } } else if(expandFirstItemAutomatically>0 ){ if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){ showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically)); initMenuIdToExpand = false; } } if(aTag.className.indexOf("active") == -1) { aTag.onclick = showSubMenu; } else { aTag.onclick = scrollUpMenu; } mainItemCounter++; } if(expandMenuItemByUrl) { var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A'); var currentLocation = location.pathname; for(var no=0;no<aTags.length;no++){ var hrefToCheckOn = aTags[no].href; if(hrefToCheckOn.indexOf(currentLocation)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){ aTags[no].className = aTags[no].className + ' coursefinder_activeList'; initMenuIdToExpand = false; var obj = aTags[no].parentNode; while(obj && obj.id!='coursefinder'){ if(obj.tagName=='LI'){ var subUl = obj.getElementsByTagName('UL'); if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true; if(subUl.length>0){ objectsToExpand.unshift(obj); } } obj = obj.parentNode; } showSubMenu(false,objectsToExpand[0]); break; } } } if(initMenuIdToExpand) { objectsToExpand = new Array(); var obj = document.getElementById(initMenuIdToExpand) while(obj && obj.id!='slidedown_menu'){ if(obj.tagName=='LI'){ var subUl = obj.getElementsByTagName('UL'); if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true; if(subUl.length>0){ objectsToExpand.unshift(obj); } } obj = obj.parentNode; } showSubMenu(false,objectsToExpand[0]); } } Similar TutorialsHi, I was wondering if anyone knew how I can close an accordian panel by clicking on it. In more detail, when the user clicks the panel title, it opens it, i want it to close if they click the title again. Im using Adobe's Spry framework. Any help would be great. -M I've building a site for a letting agents using Joomla and JomEstate Pro. I've got everything working great and am quite happy with it. However, there is an accordion 'property filter' menu on the right which works fine in every other browser, but not in IE. Would anyone be able to tell me why it is doing this or at least if there is any way i can find out what is wrong. Sample site is at www.dspadtest.co.uk/tapton Thanks. I think this is a simple problem, but lets see... As the title suggests, I'm building a menu where when the user clicks on their username, a menu slides down. That part is easy. Using jQuery, I'm using slideToggle so when they click it again it moves back up. But what I'd also like to do is make it so if they leave the menu "area" (eg, are not on the username or the menu) I'd like the menu to slide back up. I tried Code: $('#userLink, #userMenu').mouseout(function () { $('#userMenu').slideUp('fast'); }); But there is the obvious flaw of when they mouse from the username to the menu, they leave the username and the menu closes back up. Anyone have thoughts on how this is/can be done? Is there a way to check what element the mouse is on at any given time? My other thought was to have a function set on timeout that would check if its on one of the accepted elements, and if not, close the menu and disengage the timeout. I want to implement a javascript function where a submit button will be submitted from the parent page each time I close a child page. Please let me know what I did wrong in my code and please elaborate your answer so that I could understand it better. Thank you so much for your help. I have the following jscript code but it is now working. Code: window.onunload = submitParent; function submitParent() { var doc = window.opener.document, theForm = doc.getElementById("finalForm"); theField = doc.getElementById("finalSelected"); theForm.submit(); theField.trigger('click'); } My form from the parent page is as follow. I want my jscript to just click on the submit button once. Code: <form id = "finalForm "name= "finalForm" method="POST" action=""> <input type="Submit" id = "finalSelected" name="finalSelected"/> Hi, I'm having troube closing the main Internet Explorer window using a script called from a right click menu. The code I'm using is: Code: <script language="JavaScript"> var oWindow = window.external.menuArguments; oWindow.close(); </script> When the script calls, windows prompts to close the window, but when 'yes' is clicked the Alert sound sounds and the window remains open! If the script is called from a button on the page it will close, but I want to close any page on the internet using a right click! All help will be gratefully received. Dave. I got this accordion from this site: http://www.stemkoski.com/stupid-simp...ccordion-menu/ I'm trying to implement it into this site: http://tizifolio.com/officelogic/products/reception.php Why does it expand / flash for a second when the page loads on the products pages. Examples: http://tizifolio.com/officelogic/pro...occasional.php http://tizifolio.com/officelogic/products/reception.php This is the js: **************************************************************************************************** ********************/ $(document).ready(function() { //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) $('.accordionButton').click(function() { //REMOVE THE ON CLASS FROM ALL BUTTONS $('.accordionButton').removeClass('on'); //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES $('.accordionContent').slideUp('normal'); //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT if($(this).next().is(':hidden') == true) { //ADD THE ON CLASS TO THE BUTTON $(this).addClass('on'); //OPEN THE SLIDE $(this).next().slideDown('normal'); } }); /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER $('.accordionButton').mouseover(function() { $(this).addClass('over'); //ON MOUSEOUT REMOVE THE OVER CLASS }).mouseout(function() { $(this).removeClass('over'); }); /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ /**************************************************************************************************** **************** CLOSES ALL S ON PAGE LOAD **************************************************************************************************** ****************/ $('.accordionContent').hide(); }); Hi Im trying to make a dropdown menu like IGN has on his site with the following javascript code. The only problem however is I can't seem to hide the menu when a user clicks outside the menu. This is a bit frustrated because when a user wants to hide the menu again the need to reclick the menu header. Is there anyway I could solve this problem? Also a explanation about the code would be helpfull im not used to work with javascript. Also this is the code I have so far which works to onclick hide and show the menu. javascript: PHP Code: function toggle(id) { var el = document.getElementById(id); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } HTML: PHP Code: <a href="#top" onclick="toggle('view_user-options');";>Panel</a> <div id="view_user-options" style="display:none;"> <div class="nav_option"><a href="">my test</a></div> </div> Also if anyone knows how to do it plz combine it with my code so it works. I always get in trouble with javascript when combining two codes in one. Note: plz don't give me solution with tons of code I just want a verry simple solution. Greetings, In a vertical expanding menu, I'm looking to change where the user clicks in order to expand the menu to the submenu. In short I want the user to be able to click on the parent menu item text and have that action expose the submenu children text items. Please see attached .png for visual. At present, the user must click on an arrow icon next to the parent menu item text to expand, but I'd also like the parent menu item to expand showing its children when clicked. All the parent menu item does right now is call in the linked page; it does not expand the menu. I've attached the .js in the 3 attached .txt files. Please let me know if there's anything else I should add/send. As far as I can tell the name of the arrow being used to expand menu can be seen in this html... <td class="wbtTdMenuItem"> <a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a> </td> <td class="wbtTdArrow" style="padding: 2px; border: 0px none;"> <a class="wbtArrowLink" title="Expand Welcome submenu" href="javascript:void(0)"> <img class="wbtArrowImg" src="images/collapse.png" alt="Expand Welcome submenu" style="width: 5px; height: 9px;"> </a> </td> Here's the html containing the name of the item I'd like to use in addition to the arrow... <td class="wbtTdSelected"> <img src="images/spacer.gif" style="width: 0px; height: 0px;" alt="Selected menu item"> </td> <td class="wbtTdMenuItem"> <a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a> </td> 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. basically i have a form with lots of fields.. drop down boxes and textarea's and standard input text.. now what i need is a way to change all of these fields with a fetch button. i can get the value for the fields from the perl script on my server side. the form basicslly sends lots of fields to my perl script and saves each field of data into seperate text docs. now my customer would like to retrieve the data back to the form to change aspects of it to be resubmitted . i am struggling with the simplist of codes to set the value of the fields from a javascript variable any ideas please. I am using a javascript audio player on a webpage that has an option to download the track by right clicking on a link called 'mp3' at the end of each track in the playlist. When the user right clicks on the track name however all that can be downloaded is an html file. I am trying to find a way of changing this so that right clicking on the track and choosing the 'save link as' option will download the mp3. I have been led to believe that I can use a script such as this one: http://abeautifulsite.net/blog/2008/...-click-plugin/ to generate a custom content menu for downloading tracks, or somehow downloading the mp3, but I am at a loss at to how to do this. Here's a screenshot of a track in the playlist: And here is the source: Code: {name:"foster manganyi na tintsumi ta tilo - zion (ndzi teke riendzo no. 1) <span style=\"color:#BDBDA1; font-size:12px;\">[from nick]</span>",mp3:"./songs//nick/zion.mp3"} I would be grateful for any advice on getting this working, Thanks, Nick Hello all, Essentially what I am trying to get without much success on the issue is this: I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window. This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason. I am obliged for any help on this. *edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though. okay, im using this script to close a DIV, can i somehow link it so that it loads main.swf when the div is closed? Now the SWF is running in the bg. Code: <script language=javascript> <!-- function hideDiv(){ if(document.getElementById('Div').style.display != "none") { document.getElementById('Div').style.display = "none"; }} //--> </script> Code: <a href=# onclick="javascript:hideDiv();">Close</a> So this is what I have so far: Code: import java.util.Random; public class lotteryGame { public static void main(String args[]) throws Exception { int n=0; // counter for the amount of times played int t=0; // total amount of winnings int i=0; // number of matches int a; // first guess int b; // second guess int c; // third guess int d; // first number in the lottery int e; // second number in the lottery int f; // third number in the lottery Random rand = new Random(); while (n<100) // play the game for 100 times { a=rand.nextInt(9) + 1; // assign a random number to a b=rand.nextInt(9) + 1; c=rand.nextInt(9) + 1; System.out.println("Lottery Number"+a+b+c); d=rand.nextInt(9) + 1; e=rand.nextInt(9) + 1; f=rand.nextInt(9) + 1; System.out.println("Your guess"+d+e+f); if (a==d){ i=i+1; System.out.println(a+"is a match"); d=d+10; // if a=d then d is taken out of the range (1-9) } else if (a==e){ System.out.println(a+"is a match"); i=i+1; e=e+10; } else if (a==f){ System.out.println(a+"is a match"); i=i+1; f=f+10; } if (b==d){ System.out.println(b+"is a match"); i=i+1; d=d+10; } else if (b==e){ System.out.println(b+"is a match"); i=i+1; e=e+10; } else if (b==f){ System.out.println(b+"is a match"); i=i+1; f=f+10; } if (c==d){ System.out.println(c+"is a match"); i=i+1; d=d+10; } else if (c==e){ System.out.println(c+"is a match"); i=i+1; e=e+10; } else if (c==f){ System.out.println(c+"is a match"); i=i+1; f=f+10; } if (i==3){ if (a==d-10&&b==e-10&&c==f-10){ t=t+10000; System.out.println("You win!!!"); } else{ t=t+1000; System.out.println("You had 3 matches! You win $1000"); } } if (i==2){ t=t+50; System.out.println("You had 2 matches! You win $50"); } if (i==1){ t=t+10; System.out.println("You had 1 match! You win $10"); } } n=n+1; i=0; } } I don't know what is wrong with the program, It compiles fine but when I run it, it never stops. =/ I figure that Code: n=n+1 would be a counter to stop the while loop. Where do I place it so it can count everytime it runs. Or, What do I need to add in order for the program to stop running after 100 times? Thank You. =] I have a lightbox pop up on my homepage. I'm curious if there's a way to automatically close the pop up after 5 seconds or so. For some readon onClose kept popping in my head, but I'm pretty sure that's not correct. Thanks. 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>Lightbox Example</title> </head> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="/lightbox/ jquery.mousewheel-3.0.4.pack.js"></script> <script type="text/javascript" src="/lightbox/ jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" type="text/css" href="/lightbox/fancybox/ jquery.fancybox-1.3.4.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { $("a#onload").fancybox({ 'frameHeight': 390, 'frameWidth': 640, 'hideOnContentClick': false, 'easingIn': 2000 }).trigger('click'); }); </script> <div id="lightbox_content" style="display:none"> <div id="data"> <img src="/lightbox/donate.jpg" alt="Support Today!"> <h1>Pledge Your Support Today!!</h1> </div> </div> <a id="onload" href="#data"></a> </body> </html> Hi, im thinking about something like this, is this the correct way to do this. Code: function run_timout() { timout = setTimeout(closethewindow, 3000); } function closethewindow() { alert("Your time is up!"); window.close('mywindow'); } Say you have a document with 2 frames with 2 buttons in one of the frames. If one button opens a window, how can you make the other button close it?
Hi there all, Trying to adapt a bit of Code, but failing wonderfully! I'm writing in Cold Fusion, but using a little java script to create the sliding effect. It's from a sliding open list function in another site, and I tried to just hack my current needs in there. Code: <script> function DC_ShowHideMoreWebsites(id) { if( document.getElementById( "contentsections2").style.display=="none" ) { Effect.BlindDown( "contentsections2"); return false; } else { Effect.SlideUp( "contentsections2" ); return false; } } </script> is followed by Code: <p id="moreScreenshots"><a href="#" onclick="DC_ShowHideMoreWebsites"; return false;">More Website Examples</a></p> I've tested the script, div and the DB call by just calling it with Code: <p id="moreScreenshots"><a href="#" onclick="Effect.BlindDown('contentsections2'); return false;">More Website Examples</a></p> And that works fine. I've never coded in Java, hence the problem! any help appreciated Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it... is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors? Is there a way to capture the event of the user closing the browser??
|