NEILPH
asked on
how to build iframe url from javascript variable
As shown in the code below, I'm using javascript date() to populate an iframe with a different page every day.
My javascript successfully produces var fday e.g. special_today/12.html on the 12th of the month.
However, I can't get my syntax right inserting this into the iframe. For example I've tried src = + fday + and src=&fday.
BTW this iframe works fine when I hard code the url.
My javascript successfully produces var fday e.g. special_today/12.html on the 12th of the month.
However, I can't get my syntax right inserting this into the iframe. For example I've tried src = + fday + and src=&fday.
BTW this iframe works fine when I hard code the url.
<script type="text/javascript">
<!--
var currentTime = new Date()
var day = currentTime.getDate()
var fday = 'special_today/' + day + '.html'
//-->
</script>
<iframe id="feat1" src = + fday + width="294" height="70" scrolling="no" frameborder="0" margin-top:0px marginwidth="0" marginheight="10" style="visibility:hidden;" onload="document.getElementById('feat1').style.visibility = 'visible';">
<p>Your browser does not support iframes.</p></iframe>
ASKER
Thanks. That works.
However, your avoidance of div\visibility in the iframe causes me a different problem.
My parent page and frames both have a "yellow" <body bgcolor="#ffcc00"> background.
If I don't use style="visibility:hidden;" onload="document.getElemen tById('fea t1').style .visibilit y = 'visible';"> I get an ugly white space in the frame before the child page loads.
I've demonstrated this for you at http://www.newsknife.com/test.html The left frame uses your code. The right frame uses the visibility routine.
If you look at our home page http://www.newsknife.com you'll see this will be a significant problem.
What's the problem using div\visibility?
However, your avoidance of div\visibility in the iframe causes me a different problem.
My parent page and frames both have a "yellow" <body bgcolor="#ffcc00"> background.
If I don't use style="visibility:hidden;"
I've demonstrated this for you at http://www.newsknife.com/test.html The left frame uses your code. The right frame uses the visibility routine.
If you look at our home page http://www.newsknife.com you'll see this will be a significant problem.
What's the problem using div\visibility?
ASKER
I meant The top frame uses your code. The bottom frame uses the visibility routine.
You can use the visibility as well if you like. Depends on how long the frame takes to load really. Just set the style sheet class change in the javascript load method when everything else is done.
ASKER
I'm sorry. You're going beyond my javascript knowledge when you say "Just set the style sheet class change in the javascript load method when everything else is done."
I've added visibility to your code (see below) but now the visibility hidden\visible no longer works.
Without the visibility working the iframe does look awful waiting to load, e.g. at http://www.newsknife.com/test.html
I've added visibility to your code (see below) but now the visibility hidden\visible no longer works.
Without the visibility working the iframe does look awful waiting to load, e.g. at http://www.newsknife.com/test.html
<body bgcolor="#ffcc00">
<script type="text/javascript">
function load()
{
var currentTime = new Date()
var day = currentTime.getDate()
var fday = day + '.html'
document.getElementById('feat1').src = fday;
}
window.onload = load;
</script>
<iframe id="feat1" width="294" height="70" scrolling="no" frameborder="0" margin-top:0px marginwidth="0" marginheight="10" style="visibility:hidden;" onload="document.getElementById('feat1').style.visibility = 'visible';">
<p>Your browser does not support iframes.</p></iframe>
Here. Problem solved
<script>
document.write('<iframe id="feat1" src="'+new Date.getDate()+'.html" width="294" height="70" scrolling="no" frameborder="0" margin-top:0px marginwidth="0" marginheight="10" style="visibility:hidden;"
onload="document.getElementById('feat1').style.visibility = 'visible';"></iframe>')
</script>
If you want to NOT see the iframe at all until loaded (also you could more all the styling into the style tag:
<script>
document.write('<iframe id="feat1" src="'+new Date.getDate()+'.html" width="294" height="70" scrolling="no" frameborder="0" marginwidth="0" marginheight="10" style="display:none; margin-top:0px"
onload="document.getElementById('feat1').style.display='';"></iframe>')
</script>
ASKER
I can't get either of your above to work in IE8 or Firefox. Absolutely nothing happens, including no iframe space in the parent page.
I've tried variations [see below] to try to see if the problem is in the date syntax or layout syntax.
- avoid putting the getDate() inline,
- change Date.getDate() to currentTime.getDate(),
- not use dates
- change style.visibility = 'visible' to style.visibility:visible
It beats me.
I've tried variations [see below] to try to see if the problem is in the date syntax or layout syntax.
- avoid putting the getDate() inline,
- change Date.getDate() to currentTime.getDate(),
- not use dates
- change style.visibility = 'visible' to style.visibility:visible
It beats me.
Version: date variable preset...
<script>
var currentTime = new Date()
var day = currentTime.getDate()
var fday = 'todays_specials/' + day + '.html'
document.write('<iframe id="feat3" src="'+ fday +'.html" width="294" height="70" scrolling="no" frameborder="0" margin-top:0px marginwidth="0" marginheight="10" style="visibility:hidden;"
onload="document.getElementById('feat3').style.visibility = 'visible';"><p>Your browser does not support iframes.</p></iframe>')
</script>
Version: inline date variable changed to currentTime
<script>
document.write('<iframe id="feat3" src="todays_specials/'+new currentTime.getDate()+'.html" width="294" height="70" scrolling="no" frameborder="0" marginwidth="0" marginheight="10" style="display:none; margin-top:0px"
onload="document.getElementById('feat3').style.display='';"><p>Your browser does not support iframes.</p></iframe>')
</script>
Version: change visible syntax at end, and not using dates
<script>
document.write('<iframe id="feat3" src="browser_test2.html" width="294" height="70" scrolling="no" frameborder="0" margin-top:0px marginwidth="0" marginheight="10" style="visibility:hidden;"
onload="document.getElementById('feat3').style.visibility:visible;"></iframe>')
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Brilliant. Thanks mplungjan.
Try using the window.load method. In your case the solution would be as follows...
<script type="text/javascript">
function load()
{
var currentTime = new Date()
var day = currentTime.getDate()
var fday = 'special_today/' + day + '.html'
document.getElementById('f
}
window.onload = load;
</script>
<iframe id="feat1" width="294" height="70" scrolling="no" frameborder="0" margin-top:0px marginwidth="0" marginheight="10">
<p>Your browser does not support iframes.</p></iframe>