Cloud Weaver Posted December 26, 2007 Share Posted December 26, 2007 Let's see. For a month I have been trying to script an archive page for my webcomic, Gridwork. Using a hash I've got a basic system that should work but... It won't for some reason. Here is a skeleton of the files I'm trying to manipulate.File: Archives.html <html><head><title>Gridwork Archives</title></head><body bgcolor="#000000" text="#FFFFFF"><hr><a href="http://www.freewebs.com/5x5webcomic/Archive.html#0">#0: Lineup</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#1">#1: Let the introductions begin!</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#2">#2: Knighted!</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#3">#3: A little theif.</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#4">#4: Thick as a dwarf.</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#5">#5: Kicked out!</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#6">#6: A grid at last.</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#7">#7: Meet the Heroes</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#8">#8: Enter the Fort</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#9">#9: A bit of history</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#10">#10: A bit of history (2)</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#11">#11: Where is it anyway?</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#12">#12: 'The Coin'</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#13">#13: Enter the fly!</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#14">#14: Freedom!</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#15">#15: Level Seventeen</a><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#16">#16: Bones</a><br></body></html> File: Archive.html#hash <html><head><title>Archives</title></head><body><script type="text/javascript">document.write{"<img src='http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Page" + location.hash + ".jpg' alt='http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Page" + location.hash + ".gif'>"}</script><a href="http://www.freewebs.com/5x5webcomic/Archive.html#0"><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/FirstButton.jpg" /></a><br><script type="text/javascript">var x= location.hash - 1document.write{"<a href='http://www.freewebs.com/5x5webcomic/Archive.html#" + x + "'>"}</script><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Previousbutton.jpg" /></a><br><a href="http://www.freewebs.com/5x5webcomic/Archives.html"><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/ArchivesButton.jpg" /></a><br><script type="text/javascript">var x= location.hash + 1document.write{"<a href='http://www.freewebs.com/5x5webcomic/Archive.html#" + x + "'>"}</script><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Nextbutton.jpg" /></a><br><a href="http://www.freewebs.com/5x5webcomic/Home.html"><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/HomeButton.jpg" /></a></body></html> I need a lot of help filling in everything I don't understand. Also any JavaScript syntax I missed - I'm terrible about thatAlso, did I even put the hash in the right place? Link to comment Share on other sites More sharing options...
Synook Posted December 26, 2007 Share Posted December 26, 2007 The location.hash actually returns the hash part + the actual hash character, so if the page is page.html#hash location.hash = "#hash". So, you have to substr() out the hash. Also, you can't subtract a number from a string, you have to use parseInt(). Oh, and functions use the parenthesis as in write(), not braces <html><head><title>Archives</title></head><body><script type="text/javascript">document.write("<img src='http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Page" + location.hash.substr(1) + ".jpg' alt='http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Page" + location.hash.substr(1) + ".gif'>"}</script><a href="http://www.freewebs.com/5x5webcomic/Archive.html#0"><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/FirstButton.jpg" /></a><br><script type="text/javascript">var x= parseInt(location.hash.substr(1)) - 1document.write("<a href='http://www.freewebs.com/5x5webcomic/Archive.html#" + x + "'>")</script><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Previousbutton.jpg" /></a><br><a href="http://www.freewebs.com/5x5webcomic/Archives.html"><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/ArchivesButton.jpg" /></a><br><script type="text/javascript">var x= parseInt(location.hash.substr(1)) + 1document.write("<a href='http://www.freewebs.com/5x5webcomic/Archive.html#" + x + "'>")</script><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Nextbutton.jpg" /></a><br><a href="http://www.freewebs.com/5x5webcomic/Home.html"><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/HomeButton.jpg" /></a></body></html> Link to comment Share on other sites More sharing options...
Cloud Weaver Posted December 26, 2007 Author Share Posted December 26, 2007 Close... it opens and shows me the buttons but when I click a link from the main archives or input a value by hand Freewebs says it can't find the page. Also, Freewebs won't allow me to edit the file 'Archive.html#hash' for some reason. I have to change it to 'Archive#hash.html' then change it back. Would it be a problem if I left it as 'Archive#hash.html'? Link to comment Share on other sites More sharing options...
Cloud Weaver Posted December 31, 2007 Author Share Posted December 31, 2007 Well, this is only the second time I wrote back for more help after getting some and got no reply. Fortunantly I fixed that other problem (I already forgot what it was) but I still need help with this one. Link to comment Share on other sites More sharing options...
Synook Posted December 31, 2007 Share Posted December 31, 2007 ? The page name is Archive.html, the hash bit has nothing to do with the file name. Ermm... as long as you have a page named Archive.html then there should be no problems. Link to comment Share on other sites More sharing options...
Cloud Weaver Posted December 31, 2007 Author Share Posted December 31, 2007 Alright. Much thanks for the help, this is coming together nicely. It works but I still have two bugs. First, my GIF images just wind up as the text to the link, how do I make the alt appear as an image also? Second, when I click next (or first or previous) the hash of the URL changes but I have to hit refresh for anything else to change. Any suggestions there? Link to comment Share on other sites More sharing options...
Synook Posted December 31, 2007 Share Posted December 31, 2007 First, my GIF images just wind up as the text to the link, how do I make the alt appear as an image also?You can change that to use onerror, e.g.document.write("<img src=\"http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Page" + location.hash.substr(1) + ".jpg\" onerror=\"this.src = 'http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Page" + location.hash.substr(1) + ".gif'\">") Second, when I click next (or first or previous) the hash of the URL changes but I have to hit refresh for anything else to change. Any suggestions there?You can do location.reload() after changing the hash. I think that will work. Link to comment Share on other sites More sharing options...
Cloud Weaver Posted December 31, 2007 Author Share Posted December 31, 2007 Ok, the piece of code there doesn't work. It just attempts to display the JPG... Oh what am I thinking? This whole problem can be avoided simply by saving all my files as GIF... no, this going to get worked out the hard way.Sorry... was I rambling again? Also, all my attempts at a location.reload() function have failed. Here is the current code: <html><head><title>Archives</title></head><body bgcolor="#000000"><script type="text/javascript">document.write("<img src='http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Page" + location.hash.substr(1) + ".jpg' onerror= 'this.src = [url="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Page""]http://i202.photobucket.com/albums/aa293/c...CIII/Page"[/url] + location.hash.substr(1) + ".gif''>")</script><br><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#0"><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/FirstButton.jpg" /></a><script type="text/javascript">var x= parseInt(location.hash.substr(1)) - 1document.write("<a href='http://www.freewebs.com/5x5webcomic/Archive.html#" + x + "'>")</script><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Previousbutton.jpg" /></a><a href="http://www.freewebs.com/5x5webcomic/Archives.html"><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/ArchivesButton.jpg" /></a><script type="text/javascript">var x= parseInt(location.hash.substr(1)) + 1document.write("<a href='http://www.freewebs.com/5x5webcomic/Archive.html#" + x + "'>")</script><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Nextbutton.jpg" /></a><a href="http://www.freewebs.com/5x5webcomic/Home.html"><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/HomeButton.jpg" /></a></body></html> Link to comment Share on other sites More sharing options...
Synook Posted January 1, 2008 Share Posted January 1, 2008 Strings in JavaScript need to be quotation-mark delimited, so you will need to use character escaping ( \" ) on the document.write() statement encompassing the img element with the onerror attribute <html><head><title>Archives</title></head><body bgcolor="#000000"><script type="text/javascript">document.write("<img src='http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Page" + location.hash.substr(1) + ".jpg' onerror=\"this.src = 'http://i202.photobucket.com/albums/aa293/c...CIII/Page" + location.hash.substr(1) + ".gif'\''>")</script><br><br><a href="http://www.freewebs.com/5x5webcomic/Archive.html#0"><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/FirstButton.jpg" /></a><script type="text/javascript">var x= parseInt(location.hash.substr(1)) - 1document.write("<a href='http://www.freewebs.com/5x5webcomic/Archive.html#" + x + "'>")</script><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Previousbutton.jpg" /></a><a href="http://www.freewebs.com/5x5webcomic/Archives.html"><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/ArchivesButton.jpg" /></a><script type="text/javascript">var x= parseInt(location.hash.substr(1)) + 1document.write("<a href='http://www.freewebs.com/5x5webcomic/Archive.html#" + x + "'>")</script><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/Nextbutton.jpg" /></a><a href="http://www.freewebs.com/5x5webcomic/Home.html"><img border="0" src="http://i202.photobucket.com/albums/aa293/cloudweaverWCIII/HomeButton.jpg" /></a></body></html> For the hashing thing, you can try changing the entire location property to "Archive.html#" + the hash string. Link to comment Share on other sites More sharing options...
Cloud Weaver Posted January 4, 2008 Author Share Posted January 4, 2008 Ok, I have solved both problems on my own... Thank you for all of the help. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.