javascript modification

Question

I have used scrolling script from this site. http://blog.waiyanlin.net/example/jquery/flyingtext.html. I need the animation scrolls from right to left. How can i do that?

Answer 1

find-replace your code, change Left with Right inside your document.ready() js

Answer 2

If you have seen this animation is done by animating the left-margin of text from 0 to some pixals.

What you want to do is to animate it from right hence you can set marginRight, in the script, insteed of marginLeft.

UPDATE: In css you will also have to use

.flying-text
{
    //Remove this: margin-left:-100px;
    margin-right:0px;
}

Answer 3

Replace marginLeft with marginRight and edit the CSS so the text is right aligned.

You can see a working example here: http://jsfiddle.net/DkRRw/

Answer 4

As BondyThegreat pointed out, you need to swap Left with right in the script. You also need to make a change to the style sheet.

<script>
$(document).ready(function(){

    $('.container .flying-text').css({opacity:0});
    $('.container .active-text').animate({opacity:1, marginRight: "350px"}, 4000);

    var int = setInterval(changeText, 5000);    


function changeText(){

    var $activeText = $(".container .active-text"); 

    var $nextText = $activeText.next(); 
    if($activeText.next().length == 0) $nextText = $('.container .flying-text:first');

    $activeText.animate({opacity:0}, 1000);
    $activeText.animate({marginRight: "-100px"});

    $nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginRight: "350px"}, 4000, function(){

        $activeText.removeClass('active-text');                                           
    });
}
});
</script>

Update the style sheet to:

.flying-text{
   margin-right:-100px;
   text-align:right;
}