Marquee Plugin

[Lynx]

Thank you very much, Brian! I've fixed it up so it grabs the rest of the <span> tags, but now it won't scroll. I'm missing something.

I've got something else to try. ::crosses fingers::

Edit: Fudge! So close, yet so far away. I've got it to grab the <span> tags, but still can't get it to scroll now.

[Brian]

According to my browser's developer console the code is currently erroring around this part.

for (var c=0;z < 6;z++)
{
    var txt[c] = this.mqo.getElementsByTagName('span')[c].innerHTML;
}

To start with, z isn't a defined variable within your function so your for statement is making comparisons against an undefined variable.

var txt[c] is an invalid variable declaration. You cannot define an array index value without first declaring the variable it's a part of as an array. You'll likely want to change the entire above code to this.

var txt = new Array();
for (var c=0; c < this.mqo.getElementsByTagName('span').length; c++)
{
    txt[c] = this.mqo.getElementsByTagName('span')[c].innerHTML;
}

Lastly, using txt[c] on this line won't work as c is no longer defined after your for loop ends.

this.mqo.ary[i].innerHTML = txt[c];

You'll probably want to change it to this so it's utilizing the variable it's already looping through in the loop it's a part of.

this.mqo.ary[i].innerHTML = txt[i];

[Lynx]

Ooops! My bad on that one. I initially made the for loop with variable z, but then saw it was used later, so I changed the z's to c's - I just didn't get all of them. Dumb error on my part.

With your fixes, Brian, it's working great! Thank you! I did notice that it's now adding an undefined div (the word undefined shows up after the <<<>>> splitter and before the 1st text line shows again). Not sure where that came from.

[Peter]

Sorry, did say I would help out, just been very busy.

I did have a quick look at what 3rd party script you were using... yeah, it's old lol. I would suggest looking at a proper jQuery plugin.

Here is one I think is good...

github.com/aamirafridi/jQuery.Marquee

It may require you to rethink how your plugin will work, but I think it would be worth it.

Thumbs up to Brian for helping you

[Lynx]

Thank you very much for replying, Peter! I've actually got a different JS running right now - it's listed under Forum Marquee as the plugin name. It's actually almost ready - just getting an undefined text in the line (see my last post). You've got access to that plugin if you want to take a closer look. I'm going to export backups of the old ones and delete them off the plugin list.

Yes, I agree. I give a HUGE thanks to Brian for all of his help!

Note: I've bookmarked the link you've posted in case I need to use it. Thanks for that!

Edit: I've now removed the old versions. Only the current version, Forum Marquee is left in the installed plugins list.

2nd Edit: LOL - after I removed the old versions (even though they were disabled), the undefined went away. ::scratches head::

[Brian]

The undefined bit is probably due to this loop.

for (var i=0;i < maxw;i++)

The value of maxw is greater than the amount of items in the txt array, so when txt[i] gets to txt[4] in the loop it returns undefined since there's no headlines after the <<<>>> bit.

I believe it's using maxw in the loop because in order for your headlines to loop back to the beginning fluidly it has to check against the width of the page so you don't see one of them magically jump to the right. So rather than changing it to match the array length of txt I recommend changing this line:

this.mqo.ary[i].innerHTML = txt[i];

To this:

if(txt[i])
    this.mqo.ary[i].innerHTML = txt[i];

[Lynx]

Thank you VERY much, Brian! Now that it seems to be working, I guess it's time to let the ProBoards Staff take a look at it to see if it's worthy enough to be in the Plugin Library.

I haven't added in a Help Thread link in the builder yet, as I wanted to see if it would be accepted first.

[Lynx]

Yeah - first one's gonna get rejected. Found an issue myself after I exported it to the library.

This line is setting the width - pulling from the first span, which may or may not be the longest string:

var wid = objWidth(this.mqo.getElementsByTagName('span')[0]);


I tried setting up a new array and used a for loop to get the lengths of each span:

var bigwid = new Array();
   for (var k=0; k < this.mqo.getElementsByTagName('span').length; k++)
   {
       bigwid[k] = objWidth(this.mqo.getElementsByTagName('span').length);
   }

I even tried removing the objWidth part, thinking that might be the issue.

Then I tried sorting them to get the longest length moved into bigwid[0]:

bigwid.sort(function(a, b){return b-a});


Then I tried making that value the width it uses:

var wid = bigwid[0];


This was to replace this (I had commented the line out):

var wid = objWidth(this.mqo.getElementsByTagName('span')[0]);


so it would use the longest width as opposed to the width from the first <span>. Naturally, this is not working.

[Brian]

That sounds complicated.

Why not just set a variable outside of the loop then overwrite that variable every time you find a new largest width?

var bigwid = 0;
for (var k=0; k < this.mqo.getElementsByTagName('span').length; k++)
{
    if(objWidth(this.mqo.getElementsByTagName('span')[k]) > bigwid)
        bigwid = objWidth(this.mqo.getElementsByTagName('span')[k]);
}

Then bigwid is guaranteed to be equal to the largest width.

[Peter]

Your loop was almost correct, you just weren't iterating through the span list.


var bigwid = 0;
var spans = this.mqo.getElementsByTagName("span");

for(var k = 0; k < spans.length; k ++){
if(objWidth(spans.item(k)) > bigwid){
bigwid = objWidth(spans.item(k));
}
}

The variable "bigwid" will contain the biggest width.


Edit: Brian beat me too it

[Lynx]

Brian - you are a life-saver. Thank you!!

That solved my issue. Now to just add some <center> tags in the HTML, since I've noticed shorter Text Lines getting right-justified.

I'd give you 4 thumbs up - but since I've only got 2, I'll give you 2 thumbs up twice!

Edit: Thank you very much as well, Peter! The help you 2 have given me is much appreciated!

[Lynx]

The only thing bothering me now is this:


The gap from the separator to the letter of the next Text Line. I tried adding a text-align: center; in the CSS for the .marquee span, but didn't work. I also tried adding it directly into the <span> tags in the HTML. Is there anyways to get the shorter Text Lines centered, or is that something else that the JS would have to do?

Thanks!

[Brian]

Both your marquee lines and your separators are included inside of your spans, so in the end they're all a part of the same headline and are contained within an element that adopts bigwid as its width. This means that your separator will always be right next to your text so long as it's contained within the same span.

[Lynx]

Makes sense. Thank you, Brian! I think I'm ready to try exporting to the library again. I haven't received an email yet on my first one. Do I need to wait for a response first?

[Peter]

Lynx,

Nope, it will overwrite the one sitting their waiting to be reviewed.