PDA

View Full Version : Displaying an image dependent on when another HTML document is modified



sen
Oct 9th, 2005, 05:55 PM
Hi there,

Tried doing a search here but I'm having trouble trying to find out if what I want to do is possible.

First of all, I know -very- little about JavaScript. :o

I have a site that is built with a frameset. What I would like to do is whenever I update a particular frame that contains the main content (ie. a news.html page), have it change a graphic in the navigation bar (ie. a separate .html document) to a glowing animated gif for 7 days. Since the news page doesn't load as the first page within the frameset, it would show that there was something new posted there.

I have a few JavaScript books around, and I -think- I know roughly what needs to be done, but I'm having trouble conjugating scripts.

I think it could be done by checking the date.lastModified against the current date, and if the abs difference was less than 7 days it would display news-anim.gif, else it would display news.gif - however I am not sure how to get the left navframe.html to read the date modified of news.html

Can anyone suggest any solutions (or know of any scripts out there?) or is this more of an issue that should be dealt with using cookies/something else?

Thanks for your time

Alex

Mr J
Oct 10th, 2005, 09:15 PM
With Javascript you would have to manually put the last modified date of the page in the script every time you updated the page, to have a script do it you would probably have to go with server-side such as PHP

sen
Oct 11th, 2005, 06:08 AM
Cheers! Thanks for the feedback Mr J....


Hmm... I really didn't design this in a smart way - I have about 6 different framesets that load six separate side nav frames (all of which have the exact same content). I guess I could change the nav frame link in each frameset so that they accessed the one HTML document and just re-upload that (and modify it to give it an updated lastModified value) eachtime I update the news page.

So otherwise, if I scrapped the idea of having the nav frame read a date.lastModified from the main frame is what I am trying to do feasible with some JavaScript? (I only ask because I have more access to JavaScript books than PHP related books) What would you suggest that I do... set a date for the graphic to expire in the left nav frame (where an appended '-anim' .gif was removed) or something that counts down from the lastModified value of the left nav frame? Is there a smarter way to do it?

I feel really silly asking this kind of question as it would take me about 5 seconds to switch graphics each time I update the page - it's just that I'd forget to switch them back a week after the update.

Thanks again for your time

Alex

Mr J
Oct 11th, 2005, 02:14 PM
Here's something to play around with;

In the nav page



<script type="text/javascript">
<!--

days=7

function lastMod(lastM){

now=new Date().getTime()

if(now > lastM + 1000 * 60 * 60 * 24 * days){
document.mypic.style.display="block"
}

}

//-->
</script>


<img name="mypic" src="glowing.gif" style="display:none">


In the news page



<script type="text/javascript">
<!--

function getLastMod(){
parent.navFrameName.lastMod(new Date(document.lastModified).getTime())
}

// add onload="getLastMod()" to the opening BODY tag

//-->
</script>


Where navFrameName is the name of your nav frame and add onload="getLastMod()" to the opening BODY tag

sen
Oct 11th, 2005, 04:17 PM
Mr J, that's absolutely awesome! Works beautifully :)

I hacked a few things around (which is amazing that it worked, considering my knowledge of this kind of thing)...


<script language="JavaScript" type="text/JavaScript">
<!--

days=7

function lastMod(lastM){
now=new Date().getTime()
if(now > lastM + 1000 * 60 * 60 * 24 * days){
document.newsnavanim.style.display="block"
}
else if(now <= lastM + 1000 * 60 * 60 * 24 * days){
document.newsnav.style.display="block"
}
}

//-->
... and then I added a new TR in the nav frame with a separate graphic for the animated graphic.


<tr>
<td><img name="newsnav" src="news-nav.gif" style="display:none"></td>
</tr>
<tr>
<td><img name="newsnavanim" src="news-nav-anim.gif" style="display:none"></td>
</tr>
Does this seem sensible?

Thanks very much for the guiding hand. Things like this seem so much easier after someone plants an idea of how to approach a problem ;)

sen
Oct 11th, 2005, 05:21 PM
Hmm... after a bit of testing it seems that I might have broken something in my 'modding' of your code...

Would it be wise to replace

