Drop-Down Link Center with lowest maintinance possible

June 10th, 2005, 6:01 am

I want to make a drop down list for my sprite comic website (mariomics.[banned domain]) that will be posted on every comic page and will allow for a quick jump to every comic on the site. However, once I add a new comic to the site, I have to update every other page on the site to include the new comic in the drop-down list. This will start to become a hassle, so I was wondering if I could be able to quickly update the code once, and every other will change dynamically to match it. I cannot use PHP, CGI, or SSI unfortunately. Here is the code for the drop down list:

Code: [ Download ] [ Select ]

<FORM>
     <div align="center">
      <SELECT WIDTH=20 onChange="JumpToIt(this)">
       <OPTION value="None">Select a Comic
       <option value="None">~~~~~~~~~~~~~~
       <OPTION VALUE="http://mariomics.t35.com/comic1.htm">1 - Life is
       Boring
       <OPTION VALUE="http://mariomics.t35.com/comic2.htm">2 - I can't
       Believe it isn't Irony
       <OPTION VALUE="http://mariomics.t35.com/comic3.htm">3 - First of
       Firsts
      </SELECT>
     </div>
    </FORM>

1. <FORM>
2.      <div align="center">
3.       <SELECT WIDTH=20 onChange="JumpToIt(this)">
4.        <OPTION value="None">Select a Comic
5.        <option value="None">~~~~~~~~~~~~~~
6.        <OPTION VALUE="http://mariomics.t35.com/comic1.htm">1 - Life is
7.        Boring
8.        <OPTION VALUE="http://mariomics.t35.com/comic2.htm">2 - I can't
9.        Believe it isn't Irony
10.        <OPTION VALUE="http://mariomics.t35.com/comic3.htm">3 - First of
11.        Firsts
12.       </SELECT>
13.      </div>
14.     </FORM>

Here is the code for the function:

Code: [ Download ] [ Select ]

function JumpToIt(list) {
  var newPage = list.options[list.selectedIndex].value
  if (newPage != "None") {
    location.href=newPage
  }
}

1. function JumpToIt(list) {
2.   var newPage = list.options[list.selectedIndex].value
3.   if (newPage != "None") {
4.     location.href=newPage
5.   }
6. }

June 10th, 2005, 9:43 am

html for all practical purposes is is a primitive system. I doubt anything like what you want can be easily accomplished. What I did for something like this, was instead of making a sperate html page for your comics, just make one page. Then, depending on what link a user clicks, a different image(or however you do your comics) will load.
this way, you just add it once and its done cause its all already on one page =)

*NOTE* this is using asp


ASP:

Code: [ Download ] [ Select ]

<%
DIM strpage
strpage = Request.QueryString("page")
%>

1. <%
2. DIM strpage
3. strpage = Request.QueryString("page")
4. %>

your links:

Code: [ Download ] [ Select ]

  <a href='comics.asp?page=images/comic1' class='xmItm'>Comic 1</a>
  <a href='comics.asp?page=images/comic2' class='xmItm'>Comic 2</a>
  <a href='comics.asp?page=images/comic3' class='xmItm'>Comic 3</a>

2.   <a href='comics.asp?page=images/comic1' class='xmItm'>Comic 1</a>
3.   <a href='comics.asp?page=images/comic2' class='xmItm'>Comic 2</a>
4.   <a href='comics.asp?page=images/comic3' class='xmItm'>Comic 3</a>

the image:

Code: [ Download ] [ Select ]

<img src="<%=strpage%>" width="600" height="400" border="1" alt="comic">

this is just something I threw together real fast, so don't just paste it and expect it to work


*add: or http://www.ozzu.com/ftopic45758.html

June 10th, 2005, 1:29 pm

Or you can use php... place the drop down menu into it's own file. In my example the file name is dropdownmenu.txt

Code: [ Download ] [ Select ]

<?PHP
  include("/directory/of/file/dropdownmenu.txt");
?>

1. <?PHP
2.   include("/directory/of/file/dropdownmenu.txt");
3. ?>

edit- my bad, skipped over the part that said he couldn't use php

June 10th, 2005, 5:15 pm

flashstorm mentioned that he couldn't use PHP, and HTML alone isn't nearly so feeble as all that. Three basic HTML solutions spring to mind:

