Using Javascript & CSS Animations to create a TEXT marquee

Question

I am preying somebody can help me out..

Brief History:

Im building a radio station on the internet, the Webpage will display metadata for songs playing and songs played in the past...

So far i have managed to build a MYSQL database, Query the database in PHP, encode the array of data in JSON, use ajax to set a timer to query the database and JavaScript to parse the data to HTML...

I have also managed to get my head around HTML & CSS to an extent..

I am brand new to coding and everything is coming along nicely and am doing some courses in JavaScript but what i want is far too advanced for any course i have taken so far....

The Question:

I wish to make a TEXT marquee that will display the name of the song currently playing. The text marquee will have some rules.

Rule 1: The name of the song will stay static on screen if it is equal to or less than the display area.

Rule 2: If the name of the song is greater than the display area then it needs to animate.

Before you go any further i need to note that i have looked at a few JQuery marquees but none of them suite my needs

The Maths:

FIXED DIV WIDTH = 257.4 Pixels

(This is the "wrapper" which will contain the variable text (which is a little bigger than my MAXIMUM TEXT WIDTH so it looks pretty...)

VARIABLE TEXT WIDTH = x characters

(defined by "list0title" which is variable data from MYSQL dB) (the characters will need to be converted to pixels for use with MAXIMUM TEXT WIDTH)

MAXIMUM TEXT WIDTH = 250 Pixels

(this is the maximum text that fits in the "wrapper" comfortably, if VARIABLE TEXT WIDTH is equal to or less than MAXIMUM TEXT WIDTH the text will be static, otherwise the text will animate in a ping pong style)

ANIMATION:

VARIABLE TEXT WIDTH - MAXIMUM TEXT WIDTH = PIXELS TO ANIMATE (for example if my VARIABLE TEXT WIDTH was 150 pixels and my MAXIMUM TEXT WIDTH was 100 PIXELS i would need to animate the text by 50 pixels 150-100 = 50 pixels)

So this above is me explaining The JavaScript / CSS intergrated script i need in the best way i can..

I will include my JavaScript Below so you can see how the information is obtained from the MYSQL database and also provide the example code for the animation.

JAVASCRIPT:

function getPlaylist()
{
var xmlhttp,
timer;

if (window.XMLHttpRequest)
   {
   xmlhttp = new XMLHttpRequest();
   } 
else
   {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }

xmlhttp.onreadystatechange = function ()
    {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
    {

    var list = eval ('('+xmlhttp.responseText+')');
    {

document.getElementById("list0artist").innerHTML=list[0].artist;
document.getElementById("list0title").innerHTML=list[0].title;
document.getElementById("list0titlelength").innerHTML=list[0].title.clientwidth;
document.getElementById("list0label").innerHTML=list[0].label;
document.getElementById("list0albumyear").innerHTML=list[0].albumyear;
document.getElementById("list0picture").innerHTML='<img src="/testsite/covers/' + list[0].picture + '" width="169" height="169"/>';

document.getElementById("list1artist").innerHTML=list[1].artist;
document.getElementById("list1title").innerHTML=list[1].title;
document.getElementById("list1label").innerHTML=list[1].label;
document.getElementById("list1albumyear").innerHTML=list[1].albumyear;
document.getElementById("list1picture").innerHTML='<img src="/testsite/covers/' + list[1].picture + '" width="83px" height="83px"/>';

document.getElementById("list2artist").innerHTML=list[2].artist;
document.getElementById("list2title").innerHTML=list[2].title;
document.getElementById("list2label").innerHTML=list[2].label;
document.getElementById("list2albumyear").innerHTML=list[2].albumyear;
document.getElementById("list2picture").innerHTML='<img src="/testsite/covers/' + list[2].picture + '" width="83px" height="83px"/>';

document.getElementById("list3artist").innerHTML=list[3].artist;
document.getElementById("list3title").innerHTML=list[3].title;
document.getElementById("list3label").innerHTML=list[3].label;
document.getElementById("list3albumyear").innerHTML=list[3].albumyear;
document.getElementById("list3picture").innerHTML='<img src="/testsite/covers/' + list[3].picture + '" width="83px" height="83px"/>';   

document.getElementById("list4artist").innerHTML=list[4].artist;
document.getElementById("list4title").innerHTML=list[4].title;
document.getElementById("list4label").innerHTML=list[4].label;
document.getElementById("list4albumyear").innerHTML=list[4].albumyear;
document.getElementById("list4picture").innerHTML='<img src="/testsite/covers/' + list[4].picture + '" width="83px" height="83px"/>';   
    }


}
};

xmlhttp.onerror = function() 
{
    clearTimeout(timer);
    };

xmlhttp.open("GET", "playlist.php?t=" + Math.random(), true);
xmlhttp.send();


timer = setTimeout(getPlaylist, 1000);
}

CSS ANIMATION:

<!DOCTYPE html>
<html>
<head>
<script src="/testsite/OneSecondPlaylist.js"></script>
<style type="text/css">

#wrapper {
    width: 257.4px;
    height: 41.85px;
    overflow: hidden;
    background-color: #383838;
    color: #FFFFFF;
    line-height: 41.85px;
    font-size: 80%;
    font-family: baumans;
    color: #FFFFFF;
}

.textbox {
-moz-animation-duration: 4s;
    -moz-animation-name: slidein;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: linear;
    white-space:nowrap;
}
@-moz-keyframes slidein {
from {
    margin-left:3%;
    }
to {
    margin-left:-33%;
    }

</style>
</head>
<body onload="getPlaylist()">
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/baumans:n4:default.js" type="text/javascript"></script>
<div id="wrapper">
    <div id="list0artist"></div>
</div>
<div id="wrapper">
    <div id="list0title" class="textbox"></div>
</div>

</body>
</html>

ANIMATION NOTE: I am aware that i need to play with the webkits to get it working on all browsers

I hope i have not included too much code, i felt it was important to show it in its entirety as you may have some pointers outside of the question i am asking..

So to sum up i am basically asking you guys to help me code a JavaScript / CSS intergrated script that will animate based upon the rules i have defined.

Thanks for reading this through, i hope you dont think im being lazy asking for this, i feel i am making good headway for somebody who has zero coding knowledge and just need a push in the right direction!!!.. Many Thanks!!! Justin..

Answer 1

var texts = document.getElementsByClassName('text'); // Class I added to innards

for (var i = 0; i < texts.length; i++) {

    if (texts[i].parentNode.offsetWidth < texts[i].offsetWidth) {
        texts[i].classList.add("textbox");
    }
}

Demo

Some notes:

• You can't have decimal pixels like .4px, it will be rounded up or down based on the browser
• I'd recommend pausing at some point in the animation, continuous movement is annoying for users
• Using margins is kind of iffy, I might opt for using left instead. This is what I did in the demo

Edit

To fix the positioning issue for the animation you can use transforms instead of position:absolute.

transform:translateX(calc(-100% + 257px)); /* -100% + parent width */

Demo

But like I said before, using a js solution would likely be better