PDA

View Full Version : minor Feature Request for a DD-Script



kobo1d
05-05-2010, 11:06 AM
hey there !!

1) Script Title:
Step Carousel Viewer v1.8

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem:
well it isnt really a problem.. more a little feature request...
the script has nav-buttons left and right and the action is only happing if you click it..
now i tried to make it also mouseover and changed the function from "click" to "mouseover"...
but then it only does the action once per mouse-in.. if i want to repeat the action i have to move-out the mouse and back in again...
but i would like to have it continiously! is there any chance somebody can help me please ?!

i see that the script has also an autostep function...
maybe its possible to change the script so while mouseover the nav-buttons it starts the autpstep-loop until im moving the mouse out again (just an idea)

in the end it should work like here: http://www.enova-tech.net/eng/lab/jMyCarousel (mouseover action instead of need-to-be-clicked)

i would really appriciate a helping hand!!


thx alot in advance :o

kobo1d
05-12-2010, 08:55 AM
or can somebody plz tell me how i can unpack the script,
so i can read it better and do the manipulation myself (maybe) :-)

i tried http://jsbeautifier.org but it didnt work after the unminify..


thx

jscheuer1
05-12-2010, 09:00 AM
The script isn't packed.

kobo1d
05-12-2010, 09:10 AM
then its minified ??

at least its really hard to read if brackets and line-breaks arent present...
*edit: i didnt mean brackets.. i ment the indent.. :-)


what can i do there ?!

jscheuer1
05-12-2010, 09:15 AM
Oh, you must mean jQuery. You don't want to edit that. At least it would be better not to. If you want a non-minified version of it, save it from this link:

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js

But the script you should be editing is more likely the:

stepcarousel.js (http://www.dynamicdrive.com/dynamicindex4/stepcarousel.js)

Which is also available on the demo page.

jscheuer1
05-12-2010, 09:33 AM
You know, the JMyCarousel script you linked to is also jQuery based and free, why not use that one?

Anyways, if you want to use the DD script, I'm thinking (untested) replace in the stepcarousel.js file:


config.$leftnavbutton.bind('click', function(){ //assign nav button event handlers
stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby)
})
config.$rightnavbutton.bind('click', function(){ //assign nav button event handlers
stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby)
})

with:


config.$leftnavbutton.hover(function(){ //assign nav button event handlers
$(this).data('hover', setInterval(function(){stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby);}, 1000));
}, function(){
clearInterval($(this).data('hover'));
})
config.$rightnavbutton.hover(function(){ //assign nav button event handlers
$(this).data('hover', setInterval(function(){stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby);}, 1000));
}, function(){
clearInterval($(this).data('hover'));
})

Barring any typos on my part, and as long as the data construct can be used that way, it should work. If not, and you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

kobo1d
05-14-2010, 09:40 AM
hey john!

your code is working pretty sweet and it was exactly what i was looking for..
i just changed the 1000ms to 10ms so its reacting faster..

thank you again for your time!


*edit*

but there is one problem now:

if i hover the nav-button the script is moving, but its not really accurate like when i unhover the nav-button, its still sliding...
so i think it counts to many steps while im on hover...

i would need it to be like this ->

i go hover, the script is moving (which takes about 3 secs per visual step)
and then after one step is done it checks again if im still on hover and then add another step...etc..

because for example im on hover for 7 seconds and the script did only about 2 visual steps,
in the code it allready calculated the next 7 steps and continues moving until they are all done....
and does not accuratly stops moving when i go un-hover...


i hope you understand what i mean...



plz help me once again john!! :-)

kobo1d
05-14-2010, 10:15 AM
i need to correct myself there...

after a hover (no matter how long it did take) the script moves through until the end and there it hangs...
i cant navigate to anywhere else... it seems like it doesnt clear the function on un-hover

jscheuer1
05-14-2010, 02:28 PM
I was afraid of that. I think it's because I was getting too cute using the data construct in that manner (to hold a reference to the interval). Here's a version using the classic method for that. It should fix the problem:


config.$leftnavbutton.hover(function(){ //assign nav button event handlers
config.lefttime = setInterval(function(){stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby);}, 10);
}, function(){
clearInterval(config.lefttime);
})
config.$rightnavbutton.hover(function(){ //assign nav button event handlers
config.righttime = setInterval(function(){stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby);}, 10);
}, function(){
clearInterval(config.righttime);
})

But it's possible the config object might not be available in the way I'm anticipating. Or it could be that 10ms is too brief, in that by the time we clear the interval, too many have built up. But that last is unlikely.

Try the above, and if there are still problems give me a link to the page that is using the above code.

kobo1d
05-14-2010, 08:15 PM
hey john!!

