Results 1 to 7 of 7

Thread: Combo Box Viewer - Download div's content on Select

  1. #1
    Join Date
    Feb 2015
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Combo Box Viewer - Download div's content on Select

    1) Script Title: Combo-Box Viewer

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

    3) Describe problem: Hi,

    I want to use iframes within the divs like this...


    Code:
    <form name="dropmsgform">
    <select name="dropmsgoption" size="1" style="width:300" onChange="expandone()">
        <option selected>Yahoo.com</option>
        <option>Bing.com</option>
        <option>Google.com</option>
    </select>
    <br>
    
    <div id="dropmsg0" class="dropcontent">
    yahoo iframe code here 
    </div>
    
    <div id="dropmsg1" class="dropcontent">
    bing iframe code here
    </div>
    
    <div id="dropmsg2" class="dropcontent">
    google iframe code here
    </div>
    
    </form>


    The problem is that if I use many divs with iframes, the browser needs more time to download them all or the browser becomes unresponsive.


    Is there any way to only download - lets say only the first iframe within the first div - and the other iframes when requested on selection at the drop down menu?


    Thanks
    Last edited by ddadmin; 02-03-2015 at 09:19 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You might want to check out Ajax Tabs script instead (demo #3), which supports loading of content via IFRAMEs on demand instead of all at once.
    DD Admin

  3. #3
    Join Date
    Feb 2015
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Yes I want to do exactly that but with the use of a drop down menu because of lack of space in the webpage.

    Thanks for the reply.

    Anybody else?

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,875
    Thanks
    49
    Thanked 263 Times in 255 Posts
    Blog Entries
    56

    Default

    You could start with something like this. If you don't understand the script, I'll be glad to help you.
    Code:
    <!doctype html>
    
    <html>
    
    <head>
    
    <title>&nbsp;</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script>
    //This script enables execution of javascript in the options of a selectbox
    function load_script_container()
    {var div_node=document.createElement('div');
    div_node.setAttribute("id", "script_container");
    document.body.appendChild(div_node);}
    
    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);
    }
    }
    </script>
    
    <body>
    
    <div style="position: absolute; top: 10px; left: 10px; ">
    
    <select id="your_id"  onchange="javascript_in_selectbox('your_id'); selectedIndex=0" onfocus="selectedIndex=0"   style="font-family: verdana; font-size: 13px; width:175px" >
    <option value="none" selected >Choose a destination</option>
    <option disabled>----</option>
    
    <option value="document.getElementById('load_selected').innerHTML='<iframe src=\'http://www.dynamicdrive.com\' style=\'width: 600px; height:500px; border: 1px solid black\' frameborder=\'no\'></iframe>' ">DynamicDrive</option>
    
    <option value="document.getElementById('load_selected').innerHTML='<iframe src=\'http://en.wikipedia.org/wiki/Main_Page\' style=\'width: 600px; height:500px; border: 1px solid black\' frameborder=\'no\'></iframe>' ">Wikipedia</option>
    
    <option value="document.getElementById('load_selected').innerHTML='<iframe src=\'http://www.w3schools.com/\' style=\'width: 600px; height:500px; border: 1px solid black\' frameborder=\'no\'></iframe>' ">W3schools</option>
    
    </select>
    <span style="font-family: verdana; font-size: 13px; cursor: pointer" onclick="document.getElementById('load_selected').innerHTML=''">Remove</span>
    
    <div id="load_selected"></div>
    
    </div>
    
    <!-- Put this script at the end of the body section   -->
    <script>
    load_script_container()
    </script>
    
    </body>
    
    </html>

  5. The Following User Says Thank You to molendijk For This Useful Post:

    Chatji (02-05-2015)

  6. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,875
    Thanks
    49
    Thanked 263 Times in 255 Posts
    Blog Entries
    56

    Default

    Sorry, I forgot to close the head section. But even then it seems to work.

  7. The Following User Says Thank You to molendijk For This Useful Post:

    Chatji (02-05-2015)

  8. #6
    Join Date
    Feb 2015
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    molendijk thank you very much.

    Can you please tell me how to make one of the selections load by default when the page loads?

  9. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,875
    Thanks
    49
    Thanked 263 Times in 255 Posts
    Blog Entries
    56

    Default

    You could put something like this at the end of the body section:
    Code:
    <script>
    document.getElementById('load_selected').innerHTML='<iframe src=\'http://www.dynamicdrive.com\' style=\'width: 600px; height:500px; border: 1px solid black\' frameborder=\'no\'></iframe>'
    </script>

  10. The Following User Says Thank You to molendijk For This Useful Post:

    Chatji (02-05-2015)

Similar Threads

  1. combo-box viewer
    By dyenboy in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 01-18-2008, 02:42 PM
  2. Combo-Box Viewer
    By doodlindoug in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-21-2007, 05:46 PM
  3. Combo Box Viewer
    By jtgameing in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-22-2006, 06:39 AM
  4. Combo-Box Viewer
    By xektor in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-06-2006, 06:10 AM

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
  •