9 Replies - 4410 Views - Last Post: 22 September 2013 - 03:01 PM

#1 B0urn3   User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 21
  • Joined: 24-February 13

How to add an event handler for a slideshow

Posted 19 September 2013 - 04:09 PM

Hello everyone. I have a few questions on how to add an event handler to a slideshow that uses Next and Previous buttons to move through the slides. I've managed to figure out how to code the Next button to advance from the initial slide to the last slide. I'm confused on how to code for the Previous button. Here's my code for the Next button. I've tested it and all works well. This is only the 5th Javascript application that I've ever done. We're actually moving into DOM Scripting with JQuery so this application is an intro to DOM Scripting by way of Javascript. (If that technically makes any sense at all; as I understand thus far they're one and the same?)

var imageCounter = 0;
    linkNode.onclick = function (evt) {
    	var link = this;
    	imageCounter = (imageCounter + 1) % imageCache.length;
  		image = imageCache[imageCounter];
		imageNode.src = image.src;
		captionNode.firstChild.nodeValue = image.title;
		
    	//Cancel the default action of the event
    	if (!evt) evt = window.event;
    	if ( evt.preventDefault) {
    		evt.preventDefault();
    	}
    	else {
    		evt.returnValue = false;
    	}
    };
    $("next").onclick  = linkNode.onclick;


var imageCounter is a global variable set to 0, so I can't assign to it another value without destroying what I have working for the Next button, right?

The problem is requiring that I add an event handler for the Previous button after the event handler for the Next button. Does this require that I code another function to handle the .onclick? It's impossible for
$("previous").onclick =
to be set to link.Node.onclick! I realize that the imageCounter variable needs to be adjusted to move backwards. Something like
imageCounter = (imageCounter - 1) % imageCache.lenght;
?

So would I adjust var imageCounter to
imageCounter = 5
, being that there's 5 slides, in order to move backwards through the slides?

I'm honestly confused, I'm just trying to reason it out with all that I've learned up to this point in the course.

All help with this would be appreciated. Thanks in advance.

Is This A Good Question/Topic? 0
  • +

Replies To: How to add an event handler for a slideshow

#2 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: How to add an event handler for a slideshow

Posted 19 September 2013 - 04:14 PM

Quote

$("next").onclick  = linkNode.onclick;

This is the wrong way to use the click event handler in jquery.

$(element).click(function(){
  //Do stuff
});

//or

$(element).on("event", function(){
  //Do stuff
});


This post has been edited by laytonsdad: 19 September 2013 - 04:15 PM
Reason for edit:: Typo

Was This Post Helpful? 0
  • +
  • -

#3 B0urn3   User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 21
  • Joined: 24-February 13

Re: How to add an event handler for a slideshow

Posted 19 September 2013 - 04:35 PM

* Removed unnecessary quote *

Thank you for replying. So..would it then become
$("next").click(linkNode.onclick(evt)
 var link = this;
	        imageCounter = (imageCounter + 1) % imageCache.length;
	        image = imageCache[imageCounter];
	        imageNode.src = image.src;
	        captionNode.firstChild.nodeValue = image.title;

                if (!evt) evt = window.event;
	        if ( evt.preventDefault) {
	            evt.preventDefault();
	        }
	        else {
	            evt.returnValue = false;
	        }
	    });



Take into consideration that we haven't learned to do anything in JQuery. The first part of the course is a primer on Javascript and this is how they've taught us to use .onclick thus far. All things being equal, please explain to me why the code executes correctly in it's current form if it's incorrect?

This post has been edited by laytonsdad: 19 September 2013 - 05:36 PM
Reason for edit:: removed quote

Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: How to add an event handler for a slideshow

Posted 19 September 2013 - 05:34 PM

You are missing an ending ) on line one.
Was This Post Helpful? 0
  • +
  • -

#5 B0urn3   User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 21
  • Joined: 24-February 13

Re: How to add an event handler for a slideshow

Posted 19 September 2013 - 06:20 PM

View Postlaytonsdad, on 19 September 2013 - 05:34 PM, said:

You are missing an ending ) on line one.

Thanks, I didn't notice that. So is would that be the correct usage or no?
Also...do you think you could lend me some insight into the problem that I'm trying to solve?
Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: How to add an event handler for a slideshow

Posted 19 September 2013 - 08:23 PM

First off is this an assignment? If so what are the instructions?

You said you have not used jQuery in class, are you sure you are supposed to use it with this project?

Also is next an id. because you are accessing it like a tag:

$("div") //Select all div tags
$("#next") //Select element with id of next
$(".next") //Select all elements with the class of next


Was This Post Helpful? 0
  • +
  • -

#7 B0urn3   User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 21
  • Joined: 24-February 13

Re: How to add an event handler for a slideshow

Posted 21 September 2013 - 04:38 AM

Yes, this is an assignment. The assignment requires that I modify a slide show application so that it uses Previous and Next buttons instead of an interval timer to move from slide to slide.
Thus,
imageCounter = (imageCounter + 1) % imageCache.length;
	            image = imageCache[imageCounter];
	            imageNode.src = image.src;
	            captionNode.firstChild.nodeValue = image.title;


