Jump to content

Free help from tech experts
Welcome to Geeks to Go forums. Create an account now to gain access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing topics, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. Best of all, registration and all assistance is 100% free! This message, and all ads will be removed once you have signed in.
Sign In Create Account

Navigation Buttons - Previous & Next Button


  • Please log in to reply

#1
carysma

carysma

    Member

  • Member
  • PipPip
  • 14 posts
Hello!

Can someone help me create a script for my navigational "PREVIOUS" & "NEXT" button? Here is my code, for some reason I am missing something to scroll through my pictures USING the previous & next button. I will be using my pictures: townhouse.jpg, townhouse2.jpg, townhouse3.jpg, townhouse4.jpg, townhouse5.jpg.

Also if you notice, I've used excessive   this is the only way I know to indent another word. Any thoughts with this one?

PLEASE :)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR...l1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Townhouse</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

<style type="text/css">
.b1 {
color: maroon;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
margin-top: 0;
margin-bottom: 0;
margin-left: 5px;
}
.b2{
color: olive;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
margin-top: 0;
margin-bottom: 0;
margin-left: 5px;
}
</style>

<script type="text/javascript">
//<![CDATA[

var propertyWindow;
function showProperty("townhouse.jpg")
propertyWindow=window.open(img src="townhouse.jpg" height="250" width="380" alt="Photo of a townhouse");

//]]>
</script>

</head>

<body>
<p class="b1">Townhouse: <strong>$319,000</strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="java script: self.close()">Close Window</a></p>
<p><img src="townhouse.jpg" height="250" width="380" alt="Photo of a townhouse" /></p>
<p><a href="java script: history.go(-1)"><img border="0" SRC="previous_blue.gif"></a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="java script: history.go(1)"><img border="0" SRC="next_blue.gif"></p>

<p class="b2"><strong>4 bed, 2 bath, 17,33 square feet, .42 acres</strong></p>
</body>
</html>
  • 0

Similar Topics: Navigation Buttons - Previous & Next Button     x


#2
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 30,240 posts
  • MVP
Hi carysma,

You introduced a few spaces where they shouldn't be.

Try this:

<a href="java script:self.close();">Close Window</a></p>
<p><img src="townhouse.jpg" height="250" width="380" alt="Photo of a townhouse" /></p>
<p><a href="java script:history.go(-1);"><img border="0" SRC="previous_blue.gif"></a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="java script:history.go(1);"><img border="0" SRC="next_blue.gif"></p>

  • 0

#3
carysma

carysma

    Member

  • Member
  • PipPip
  • 14 posts
It still not working :) I guess what I need help and main question is:

The pictures are not changing when I click the previous & next button, your code is similar to mine. But I guess the pictures are not in there yet? Do I need to create a var images = new Array; for all the pictures? So when the previous or next function call it, the pictures will scroll???

What am I missing???
  • 0

#4
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 30,240 posts
  • MVP
Uhm? I couldn't test because I had no previous and next pages, but what the javascript history function does is take you through the browser history.
Also the board software seems to add a space between java and script even when we use it in a CODE box. :)

javascript:history.go(1) takes you one page forward
and
javascript:history.go(-1) takes you one page back

Is that what you want to do or can you explain what exactly it is you want?
  • 0

#5
carysma

carysma

    Member

  • Member
  • PipPip
  • 14 posts
:) Hmmm :)

I myself is getting crazy with this one. This gives me a HUGE headache challenge being a beginner, :)

I will be using my pictures: townhouse.jpg, townhouse2.jpg, townhouse3.jpg, townhouse4.jpg, townhouse5.jpg. So I guess you can say that I am trying to do a PHOTO GALLERY. These PREVIOUS & NEXT button needs a link that is ATTACHED to the pictures in my drive.

Is this possible to do???

Please :)

Thanks for your time helping me :)

Edited by carysma, 21 February 2009 - 06:42 AM.

  • 0

#6
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 30,240 posts
  • MVP
It's possible, but not with the history function.

Something like what I did here?
http://www.pieter-ar...e...&selected=4
  • 0

#7
carysma

carysma

    Member

  • Member
  • PipPip
  • 14 posts
Yeah. That's exactly what I am trying to do. Except the pictures are hidden processing in the back instead of showing like yours.

I'll try to figure it out with your code. Thanks :)
  • 0

#8
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 30,240 posts
  • MVP
The code is done in PHP. Can you run that on your server?
  • 0

#9
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 30,240 posts
  • MVP
I came up with a crude script that does what we wanted.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> Concert Ads </title>

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

<script type="text/javascript">
//<![CDATA[
var images = new Array(5);
images[0] = new Image();
images[1] = new Image();
images[2] = new Image();
images[3] = new Image();
images[4] = new Image();

images[0].src ="townhouse1.jpg" // the 1 needs to be added or the script will fail
images[1].src ="townhouse2.jpg"
images[2].src ="townhouse3.jpg"
images[3].src ="townhouse4.jpg"
images[4].src ="townhouse5.jpg"