• As Dr Lang said, use only one page. Use the <select> control to swap comics by changing the src attribute of the img element displaying the comic. This seems like the most elegant approach.
• Put the select control in its own file. Include that file in all webpages that want a copy of the control. HTML is entirely capable of doing such things without PHP, thank you. You could
  • Put the control inside an <iframe>. The very purpose of an iframe is to embed the contents of a second HTML file within a main HTML file. In this case you'd need to adjust your jumpTo function to reference the correct window.location object.
  • Construct a simple JavaScript function that used document.write to insert the source for the select control. Put that function in a separate script file. In this case, no iframe is necessary. You can include the script file within, say, a table cell.

June 11th, 2005, 6:01 pm

I like the one page idea, but two problems:

1. Specifically, how would I do that in pure HTML/JS?
2. How would I code a link to open the page with a specific comic loaded?

June 11th, 2005, 6:13 pm

It would probably take a bit of rewriting on your part, and even though the idea may be much more elegant, it will completely fail on browsers that do not have Javascript enabled, i.e. search engines.

Your best bet would be to get a server-side language and use it to include. The iframe idea would still mess up some search engines, although not as much.

However, if you intend to pursue the one page idea, here is an idea:

1. First we need to have the image that will hold the comic!

Code: [ Download ] [ Select ]

<img src="default.jpg" alt="" title="" name="comicImg" />

2. Now, we need the Javascript!

Code: [ Download ] [ Select ]

var comicImg = document.images["comicImg"];

function swapComic(newimg)
{
  comicImg.src = newimg;
  comicImg.alt = newimg;
  comicImg.title = newimg;
}

1. var comicImg = document.images["comicImg"];
3. function swapComic(newimg)
4. {
5.   comicImg.src = newimg;
6.   comicImg.alt = newimg;
7.   comicImg.title = newimg;
8. }

Whenever you want to swap images with a link or with the menu, just call swapComic.

3. How do we do this with the URL? Well, put this function in <body onload>:

Code: [ Download ] [ Select ]

var urlVar = "comic";

function checkUrl()
{
  var queryString = window.location.href.split("?")[1];
  var queries = queryString.split("&");

  for (var i = 0;i < queries.length;i++)
  {
   splitQuery = queries[i].split("=");
   if (splitQuery[0] == urlVar)
   {
     swapComic(splitQuery[1]);
     break;
   }
  }
}

1. var urlVar = "comic";
3. function checkUrl()
4. {
5.   var queryString = window.location.href.split("?")[1];
6.   var queries = queryString.split("&");
8.   for (var i = 0;i < queries.length;i++)
9.   {
10.    splitQuery = queries[i].split("=");
11.    if (splitQuery[0] == urlVar)
12.    {
13.      swapComic(splitQuery[1]);
14.      break;
15.    }
16.   }
17. }

in which case you set urlVar to be what you need and then call the page like:

myPage.html?comic=newimg.jpg

where "comic" can be changed to whatever urlVar is set.

This is a really quick writeup and may have a few bugs in it and will not check if the user chooses a valid image or whatnot, but it should give you a general idea.

June 11th, 2005, 6:30 pm

Thanks for the code, but I can't understand the complicated javascript. If you have the time, could you quickly explain how the code works?

If you don't have the time though, I understand.

June 11th, 2005, 7:03 pm

Sure,

The first step is just to create the image tag. Note it's important that its name is comicImg.

The second part has the variable comicImg with points to the image tag you wrote in part 1. This is important because if you change the name of the image tag, you only have to change the name in document.images["newName"]

The function just takes a URL as a parameter and changes the src, alt, and title attributes of the comicImg.

The third part just takes the current URL, uses a bunch of splits and stuff to parse the URL and if there is a page, retrieves it and calls swapImg with that new url.

June 11th, 2005, 7:50 pm

Ok, just two more questions.

1. Where do I insert and call the function in the third part, and will it allow me to quickly write http://mariomics.[banned domain]/comic.htm?comic4.png to open the page with the fourth comic pre-inserted?

