Need help configuring 3 DD scripts on same page - Daily IFrame Content

[1eeyore]

I'm very new to all this, but fairly quick to learn. Please, someone, HELP ME!

I'm working on a website in which I need to place three of the Daily IContent scripts on the same page. I am working with FrontPage 2003. If you would like to take a peek at the page I'm struggling with, it's at http://www.creativeflairdesign.com/OFASAMPLE/index3.htm. This is just a temporary home until I complete the page. I've read all the tutorials about adding more than one script to a page, but the tutorial says nothing about adding more than one of the SAME script to the same page....

I need for the Words from the Pastor, Daily Inspiration and God's Word for Today to change daily. I've figured out how to use one script on the page for the Words from the Pastor, but when I attempted to add the same script to the God's Word for Today section, the script for Word's from the Pastor stopped working.

Can anyone help?

I do design webpages, but DHTML is new to me. Yes, I'm in the stoneages, but I'd love to learn! Please help!

Thank you.

[jscheuer1]

I took a look at your page. I only saw one daily iframe script on it. I guess you put it back to what was working. The real trick with putting two or more of these particular scripts on one page looks to me, at first glance, to make it be one script that does all three things. So, to start, where you have:

var daycontent=new Array()

and underneath you have the pages listed for each day. That code block is an array and contains the 'words from the pastor' pages' names and locations. The array's name is 'daycontent' and is referenced later in the script to display the pages in the iframe. We need to create two more arrays, identical except with different array names and different pages listed. You could use:

var dayinsp=new Array()
dayinsp[1]="daily inspiration monday page goes here"
dayinsp[2]="for tuesday"
...entries for the rest of the week

and:

var daygod=new Array()
daygod[1]="God's Word for Today monday page goes here"
daygod[2]="for tuesday"
...entries for the rest of the week

These two added arrays go after the first one. Then later after where it tells you not to edit we see:

document.write('<iframe id="dynstuff" src="" '+iframeprops+'></iframe>')

This creates the iframe with the id 'dynstuff' and gives it the properties defined in the variable 'iframeprops' from the top of the script. We need two more right after that, like this:

document.write('<br><iframe id="inspstuff" src="" '+iframeprops1+'></iframe>')
document.write('<br><iframe id="godstuff" src="" '+iframeprops2+'></iframe>')

and later still in the code we see:

var iframeobj=document.getElementById? document.getElementById("dynstuff") : document.all.dynstuff
iframeobj.src=daycontent[mytoday]

This code puts the daycontent's array's content for the given day in an iframe with the id 'dynstuff', we need two more of these as well like:

var iframeobj1=document.getElementById? document.getElementById("inspstuff") : document.all.inspstuff
iframeobj1.src=dayinsp[mytoday]

var iframeobj2=document.getElementById? document.getElementById("godstuff") : document.all.godstuff
iframeobj2.src=daygod[mytoday]

Now we are almost finished. We have to go back to the top of the script and create the variables:

var iframeprops1='width=375 height=800 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"'
var iframeprops2='width=375 height=800 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"'

directly below the 'var iframeprops=' statement. Unless you change the properties, the three iframes should be one after the other vertically and of the same dimensions as each other. If you want it different, play with the values in these three iframeprops variable declarations at the top of the script. Further customization is available by altering the three 'document.write' statements to include style positioning and/or additional display code like a title, header or caption for the iframe, style can also be added with separate style declarations in the head of the page that reference each iframes unique id. Just get the script working, we can worry about size, position and titles later if need be.

[1eeyore]

Hi!
Thank you for your reply.
I tried to insert the text and follow your complete instructions step by step, but now the script is causing an error and I'm not sure why.

Could you please look it over and tell me what I'm doing wrong? I'd really like to get this page finished but I won't be able to without getting these scripts figured out. I'm learning a lot and I really appreciate you taking the time to help me.

I'm concerned that once I do get the script working the way I want it, will I be able to position them in the areas on the page that I want to - under the respective headings?

Thank you in advance for your help.

1eeyore

[jscheuer1]

You left a fragment of my instructions in the script code of the html page:

...entries for the rest of the week

it is right above the line - //No need to edit after here

The script parser is choking on that. Take that (...entries for the rest of the week) out, I did locally and it is working here. The next step is to make sure the iframes are each the correct size for their content. The width looks good but 800 is way too high.
This is configured in the three:

var iframeprops=

statements at the beginning of the script.

[jscheuer1]

Just adding onto that last message, I changed the heights to:

var iframeprops='width=375 height=500
var iframeprops1='width=375 height=100
var iframeprops2='width=375 height=100

don't replace the code with the above, just use the height values in the existing code.

That looks good for Sunday (as you have it now), you have to test it out for each day of the week and set each one to the maximum that they will need to be. Or we could write a routine to dynamically resize them according to the day of the week. Hopefully, you only intend to have the same seven messages repeat each week in each category. If not, let me know and I'll see what I can come up with.

As for headers and positioning, that should be a snap, I'm working on it now. I can imagine close to what headers you want (enough to make it easy to configure) but can't be certain of the positioning. My gut tells me that the default positioning you already have should work if the vertical heights are set correctly but, I'm no mind reader.

[jscheuer1]

The more I look at what you have, the more I'm thinking we may have to go with a slightly different technique to get the positioning you want. Where you have:

<P align=center><SPAN 
                        style="FONT-WEIGHT: 700; FONT-VARIANT: small-caps"><I><FONT 
                        face=Verdana color=#ffffff size=2>God's Word For 
                        Today</FONT></I></SPAN></P>

just a little below that where you have:

<center>
<font face="arial, helvetica" size="-2">dd</center></td>

substitute:

<iframe id="godstuff" src="" width=500 height=100 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>

for just the 'dd' part (you may want to adjust the width and height)

and get rid of the lines:

var iframeprops2='width=500 height=800 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"'

and

document.write('<br><iframe id="godstuff" src="" '+iframeprops2+'></iframe>')

from the script.

I think I know where you want the inspiration message to go. If I am right, where you have:

<p align="center">
<img border="0" src="artwork/ATT00029.jpg" width="220" height="158"><br>

Take out whatever portion of that and what follows it that represents the 'inspiration' content and substitute:

<iframe id="inspstuff" src="" width=200 height=200 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>

You may want to adjust the width and height.

get rid of:

var iframeprops1='width=375 height=800 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"'

and:

document.write('<br><iframe id="inspstuff" src="" '+iframeprops1+'></iframe>')

from the script.

Works here, so if you have trouble, let me know.

[1eeyore]

You're the best. Everything seems to be working great here and it all seems so logical after you do it a couple of times in the code. Thank you for helping me. Most wouldn't have taken the time. I really appreciate it!

I'm going to keep this page bookmarked just in case something happens and I need to ask another question.

Again, thank you so much.