function change (y) {
var plaatje=document.getElementById("picture");
var lengte = (plaatje.src).length;
var picurl = (plaatje.src).substring(lengte-14); // 14 is the length of the images name: townhouse#.jpg
if(picurl=="townhouse1.jpg") { x=0; }
if(picurl=="townhouse2.jpg") { x=1; }
if(picurl=="townhouse3.jpg") { x=2; }
if(picurl=="townhouse4.jpg") { x=3; }
if(picurl=="townhouse5.jpg") { x=4; }
if(x==0 && y==-1) { x=4; y=0; } // when the number becomes negative go to 4
else if(x+y>=5) {x=0; y=0; } // when the number gets too big start over at 0
// change the picture
document.getElementById("picture").src = images[x+y].src;
}
//]]>
</script>
</head>
<body>
<p class="b1">Townhouse: <strong>$319,000</strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="javascript:self.close()">Close Window</a></p>
<p><img src="townhouse2.jpg" id="picture" height="250" width="380" alt="Photo of a townhouse" /></p>
<p><a href="#" onclick="change(-1);"><img border="0" SRC="previous_blue.gif"></a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="#" onclick="change(1);"><img border="0" SRC="next_blue.gif"></a></p>

<p class="b2"><strong>4 bed, 2 bath, 17,33 square feet, .42 acres</strong></p>
</body>
</html>


  • 0

#10
carysma

carysma

    Member

  • Member
  • PipPip
  • 14 posts
It works out perfect! Thanks a lot for your help!

By the way, I am working on another one that I'm almost done except I can't figure out what's the code to calculate

PICK UP DATE.

For example:

In an order form, if I click a radio button that have 1 day, the PICK-UP date text area will automatically populate it's date based on Today's date. (see below):

Posted Image

Here's the code I have for Today's date & Pick-up date, maybe you can tweak what's wrong I have in it . . . I know I have to add a code in between somewhere the pick-up date . . . hmmm :)

<p> Today's Date <br />
<script>document.write("<input name=date type=text disabled value=" + month + "/" +
day + "/" + year + ">")</script> <br />
Pick-up Date <br />
<script>document.write("<input name=date type=text disabled value=" + month + "/" +
day + "/" + year + ">")</script> <br />

Any thoughts???

Thanks in advance :)

Edited by carysma, 21 February 2009 - 06:41 AM.

  • 0

#11
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 30,240 posts
  • MVP
Hi Carysma,

If you use this script in the header
<script type="text/javascript">
<!--
var currentTime = new Date();
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var processing = 1; // number of days
var pickupTime = new Date();
pickupTime.setDate(currentTime.getDate()+processing);
var pmonth = pickupTime.getMonth() + 1
var pday = pickupTime.getDate()
var pyear = pickupTime.getFullYear()
//-->
</script>

Then the code for the form looks like this:
<form>
<p> Today's Date <br />
<script type="text/javascript"> document.write("<input name=date type=text disabled value=" + month + "/" +
day + "/" + year + ">")</script> <br />
Pick-up Date <br />
<script type="text/javascript"> document.write("<input name=date type=text disabled value=" + pmonth + "/" +
pday + "/" + pyear + ">")</script> <br />
</form>

You can even make a function of the second part of the script, passing the days needed for processing to the function.
  • 0

#12
carysma

carysma

    Member

  • Member
  • PipPip
  • 14 posts
Hi Metallica!

Thanks for your quick response.

The code is working great. But I think we are missing something else. I know we have to place an onclick command for the radio buttons. So if I click "Coffee Mugs" it will add 2 days, and if it is "Posters" it will add 1 day of processing.

Do I add the onclick command on the form section?
  • 0

#13
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 30,240 posts
  • MVP
You don't need an onClick event.

Information about radiobuttons:
HTML only
http://www.echoecho....htmlforms10.htm
In combination with java script:
http://homepage.ntlw...ey/jss3p11.html
  • 0

#14
carysma

carysma

    Member

  • Member
  • PipPip
  • 14 posts
I'm sorry to be a pain :)

Like what I've said: YOUR CODE IS WORKING PERFECT!. I guess what I'm trying to do now is to calculate pick up date based on what radio button is clicked? The code below automatically "ADDS 1 day" from current date. But what if I need to add 2 days from the current date?


Pick-up Date <br />
<script type="text/javascript"> document.write("<input name=date type=text disabled value=" + pmonth + "/" +
pday + "/" + pyear + ">")</script> <br />
</form>


I hope you see where I'm coming from. Though, I will keep trying to figure it out. :)

THANKS A LOT FOR YOUR HELP!
  • 0

#15
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 30,240 posts
  • MVP
Like I said, you can build a function that looks like this:
function pickupdate(processing) {
  var pickupTime = new Date();
  pickupTime.setDate(currentTime.getDate()+processing); 
  var pmonth = pickupTime.getMonth() + 1;
  var pday = pickupTime.getDate();
  var pyear = pickupTime.getFullYear();
 }
Then call the function depending on the selected radiobutton.
If that is Coffee Mug you can pass 2 days to the function like this pickupdate(2);

Can I ask what you are working on exactly?
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

featured