Jump to content

Welcome Guest to Geeks to Go - Register now for FREE
Geeks To Go is a helpful hub, where thousands of friendly volunteers serve up answers and support. Get free advice from the experts. Feel free to browse the site as a guest. However, you must log in to reply to existing topics or start a new topic of your own, and enjoy all this forum has to offer. Additionally, if you can assist another member by sharing your knowledge, please post a reply! Best of all - Registration and all assistance, is FREE! Learn more about How it Works. Infected? Malware Cleaning Guide. What are you waiting for?
Create an Account Login to 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

Advertisement


#2
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 30,636 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,636 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,636 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,636 posts
  • MVP
The code is done in PHP. Can you run that on your server?
  • 0

#9
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 30,636 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
<

Advertisement


#11
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 30,636 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,636 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,636 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

Advertisement




Similar Topics: Navigation Buttons - Previous & Next Button     x


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

featured