Combo Box Viewer

**Chatji** · 02-03-2015, 02:50 PM

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

**ddadmin** · 02-03-2015, 10:30 PM

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.

**Chatji** · 02-03-2015, 10:46 PM

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?

**molendijk** · 02-03-2015, 11:40 PM

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>

**molendijk** · 02-03-2015, 11:52 PM

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

**Chatji** · 02-05-2015, 02:22 PM

molendijk thank you very much.

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

**molendijk** · 02-05-2015, 03:37 PM

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>