scroll with delay and loop list item

jakecigar

Re: scroll with delay and loop list item

7 years ago

Scroll what? Loop what items? Share some code.

JΛ̊KE

MaxEnrik

Re: scroll with delay and loop list item

7 years ago

I'd like to automatically loop my code and I'd like to change without button.

$(function() {
$.fn.scrollTo = function( target, options, callback ){
if(typeof options == 'function' && arguments.length == 2){ callback = options; options = target; }
var settings = $.extend({
scrollTarget : target,
offsetTop : 50,
duration : 500,
easing : 'swing'
}, options);
return this.each(function(){
var scrollPane = $(this);
var scrollTarget = (typeof settings.scrollTarget == "number") ? settings.scrollTarget : $(settings.scrollTarget);
var scrollY = (typeof scrollTarget == "number") ? scrollTarget : scrollTarget.offset().top + scrollPane.scrollTop() - settings.offsetTop;
scrollPane.animate({scrollTop : scrollY }, settings.duration, settings.easing, function(){
if (typeof callback == 'function') { callback.call(this); }
});
});
}
var $chapters = $('#demo-stage').find('ul').children('li');
var $chScrollPositions = new Array();
$chapters.each(function(i){
$chScrollPositions[i] = Math.round($(this).offset().top - $('#demo-stage').offset().top) - 10;
});
$chapters.eq(0).addClass('active'); // Set First Chapter Active on Start
$('#demo-nav > nav > button').click(function(){
var last = $chapters.parent().find('li.active').removeClass('active').index();
var next;
switch($(this).index()){
case 1: // Action - Next Chapter
next = (last + 1 == $chapters.length) ? 0 : last + 1; // Loop around to first chapter
break;
case 2: // Action - Last Chapter
next = $chapters.length - 1;
break;
case 3: // Action - First Chapter
next = 0;
break;
}
$chapters.eq(next).addClass('active'); // Set Next Chapter Active
$('#demo-stage').scrollTo($chScrollPositions[next]);
});
});

jakecigar

Re: scroll with delay and loop list item

7 years ago

It would really be helpful to see this live. With the CSS and the HTML.

Or do you just want to programatically just keep clicking rthe same button?

That’s just

setTimeout(function() {
$('#demo-nav > nav > button').click()
},10000)

JΛ̊KE

MaxEnrik

Re: scroll with delay and loop list item

7 years ago

I would like to make some code for my "Item List" <ul> > <li>(* 3 or more ) with role (scroll) animate.

I would like to make my "item list" first child show at the start page after each 2 sec scrolled my next "item list" 2, 3 or more looping.

I still suffer from it. Because I started use jQuery 2 day ago.

Please help me. Also sorry my English.

If you help me I will be very happy.

Thanks

jakecigar

Re: scroll with delay and loop list item

7 years ago

It would really be helpful to see this live. With the CSS and the HTML.

Do you want HTML Marquee Code ?

JΛ̊KE

MaxEnrik

Re: scroll with delay and loop list item

7 years ago

Thanks for the best help.

I can't find "delay".

jakecigar

Re: scroll with delay and loop list item

7 years ago

I need to know what your page looks like. I can’t guess anymore.

JΛ̊KE

MaxEnrik

Re: scroll with delay and loop list item

7 years ago

Example

I'd like to again say. Without button code. Just I'd like to auto start scrolled all my <li>.

Thanks.

jakecigar

Re: scroll with delay and loop list item

7 years ago

<!DOCTYPE html>

<head>

<title>.scrollTo() jQuery API</title>

<style>

#jq-primaryContent { float:left; width:100% !important; }

#jq-content { padding:5px; }

</style>

</head>

<style>

#demo1 { position:relative; height:60px; }

#demo-nav { position:absolute; top:5px; margin:5px; }

#demo-nav span { font-size:12px; }

#demo-stage { position:relative; display:block; top:40px; background:#fff; height:60px; overflow:auto; }

#demo-stage li, #demo-stage li h3 { color:#777; list-style: none; text-align: center; }

#demo-stage li.active, #demo-stage li.active h3 { color:#000; }

</style>

$(function() {

/*!

* jQuery - .scrollTo()

*

* Author:

* Timothy A. Perez

*

* Date: OCT 2012

* Comments: Setting new web standards...

*/

// .scrollTo - Plugin

$.fn.scrollTo = function( target, options, callback ){

if(typeof options == 'function' && arguments.length == 2){ callback = options; options = target; }

var settings = $.extend({

scrollTarget : target,

offsetTop : 50,

duration : 500,

easing : 'swing'

}, options);

return this.each(function(){

var scrollPane = $(this);

var scrollTarget = (typeof settings.scrollTarget == "number") ? settings.scrollTarget : $(settings.scrollTarget);

var scrollY = (typeof scrollTarget == "number") ? scrollTarget : scrollTarget.offset().top + scrollPane.scrollTop() - settings.offsetTop;

scrollPane.animate({scrollTop : scrollY }, settings.duration, settings.easing, function(){

if (typeof callback == 'function') { callback.call(this); }

});

}

// [start] Demo Code //

var $chapters = $('#demo-stage').find('ul').children('li');

var $chScrollPositions = new Array();

// Cache Scroll Positions for Each Chapter

$chapters.each(function(i){

$chScrollPositions[i] = Math.round($(this).offset().top - $('#demo-stage').offset().top) - 20;

});

$chapters.eq(0).addClass('active'); // Set First Chapter Active on Start

$('#demo-nav > nav > button').click(function(){

var last = $chapters.parent().find('li.active').removeClass('active').index();

var next;

switch($(this).index()){

case 1: // Action - Next Chapter

next = (last + 1 == $chapters.length) ? 0 : last + 1; // Loop around to first chapter

break;

case 2: // Action - Last Chapter

next = $chapters.length - 1;

break;

case 3: // Action - First Chapter

next = 0;

break;

}

$chapters.eq(next).addClass('active'); // Set Next Chapter Active

$('#demo-stage').scrollTo($chScrollPositions[next]);

});

// [end] Demo Code //

});

setInterval(function() {

$('#demo-nav > nav > button.next').click()

},1000)

</script>

<nav>

<span>Scroll To: </span>

<button class="next">Next Chapter</button>

<button class="last">Last Chapter</button>

<button class="first">First Chapter</button>

</nav>

</section>

<ul>

<li><h3>Chapter 1</h3></li>

<li><h3>Chapter 2</h3></li>

<li><h3>Chapter 3</h3></li>

<li><h3>Chapter 4</h3></li>

<li><h3>Chapter 5</h3></li>

<li><h3>Chapter 6</h3></li>

<li><h3>Chapter 7</h3></li>

<li><h3>Chapter 8</h3></li>

<li><h3>Chapter 9</h3></li>

<li><h3>Chapter 10</h3></p></li>

</ul>

</section>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

JΛ̊KE

MaxEnrik

Re: scroll with delay and loop list item

7 years ago

Thank YOU Thank YOU sooo Much!.

Max

Response title

Attachments

jQuery Forum