How to make getElementsByClassName work instead of getElementById?

Question

I need to make it work for all elements: JSFiddle

First element

  <p id="tweet1">First long text displayed fully on hover</p>

works through

   var tweet = document.getElementById('tweet1');

The second and third element doesn't work:

  <span class="tweet1">Second long text displayed fully on hover</span>

  <span class="tweet1">Third long text displayed fully on hover</span>

JavaScript:

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

var slide_timer,
    max = tweet.scrollWidth,
    slide = function () {
        tweet.scrollLeft += 2;
        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;
    }
};

CSS

#tweet1 {
    overflow:hidden;
    white-space:nowrap;
    width:120px;
}
.hiding {
    text-overflow:ellipsis;
}

When i change in HTML <p id="tweet1"> to <p class="tweet1">, in CSS #tweet1 to .tweet1 and in JS var tweet = document.getElementById('tweet1'); to var tweet = document.gelElementsByClassName('tweet1'); nothing happens, first element stops to work.

`getElementsByClassName` returns an `HTMLCollection`, which pretty much looks like an array. — Evan Trimboli, Dec 13 '13 at 01:59
JQuery's `$("tweet1")` is so much easier... And will give you more samples... — Alexei Levenkov, Dec 13 '13 at 02:02

Sushanth -- · Answer 1 · 2013-12-13T02:32:28.843

2

gelElementsByClassName gives you a list ..

You would need to iterate over the list and assign the same functionality to each of the elements in the HTML collection.

var tweets = document.getElementsByClassName('tweet1');
for (var i = 0; i < tweets.length; i++) {
    var tweet = tweets[i];
    tweet.className = 'hiding';

    var slide_timer,
    max = tweet.scrollWidth,
        slide = function () {
            tweet.scrollLeft += 2;
            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;
        }
    }
}

It is a better idea to extract the contents of the for loop into a separate function.

Updated Fiddle

edited Dec 13 '13 at 02:32

answered Dec 13 '13 at 02:00

Sushanth --

55,259
9
66
105

I've inserted your code in JS and corected HTML, CSS, but it doesn't work: http://jsfiddle.net/27uuj/10/ – kostya572 Dec 13 '13 at 02:12
That is because you are completely removing the class name tweet.. You need to only toggle the class `hidden` – Sushanth -- Dec 13 '13 at 02:18
Unfortunately, not working as it should work. But someone updating fiddle with jquery and it starts to work as it should be - http://jsfiddle.net/27uuj/30/ My main aim is that it will work as first example on hover - http://jsfiddle.net/27uuj/3/ – kostya572 Dec 13 '13 at 02:39

score 0 · Accepted Answer · edited Dec 13 '13 at 03:06

HTML First long text displayed fully on hover

<p class="tweet1">Second long text displayed fully on hover</p>

<p class="tweet1">Third long text displayed fully on hover</p>

CSS

 .tweet1 {
   overflow:hidden;
    white-space:nowrap;
   width:120px;
}
.hiding {
    text-overflow:ellipsis;
}

jQuery/Javascript

$('.tweet1').addClass('hiding');

var slide_timer,
slide = function (element) {
    element.scrollLeft += 2;
    if (element.scrollLeft < element.scrollWidth) {
        slide_timer = setTimeout(function(){slide(element);}, 40);
    }

};


$('.tweet1').mouseover(function () {        
    clearTimeout(slide_timer);
        $(this).removeClass('hiding');
        slide(this);
    });

$('.tweet1').mouseout(function () {        
    clearTimeout(slide_timer);
        $(this).addClass('hiding');
        $(this)[0].scrollLeft = 0;
    });

To see it in action check out this jsFiddle

Thank you so much! You helped me a lot. Brilliant work. – kostya572 Dec 13 '13 at 02:48 — kostya572, Dec 13 '13 at 02:48
My pleasure mate. Notice that I'm using jQuery – Leo Dec 13 '13 at 02:49 — Leo, Dec 13 '13 at 02:49

How to make getElementsByClassName work instead of getElementById?

2 Answers2