thanks again for your input.. i tried it and it ends up in nearly the same result..
it is sliding until the end of the carousel.. BUT after that it can be called again...
so it does not hang up in the end, but its still moving without being hover, once its started :-(

i think the problem is that once we hover, the function starts and repeats until its done and does not stop once we move out the mouse again... like when i put 10ms its going stepbystep every 10ms and if i put 1000ms then its going stepbystep every 1 sec, but on unhover the interval isnt destroyed..

thats just what i think, dont see this as professional opinion :-)


check your inbox as you got an PM ;)

thx again

djr33
05-14-2010, 08:37 PM
I have an idea to interject. I'm not sure if this would help too much, but I think it might solve the problem:

You can use a variable to store whether it should be moving.
onmouseover store it as 1
onmouseout store it as 0

This could be done in several ways but the basic idea should be fairly simple, actually, except that you'll have to keep track of that variable throughout the page.

The one final complication is that you can do other things to move your mouse aside from "onmouseout" such as changing windows (keyboard shortcut) then returning with your mouse in a new position. Not sure what to suggest there.

jscheuer1
05-14-2010, 11:53 PM
check your inbox as you got an PM ;)

Um, nothing I can see. djr33's idea might work out, but I'm still a bit curious, why not use:

http://www.enova-tech.net/eng/lab/jMyCarousel

It's free and already does what you want.

kobo1d
05-15-2010, 07:55 AM
hey! thx for ya input djr.

@john: well i dont use it because it does not support external controls...
i need a pagination-like navigation through the carousel...


how could i realise such an loop where it checks constantly for mouseover/mouseout ?!

kobo1d
05-15-2010, 01:06 PM
well after playing around sum time i realised that the timing problem could have sumthing todo with the carousel's config parameters...

as i found this line:


panelbehavior: {speed:2572, wraparound:false, persist:false},

as you can see i set the speed to 2572... now i thought whats gonna happen if i put the interval lenght also to a value around 2sec...

so i ended up with this code:



var timerLeft;
config.$leftnavbutton.hover(function(){ //assign nav button event handlers
timerLeft = setInterval(slideLeft, 2222);
}, function() {
clearInterval(timerLeft);
});

function slideLeft() {
stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby);
}


var timerRight;
config.$rightnavbutton.hover(function(){ //assign nav button event handlers
timerRight = setInterval(slideRight, 2222);
}, function() {
clearInterval(timerRight);
});

function slideRight() {
stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby);
}


and voila the timings are working... as soon as i unhover the carousel stops :-)


theres just one thing now which is a little nasty, the fact i have to hover for 2 secs before the carousel starts with it's first step, but i think i can live with that :D

or if you have an idea how i could fire the first step faster without changing the following step interval's, then i would be very happy to hear it!


once again thx to you john and djr for your time and a nice weekend i wish

:o



*EDIT*


this is the final code i have now which solves also the first 2sec waiting..
it now instantly starts sliding and keeps sliding until the exact moment i unhover:



var timerLeft;
config.$leftnavbutton.hover(function(){ //assign nav button event handlers
timerLeft = setInterval(slideLeft, 2222);
}, function() {
clearInterval(timerLeft);
});

function slideLeft() {
stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby);
}


config.$leftnavbutton.bind('mouseover', function(){ //assign nav button event handlers
stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby)
})
config.$rightnavbutton.bind('mouseover', function(){ //assign nav button event handlers
stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby)
})


var timerRight;
config.$rightnavbutton.hover(function(){ //assign nav button event handlers
timerRight = setInterval(slideRight, 2222);
}, function() {
clearInterval(timerRight);
});

function slideRight() {
stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby);
}



its maybe not that beautiful, but works like a charm ;-)

everythings done with that script... (can be tagged as resolved)

jscheuer1
05-15-2010, 02:36 PM
var timerLeft;
config.$leftnavbutton.hover(function(){ //assign nav button event handlers
slideLeft();
timerLeft = setInterval(slideLeft, 2222);
}, function() {
clearInterval(timerLeft);
});

function slideLeft() {
stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby);
}

var timerRight;
config.$rightnavbutton.hover(function(){ //assign nav button event handlers
slideRight();
timerRight = setInterval(slideRight, 2222);
}, function() {
clearInterval(timerRight);
});

function slideRight() {
stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby);
}

kobo1d
05-15-2010, 02:49 PM
ah i see ! that looks much nicer then just open another function..
i learned much again today :-)

thanks john im going to put some credits to you in my source code comments once my page is public !!


so now thats how my construct looks in the end:



var timerLeft;
config.$leftnavbutton.hover(function(){ //assign nav button event handlers
slideLeft();
timerLeft = setInterval(slideLeft, 2572);
}, function() {
clearInterval(timerLeft);
});

function slideLeft() {
stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby);
}


var timerRight;
config.$rightnavbutton.hover(function(){ //assign nav button event handlers
slideRight();
timerRight = setInterval(slideRight, 2572);
}, function() {
clearInterval(timerRight);
});

function slideRight() {
stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby);
}



cheers