Convert javascript code scrolling text into jquery

Question

Im looking for the Jquery version of this code:

var tweet = document.getElementById('tweet');
tweet.id = 'tweet_js';
tweet.className = 'hiding';

var slide_timer,
max = tweet.scrollWidth,
slide = function () {
    tweet.scrollLeft += 1;
    if (tweet.scrollLeft < max) {
        slide_timer = setTimeout(slide, 40);
    }
};

tweet.onmouseover = tweet.onmouseout = function (e) {
e = e || window.event;
e = e.type === 'mouseover';
clearTimeout(slide_timer);
tweet.className = e ? '' : 'hiding';
if (e) {
    slide();
} else {
    tweet.scrollLeft = 0;
}
};

this code was posted here: http://jsfiddle.net/sdleihssirhc/AYYQe/3/ as an answer to this question: CSS/JQuery powered sideways scrolling text on hover

score 2 · Answer 1 · answered Feb 12 '12 at 22:45

2

I would suggest you write it ;) Or do you have any problems doing it? And why you want to use jquery for this if your code works already? You dont get any performance advantages or stuff like that.

answered Feb 12 '12 at 22:45

AgnosticMantis

716
3
11

You *should* get a file size advantage though, and that matters when transferring over HTTP. – alex Feb 12 '12 at 22:52
alex: File size advantage? I dont think you save 5 MB's if you successfully converted it. I also dont think that such small amounts of file size saving matters in a DSL-worst-world. But when we're speaking in such small numbers, i think that your execution time slows down, because jQuery cant do more than use the native methods. – AgnosticMantis Feb 12 '12 at 22:57
I find it easier to use Jquery with Drupal than javascript. I tried the javascript code, but it Doesn't load as expected. – Nizarnav Feb 12 '12 at 22:59
If you are able to work with jQuery, than you should be able to read that js code atleast. But maybe someone could help you with your loading problem. Just tell what the problem is. – AgnosticMantis Feb 12 '12 at 23:02

ShankarSangoli · Answer 2 · 2012-02-13T20:55:57.290

I would use the code as it is if working fine. Because there is no performance gain or lines of in this code.

If you want to see the jQuery version of it, here you go.

var $tweet = $('#tweet');
$tweet.attr({
    id: 'tweet_js',
    class: 'hiding'
});

var slide_timer,
max = $tweet.outerWidth(),
var slide = function () {
    $tweet.scrollLeft($tweet.scrollLeft() + 1);
    if ($tweet.scrollLeft() < max) {
        slide_timer = setTimeout(slide, 40);
    }
};

$tweet.bind('mouseover mouseout', function (e) {
    var isMouseOver = e.type === 'mouseover';
    clearTimeout(slide_timer);
    tweet.toggleClass('hiding', !isMouseOver);
    if (isMouseOver) {
        slide();
    } else {
        $tweet.scrollLeft(0);
    }
});

Thank You ShankarSangoli, Dreamwaver tell me there is an error in line 7. — Nizarnav, Feb 13 '12 at 20:54

Convert javascript code scrolling text into jquery

2 Answers2