CODEWITHSUNDEEP
jqueryscroll
miss chohoh
miss chohoh

Reputation: 25

jquery scrollto

I'm trying to figure out how to get this to scroll vertically. I have everything in place.. it's the exact same script has the one that scrolls horizontally. I feel like there is something in the jquery code i need but I can't seem to find a good explanation of it.

here's my link I'm working on.

http://www.chohoh.com/pcs/scroll.html

Upvotes: 0

Views: 1845

Answers (2)

Mottie
Mottie

Reputation: 86483

With this solution, I've included the jQuery mousewheel plugin... I don't like being restricted by just clicking buttons :P

Also, I didn't use the serial scroll plugin

<script type="text/javascript"> 
$(document).ready(function() {
var slideIndex = 0;
var slideBlock = $('.tikt-txt');
var slideMax = slideBlock.length - 13; // leaves 13 slides showing in the window

$('.galprev').click(function(){
 slideIndex--;
 changeSlide();
});
$('.galnext').click(function(){
 slideIndex++;
 changeSlide();
});
$('#slideshow').bind('mousewheel', function(e,d){
 var speed = Math.floor(Math.abs(d));
 if (d > 0) {
   slideIndex = slideIndex - speed; 
 } else {
   slideIndex = slideIndex + speed; 
 }
 changeSlide();
});

function changeSlide(){
 if (slideIndex > slideMax) {
  slideIndex = slideMax;
 }
 if (slideIndex < 0) {
  slideIndex = 0;
 }
 $('#slideshow').stop().scrollTo(slideBlock[slideIndex],300) 
}
});
</script>

Edit: I'll try to explain it all... I hope you can follow my ramblings LOL

Variables

  • The top most div is indexed and assigned a zero using the slideIndex.
  • The slideBlock is an array that contains all of your slides.
  • The slideMax variable takes the total number of slideBlock minus how many slides are visible on the screen at one time (13 in this case)

Events

  • These functions are called when you click on the previous or next button
  • These functions add or subtract ONE from the index (++ means add one and -- means subtract one)
  • Then they call the function to move the slides
  • The mousewheel function uses the mousewheel plugin to bind the wheel movement and calculate how far to move the slides up or down, the speed at which you roll the mouse wheel determines how much it scrolls

ScrollTo (changeSlide) function

  • This function determines if you've scrolled past the max number of slides (too far down) or below the minimum (too far up), it then sets the number appropriately to equal the maximum or minimum position
  • Now it stops any animation .stop() and calls the scrollTo function and tells it what slide number should be shown at the top of the box (slideIndex) and how long it should take to scroll that far.

So, if you have read through all of that and you're still scratching your head... change the:

slideIndex++ to slideIndex=slideIndex+7;

and the

slideIndex-- to slideIndex=slideIndex-7;

Upvotes: 2

Waleed Amjad
Waleed Amjad

Reputation: 6808

Well alternatively, you could select all the elements with class 'tikt-txt' and then mimic a scroll function by executing an animation which moves the elements by changing top to -10px (for scrolling down) and 10px (for scrolling up).

Assuming you have positioned class 'tikt-txt' relatively.

EDIT:

A simple example to get you started:

$('.galnext').click(function() {
   $('.tikt-txt').animate({ "top": "-=10px" }, "100");
});

$('.galprev').click(function() {
   $('.tikt-txt').animate({ "top": "+=10px" }, "100");
});

Just make sure you edit scroll2.css and replace:

.tikt-txt {background-color:transparent;height:28px;margin:0px; padding:0px; }

With 

.tikt-txt {background-color:transparent;height:28px;margin:0px; padding:0px; position:relative; }

Upvotes: 1

Related Questions