2. Will it be possible to change the image with a "Previous" and "Next" comic, that dynamicly change to whichever image is currently active? (for example: if comic4.png is active, the next button will change the image to comic4.png, but if comic5.png is active than the next button will change the image to comic6.png.

June 11th, 2005, 8:35 pm

You will use something like this:

http://mariomics.[banned domain]/comic.html?comic=comic4.png

Have the function in your <script></script> tags in your <head> section. Call the function like this:

Code: [ Download ] [ Select ]

<body onload="checkUrl();">

Calling it on onload will insure the image will be loaded, or you could even call it in onload event of the image itself.

As to your second question, it would be a bit more difficult. You could get the number from the end of the file and increase it/decrease it, but then you would have to detect if the comic you're at is the last one.

You could also cache the images you need beforehand with either Javascript or the <link /> tag. If you want to go that route, reply back.

June 12th, 2005, 7:17 am

I'l do whichever way is easiest please.

June 12th, 2005, 8:12 am

I have this code written, but the second image is broken. Why?

Code: [ Download ] [ Select ]

<html>
<head>
<title>Issue #2: I can't Believe it isn't Irony!</title>
<script language="JavaScript">
var urlVar = "comic";

function checkUrl()
{
  var queryString = window.location.href.split("?")[1];
  var queries = queryString.split("&");

  for (var i = 0;i < queries.length;i++)
  {
   splitQuery = queries[i].split("=");
   if (splitQuery[0] == urlVar)
   {
     swapComic(splitQuery[1]);
     break;
   }
  }
}

var comicImg = document.images["comicImg"];
var currentImg = "comic1.png"
function swapComic(newimg)
{
  currentImg = newimg;
  comicImg.src = newimg;
  comicImg.alt = newimg;
  comicImg.title = newimg;
}

var nextComic
var comicNum
function goNext()
{
if (currentImg == "comic4.png")
{
  return;
}
  currentImg - "comic" - ".png";
  currentImg ++;
  comicNum = currentImg
  currentImg = "comic" + comicNum + ".png";
  swapComic(currentImg);
}

var prevComic
function goPrev()
{
if (currentImg == "comic1.png")
{
  return;
}
  currentImg - "comic" - ".png";
  currentImg --;
  currentImg = "comic" + currentImg + ".png";
  swapComic(currentImg);
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body link="#FF3333" onload="checkUrl();">
<center>
 <table width="800" border="0">
  <tr bordercolor="#FFFFFF">
   <td colspan="3"> <center>
     <img src="media/image-map.gif" width="800" height="120" border="0" usemap="#Map">
    </center>
    <map name="Map">
     <area shape="rect" coords="110,88,175,112" href="index.htm">
     <area shape="rect" coords="225,86,309,116" href="archive.htm">
     <area shape="rect" coords="357,84,434,114" href="credit.htm">
     <area shape="rect" coords="483,87,603,116" href="contact.htm">
     <area shape="rect" coords="658,82,729,119" href="extra.htm">
    </map></td>
  </tr>
  <tr bordercolor="#FFFFFF">
   <td height="49" colspan="3"> <center>
     <h1><img src="comic1.png" alt="" title="" name="comicImg" /></h1>
    </center></td>
  </tr>
  <tr bordercolor="#FFFFFF">
   <td width="86" height="31" valign="top"><form name="form2" method="post" action="">
     <input type="button" name="Submit2" value="&lt; Previous" onClick="goPrev()">
    </form></td>
   <td width="650" valign="top"> </td>
   <td width="56" valign="top"><div align="right">
     <form name="form1" method="post" action="">
      <input type="button" name="Button" value="Next &gt;" onClick="goNext();">
     </form>
    </div></td>
  </tr>
 </table>
 <script language="JavaScript">
 swapComic("comic1.png");
 </script>
 <p><font face="Arial, Helvetica, sans-serif"></font> </p>
</center>
</body>
</html>

1. <html>
2. <head>
3. <title>Issue #2: I can't Believe it isn't Irony!</title>
4. <script language="JavaScript">
5. var urlVar = "comic";
7. function checkUrl()
8. {
9.   var queryString = window.location.href.split("?")[1];
10.   var queries = queryString.split("&");
12.   for (var i = 0;i < queries.length;i++)
13.   {
14.    splitQuery = queries[i].split("=");
15.    if (splitQuery[0] == urlVar)
16.    {
17.      swapComic(splitQuery[1]);
18.      break;
19.    }
20.   }
21. }
23. var comicImg = document.images["comicImg"];
24. var currentImg = "comic1.png"
25. function swapComic(newimg)
26. {
27.   currentImg = newimg;
28.   comicImg.src = newimg;
29.   comicImg.alt = newimg;
30.   comicImg.title = newimg;
31. }
33. var nextComic
34. var comicNum
35. function goNext()
36. {
37. if (currentImg == "comic4.png")
38. {
39.   return;
40. }
41.   currentImg - "comic" - ".png";
42.   currentImg ++;
43.   comicNum = currentImg
44.   currentImg = "comic" + comicNum + ".png";
45.   swapComic(currentImg);
46. }
48. var prevComic
49. function goPrev()
50. {
51. if (currentImg == "comic1.png")
52. {
53.   return;
54. }
55.   currentImg - "comic" - ".png";
56.   currentImg --;
57.   currentImg = "comic" + currentImg + ".png";
58.   swapComic(currentImg);
59. }
61. </script>
62. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
64. </head>
66. <body link="#FF3333" onload="checkUrl();">
67. <center>
68.  <table width="800" border="0">
69.   <tr bordercolor="#FFFFFF">
70.    <td colspan="3"> <center>
71.      <img src="media/image-map.gif" width="800" height="120" border="0" usemap="#Map">
72.     </center>
73.     <map name="Map">
74.      <area shape="rect" coords="110,88,175,112" href="index.htm">
75.      <area shape="rect" coords="225,86,309,116" href="archive.htm">
76.      <area shape="rect" coords="357,84,434,114" href="credit.htm">
77.      <area shape="rect" coords="483,87,603,116" href="contact.htm">
78.      <area shape="rect" coords="658,82,729,119" href="extra.htm">
79.     </map></td>
80.   </tr>
81.   <tr bordercolor="#FFFFFF">
82.    <td height="49" colspan="3"> <center>
83.      <h1><img src="comic1.png" alt="" title="" name="comicImg" /></h1>
84.     </center></td>
85.   </tr>
86.   <tr bordercolor="#FFFFFF">
87.    <td width="86" height="31" valign="top"><form name="form2" method="post" action="">
88.      <input type="button" name="Submit2" value="&lt; Previous" onClick="goPrev()">
89.     </form></td>
90.    <td width="650" valign="top"> </td>
91.    <td width="56" valign="top"><div align="right">
92.      <form name="form1" method="post" action="">
93.       <input type="button" name="Button" value="Next &gt;" onClick="goNext();">
94.      </form>
95.     </div></td>
96.   </tr>
97.  </table>
98.  <script language="JavaScript">
99.  swapComic("comic1.png");
100.  </script>
101.  <p><font face="Arial, Helvetica, sans-serif"></font> </p>
102. </center>
103. </body>
104. </html>

[ATNO/TW]

June 12th, 2005, 8:15 am

You missed the semi-colon here:
var currentImg = "comic1.png"

\\edit - another semi-colon missing here:
comicNum = currentImg

\\edit - and
var nextComic
var comicNum

\\edit - and
var prevComic

Run through your script and check syntax. Those jumped out at me, but there may be more.

June 12th, 2005, 10:29 am

ATNO/TW wrote:

You missed the semi-colon here:...

Generally, lines of JavaScript need not be terminated with a semicolon. These five lines are not the problem. flashstorm, use semicolons or not, but you should be consistent.

There are errors in your code. This line:

currentImg - "comic" - ".png";

doesn't do what you think it does. Actually it does nothing. It generates an error, then throws it away, so, nothing. You may be interested in the parseInt function or the subString function. Rather than keeping track of the comic name and extracting the number from it when necessary, I would be inclined to keep track of the comic number and build the name from it when necessary.

It's impossible to write a script by typing in some stuff and crossing your fingers. You'll be much happier if you learn to do a little debugging. I assume you're testing this in IE. When you click the "Next" button, a tiny yellow warning icon should appear in the lower left corner of the browser window. Click it for details of the script error.

From further back:

Tedjn wrote:

[swapping images as you're doing] will completely fail on browsers that do not have Javascript enabled

True enough, but even the original design required script to function. If we want to take him down a scriptless route, it'll be a very different page.

Tedjn wrote:

The iframe idea would still mess up some search engines

It's easy to give that guideline too much respect. If you went with an iframe for the navigation menu, you'd want to hide that little file from search engines. Easily done and no damage inflicted. Anyway, carry on, y'all.

June 13th, 2005, 7:19 am

Or, I see the problem. It's just to complicated! But, I just had a major brainstorm: USE FRAMES! Lol... I can't believe I didn't think of that earlier. So, that issue is all fixed up. But,I do have another problem. On my home page I have an "Updates" section. I dont want it to get too long, so I need to know how in the world I can get the section to stay a certain height, and insert a scrollbar when it does get too long. Is it possible?