IFRAME + Javascript
I've been stuck trying to do this for an hour or so but I can't seem to figure out
a solution. Let me break the situation down:
I have 7 comics named comic_Sun.gif, comic_Mon.gif, comic_Tue.gif, comci_Wed.gif, etc.
I wrote a fuction called getDayname() that returns the first three letters of the day of the week when given a variable 0 through 6 (0 being Sunday and 6 Being Saturday). I have been using the built in Javascript date methods (ie. getDay()) in conjunction with this fuction I have created.
Then I have an IFRAME which I want to display the image of whatever day of the week it is. I can manage that, but here's the tricky part: I want to have two links (something like "back" and "next") that when clicked will display the image that is one day before whatever is currently being displayed in the IFRAME. For example, if I start out with comic_Thu.gif in the IFRAME and I click back, comic_Wed.gif should show in the IFRAME. When I click the same link again it should know what is in the IFRAME and proceed to comic_Tue. The same concept should be applied to the "next" button.
Here is an example of my code just so everyone can get an idea:
var date = new Date();
var day = date.getDay() + 1;
document.write('<IFRAME SRC="comic_');
document.write(returnDayname(day));
document.write('.gif" NAME="comicFrame" WIDTH=616 HEIGHT=208>');
document.write('</IFRAME>');
I hope someone can understand what I'm trying to do. Feel free to ask me anything else.
[1622 byte] By [
SRD] at [2007-11-19 19:45:09]
# 1 Re: IFRAME + Javascript
I understand what you are trying to accomplish but not how you are going about this. Can you explain the process a little more clearly?
A simpler option, yet longer, would be to preload all 7 days as DIV tags with the display set to none (except the one you want to start with). Inside that, call the proper viewing of the DIV tags. Below is a quick example.
<div id="sun">
<img src="comic_sun.jpg"><br>
<input type="button" value="Previous" onclick="document.getElementById('sun').style.display='none';document.getElementById('sat').style.display='block';">
<input type="button" value="Next" onclick="document.getElementById('sun').style.display='none';document.getElementById('mon').style.display='block';">
</div>
# 2 Re: IFRAME + Javascript
I'm not too sure I understand what you are doing. Do you think you could possibly post a little more of what you are talking about in a way that I can see it if I were to open it up in a browser. I tried pasting your code to see what it all was doing but it didn't show anything.
Here's my code so far. I know it doesn't work right and the links probably don't go where they are supposed to but here it is just to give you and idea of what I was doing.
<HTML>
<script language="JavaScript"><!--
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}
function returnDayname(daynum) {
var weekdays = new makeArray('Sun','Mon','Tue','Wed','Thu',
'Fri','Sat');
var dayname = weekdays[daynum];
return dayname;
}
var date = new Date();
var day = date.getDay();
document.write('<a href="comic_');
document.write(returnDayname(day+=1));
document.write('.gif" TARGET="comicFrame">');
document.write('previous </a>');
document.write('<a href="comic_');
document.write(returnDayname(day-=1));
document.write('.gif" TARGET="comicFrame">');
document.write('next </a>');
document.write('<IFRAME SRC="comic_');
document.write(returnDayname(day));
document.write('.gif" NAME="comicFrame" WIDTH=616 HEIGHT=208>');
document.write('</IFRAME>');
//--></script>
</HTML>
Let me know what you think, and get back to me if you can on the code you 're trying to show me. Excuse the long code, I don't know how to put it in one of those boxes. It would be great if someone could just patch this code up somehow, but I have a feeling I might just be going about it all wrong.
SRD at 2007-11-8 0:23:40 >
# 3 Re: IFRAME + Javascript
Copy and paste the following into an html file and create 7 comics with the proper names. I used Dilbert.com.
<html>
<body>
<div id="sun">
Sunday<br>
<img src="sun.jpg"><br>
<input type="button" value="Previous" onclick="document.getElementById('sun').style.display='none';document.getElementById('sat').style.display='block';">
<input type="button" value="Next" onclick="document.getElementById('sun').style.display='none';document.getElementById('mon').style.display='block';">
</div>
<div id="mon" style="display: none;">
Monday<br>
<img src="mon.gif"><br>
<input type="button" value="Previous" onclick="document.getElementById('mon').style.display='none';document.getElementById('sun').style.display='block';">
<input type="button" value="Next" onclick="document.getElementById('mon').style.display='none';document.getElementById('tue').style.display='block';">
</div>
<div id="tue" style="display: none;">
Tuesday<br>
<img src="tue.gif"><br>
<input type="button" value="Previous" onclick="document.getElementById('tue').style.display='none';document.getElementById('mon').style.display='block';">
<input type="button" value="Next" onclick="document.getElementById('tue').style.display='none';document.getElementById('wed').style.display='block';">
</div>
<div id="wed" style="display: none;">
Wednesday<br>
<img src="wed.gif"><br>
<input type="button" value="Previous" onclick="document.getElementById('wed').style.display='none';document.getElementById('tue').style.display='block';">
<input type="button" value="Next" onclick="document.getElementById('wed').style.display='none';document.getElementById('thu').style.display='block';">
</div>
<div id="thu" style="display: none;">
Thursday<br>
<img src="thu.gif"><br>
<input type="button" value="Previous" onclick="document.getElementById('thu').style.display='none';document.getElementById('wed').style.display='block';">
<input type="button" value="Next" onclick="document.getElementById('thu').style.display='none';document.getElementById('fri').style.display='block';">
</div>
<div id="fri" style="display: none;">
Friday<br>
<img src="fri.gif"><br>
<input type="button" value="Previous" onclick="document.getElementById('fri').style.display='none';document.getElementById('thu').style.display='block';">
<input type="button" value="Next" onclick="document.getElementById('fri').style.display='none';document.getElementById('sat').style.display='block';">
</div>
<div id="sat" style="display: none;">
Saturday<br>
<img src="sat.gif"><br>
<input type="button" value="Previous" onclick="document.getElementById('sat').style.display='none';document.getElementById('fri').style.display='block';">
<input type="button" value="Next" onclick="document.getElementById('sat').style.display='none';document.getElementById('sun').style.display='block';">
</div>
</body>
</html>
# 4 Re: IFRAME + Javascript
Wow, perfect! I didn't really understand what this was at first, but now this definitely makes sense. Do you know however if there is anyway that these buttons could be links instead? I'm trying to have this fit in with something I've already created and it would look a lot nicer if these were links. Sorry to sound so picky, I really do appreciate your help a lot. This is great.
Edit: Also I just noticed that when you start it up it is on Sunday. Is there anyway it can figure out what day it is and start on that one? Perhaps using the fuction I made or something.
SRD at 2007-11-8 0:25:42 >
# 5 Re: IFRAME + Javascript
Do you know however if there is anyway that these buttons could be links instead?
Simply use...
<a href="#" onclick="javascript:CODEHERE">LINK</a>
Edit: Also I just noticed that when you start it up it is on Sunday. Is there anyway it can figure out what day it is and start on that one? Perhaps using the fuction I made or something.
Sure. As you can see it starts with Sunday as visible. Set all the DIV styles to display:none and then create a JavaScript function to run on page load. That function can use the date function and set the proper day's DIV to block display.
# 6 Re: IFRAME + Javascript
Alright, I've got them all as links, however I'm not sure how to include the div tags in my Javascript. I tried putting the links like so within my Javascript so I could difference the div tags with my method:
document.write('<div id="sun"...>');
Unfortunately it did not show anything. How might I properly place the div tags within my Javascript as well as access the attributes of the div tags (div id) so that I can difference them with my method? Something like:
(if returnDayname() == div id)
<div style="display: inline;">
I know that's completely wrong because I'm just making stuff up but could you show me the proper way to do what I'm trying to do? Sorry I don't know very much, but you really seem to understand.
SRD at 2007-11-8 0:27:45 >
# 7 Re: IFRAME + Javascript
Unfortunately it did not show anything.
Well, it shouldn't show anything because the DIV style is set to display:none;.
Concerning your code, what exactly does returnDayname() return? Below is a function that should show the current day. Put this script after the DIVs.
<script language="JavaScript">
var d = new Date();
var divday = new Array(7);
divday[0]="sun";
divday[1]="mon";
divday[2]="tue";
divday[3]="wed";
divday[4]="thu";
divday[5]="fri";
divday[6]="sat";
document.getElementById(divday[d.getDay()]).style.display = "block";
</script>
# 8 Re: IFRAME + Javascript
My getDayname fuction does almost the exact same thing. It just returns the first 3 letters of the day of the week:
<script language="JavaScript"><!--
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}
function returnDayname() {
var weekdays = new makeArray('Sun','Mon','Tue','Wed','Thu',
'Fri','Sat');
var date = new Date();
var day = date.getDay() + 1;
var dayname = weekdays[day];
return dayname;
}
document.write(returnDayname());
//--></script>
Also, regarding it not showing anything, I had turned the display style off so it should have displayed something. I was wondering though what the proper way to insert the div tags into Javascript would be and how I could difference the attributes with my method.
SRD at 2007-11-8 0:29:49 >
# 9 Re: IFRAME + Javascript
Just becareful because your function returns a capital and the DIV tags are all lowercase.
Instead of using document.write(), make a DIV on the main page and using innerHTML write the new DIVs to that.
# 10 Re: IFRAME + Javascript
I'm afraid I'm entirely confused. I have no experience using innerHTML. I will look it up and try to figure out what you mean but do you think you could show me with some type of source code example. If you could do it using my fuction that would be even better and most likely clearer for me. Thanks.
SRD at 2007-11-8 0:31:44 >
# 11 Re: IFRAME + Javascript
Here is a short example that should direct you.
<html>
<body>
<script language="JavaScript">
function showexample(){
htmlsource = "Just put your coding here.<br><img src='http://www.dev-archive.com/forum/images/misc/cg-logoC.gif'>";
document.getElementById('divmain').innerHTML = htmlsource;
}
</script>
<div id="divmain"></div>
<input type="button" value="Use innerHTML" onclick="showexample()">
</body>
</html>
# 12 Re: IFRAME + Javascript
Alright here's what I have so far. I was a little confused with getting some of the innerHTML and div tag fuctions to work so I'll post what I last had working:
<html>
<body>
<script language="JavaScript">
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}
function returnDayname() {
var weekdays = new makeArray('sun','mon','tue','wed','thu',
'fri','sat');
var date = new Date();
var day = date.getDay() + 1;
var dayname = weekdays[day];
return dayname;
}
</script>
<div id="sun">
Sunday
<br>
<img src="sun.gif"><br>
<a href="#" onclick="document.getElementById('sun').style.display='none';document.getElementById('sat').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('sun').style.display='none';document.getElementById('mon').style.display='block';">></a>
</div>
<div id="mon" style="display: none;">
Monday<br>
<img src="mon.gif"><br>
<a href="#" onclick="document.getElementById('mon').style.display='none';document.getElementById('sun').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('mon').style.display='none';document.getElementById('tue').style.display='block';">></a>
</div>
<div id="tue" style="display: none;">
Tuesday<br>
<img src="tue.gif"><br>
<a href="#" onclick="document.getElementById('tue').style.display='none';document.getElementById('mon').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('tue').style.display='none';document.getElementById('wed').style.display='block';">></a>
</div>
<div id="wed" style="display: none;">
Wednesday<br>
<img src="wed.gif"><br>
<a href="#" onclick="document.getElementById('wed').style.display='none';document.getElementById('tue').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('wed').style.display='none';document.getElementById('thu').style.display='block';">></a>
</div>
<div id="thu" style="display: none;">
Thursday<br>
<img src="thu.gif"><br>
<a href="#" onclick="document.getElementById('thu').style.display='none';document.getElementById('wed').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('thu').style.display='none';document.getElementById('fri').style.display='block';">></a>
</div>
<div id="fri" style="display: none;">
Friday<br>
<img src="fri.gif"><br>
<a href="#" onclick="document.getElementById('fri').style.display='none';document.getElementById('thu').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('fri').style.display='none';document.getElementById('sat').style.display='block';">></a>
</div>
<div id="sat" style="display: none;">
Saturday<br>
<img src="sat.gif"><br>
<a href="#" onclick="document.getElementById('sat').style.display='none';document.getElementById('fri').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('sat').style.display='none';document.getElementById('sun').style.display='block';">></a>
</div>
</body>
</html>
Things to get done:
- shows current day's comic automatically
- "next" and "previous" buttons become unclickable when last or first saved comic is reached.
- date is automatically subtracted from the current day to find the appropriate full date that an archived comic was shown
Edit: Sorry I couldn't get what you showed me to work. I understand how it works and was able to work with it a little, but I found it to be sort of straying from what I was trying to do. If you could show me how you meant to use this approach that would be great.
SRD at 2007-11-8 0:33:46 >
# 13 Re: IFRAME + Javascript
I could only revise the proper day for now. Look at the code I used and notice that I placed it at the end. This way it would not reference a DIV since the DIVs were not yet created.
I will help you with the date later when I have time.
You mentioned next and previous should become unavailable. Is this every Sunday the previous is disabled and every Saturday the next is disabled? If this is the case, simply take those A tags out of those DIVs.
<html>
<body>
<div id="sun" style="display: none;">
Sunday
<br>
<img src="sun.gif"><br>
<a href="#" onclick="document.getElementById('sun').style.display='none';document.getElementById('sat').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('sun').style.display='none';document.getElementById('mon').style.display='block';">></a>
</div>
<div id="mon" style="display: none;">
Monday<br>
<img src="mon.gif"><br>
<a href="#" onclick="document.getElementById('mon').style.display='none';document.getElementById('sun').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('mon').style.display='none';document.getElementById('tue').style.display='block';">></a>
</div>
<div id="tue" style="display: none;">
Tuesday<br>
<img src="tue.gif"><br>
<a href="#" onclick="document.getElementById('tue').style.display='none';document.getElementById('mon').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('tue').style.display='none';document.getElementById('wed').style.display='block';">></a>
</div>
<div id="wed" style="display: none;">
Wednesday<br>
<img src="wed.gif"><br>
<a href="#" onclick="document.getElementById('wed').style.display='none';document.getElementById('tue').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('wed').style.display='none';document.getElementById('thu').style.display='block';">></a>
</div>
<div id="thu" style="display: none;">
Thursday<br>
<img src="thu.gif"><br>
<a href="#" onclick="document.getElementById('thu').style.display='none';document.getElementById('wed').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('thu').style.display='none';document.getElementById('fri').style.display='block';">></a>
</div>
<div id="fri" style="display: none;">
Friday<br>
<img src="fri.gif"><br>
<a href="#" onclick="document.getElementById('fri').style.display='none';document.getElementById('thu').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('fri').style.display='none';document.getElementById('sat').style.display='block';">></a>
</div>
<div id="sat" style="display: none;">
Saturday<br>
<img src="sat.gif"><br>
<a href="#" onclick="document.getElementById('sat').style.display='none';document.getElementById('fri').style.display='block';"><</a>
<a href="#" onclick="document.getElementById('sat').style.display='none';document.getElementById('sun').style.display='block';">></a>
</div>
<script language="JavaScript">
var d = new Date();
var divday = new Array('sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat');
document.getElementById(divday[d.getDay()]).style.display = "block";
</script>
</body>
</html>
# 14 Re: IFRAME + Javascript
Well, let's say I decide to save all 7 comics for every day of the week. Each day and old comic would get rewritten with the new comic for that day. So today's Sunday would rewrite last week's Sunday. To avoid confusion, the point at which the "previous" link becomes unclickable should always be the day name right after whatever day it is (Not the date itself, but just the name of the day). So let's say it's Tuesday. The "next" button should be unclickable as always when showing the current day's comic. The previous button should be able to be clicked all the way up until last week's Wednesday where it should then become unclickable. Let's say it is now Wednesday of that week. Now last week's Wednesday should have become overwritten by the Wednesday for today and the "previous" button should now only become clickable up to last week's Thursday. Starting to get the picture? I hope my examples make sense. Thanks for the new code, it works great!
SRD at 2007-11-8 0:35:52 >
# 15 Re: IFRAME + Javascript
Really, I don't have time but I squeezed the disabling of days for you. I had to make it all JavaScript.
<html>
<body>
<style>a{font-size: 24pt;}</style>
<script language="JavaScript">
var d = new Date();
var divday = new Array('sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat');
var txt = '';
lastday = d.getDay() + (1 / 1);
if(lastday > 6){lastday = 0;}
lastday = divday[lastday];
firstday = d.getDay() - (1 / 1);
if(firstday < 0){firstday = 0;}
firstday = divday[firstday];
for(i=0;i<7;i++){
today = divday[i];
nextday = i + (1 / 1);
if(nextday > 6){nextday = 0;}
nextday = divday[nextday];
prevday = i - (1 / 1);
if(prevday < 0){prevday = 6;}
prevday = divday[prevday];
if(divday[d.getDay()] == divday[i]){txt = txt + "<div id='" + divday[i] + "'>";}
else{txt = txt + "<div id='" + divday[i] + "' style='display: none'>";}
txt = txt + "<img src='" + divday[i] + ".gif'><br>";
if(today != lastday){txt = txt + "<a href='#' onclick=\"document.getElementById('" + today + "').style.display='none';document.getElementById('" + prevday + "').style.display='block'\">Prev</a>";}
if(today != firstday){txt = txt + "<a href='#' onclick=\"document.getElementById('" + today + "').style.display='none';document.getElementById('" + nextday + "').style.display='block'\">Next</a>";}
txt = txt + "</div>";
}
document.write(txt);
</script>
</body>
</html>
# 16 Re: IFRAME + Javascript
Hey, thanks for the code! I've been messing with it for days now and I've been having trouble with a certain aspect of it. In my main project that I have been incorporating the various code I've been working on, the comics are displayed in a menu/table thing where the date is in a thin long cell and the comic is in a cell below. With your old code I was able to separate the two so that when you clicked on the buttons at the top it would change the div tags to display the comic in the cell below. However, with this new code everything is added to the variable "txt" and then displayed. This is giving me sort of a problem since I can't seem to separate the comics and the buttons without having weird things happen such as showing multiple comics and/or next and previous buttons at one time. Is there any way to display the text in one cell and set the div tags placed in another cell to display separately?
Another thing I have tried to tweak is the number of comics it will display within the span of the disabled next and previous buttons. Is it hard-coded so that this only works when I want to show all 7 comics? I thought I could try to change it to just show 3 and it worked on that day, but the next day it was all screwed up.
I know you're busy and all so I'm just going to post this and maybe you can give me some pointers or something because I probably have a much looser schedule than you to work on this.
SRD at 2007-11-8 0:37:56 >
# 17 Re: IFRAME + Javascript
I'm sorry. I just don't understand what exactly you mean. And yes, unfortunately I don't have time. If you could more clearly explain what you mean or post code, in fact, a screenshot would really help me to grasp it.
# 18 Re: IFRAME + Javascript
Basic:
http://www.freewebtown.com/storageunit/ss.GIF
Things gone horribly wrong:
http://www.freewebtown.com/storageunit/bad.GIF
Okay. Basically what we have is a table/collapsable menu script that I dug up and modified a bit. You click each green bar to expand each section. The dark grey part is one row of the table and the part with the comic in it is another. Basically what I was doing was placing the div tags in the comic row and changing their display attributes using "getelementbyid" in the top row. However with the "txt" variable the buttons and the comic are all displayed at once. Basically I have to have to sets of <script> tags for each row to modify back and forth. I hope this makes more sense.
Here is some concept code. Maybe you can see how I'm trying to "communicate" back and forth.
<TR>
<TD align=left>
<script language="JavaScript">
// Your code here.
</SCRIPT>
</TD>
<TD align=right>
// Javascript date code
</TD>
</TR>
<TR>
<TD>
// div tags for each comic here (id="sun," "mon," etc.)
</TD>
</TR>
SRD at 2007-11-8 0:39:56 >
# 19 Re: IFRAME + Javascript
Well, post the whole code that you have that is not working. It looks as though you caused the DIVs to reduplicate themselves. You can see this with the prevnext menu.
# 20 Re: IFRAME + Javascript
You know what, I had everything working and then I changed something so that it would look simpler and forgot to check it again. That was the problem. Here is the working code.
<html>
<body>
<style>a{font-size: 24pt;}</style>
<script language="JavaScript">
var d = new Date();
var divday = new Array('sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat');
var txt = '';
lastday = d.getDay() + (1 / 1);
if(lastday > 6){lastday = 0;}
lastday = divday[lastday];
firstday = d.getDay() - (1 / 1);
if(firstday < 0){firstday = 0;}
firstday = divday[firstday];
for(i=0;i<7;i++){
today = divday[i];
nextday = i + (1 / 1);
if(nextday > 6){nextday = 0;}
nextday = divday[nextday];
prevday = i - (1 / 1);
if(prevday < 0){prevday = 6;}
prevday = divday[prevday];
if(divday[d.getDay()] == divday[i]){txt = txt + "<div id='" + divday[i] + "'>";}
else{txt = txt + "<div id='" + divday[i] + "' style='display: none'>";}
txt = txt + firstday + " - " + lastday + "<br>";
txt = txt + prevday + " - " + today + " - " + nextday + "<br>";
txt = txt + "<img src='" + divday[i] + ".gif'><br>";
if(firstday != prevday){txt = txt + "<a href='#' onclick=\"document.getElementById('" + today + "').style.display='none';document.getElementById('" + prevday + "').style.display='block'\">Prev</a>";}
if(today != firstday){txt = txt + "<a href='#' onclick=\"document.getElementById('" + today + "').style.display='none';document.getElementById('" + nextday + "').style.display='block'\">Next</a>";}
txt = txt + "</div>";
}
document.write(txt);
</script>
</body>
</html>
# 21 Re: IFRAME + Javascript
I just looked at this, but I don't think it is working correctly either. The next button was showing for today's date and it was all going foward. All I need it to do is show today's comic, yesterday's, and the day before that.
By the way, did you see my source code above? It has the menu I am using. I know that maybe you might've run out of time. If so, that's okay.
SRD at 2007-11-8 0:42:58 >
# 22 Re: IFRAME + Javascript
I just looked at this, but I don't think it is working correctly either. The next button was showing for today's date and it was all going foward. All I need it to do is show today's comic, yesterday's, and the day before that.
Well, there has been a big misunderstanding. I thought you wanted a comic so that you can use Prev and Next to scroll through a week of comics and that is what I have written and it works as it should.
If you look at my code I have set it to show the previous day and next day. You can simply edit it to do what you want.
# 23 Re: IFRAME + Javascript
I understand, but there is no "previous" button when showing the current day's comic. There is also a "next" button which should not be showing when the latest comic is displayed because it cannot predict the future. The comic for the day name after the current day should only be able to be seen when clicking previous several times.
Also I have had trouble chaing it to just show the past three days. I can get it to work on a given day but then it will get all messed up the next day.
Did you ever look at my code for the menu? I had been wondering how to separate the comics and the buttons into different rows on a table. You asked me to post it but you never mentioned anything about it.
SRD at 2007-11-8 0:45:02 >
# 24 Re: IFRAME + Javascript
I understand, but there is no "previous" button when showing the current day's comic. There is also a "next" button which should not be showing when the latest comic is displayed because it cannot predict the future. The comic for the day name after the current day should only be able to be seen when clicking previous several times.
Yes, this is a goof on my part. I reversed it. I made it to show next when previous and previous when next should be showing. That is fixed now. Sorry for such a simple stupid mistake.
I also added the previous two days viewing. You will spot those variables easily in the code.
I also added a table. I hope this is what you were talking about. I aligned everything so you should be able to just add it or edit it to your liking.
<html>
<body>
<style>a{font-size: 24pt;}</style>
<script language="JavaScript">
var d = new Date();
var divday = new Array('sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat');
var txt = '';
lastday = d.getDay() + (1 / 1);
if(lastday > 6){lastday = 0;}
lastday = divday[lastday];
firstday = d.getDay() - (1 / 1);
if(firstday < 0){firstday = 0;}
firstday = divday[firstday];
today = divday[d.getDay()];
for(i=0;i<7;i++){
currentday = divday[i];
nextday = i + (1 / 1);
if(nextday > 6){nextday = 0;}
nextday = divday[nextday];
prevday = i - (1 / 1);
if(prevday < 0){prevday = 6;}
prevday = divday[prevday];
prevtwoday = i - (2 / 1);
if(prevtwoday < 0){prevtwoday = 6;}
prevtwoday = divday[prevtwoday];
if(today == currentday){txt = txt + "<div id='" + currentday + "'>";}
else{txt = txt + "<div id='" + currentday + "' style='display: none'>";}
txt = txt + "<table cellpadding=0 cellspacing=5 border=0>";
txt = txt + "<tr><td colspan=2 align='center'><img src='" + prevtwoday + ".gif'></td></tr>";
txt = txt + "<tr><td colspan=2 align='center'><img src='" + prevday + ".gif'></td></tr>";
txt = txt + "<tr><td colspan=2 align='center'><img src='" + currentday + ".gif'></td></tr>";
txt = txt + "<tr><td align='left'>";
if(prevday != today){txt = txt + "<a href='#' onclick=\"document.getElementById('" + currentday + "').style.display='none';document.getElementById('" + prevday + "').style.display='block'\">Prev</a>";}
txt = txt + "</td><td align='right'>";
if(nextday != lastday){txt = txt + "<a href='#' onclick=\"document.getElementById('" + currentday + "').style.display='none';document.getElementById('" + nextday + "').style.display='block'\">Next</a>";}
txt = txt + "</td></tr>";
txt = txt + "</table>";
txt = txt + "</div>";
}
document.write(txt);
</script>
</body>
</html>
# 25 Re: IFRAME + Javascript
Wow! This is quite close to what I am looking for. I'm very sorry for asking you to fix all these different things but somehow I am not getting across just exactly what I am trying to do. The code you just posted seems to find the set of three days quite nicely which is what I would like (With the exception of one time when the previous button is clicked and two saturday comics show. I don't know why that is.). Also what I meant was that you should be able to toggle between three comics using the next and previous buttons but you should only be able to see one at a time. It's not that I want to browse between every set of 3 comics but rather I want to click between 3 days worth of comics showing one at a time.
The table seems to work fine but if you will notice in my previous posts, I have said that I need to be able to "break apart" the code so that the buttons are in one part and the comics are in another. I know this is what you have done, but it is all done within one set of <script> tags and it is all being added to the "txt" variable. My menu will not allow me to continue the javascript code throughout both rows. What I need to do is to have one set of script tags get the buttons, and then another set that I can place elsewhere that can retrieve all the different variables to display the comics in a separate table row.
Here is a diagram. I know it seems confusing but I tried to make it the best I could:
http://www.freewebtown.com/storageunit/diagram.GIF
SRD at 2007-11-8 0:47:00 >
# 26 Re: IFRAME + Javascript
I am sorry but I just don't have the time to code someone else's work for them. If it is out of your league, keep practicing and learning until you are able to do it. That is what programming is about; always learning.