document.newsnavanim.style.display="block"
with a (and I'm guessing this next step)...


var news_graphic
var news_graphic_suffix
var news_news

news_graphic = "path\/to\/newsanim"
news_graphic_suffix = ".gif"
new_news = "-anim" // if there is new news, otherwise it would be ""
where the new_news var displays if the
now > lastM is true - the link could be built by concatenating the variables/strings? (with document.write?)

Seriously, I'm speaking in terms I am unfamiliar with, so maybe this sounds really wrong.

Mr J
Oct 11th, 2005, 10:18 PM
Sen.

Re post #5

Your second if statement

if(now <= lastM + 1000 * 60 * 60 * 24 * days){

would not work because the last modified date (lastM) would never be greater than the current date (now)

Re post #6

Declaring those extra variables and concatenating the values is not really necessary and could be deemed as overkill.

I take it that you want to show one image as default (news-nav.gif) and if the news page has been updated then show another image (news-nav-anim.gif)?

Try this out in the nav page



<script type="text/javascript">
<!--

days=7

function lastMod(lm){
now=new Date().getTime()

if(now > lm + 1000 * 60 * 60 * 24 * days){
document.mypic.src="news-nav.gif"
}
else{
document.mypic.src="news-nav-anim.gif"
}

}

//-->
</script>


<tr>
<td>
<img name="mypic" src="news-nav.gif">
</td>
</tr>


To test the script comment out this line

if(now > lm + 10000 * 60 * 60 * 24 * days){

and replace it with this line

if(now > lm + 5000){

this will give you a virtual last modified date plus 10 seconds

sen
Oct 12th, 2005, 10:19 AM
Hi Mr J,

Thanks for all your patience with this.... Here comes some more stupid questions ;)


I take it that you want to show one image as default (news-nav.gif) and if the news page has been updated then show another image (news-nav-anim.gif)?Yes, exactly that.

Maybe I should explain a little more. The news page used to be the first page that loaded within the frameset, but it was requested that a different page loaded first and that the news link in the nav would show if there was new news.

I've just been looking over post #4 & #7 - will the nav frame have any 'knowledge' of the news page's lastMod if another page is loaded into the main frame of the frameset first? Because currently that is what is happening (so I'm guessing that the onload="getLastMod()" tag in news.html is never seen by the nav frame because it is not being loaded).

The reason why I kept mentioning inserting a "-anim" string of text into the link was because the image also has an mouseOver state - so I would be changing a few graphics files if the news page was recently modified.

Phew... Not as easy as I would have pictured ;)

And thanks for explaining why my code wasn't correct (trying to get a future lastMod date) ;)

Mr J
Oct 12th, 2005, 05:04 PM
Ok, here's an idea

Load the news page into a hidden iframe in the nav page and have the iframe onload event call the function

The script will then reference the last modified date and act accordingly

For this example disregard any and all previous scripts.

In the nav page



<script type="text/javascript">
<!--

days=7

function getLastMod(){

now=new Date().getTime()
lastMod=new Date(window.frames["modframe"].document.lastModified).getTime()

if(now > lastMod + 1000 * 60 * 60 * 24 * days){
document.mypic.src="news-nav.gif"
}
else{
document.mypic.src="news-nav-anim.gif"
}

}

//-->
</script>

<img name="mypic" src="news-nav.gif">

Place the iframe at the end of your page

<iframe id="modframe" name="modframe" src="news.html" style="display:none" onload="getLastMod()">
</BODY>
</HTML>


You will not see the iframe because it has been hidden using display:none.
When the iframe has loaded the script is run

sen
Oct 13th, 2005, 04:03 PM
Hey Mr J,

I like the idea of the iframe - I had thought about it, but wasn't sure how to implement it.

Something is still off though, it seems. The image doesnt seem to be switching for the new graphic - I'm wondering if the rollover script I am also using is interfering somehow, I'm not sure why it would be though.

I opened the navframe.html document in Dreamweaver and it warned me that the onload tag is not supported in iframes (in most browsers, IE, Netscape etc), so maybe it's even something there...

If I was to drop the whole idea of getting the date from another document, how hard would it be to have the date read from the navframe (if I edit it and upload it when I update the news page)? Would I just be able to manipulate the line:

lastMod=new Date(window.frames["modframe"].document.lastModified).getTime()to something like this...

lastMod=new Date(this.document.lastModified).getTime()?

As always, thanks for so generously spending your time helping me out :)

Mr J
Oct 13th, 2005, 04:43 PM
Ok sen if your not keen on the onload how about this

A script in news.html checks to see where it is, if it is in the iframe it will run the lastMod script if it is loaded into your main frame it will not

In the nav page



<script type="text/javascript">
<!--

days=7

function getLastMod(){

now=new Date().getTime()
lastMod=new Date(window.frames["modframe"].document.lastModified).getTime()

if(now > lastMod + 10000 * 60 * 60 * 24 * days){
document.mypic.src="news-nav.gif"
}
else{
document.mypic.src="news-nav-anim.gif"
}

}

//-->
</script>


<img name="mypic" src="news-nav.gif">


<iframe id="modframe" name="modframe" src="news.html" style="display:none">


In news.html



<script type="text/javascript">
<!--

function chkParent(){
if(parent.location.href.indexOf("nav.htm")!= -1){
parent.getLastMod()
}
}

// add onload="chkParent()" to the opening BODY tag

//-->
</script>

sen
Oct 13th, 2005, 04:53 PM
Man you reply fast! ;)

I still haven't got it working - but then again it's almost 2am and I've had a really long day. I'll recheck it all tomorrow and see if I can get it to work

Cheers again!

Mr J
Oct 13th, 2005, 06:57 PM
Attached are my test files for you to try out.

Onload in an iframe is still a viable option for use in most current browsers

sen
Oct 19th, 2005, 11:10 AM
Mr J,

Gotta thank you again for this.... Letting you know that I haven't forgotten - I've just had such a terrible week, still haven't had a chance to check out your files.

Will post back when I have a spare moment to modify the page...

sen