CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
user3158649
user3158649

Reputation: 90

Div scroll automatically on page load - Wordpress

I've currently got a div (.scrolls) with horizontal scrolling on a custom page template in wordpress. Everything works great, but I want the div to automatically start slowly scrolling from left to right when the page loads. I've looked into tinyscrollbar and a few others, but haven't been able to make anything work. I'm using Thesis Theme, and while there's a place to put header scripts, I can't seem to get the coding right!

I'm a total jquery newb and can't find a simple tutorial that literally says "This exact code <script>...</script> goes here. Can anyone help?

Upvotes: 1

Views: 2760

Answers (3)

DaniP
DaniP

Reputation: 38252

Try with this in Jquery:

$(document).ready(function() {
    var sL = $(this).width();
    $('.scrolls').animate({
        scrollLeft : sL
    },5000)
})

Just change the 5000 to set the time you want.

The demo Fiddle

Upvotes: 1

laaposto
laaposto

Reputation: 12213

With Jquery you can try this

$(".scrolls").animate({ scrollLeft: valueToScroll }, { duration: 200 } );

where valueToScroll should be how much you want to scroll

Upvotes: 0

Tony
Tony

Reputation: 4609

Here is an example of moving the body of this page.

var movement = 0;  
setInterval(function () { 
$('body').css('margin-left', movement + 'px');
movement += -10; 
}, 400);

Run that in your console to see what happens.

Or you can use CSS Animations like so

@keyframes moveLeft
{
from {margin-left: 0;}
to {margin-left: -100px;}
}

@-webkit-keyframes moveLeft /* Safari and Chrome */
{
from {margin-left: 0;}
to {margin-left: -100px;}
}
#divToMove
{
animation: moveLeft 5s;
-webkit-animation: moveLeft 5s; /* Safari and Chrome */
}

Upvotes: 0

Related Questions