was the modification of the code that used an interval timer.

Next is an id. Here's the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <title>Slide Show</title
    <link rel="stylesheet" href="main.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="slide_show.js"></script>
</head>

<body>
<section>
    <h1>Fishing Slide Show</h1>
    <ul id="image_list">
        <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li>
        <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li>
        <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li>
        <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li>
        <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li>
    </ul>
    <h2 id="caption">Casting on the Upper Kings</h2>
    <p>
    	<img src="images/casting1.jpg" alt="" id="image">
    </p>
    <input type="button" value="Previous" name="previous" id="previous">
    <input type="button" value="Next" name="next" id="next">
</section>
</body>
</html>


The assignment specifically requires that I replace the interval timer with an event handler for the Next button, and after that, add an event handler for the Previous button.

Finally, the assignment isn't calling for us to use JQuery to accomplish the task- as we don't get into JQuery until the next section of the course; however, the assignment did state that we'd find a task like this one much simpler to accomplish with JQuery.

This post has been edited by andrewsw: 21 September 2013 - 04:48 AM
Reason for edit:: Removed unnecessary quote

Was This Post Helpful? 0
  • +
  • -

#8 andrewsw   User is offline

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,615
  • Joined: 12-December 12

Re: How to add an event handler for a slideshow

Posted 21 September 2013 - 05:04 AM

If you want to add a click-event to the button using Javascript then you could add the following just before the closing body-tag:

<script>
    var next = document.getElementById('next');
    next.onclick = function (e) {
        alert('You clicked next');
    };
</script>

However, I think you should first decide if you are going to use (vanilla) JS or jQuery. I don't think you understand enough about the differences to be able to jump between the two. As your assignment doesn't mention jQuery (and you haven't studied it yet!) it seems to me that you should be doing this in Javascript.

This post has been edited by andrewsw: 21 September 2013 - 05:11 AM

Was This Post Helpful? 0
  • +
  • -

#9 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: How to add an event handler for a slideshow

Posted 22 September 2013 - 07:18 AM

View PostB0urn3, on 20 September 2013 - 12:09 AM, said:

I realize that the imageCounter variable needs to be adjusted to move backwards. Something like
imageCounter = (imageCounter - 1) % imageCache.lenght;
?

So would I adjust var imageCounter to
imageCounter = 5
, being that there's 5 slides, in order to move backwards through the slides?

The imageCounter doesn't really have to change at all, only the way you handle the calculations. If you start decrementing the imageCounter when the previous button is pressed, like you suggest there, then the imageCounter -1 part of the equation will eventually become a negative number, at which point the x % imageCache.length result will become incorrect. Instead of going down from image 0 to the highest index, it'll go to -1, which will result in an error when you try to fetch the image from the array.

There are two ways I can see this working.

  • Keep doing what you are doing and put a check in place that catches when imageCounter - 1 becomes negative, and when that happens replace imageCounter - 1 with imageCache.length - 1. That will again start giving you the result you want.

  • Replace your current modulus approach with a simple IF-ELSE clause that just checks if the imageCounter is lower than 0 or equal to imageCahche.length, and when those happen move the imageCounter value back or forward to the correct position.

Was This Post Helpful? 1
  • +
  • -

#10 B0urn3   User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 21
  • Joined: 24-February 13

Re: How to add an event handler for a slideshow

Posted 22 September 2013 - 03:01 PM

Thanks you, Atli. I chose to go with option one and here's what I came up with:
 // Attach event handler for the previous button
    linkNodePrev = function (evt) {
    	var link = this;
    	imageCounter = (imageCounter - 1) % imageCache.length;
    	if (imageCounter < 0 || imageCounter == imageCache.length) {
    		imageCounter = imageCache.length - 1;
    	}
		image = imageCache[imageCounter];
		imageNode.src = image.src;
		captionNode.firstChild.nodeValue = image.title;
		
    	//Cancel the default action of the event
    	if (!evt) evt = window.event;
    	if ( evt.preventDefault) {
    		evt.preventDefault();
    	}
    	else {
    		evt.returnValue = false;
    	}
    	
    };
     $("previous").onclick = linkNodePrev;



That works excellent. However, I somehow intuitively feel that option 2 would have been an easier way to accomplish this task. I say this because that was the primary way that I'd thought about trying to solve this problem- with and IF ELSE. But I'm trying to follow the course through the methods being taught as the course progresses.

Thanks again.

So the other question I had about creating a new function was also answered. Which was part of my initial confusion. Specifically this variable here: linkNode.onclick ! The book led me to believe that specific variable with the .onclick accomplished something unique when it could as well been declared as linkNodeNext.onclick? The confusion was due to seeing a version in the book declared as just Node.onclick. So I thought that my Previous button also had to be attributed to linkNode.onclick. Which as I discovered isn't the case. My Next button is takes the declaration of
linkNodePrev = function


In sum, I can store the function in whatever variable name that I choose to come up with. The magic comes from what the function actually does.

This post has been edited by andrewsw: 22 September 2013 - 03:30 PM
Reason for edit:: Removed large quote

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1