Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Chained menu with click action to display hidden divs

  1. #1
    Join Date
    Apr 2005
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Chained menu with click action to display hidden divs

    1) Script Title: Chained menu with click action to display hidden divs

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm

    3) Describe problem: Is it possible to have 'var onclickaction' to display a hidden div ? My problem is that i have 2 items to show after selection

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    In chainedmenu.js, replace alert(selectedOptionvalue) with document.getElementById('hidden_div').style.display='block'

    Put a hidden div in chainedmenu.html, for instance:
    <div id="hidden_div" style="display:none; background: red">this is a hidden div</div>

    In chainedmenu.html, replace <input type="button" value="Reset" onclick="resetListGroup('chainedmenu')"> with:
    <input type="button" value="Reset" onclick="document.getElementById('hidden_div').style.display='none'; resetListGroup('chainedmenu')">

    If you want the text of the hidden div to be identical to the text of the original alert, things get more complicated, but I guess that can be done too.

  3. #3
    Join Date
    Apr 2005
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much
    I will give this a try

    By the way, i am noticing values on the dropdown do not reset even if i go to a different page and go back.
    is there a way to reset values when page is being visited or revisited?

    Thanks

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    You could try onload="resetListGroup('chainedmenu')" or onunload="resetListGroup('chainedmenu')"

  5. #5
    Join Date
    Apr 2005
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you for your assistance

    One last question

    Can i have just 2 dropdowns instead of 3?
    Do i need to change code to have it work?

    Please advise

  6. #6
    Join Date
    Apr 2005
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Also
    What does ''savestate' do?

    I have:
    <body onLoad="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, 'savestate')">

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    I'm afraid you have to read the documentation in chainedmenu.html very carefully. It's all explained there.
    EDIT: I realize this is difficult. I'll try to make a simpler script for you. Wait until tomorrow.
    Last edited by molendijk; 01-18-2013 at 07:25 PM.

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    OK, here's a two-level chained selectbox. It's easier to understand than the DynamicDrive script. Maybe this is what you want. Tell me if there's something wrong or missing.
    Last edited by molendijk; 01-18-2013 at 11:14 PM.

  9. #9
    Join Date
    Apr 2005
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    It works great !

    One last question
    What if i have my 2 dropdowns

    Can i set 1 option on my first dropdown to directly go to a page without going to the second dropdown?

  10. #10
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    You mean something like the following?
    Code:
    <!doctype html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title></title>
    
    <style>
    body{font-family: verdana; font-size: 12px; padding-left:20px; padding-right: 20px}
    </style>
    
    <script>
    function load_script_container()
    {var div_node=document.createElement('div');
    div_node.setAttribute("id", "script_container");
    document.body.appendChild(div_node);}
    //window.onload=load_script_container
    if ( typeof window.addEventListener != "undefined" )
        window.addEventListener( "load", load_script_container, false );
    else if ( typeof window.attachEvent != "undefined" )
        window.attachEvent( "onload", load_script_container );
    else {
        if ( window.onload != null ) {
            var oldOnload = window.onload;
            window.onload = function ( e ) {
                oldOnload( e );
                load_script_container();
            };
        }
        else
            window.onload = load_script_container;
    }
    
    function javascript_in_selectbox(which_box) {
    var optionValue=document.getElementById(which_box).options[document.getElementById(which_box).selectedIndex].value;
    if (optionValue=="none") {}
    else {
    var script_inside_selectbox_option = document.createElement('script');
    script_inside_selectbox_option.type = 'text/javascript';
    script_inside_selectbox_option.text = optionValue;
    while(document.getElementById("script_container").firstChild)
    {document.getElementById("script_container").removeChild(document.getElementById("script_container").firstChild);}
    document.getElementById("script_container").appendChild(script_inside_selectbox_option);
    }
    }
    
    function hide_it(tag,className) {
    var els = document.getElementsByTagName(tag)
    	for (i=0;i<els.length; i++) {
    		if (els.item(i).className == className){
    		 
    		els.item(i).style.display="none"
    		
    	}
           }
          }
    
    
    var alertmessage="The window you're about to open doesn't have buttons for 'back' and 'forward', but you can use the keyboard: \n- press the BACKSPACE button for going back in the newly opened window, \n- use SHIFT+BACKSPACE for going forward in the newly opened window."
    
    function prompt_once_per_session()
    {
    if( !/(^|\s|;)seenAlert=yes(;|\s|$)/.test(document.cookie))
    {if( !confirm(alertmessage+'\n\nClick on OK if you don`t want this message to show again.\n\nClick on CANCEL if you want this message to show each time you open a new window.') )
    {}
    else {document.cookie="seenAlert=yes";}
    }
    }
    
    var popUpWin ;
    var url
    var autoclose = true
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ;
    
    //Don't make the popup too high/wide, as this will result in a normal new tab in Opera
    var w = screen.availWidth*70/100 //width: 70%
    var h = screen.availHeight*60/100 //height:60%
    var l=screen.availWidth*15/100-10 //left: 15% (with a slight correction of minus 10
    var t=screen.availHeight*15/100 //top: 15%
    
    function open_it(url){
    if(is_chrome)prompt_once_per_session(); // message for Google Chrome users
    if (popUpWin) {popUpWin.close()}
    if (popUpWin && autoclose){window.onunload=function(){popUpWin.close()}}
    popUpWin=window.open(url,"","menubar=yes, toolbar=yes, titlebar=yes, directories=no, status=0, scrollbars=yes,location=yes,top="+t+",left="+l+",width="+w+",height="+h+", resizable=1"); 
    
    if (typeof(popUpWin)=='undefined') {   
      alert("Your browser tries to open:\n\n"+unescape(url)+".\n\nThat's a safe page, but your safety settings prevent to open it. Please disable your pop-up blocker and click the link again."); 
    } 
    
    if (window.focus){popUpWin.focus() }  
    
    }
    </script>
    
    </head>
    
    <body onload="hide_it('select','select');hide_it('button','select')" onunload="hide_it('select','select');hide_it('button','select')">
    
    <div style="position: relative; text-align: center; margin-top: 20px">
    <b>Surf this site</b> &rarr; <select id="first_main" onchange="javascript_in_selectbox('first_main'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
    <option selected>Select: Webmaster Resources & News</option>
    <optgroup label="Open in new menu">
    <option value="hide_it('select','select');document.getElementById('button').style.display='inline'; document.getElementById('second_select').style.display='inline'">Webmaster Resources</option>
    <option value="hide_it('select','select'); document.getElementById('button').style.display='inline'; document.getElementById('third_select').style.display='inline'">News Sites</option>
    </optgroup>
    <optgroup label="Open directly in new window">
    <option value="open_it('http://www.dynamicdrive.com')">DynamicDrive</option>
    </optgroup>
    </select>
    
    <select id="second_main" onchange="javascript_in_selectbox('second_main'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
    <option selected>Select: Regular Cars & Sports Cars</option>
    <optgroup label="Open in new menu">
    <option value="hide_it('select','select'); document.getElementById('button').style.display='inline'; document.getElementById('fourth_select').style.display='inline'">Regular Cars</option>
    <option value="hide_it('select','select'); document.getElementById('button').style.display='inline'; document.getElementById('fifth_select').style.display='inline'">Sports Cars</option>
    </optgroup>
    <optgroup label="Open directly in new window">
    <option value="open_it('http://www.toyota.co.uk')">Toyota</option>
    <option value="open_it('http://www.porsche.com/uk')">Porsche</option>
    </optgroup>
    </select><br><br>
    
    
    <select class="select" id="second_select" onchange="javascript_in_selectbox('second_select'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
    <option selected>Selected: Webmaster Resources</option>
    <option disabled>'Click-to-go' on an item below</option>
    <option value="open_it('http://www.dynamicdrive.com')">DynamicDrive</option>
    <option value="open_it('http://www.codingforums.com')">CodingForums</option>
    <option value="open_it('http://www.w3schools.com')">W3Schools</option>
    </select>
    
    <select class="select" id="third_select" onchange="javascript_in_selectbox('third_select'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
    <option selected>Selected: News Sites</option>
    <option disabled>'Click-to-go' on an item below</option>
    <option value="open_it('http://edition.cnn.com')">CNN</option>
    <option value="open_it('http://www.bbc.co.uk/news')">BBC News</option>
    <option value="open_it('http://www.foxnews.com')">Fox News</option>
    </select>
    
    <select class="select" id="fourth_select" onchange="javascript_in_selectbox('fourth_select'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
    <option selected>Selected: Regular Cars</option>
    <option disabled>'Click-to-go' on an item below</option>
    <option value="open_it('http://www.toyota.co.uk')">Toyota</option>
    <option value="open_it('http://www.ford.co.uk')">Ford</option>
    <option value="open_it('http://www.nissan.co.uk')">Nissan</option>
    </select>
    
    <select class="select" id="fifth_select" onchange="javascript_in_selectbox('fifth_select'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
    <option selected>Selected: Sports Cars</option>
    <option disabled>'Click-to-go' on an item below</option>
    <option value="open_it('http://www.porsche.com/uk')">Porsche</option>
    <option value="open_it('http://www.astonmartin.com')">Aston Martin</option>
    </select>
    
    <button class='select' id="button" onmousedown="hide_it('select','select');hide_it('button','select')" onmouseup="hide_it('select','select');hide_it('button','select')">Reset</button>
    
    </div><hr>
    
    Rest of page
    
    </body>
    
    </html>

Similar Threads

  1. mega drop down menu click action
    By pase in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-23-2011, 09:09 PM
  2. Replies: 1
    Last Post: 02-22-2009, 12:04 AM
  3. Accordion Menu script (v1.3) action onrollover rather than click?
    By berrypicker in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 07-22-2008, 03:24 AM
  4. Chained Select Menu inside divs
    By Skinnybobb in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-12-2008, 03:22 PM
  5. Chained Menu-Display Selection on Next Page?
    By jsybol in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-05-2007, 09:04 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •