Need some javascript help

[C.w.]

Hello. My comic is... different. Take today's comic for example. Katie Gibbons is connected to both her diary, and the Boogeyman. The diary went up a while ago, but the Boogeyman doesn't go up until the end of the month. Uploading 2 files every monday/friday doesn't really appeal to me (I get the comics done in month long batches and upload them all at once so if I don't get to it, no big deal. Having to upload every monday/friday sort of undermines that.)

I would really like to be able to hide the connections until they are needed. Normally, this seems like the perfect place for some sort of server side scripting - but unless I'm mistaken, CG allows no such thing, leaving me stuck with java. I'm no good with it - java is just one of those thing's I've never gotten around to learning. The script seems like it should be simple enough - input variable of when the thing shows up, check the date against it, and have it hide or show accordingly. The implementation is where I'm having trouble though.

If you have any tips or ticks on how to implement such a thing, or if you know of a tutorial that would show how to do something similar, I'd appreciate it immensely.

Thank you.

[Faub]

You can hide onscreen links easily with javascript. Problem is, you can't hide the javascript if people start looking for it.

http://www.w3schools.com/js/js_obj_date.asp

Code: Select all

<script type="text/javascript">
<!--
var linkDate = new Date();
linkDate.setFullYear( 7,14,2006 );
var today = new Date();
if( today >= linkDate ) {
  document.write( "<a href\"/d/20060714.html\">This is my link</a>" );
}
//-->
</script>

[BKR]

Javascript (and for the record, don't say Java since it and Javascript are completely different things) is entirely client side, so "hiding" anything is impossible. Even using the date functions can be bypassed by just changing the date on the viewer's computer.

As such, the only real way to do it is to use a server script. Javascript itself can not even detect if an image exists or not. It sort of can, but it's really only for alternate images when an image loads, and isn't that useful at all. However, since you have autokeen here, the comics can be hidden until it's autoupdated.

So, assuming that the user's date on their computer is right, faub's code will work. Preferably, there would be an external php script somewhere that will return a javascript file containing that server's current date, but I don't know of any.

Edit (again): I don't know much about this, but it seems like http://en.wikipedia.org/wiki/XMLHttpRequest could very well be an answer to the client vs. server date problem. Since autokeen records the date of the last update, using the above you might be able to read that date from your rss.xml file using javascript.

[Gengar003]

You could hide the code from people who look by doing something like this...

Wherever you want your time-delayed links to show up...

Code: Select all

<script language="javascript" src="/workspace/blocked/links.txt"></script>

In the /blocked/ directory, stick a .htaccess file that prohibits all access. See wikipedia and google.

In links.txt, have code like faub's.

The CG server should still be able to access and cause the javascript to run, but users viewing the source of your page will only see the <script source....> code block, and trying to view "links.txt" will not work, because the directory in which it resides is protected by the .htaccess file...

You may need different <script src...> blocks and different *.txt files for different days.

If that wasn't clear, let me know.

[C.w.]

Thank you very much.

Hiding the javascript in the source (sorry, I have a tendancy to just say java when referring to either and letting the context keep them seperate) isn't too important to me, just hidden to the casual viewer so I don't incur copious 404 errors on an unsuspecting public (as if people actually read it.)

Right now I'm trying to work out some code to read the date from the rss.xml file, so I don't have to worry about people's clocks being off (remembering the time mine was off by a few years for a while). but I might just wind up scrapping that and going with faub's code plus a few checks to make sure the clock's date makes sense - every solution I've read so far for parsing xml via JS is fairly nasty for the tiny amount of code I'd need otherwise.

[BKR]

I started working on this when I got home today. I'm not entirely sure if this "really" works, since my browsers have a tendency to tell me that it does and then randomly say later that it doesn't. Regardless, I'll go on and explain it in case it does.


Anyway, I have an example up on my site: http://jarcuum.comicgenesis.com/rss_test/sample.html (not much to see there really). Download that file along with the files http://jarcuum.comicgenesis.com/rss_test/rss_read.js http://jarcuum.comicgenesis.com/rss_tes ... e_parse.js and http://jarcuum.comicgenesis.com/rss_test/rss.xml (just a sample one, you can use your own).

In the sample.html file, in the <head> section we have:

Code: Select all

<script src="rss_read.js"></script>

This reads the rss date information, and then puts it into a string called rss_date_string.

Then, somewhere in the <body> tag we have:

Code: Select all

<script src="rss_date_parse.js"></script>

which parses the date string into three numbers: rss_day, rss_month, and rss_year. I'm sure these don't need explanation.

After that, we put those variables to use, for example:

Code: Select all

<script type="text/javascript">
	if (rss_year == 2005)
	{
		document.write(rss_year+"/"+rss_month+"/"+rss_day);
	}
	else
	{
		document.write(rss_year+"/"+rss_month+"/"+rss_day);
		document.write("\nI like tea.");
	}

</script>

I'll try to explain how this works, even though I don't have a great understanding of the api myself, since learning how this works will be important for debugging later if anything should crop up.

Now, rss_date_parse.js is pretty straight forward, when it starts, rss_date_string is set to something like "Mon, 7 Jul 2006 11:44:09 PDT", so to get the day, you take the 5th position (6th letter in the string) and the next one to get the string "7 ", and then use parseInt(string) to change that to 7 (the number). Likewise you do the same for 2006, and the month name, except for the month you have to do it with a lot of case work. Personally though I'm very suspicious of the parseInt() function since lately I was using it and it gave me an unexpected bug at the last minute that I had to fix.

rss_read.js is more complicated. The first part: if (window.ActiveXObject) is how it's done with IE, and the second if part is how it's done with Mozilla browsers (firefox and netscape for example). This should be enough, but it may not work with Opera. Opera 7.60 does work with this from what I'm told, as such, you may want to add something into that alert box to say a bit more. As for other browsers, I have no idea. That first part though is a bit boring since it's just how each browser handles loading xml information. Now, to get the actual date from the file, in getmessage() the method getElementsByTagName("pubDate") is used. The [0] after it refers to the first instance of "pubDate" in the xml file. If you used something like "description" then you would get the first description in the file, while [1] would get the second (the one that has the number of comics after it).

I hope this works for you, but I don't know how much use it will be.

Edit: Seems to work fine in IE, but in firefox, it may require a page refresh. You may be able to get around this if the rss_read.js script is loaded on most of your pages (regardless if it's needed or not). If it's placed in the index.html or in other highly traversed parts of your site, it should be ok. Otherwise, you can do a check to see if the variable rss_date_string is defined or not. If it isn't then when the page is refreshed then it should work.

[C.w.]

Well, I think I've figured it out. It's still nastier than I would have liked, but it'll have to do. The crux of it is up at http://cwcomics.comicgenesis.com/check.html. It uses the raw_date and todays_truedate tags. It has to do most of the nasty parsing of BKR's XML version, but gets by without the difficult business of getting the string from the XML. I'll warn you, it's really quick and dirty - I was pretty much learning JS syntax and such as I wrote it.

As for shoving it into the pages, I think I'll put a little script in the head which calls this one, and have it write a {display: none} in the css for a div i'll wrap around the entry - that way if the script fails it fails into showing the entry, instead of not.

If you have any suggestions, please to post them. I'm sure the entire thing could use a bit of cleaning up, not to mention there's probably an even simpler way to do it.

[C.w.]

I think I have it working now, and it should apply to all the comics that I have up so far on the next update. Thanks for the help everyone. If anyone needs similar code, feel free to grab it from the site, or ask and I'll email it or whatever.

Thank you very much y'all!