JavaScript - Menu Link Direct To Iframe Content?
Ok, I paid to have a website built, yet the developer used iFrames to accomplish the task. Basically, load a parent page, and then in an iframe, lod content chosen from a menu.
Is there a way to create a menu at the homepage level, that will allow a menu listing the various parent pages, and under each parent page, have a drop down that will point directly at an iframe content? Like this? Page1 Page2 Page3 Page1ContentA Page1ContentB Page1ContentC And when you click Page1ContentC, it will load Page1.htm and in the iframe load Page1ContentC? If i am not clear, please let me know. Any help appreciated. Jeff Similar TutorialsWhat wrong in this code? Code: <script type="text/javascript" src="jquery.js"></script> <script> $(function (){ function manda(){ var text = $('#frame').contents().find('p[class=no_boder]').html(); $('div').html(text); } }); </script> i've already tried using this -> $('#frame').contents().html(); How can i get the content? Good Day Everyone, I need some help resizing an iframe to fit it's content. Basically, I have 10 spreadsheet pages saved as htm files. I am creating a page that enables me to view each of these htm files. I need the iframe to be resized for each htm file. This is my code: Code: <html> <head> <script language="javascript"> <!-- var state = 'none'; function showhide(layer_ref) { if (state == 'block') { state = 'none'; } else { state = 'block'; } if (document.all) { //IS IE 4 or 5 (or 6 beta) eval( "document.all." + layer_ref + ".style.display = state"); } if (document.layers) { //IS NETSCAPE 4 or below document.layers[layer_ref].display = state; } if (document.getElementById &&!document.all) { hza = document.getElementById(layer_ref); hza.style.display = state; } } function autoResize(id) { var winW = 0, winH = 0 ; if (document.body && document.body.offsetWidth) { winW = document.body.offsetWidth - 235; winH = document.getElementById('page').contentWindow.document.body.scrollHeight; } document.getElementById(id).height=(winH) + "px"; document.getElementById(id).width=(winW) + "px"; } //--> </script> <style type="text/css"> .yssOver{background-color:#ffffff;} .yssOut{ background-color:#E6EFFF;} #content { position:absolute; left:210px; top:40px; } html { overflow:off; } img { display:block; vertical-align:text-top;} h1{ color: #000000; font-family:"Arial",Times,sans-serif; font-weight:bold; font-size:12px; margin-bottom:0px; } #document{ position:absolute; top:0px; left:0px; } #menu{ margin: 0 0 0 0; padding-left:0px; border: 0 -10 0 0; } img.arrow { margin: 4 0 0 0; } table.menu td { border: 1px solid; border-color:#7D91D0; } table.div td { border: 0px solid; border-color:#7D91D0; } a:link {color: #000000; font-family:"Arial",Times,sans-serif; font-size:12px; text-decoration: none;} a:active {color: #000000; font-family:"Arial",Times,sans-serif; font-weight:bold; font-size:12px;} a:visited {color: #000000; font-family:"Arial",Times,sans-serif; text-decoration: none; font-size:12px;} a:hover {color: #000000; font-family:"Arial",Times,sans-serif; font-size:12px;} </style> </head> <body onLoad = "window.frames['page'].location = 'home.png'" > <table id=document border=0 cellpadding=0 cellspacing=0> <tr><td> <img src=halifax_logo.png></img> </td><td width=100%> <img src=headerback.png width=100% height=80></img> </td></tr> <tr><td> <table width=95% class=menu border=1 id=menu border=0 cellpadding=0 cellspacing=5 background=menuback.png> <tr><td> </td></tr> <tr><td class=menutd background=tdback.png> <a href="cofunds designations.htm" target="page"> Cofunds Designations</a> </td></tr> <tr><td class=menutd background=tdback.png> <a href="Commission Codes Most Used.htm" target="page" " height=516 width=974 onmousedown="if(document.getElementById('div2').style.display == 'none'){ document.getElementById('div2').style.display = 'block'; }else{ document.getElementById('div2').style.display = 'none'; }"> Commission Codes</a> <div id="div2" style="display: none;"> <table class=div border=0 cellpadding=0 cellspacing=0 style=background-color:#E6EFFF; border: 1px solid; border-color:#7D91D0; width=100%> <tr><td> <img class=arrow src=side_grey_arrow.png></img> </td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';"> <a href="Commission Codes Most Used.htm" target="page">Most Used</a> </td></tr> <tr><td valign=top> <img class=arrow src=side_grey_arrow.png></img> </td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';"> <a href="Commission Codes.htm" target="page">All</a> </td></tr> </table> </div> </td></tr> <tr><td class=menutd background=tdback.png> <a href="corporate accounts1.htm" target="page"> Corporate Accounts</a> <div id="div3" style="display: none;"> <table class=div border=0 cellpadding=0 cellspacing=0 style=background-color:#E6EFFF; border: 1px solid; border-color:#7D91D0; width=100%> <tr><td> <img class=arrow src=side_grey_arrow.png></img> </td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';"> <a href="research.png" target="page">Research Centre</a> </td></tr> <tr><td valign=top> <img class=arrow src=side_grey_arrow.png></img> </td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';"> <a href="reports.png" target="page">Company Reports</a> </td></tr> </table> </div> <tr><td class=menutd background=tdback.png> <a href="dealers.htm" target="page"> Dealers</a> </td></tr> <tr><td class=menutd background=tdback.png> <a href="halifax funds.htm" target="page"> Halifax Fund Managers</a> </td></tr> <tr><td class=menutd background=tdback.png> <a href="other fund managers.htm" target="page"> Other Fund Managers</a> </td></tr> <tr><td class=menutd background=tdback.png> <a href="international codes.htm" target="page"> International Codes</a> </td></tr> <tr><td class=menutd background=tdback.png> <a href="market makers1.htm" target="page"> Market Makers</a> </td></tr> <tr><td height=750> </table> </td><td> <div id=content> <IFRAME name=page src="cofunds designations halifax.htm" onLoad="autoResize('page');" frameborder=0 overflow=no marginwidth=0 marginheight=0></iframe> </div> </td></tr> </table> </body> </html> This seems to work but it has a few issues, It does not resize properly for every link, only some of them. Can somebody please have a look & tell me where I am going wrong, or provide me with some better code, mine is a bit shoddy! Thanks Harry Hi all, I have: Code: var moreinfo =""; moreinfo+= "here some content"; $("#divMoreInfo").html(moreinfo); And this inserts "here some content" in a div called divMoreInfo. Now divMoreInfo is placed inside an iframe while the rest of the programming has to be in the parent page... How do I insert moreinfo's contents in the iframe's div?? Thanks a lot hi all, I really need help with this topic. I have to use onMouseOver to change the content of an iframe. I'm trying to use an array but I'm confused and I'm not really sure if what I'm doing is correct and it doesnt work. I will appreciate your help and understanding. Thanks a lot! here is part of my code.. var frame=new Array(6); frame[0]="page1.html"; frame[1]="page2.html"; frame[2]="page3.html"; frame[3]="page4.html"; frame[4]="page5.html"; frame[5]="page6.html"; var j=0; function nextFrame() { if (j < 5) { j++; document.getElementById(frame).contentDocument=frame[j]; } return; } <span onMouseOver="nextFrame()" > <img name="upperImage" src="something.jpg" width=350 height=250 /></span> <iframe id="frame1" name="frame1" src="" width=350 height=250 frameborder="0"> </iframe> Please let me know if at least I'm in the right track. Thanks Hi all, I want to write i frame content to PDF file.Can any one help me how to do it In my page, I have a main iframe where I want all the content of my links to be loaded. I want the iframe's height to resize according to the content. All the linked pages are in the same domain. I have tried some scripts I found, but nothing has the result I want. The HTML code is: Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>index</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"></div> <div id="nav"> <a href="home.html" target="frame">Home</a> <a href="the_band.html" target="frame">The Band</a> <a href="News.html" target="frame">News</a> <a href="gallery.html" target="frame">Gallery</a> <a href="contact.html" target="frame">Contact</a> </div> <iframe id="frame"></iframe> <div id="footer"></div> </div> </body> </html> The CSS code is: Code: div#container { height: 100%; width: 100%; } div#header { top: 0px; width: 100%; height: 80px; position: fixed; background-color: transparent; text-align: center; } div#nav { font-family: MgSouvenirLight; font-size: 18pt; color: #FF0; top: 120px; width: 100%; height: 40px; position: fixed; text-decoration: none; font-weight: bolder; font-variant: normal; } div#footer { font-family: Arial, Helvetica, sans-serif; font-size: 9px; bottom: 0px; position: fixed; height: 30px; width: 100%; text-align: center; color: #fff; } #frame { position: absolute; top: 200px; bottom: 40px; width: 800px; border: none; left: 120px; height: auto; } a:link { font-family: MgSouvenirLight; font-size: 18pt; color: #FF0; } a:visited { font-family: MgSouvenirLight; font-size: 18pt; color: #FF0; } a:hover { font-family: MgSouvenirLight; font-size: 18pt; font-style: italic; color: #FC0; } I don't know how to make scripts on my own, so I would appreciate any help. Thank you! Hi world I have this code in my page PHP Code: <iframe name="ff1" src="http://playerplus.co.nu/ipp.php" ></iframe> how i copy the result in this iframe to text or to some variable but from iframe not direct from the URL "http://playerplus.co.nu/ipp.php" The project I am working on involves a flash piece that communicates with a iframe. Currently the flash piece just calls on javascript functions. I want the buttons in the flash piece to be able to change the src of the iframe. PHP Code: <script type="text/javascript"> document.getElementById('video').setAttribute('src',address2); function closeVideo() { document.getElementById('video').style.height='0px'; return false; document.getElementById('video').setAttribute('src', address2); } function openVideo() { document.getElementById('video').style.height='391px'; return false; document.getElementById('video').setAttribute('src', address); } </script> So the way the code works now is when the page loads it sets the iframe with the id of 'video' to the variable address2 which it pulls from an XML file. In the flash piece when a button is hit, it calls openVideo() which "opens" the iframe and I want it to change the contents to address. This does not work though. It opens the frame but will not change the src. I've tried a bunch of different things now such as make the flash target the iframe using navigateToURL(request1, 'video'); but in Firefox and IE is opens it stills as if I had _blank in there. It does strangely work in Safari. Any ideas how to get this to work? I'm new to javascript so it could be something basic I'm overlooking Hello folks! I don't know anything about JavaScript but I found a really cool snippet I use a lot. It will randomize images and each image can open a new link. It looks like this: ---------------------------------------------------- <script language="JavaScript" type="text/javascript"> function random_imglink(){ var myimages=new Array() myimages[1]="/img/images1.jpg" myimages[2]="/img/images2.jpg" myimages[3]="/img/images3.jpg" var imagelinks=new Array() imagelinks[1]="http://www.google.com" imagelinks[2]="http://www.yahoo.com" imagelinks[3]="http://www.alexa.com" var ry=Math.floor(Math.random()*myimages.length) if (ry==0) ry=1 document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>') } random_imglink() //--> </script> ------------------------------------------------- Now, my question is, can I link to open a document within an iFrame on my page? Please don't tell me not to use iframes or whatever, I'm not a professional, just want to see if this works. Hey, I've searched around on other forums for an answer to this but I still haven't come across an answer that works. What I want to do is go from page1 (which does not have an Iframe) to page2 (which does have an Iframe) and change the content of that Iframe based on the links clicked on page1. So say I click link1 on page1, I want page2 to show up and for the Iframe to show link1 content. If I click link2 on page1, I want page2 to show up and in the Iframe I want to see link2 content. If there's a javascript code for this that works, I would really appreciate the help. Thanks. Ok, I am aware this will sound like a plug for my script, but please bare with me. I created a bookmarklet script to help me audit extremely large style sheets. Basically while on a site that you would like to audit, you click the bookmarklet and the document's body contents gets remove and replaced with an iframe that points to the current sites home page. From here you can choose what style sheet (the script finds) to begin reporting over. The more pages you browse (through the iframe) the more accurate the report gets. My problem however, is if the person is on the site's home page when first running the script, the iframe never loads up. I think it has to do with the fact that you are on the home page, and then the iframe tries to point to the home page as well and fails for some reason. Is there any solution that comes to mind for anyone out there? You can test it by bookmarking this bookmarklet and running it on any site's home page where style sheets can be found: Get The Bookmarklet on this page Again, it works great if you don't start the script from a sites home page. It's a well documented issue- when you have a page that contains an iframe, and then navigate inside the iframe, hitting the browsers back button will only affect the contents of the iframe and not the entire page. I've been searching all over for solutions and cant find one that works for my current implementation. Anyone have any suggestions? Here is my code: js Code: function ShowPage(frame) { frames[0].location = frame+'.html' frame.contentWindow.location.replace(newUrl); } Buttons that change the contents of the iframe Code: <div id="thumb1"><a onmouseover="ShowPage('frame1')"onclick="ShowPage('frame1')" rel="nofollow" target="mainbox"></a></div> <div id="thumb2"><a onmouseover="ShowPage('frame2')"onclick="ShowPage('frame2')" rel="nofollow" target="mainbox"></a></div> <div id="thumb3"><a onmouseover="ShowPage('frame3')"onclick="ShowPage('frame3')" rel="nofollow" target="mainbox"></a></div> and then the iframe itself Code: <iframe src="frame1.html" type="text/html" style="border-width:0; border-style:hidden;" transparency="true" name="mainbox" frameborder="0" scrolling="no" width="700" height="807"> </iframe> I have two pages A and B. I have a link in the page A. I have two iframes in the page B. In practice, the link in the page A must open the page B and the link's href must open in the second iframe of the page B. Is there any script that does this? Alright straight to the point I have a link on the parent page of my site. <a href="javascript: scontrols.expandit(0)">View Info</a> I would like to be able to some how call that from the iframe. I am just getting into java script and haven't been able to figure it out. thank you for any help you can provide. Hi all, Very new to this but I am trying to automate some webdownloads I need to do daily. I have a link I am trying to click via applescript do javascript I can return the frames html by doing tell application "Safari" do JavaScript "document.getElementById('iframesearch').contentDocument.getElementById('frmAccountList').innerH TML" in document 1 end tell the html returned contains the link link I want to click/fire <span id="SWGrdAccSearch_ctl06_lblAsterix"> </span> <a onclick="javascript:return getDefaultAccount('John Doe','0890','0','0');" id="SWGrdAccSearch_ctl06_lnkAccount" href="javascript:__doPostBack('SWGrdAccSearch $ctl06$lnkAccount','')">123456</a> how can I get his link to launch/fire? Any and all help deeply appreciated. Hello, I want add an onclick link from an iFrame to a form field on the parent. After to ba placed on the form field, clicking on the link a new page will be open on the iframe. I am trying this: Quote: <form name=formName> <iframe name=frameName src="<a href=http://www.google.com onclick="parent.document.forms['formName'].elements['fieldName'].value = 'do you right';" return false;">Click Here To Get Done Right</a> " width="800" height="400" ></iframe><br><br> <input type="text" id="fieldname" size="95" name="t2"> </form> letchev I just cannot get the html to load for each linked button to the Iframe. If I remove the "onclick" command for the backround images, the links load to the Iframe. If I leave the "onclick" command in there only the background changes. So, I would assume there is a conflicting issue with loading the "a href" and the "onclick" commands together. Maybe I need to know how to do multiple "onclick" commands...suggestions? Code: <?xml version="1.0" encoding="UTF-8"?> <!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> <title>Welcome to Whitetail Fantasies</title> <link href="layout.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { font-family:Tahoma, Geneva, sans-serif; background-color: #000; } #background { position:absolute; float:left; width:1024px; height:768px; background-image:url(wf_layout/wf_bkgnd-1.jpg); z-index:0; } </style> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('wf_layout/buttons/home_inv.png','wf_layout/buttons/aboutus_inv.png','wf_layout/buttons/trophies_inv.png','wf_layout/buttons/trailcams_inv.png','wf_layout/buttons/calendar_inv.png','wf_layout/buttons/contact_inv.png')"> <div id="background"></div> <div id="outer"> <div id="header"></div> <div id="wrapper"> <div id="left_side"><br /><br /><br /><br /><br /><br /><br /> <table width="140" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="wf_home.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-1.jpg)'; return false;" onmouseover="MM_swapImage('btn_home','','url(wf_layout/buttons/home_inv.png)',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/home.png" alt="Home button" name="btn_home" width="140" height="42" border="0" id="btn_home" /></a></td> </tr> <tr> <td><a href="wf_aboutus.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-2.jpg)'; return false;" onmouseover="MM_swapImage('btn_aboutut','','wf_layout/buttons/aboutus_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/aboutus.png" alt="About Us Button" name="btn_aboutut" width="140" height="42" border="0" id="btn_aboutut" /></a></td> </tr> <tr> <td><a href="wf_trophies.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-3.jpg)'; return false;" onmouseover="MM_swapImage('btn_trophies','','wf_layout/buttons/trophies_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trophies.png" alt="Trophies button" name="btn_trophies" width="140" height="42" border="0" id="btn_trophies" /></a></td> </tr> <tr> <td><a href="wf_trailcams.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-4.jpg)'; return false;" onmouseover="MM_swapImage('btn_trailcams','','wf_layout/buttons/trailcams_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trailcams.png" alt="Trial Cams Button" name="btn_trailcams" width="140" height="42" border="0" id="btn_trailcams" /></a></td> </tr> <tr> <td><a href="wf_prices.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-5.jpg)'; return false;" onmouseover="MM_swapImage('btn_prices','','wf_layout/buttons/calendar_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/calendar.png" alt="Prices button" name="btn_prices" width="140" height="42" border="0" id="btn_prices" /></a></td> </tr> <tr> <td height="41" align="center" valign="middle"><a href="wf_contact.html" target="_IFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_contact','','wf_layout/buttons/contact_inv.png',1)" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-6.jpg)'; return false;"><img src="wf_layout/buttons/contact.png" alt="contact button" name="btn_contact" width="137" height="41" border="0" id="btn_contact" /></a></td> </tr> <tr> <td> </td> </tr> <tr> <td align="center"><img src="mdclogo.png" alt="mdc_logo" width="120" height="106" border="0" usemap="#Map" /></td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </div> <div id="content_area"> <br /><br /><br /> <iframe name="_IFrame" style="width:800px; height:500px;" src="wf_home.html" frameborder="0" allowtransparency="true"></iframe> </div> iu </div> </div> <div id="footer"></div> <map name="Map" id="Map"> <area shape="poly" coords="0,100" href="#" /> <area shape="poly" coords="58,1,119,97,1,99" href="http://mdc.mo.gov/hunt/" target="_blank" /> </map> </body> </html> Hello codingforums, There are various widgets and plugins that show link preview via tooltip or iframe, So as I am trying to continuously improve web sites experience with new trends and web functionalities - thus it come the task for uniform link preview via div and iframe. This is the script that use attribute id's but for the complete solution it would be required to display link within event 'this' or something -any suggestions and help are very appreciated. Thanks Code: <script type="text/javascript"> function toggleDiv(divid){ var div = document.getElementById(divid); div.style.display = div.style.display == 'block' ? 'none' : 'block'; } </script> <div class="toggle"><a href="javascript:toggleDiv('panel1');" >Toggle Panel 1</a></div> <div id="panel1" class="panel"> <h2>Panel 1</h2> This panel contains text </div> <div class="toggle"><a href="javascript:toggleDiv('panel2');" >Toggle Panel 2</a></div> <div id="panel2" class="panel" style="display:block;"> <h2>Panel 2</h2> This panel contains external url content <iframe src="http://" width="100%" heigth="500"></iframe> </div> <div id="panel1" class="panel"> <h2>Panel 1</h2> This panel starts closed because style='display:none' is defined in the style section of the head </div> <div class="toggle"><a href="javascript:toggleDiv('panel2');" >Toggle Panel 2</a></div> <div id="panel2" class="panel" style="display:block;"> <h2>Panel 1</h2> This panel starts open because of style='display:block' </div> <a href="javascript:toggleDiv('panel1');" >Another Link to Toggle Panel 1</a> [/CODE] Hello Im after a very specific layout for my dropdown menu. Basically 3 menu boxes listed vertically in a table and then an iframe underneath. When a user selects an option in box 1 , i would like a specific list of options to be displayed in box 2 . The options shown in box 2 must be dependent on box 1 i.e. as the box 1 selection changes , so do the box 2 options. Same thing applies with box 3 - when the user changes box 2 , i would like a specific list of options displayed in box 3. Then when a selection is made in box 3 , i want a certain page to load in an iframe below the 3 boxes. If you could also populate each box with some sample data so i can replace it to fit my site as needed by myself :-) So in a nutshell:- User Clicks Box 1 --> Specific Options Appear In Box 2 User Clicks Box 2 --> Specific Options Appear In Box 3 User Makes A Choice In Box 3 --> Specific Page Loads In Iframe Below (Already Got This Bit Figured Out) Help much appreciated on this. I eagerly await a response :-) |