Log in

View Full Version : Combo Box Viewer - Download div's content on Select


Chatji
02-03-2015, 02:50 PM
1) Script Title: Combo-Box Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/comboviewer.htm

3) Describe problem: Hi,

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



<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 (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm) 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.

<!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:

<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>