|
JavaScript - Dynamic Iframe Resizing! Help Needed!
Similar TutorialsI am trying to dynamically resize an image. Here is my code: Code: <img border="0" src="images/right.gif" width="16" height="100" name="right">
<SCRIPT Language=Javascript>
<!--
function ChangeImgSize(){
right.height = 3000;
}
ChangeImgSize()
//-->
</SCRIPT>
This is on an asp page, and the <script> tag is the last thing on the page before </body> The image does not get resized. I've been testing the page on current browsers (IE 8, Firefox, Chrome). I'm certain I'm doing something newbish, I don't really know Javascript all that well. Thanks in advance, Skip Hi Guys, I have a multi language cms site and need to be able to resize font to fit the div its contained in so eg if I have a 300px wide navbar with 13px text: home | about | contact | services | products and in Russian its: fgfgdg |gghgfdhggghgfhgfh | gfg |gfdgfgdfgfdgffd dgfdgdg | gdfgfgdfgfgdfg I would like the font size to reduce down to fit the 300px fixed width div from say 13px to 10px or whatever fits. so it would be like: fgfgdg |gghgfdhggghgfhgfh | gfg |gfdgfgdfgfdgffd dgfdgdg | gdfgfgdfgfgdfg I was looking at http://jsfiddle.net/e8B9j/2/show/ and was hoping someone could get it to work to suit the above. So as above u'd have say 5 menu item divs nested in a navbar div Code: <div id="navbar"> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> </div> ...or using ul and li's Any help greatly appreciated. Perhaps a jquery solution out there? Thanks Hi folks! Very, very new to Javascript and I'm having a problem. What I'm trying to do is create a page that uses an iframe to show the fullsized image, while using thumbnails at the bottom. I need the iframe to resize depending on the size of the image since some are landscape and others are portrait oriented. I found a script online that did it for the height of the picture so I tried to modify it to do both the width and the height and haven't had much luck. Here's the code, and I apologize in advance for my noob coding. Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Halloween 2009</title>
<script language="JavaScript">
<!--
function calcWidth()
{
//find the width of the internal page
var the_width=
document.getElementById('preview').contentWindow.
document.body.scrollWidth;
//change the width of the iframe
document.getElementById('preview').width=
the_width;
}
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('preview').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('preview').height=
the_height;
}
//-->
</script>
<style type="text/css">
body {background: url(background/bg3.gif); text-align:center}
img {height: 5em; width:5em; display: inline; border: none}
</style>
</head>
<body>
<div style="height: 448px">
<iframe src="Halloween '09 021.jpg" name="preview" id="preview" onLoad="calcWidth();calcHeight();" marginheight="0" marginwidth="0" scrolling="no">
An iframe capable browser is required to view this web site.
</iframe>
</div>
<div id="thumbnails" style="padding-top: 1.5em; width: 40em; text-align: center">
<a href="Ariana.JPG" target="preview"><img src="Ariana.JPG" alt="" /></a>
<a href="Halloween '09 002.jpg" target="preview"><img src="Halloween '09 002.jpg" alt="" /></a>
<a href="Ayesha.jpg" target="preview"><img src="Ayesha.jpg" alt="" /></a>
ETC...
</div>
</body>
</html>
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 I have a master page that has an IFRAME, which we use for resizing. Locally, when we are using our web application within our network, the resizing works perfectly for both Firefox and IE. However, when I access the web application from outside the network the resizing doesn't always work. Most of the time, the offsetheight for the div(container is the name) is not correct, thus I don't see all the results that I need to see in the IFRAME Here is the resizing code below. function resizeTheFrame() { var iframe = document.getElementById('innerFrame'); var containerHeight = document.getElementById('container').offsetHeight; var DefaultPageHeight = 400; if (containerHeight > DefaultPageHeight) { var heightdiff = 100; } else { var heightdiff = DefaultPageHeight - containerHeight; } containerHeight = containerHeight + heightdiff; var counter = parent.top.window.location.href.lastIndexOf("/"); var urlStr = parent.top.window.location.href.substring(0, counter + 1); iframe.src = urlStr + "resizer.htm?height=" + containerHeight; } Hi, I wonder if the following is coded correctly: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var url = "http://www.example.com/";
var content = "<iframe width='800' height='600' frameborder='0' src='" + url + "'><\/iframe>";
document.getElementById("container").innerHTML = content;
</script>
</body>
</html>
Many thanks in advance! Mike Hey. I've been trying to get this page working with dynamically loaded iframe sources passed by URL, but I can't seem to get it working. Here's the relavent code: Code: <script type="text/javascript">
function delineate(str) {
URL = str.indexOf("=") + 1;
return(str.substring(URL))
}
</script>
Then there's a form/submit button that simply return the name of a type of item, for example "german" or "french" Using the form attributes method="link" and action="pageURL.html", where pageURL is the page that all of this is on. Code: <form name="hack"><input type="hidden" name="selector" /></form> <script language="javascript"> var url=window.location; document.hack.selector.value=url; var url_select=document.hack.selector.value; var selectedURL="../types/" +delineate(url_select) +".html"; document.write (selectedURL); frames['middleframe'].location.href=selectedURL; </script> <iframe id="middleframe" name="middleframe" src="../types/default.html" width="100%" scrolling="auto" height="1000" frameborder="0" style="display: inline;" /> I used the hidden form to change the url to text - advice from another website. I'm sure there are better ways to do it, but I'll explore them as soon as this thing actually works.. The types are in a subfolder named types, as shown. The document.write was placed in as a debug helper, and it displays the proper file location of whatever I select with the combo box, but the iframe doesn't change it's src to the selected page! I've tired the last line of the last <script> with several different methods, none of them producing any effect whatsoever. What am I doing incorrectly? Any help? Thanks. Hi I am attempting to integrate two dynamic applications. I have successfully created an iFrame in app A that serves the dynamic pages of app B. This enables me to preserve the site theme of app A. Most of app B's pages successfully display inside the app A iFrame. The problem is, when application B displays a page (inside app A's iFrame parent) clicking on a link inside that page opens that page in another iFrame (child) and I can't see what could be wrong... fresh pair of eyes would be good.... Code: <iframe id="listframe" name=target src="http://www.mysite.com/dynamicpages/"
width="580" height="850" frameborder="0" scrolling="no" >
</iframe>
<script type="text/javascript">
window.onload = function () {
var q = (document.location.search);
document.getElementById('listframe').src += q;
}
</script>
Hi all! Im trying to work out a way of entering the contents of a div (which changes regularly) into a form field when it is focused on. The issue is that the div containing the text value is in an iframe of a php file (gallery.php). The div (#lbBottom) text contents that I need to use is the caption of the current photo open with a light-box style jquery plugin (slimbox). The gallery is formed using the php and needs to be in an iframe to align the lightbox correctly. #lbBottom is generated by title=\"Code: $alttag1\" and give a result of Code: +the current photo number. Ideally it is just the photo number (last 2 characters) that I need but the contents of the div will do! Would appreciate any help or advice anyone can give loads! As you will see with the mywrite function, im getting a bit tangled! GAME HTML Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
function mywrite() {
$.get("gallery.php", function(data){
//alert("Data Loaded: " + data);
document.getElementById('#lbBottom').text = myVar;
var addanswer = data;
});
document.quiz.q1.value.focus();
document.quiz.q1.value = addanswer
alert("done");
}
</script>
</head>
<body>
<div id="leftcol">
<form id="quiz" name="quiz">
<p><label for="q1"><img src="images/q1.jpg" alt="Question1"/><span class="photoquestion">1.</span></label><input id="q1" type="text" value="" onfocus="mywrite()" name="q1" /></p>
<p><label for="q2"><span>2.</span>We’ll go that extra mile!</label><input id="q2" type="text" onfocus="mywrite()" value="" name="q2" /></p>
<p><label for="q3"><span>3.</span>Question 3</label><input id="q3" onfocus="mywrite()" type="text" value="" name="q3"/></p>
<p><label for="q4"><img src="images/q4.jpg" alt="Question4"/><span class="photoquestion">4.</span></label><input id="q4" onfocus="mywrite()" type="text" value="" name="q4"/></p>
<input class="submit" type="submit" name="submit" value="Check Answers" />
</form>
</div>
<iframe id="gallery_cont" src="gallery.php" name="iframe" scrolling="no">
</iframe>
</body>
</html>
GALLERY PHP PHP Code: <!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> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/lightbox.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="gallery"> <?php $cleanup = array(".jpg", ".","_"); $dir1 = "./adverts/"; $imageset1 = opendir($dir1); while(false != ($file1 = readdir($imageset1))) { if(($file1 != ".") and ($file1 != "..") and ($file1 != ".DS_Store") and ($file1 != "thumbs")) { $alttag1 = str_replace($cleanup," ",$file1); echo("<a href=\"./adverts/$file1\" title=\"Code: $alttag1\" rel=\"lightbox-group\" ><img src=\"./adverts/thumbs/$file1\" alt=\"$alttag1\" /></a>\n"); } } ?> </div> </body> </html> HI all , I need to embed videos at runtime using iframe tags , currently am opening them, using urls at runtime using the below javascript...how do i modify the function to embed the iframe in the new window at runtime?? iframe tag eg: iframe width="560" height="315" src="http://www.youtube.com/embed/bx2rhzcIVxo" frameborder="0" allowfullscreen></iframe> Calling point: <body> <form id="form1" runat="server"> <!--A HREF="javascript:makeFrame('http://youtu.be/WPgpb7e7YCA')">Open the Popup Window</A>--> <A HREF="javascriptopUp('http://youtu.be/WPgpb7e7YCA')">Open the Popup Window</A> </form> </body> javascript function: <script type="text/javascript"> <!-- Idea by: Nic Wolfe --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin function popUp(URL) { day = new Date(); id = day.getTime(); eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=420,height=315,left = 430,top = 242.5');"); } Disclaimer 1: I am not a programmer, just a curious designer, so please take that into consideration in your replies. Disclaimer 2: Despite all advices against it, I couldn't find a better solution to my website than using iFrame Disclaimer 3: Before asking for help, I researched *several* forums and although I found people discussing similar issues, I was not successful at adapting their solutions to my needs. Gentlemen, I need your help implementing a method to intercept and redirect external links to a dynamic iframe. By "dynamic" iframe I mean an iframe whose SRC would be filled up in accordance to the external URL being intercepted and that it would resize its HEIGHT accordingly in order to avoid scroll bars. The function for resizing the iframe id="child" is already correctly implemented like so: Code: <script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('child').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('child').height=
the_height;
}
//-->
</script>
and the call Code: <iframe src="/main/index.php" width="100%" onLoad="calcHeight();" height="1" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" id="child"> This what I have going on: - index.html => contains some content and the iframe id="child" - childpage1[...N].php => several PHP pages which I do not want to show up outside of the parent "index.html". These pages use clean URLs from CMS such as "http://mydomain.com/pages/this-is-a-child-page/" Users might click on external links from search engines, for instance, about an specific page such as "http://mydomain.com/pages/this-is-child-page-7/" which obviously would load the page "orphaned", outside "index.html" and that is exactly what I am trying to avoid. Based on what I have researched so far, the best way (please, correct me if I'm wrong) to deal with this would be implementing a test condition on the header of the PHP child pages to verify if they are on "top" or not (if they are already inside the "parent" object "index.html"). If FALSE, the page would load normally, if TRUE, a variable should be created to store the URL of the requested page and passed through the link to the page "index.html" which would be immediately called. In "index.html" there would be a script to collect the variable sent through the link (something like "http://mydomain.com/?var=http://mydomain.com/pages/this-is-child-page-7/") and break the text string apart, store a portion of PATHNAME (in this case, "/pages/this-is-child-page-7/) and use it to replace the current SRC of iframe id="child". Probably, there would have to be another testing function in this script to compare the variable passed from the "orphaned" PHP page against the current value of SRC in iframe id="child" to determine if any action is actually required. This "replacement" function would be called onLoad and if tested true would run and refresh the page with the proper value in the iframe SRC. All this should be accomplished while still making the iframe HEIGHT dynamically adjustable and show a "clean" URL in the browser, such as "http://mydomain.com". The potential issues I foresee is an infinite loop due to two onLoad queries (one for SRC, another for HEIGHT) in the parent and child objects, which might required a merge into a single script. As you can tell, I have an idea of what needs to be done but not a clue on how to get it done. Any help would be greatly appreciated. Thanks, Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Parent iframe Script: Code: <script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. Ok, told you I'd be asking lots of questions ... Code: <div id="resizetest" style="width:200px;height:200px;border:2px solid blue">
<div style="background:#000033">
<a href="#" style="float:right;background:#ffffff" onclick='document.getElementById("resizetest").height="50";'>_</a>
</div>
This is a resize test
</div>
Why doesn't this resize? I've looked at examples, and I don't see what's wrong. I'm coding my new website, and to save bandwidth, i'm letting users link to their own avatars, so I want to resize any images over 150px wide so it doesn't mess up my layout - simple, right? Well, you'd think so, but I don't know any javascript, so i've scrapped this together with what little I know: Code: var obj=document.getElementsByTagName("img");
for(var i=0;i<obj.length;i++){
if(obj[i].className == "avatar") {
if(getElementWidth(obj[i]) > 150) {
obj[i].style.width = 150;
}
}
}
Can anyone help me fix that or code me a new one please? I need it to check all elements (well, images - but only images will be using it) for a width of over 150px, and, if it is - change it to 150px I know it's pretty simple but it's hurting my head! :P Thanks in advance -Alux |
|||||||