Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Navigation Buttons - Previous & Next Button

Started by carysma , Feb 16 2009 05:32 PM

Please log in to reply

#1
carysma

Posted 16 February 2009 - 05:32 PM

Member

Member
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>                 

         
<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>
                                 

                     
<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>

#2
Metallica

Posted 17 February 2009 - 01:25 AM

Spyware Veteran

GeekU Moderator
33,101 posts

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>

#3
carysma

Posted 17 February 2009 - 07:10 AM

Member

Topic Starter
Member
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???

#4
Metallica

Posted 17 February 2009 - 07:41 AM

Spyware Veteran

GeekU Moderator
33,101 posts

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?

#5
carysma

Posted 17 February 2009 - 11:36 AM

Member

Topic Starter
Member
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.

#6
Metallica

Posted 17 February 2009 - 01:05 PM

Spyware Veteran

GeekU Moderator
33,101 posts

It's possible, but not with the history function.

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

#7
carysma

Posted 18 February 2009 - 09:05 AM

Member

Topic Starter
Member
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

#8
Metallica

Posted 18 February 2009 - 09:25 AM

Spyware Veteran

GeekU Moderator
33,101 posts

The code is done in PHP. Can you run that on your server?

#9
Metallica

Posted 18 February 2009 - 02:52 PM

Spyware Veteran

GeekU Moderator
33,101 posts

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>                 

         
<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>
                                 

                     
<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>

#10
carysma

Posted 21 February 2009 - 06:18 AM

Member

Topic Starter
Member
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.

#11
Metallica

Posted 21 February 2009 - 09:35 AM

Spyware Veteran

GeekU Moderator
33,101 posts

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.

#12
carysma

Posted 21 February 2009 - 10:23 AM

Member

Topic Starter
Member
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?

#13
Metallica

Posted 21 February 2009 - 01:17 PM

Spyware Veteran

GeekU Moderator
33,101 posts

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

#14
carysma

Posted 21 February 2009 - 03:38 PM

Member

Topic Starter
Member
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!

#15
Metallica

Posted 21 February 2009 - 03:46 PM

Spyware Veteran

GeekU Moderator
33,101 posts

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?