this.stop() and this.start() no longer functions?

[Lynx]

Forum URL: Codes and Designs


I've been working on the speed setting in my Forum Marquee - the max value (was set at 10) really showed no difference in speed. So, I played around with the numbers and now have a new max value of 250 - which works great. This is the only change I made to the JS, yet now the Console is telling me that this.stop and this.start aren't functions:




After adjusting the max speed, the onmouseover and onmouseout WERE working fine, as I checked it. I log on today, and I get the above errors and now it doesn't start / stop. Did something change on the jQuery / JS side of things?

If needed, I can post a copy of my current JS script here.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Jan 11, 2016 17:30:13 GMT -8 Lynx said:

Forum URL: Codes and Designs


I've been working on the speed setting in my Forum Marquee - the max value (was set at 10) really showed no difference in speed. So, I played around with the numbers and now have a new max value of 250 - which works great. This is the only change I made to the JS, yet now the Console is telling me that this.stop and this.start aren't functions:




After adjusting the max speed, the onmouseover and onmouseout WERE working fine, as I checked it. I log on today, and I get the above errors and now it doesn't start / stop. Did something change on the jQuery / JS side of things?

If needed, I can post a copy of my current JS script here.

Did u try adding parenthesis () at the end
Also try adding $(this).start()

[Lynx]

Hey, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓. Thanks for responding. Here's my current code:


// Forum Marquee
// Version 2.0.1
// Authored By: MSG
// This heading is to remain intact.
$('document').ready(function () {
   if (pb.data('route') && pb.data('route').name && pb.data('route').name == 'home') // Only run on the Home page
   {
       var msg_mqr = ''; // Set our marquee to an empty string
       var msg_mqr_tlr = '#000000'; // Set our default text color to black
       var msg_mqr_spd = (parseInt(pb.plugin.get('msg_forum_marquee').settings.marquee_speed)); // Set speed to setting value, then check range
       if (msg_mqr_spd < 1)
       {
           msg_mqr_spd = 1;  // minimum speed setting is 1
       }
       else if (msg_mqr_spd > 250)
       {
           msg_mqr_spd = 250;  // maximum speed setting is 250
       }
       if (pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[0].text_line != undefined) // See if user filled in the first text line
       {
           for (var z = 0; z < pb.plugin.get('msg_forum_marquee').settings.marquee_and_links.length; z++) // Start going through all the forms and adding them in
           {
               msg_mqr += '<font color=\'' + pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z].text_color + '\'>' + pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z].text_line + '</font>';
               if ((pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z].link != "") && (pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z].link_url != "")) // Do we have links?  If not, skip
               {
                   msg_mqr += '    Link: <a href=\'' + pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z].link_url + '\'>' + pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z].link + '</a>';
               }
               if (pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z + 1] != undefined) // is their another entry?  If so, add separator.  If not, add end separator.
               {
                   msg_mqr += '    ' + pb.plugin.get('msg_forum_marquee').settings.separator_indicator + '    '; // separator if another entry
               }
               else
               {
                   msg_mqr += '    <<<>>>    '; // separator if we are about to loop back to the first entry
               }
           }
       }
       else if (pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[0].text_line == undefined)
       {
           msg_mqr = '<font color="+msg_mqr_tlr+">Thank you for using the Forum Marquee 2.0.0</font>';
       }
       var marquee = $('<marquee direction=\'left\' scrolldelay=\'' + msg_mqr_spd + '\' onmouseover=\'this.stop()\' onmouseout=\'this.start()\'>' + msg_mqr + '</marquee>');
       $('#content').prepend(marquee);
   }
});


As you can see, those are part of the <marquee> tag. They were working fine, but decided to stop working when I had logged on today, so not sure what gives. Not sure if the <marquee> tag itself is the issue, but that's what I need in there for now - at least until I learn JS well enough to remove that part altogether and strictly use JS for the scrolling.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Jan 11, 2016 18:34:22 GMT -8 Lynx said:

Hey, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ . Thanks for responding. Here's my current code:


// Forum Marquee
// Version 2.0.1
// Authored By: MSG
// This heading is to remain intact.
$('document').ready(function () {
   if (pb.data('route') && pb.data('route').name && pb.data('route').name == 'home') // Only run on the Home page
   {
       var msg_mqr = ''; // Set our marquee to an empty string
       var msg_mqr_tlr = '#000000'; // Set our default text color to black
       var msg_mqr_spd = (parseInt(pb.plugin.get('msg_forum_marquee').settings.marquee_speed)); // Set speed to setting value, then check range
       if (msg_mqr_spd < 1)
       {
           msg_mqr_spd = 1;  // minimum speed setting is 1
       }
       else if (msg_mqr_spd > 250)
       {
           msg_mqr_spd = 250;  // maximum speed setting is 250
       }
       if (pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[0].text_line != undefined) // See if user filled in the first text line
       {
           for (var z = 0; z < pb.plugin.get('msg_forum_marquee').settings.marquee_and_links.length; z++) // Start going through all the forms and adding them in
           {
               msg_mqr += '<font color=\'' + pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z].text_color + '\'>' + pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z].text_line + '</font>';
               if ((pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z].link != "") && (pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z].link_url != "")) // Do we have links?  If not, skip
               {
                   msg_mqr += '    Link: <a href=\'' + pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z].link_url + '\'>' + pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z].link + '</a>';
               }
               if (pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[z + 1] != undefined) // is their another entry?  If so, add separator.  If not, add end separator.
               {
                   msg_mqr += '    ' + pb.plugin.get('msg_forum_marquee').settings.separator_indicator + '    '; // separator if another entry
               }
               else
               {
                   msg_mqr += '    <<<>>>    '; // separator if we are about to loop back to the first entry
               }
           }
       }
       else if (pb.plugin.get('msg_forum_marquee').settings.marquee_and_links[0].text_line == undefined)
       {
           msg_mqr = '<font color="+msg_mqr_tlr+">Thank you for using the Forum Marquee 2.0.0</font>';
       }
       var marquee = $('<marquee direction=\'left\' scrolldelay=\'' + msg_mqr_spd + '\' onmouseover=\'this.stop()\' onmouseout=\'this.start()\'>' + msg_mqr + '</marquee>');
       $('#content').prepend(marquee);
   }
});


As you can see, those are part of the <marquee> tag. They were working fine, but decided to stop working when I had logged on today, so not sure what gives. Not sure if the <marquee> tag itself is the issue, but that's what I need in there for now - at least until I learn JS well enough to remove that part altogether and strictly use JS for the scrolling.

Please try encasing in $(this)
.start is part of jquery $ tells it the function is jquery

[Lynx]

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓,

I've changed it to this:

var marquee = $('<marquee direction=\'left\' scrolldelay=\'' + msg_mqr_spd + '\' onmouseover=\'$(this).stop()\' onmouseout=\'$(this).start()\'>' + msg_mqr + '</marquee>');



I'm no longer getting an error about this.stop (even though it doesn't stop), but getting this:

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Jan 11, 2016 18:47:29 GMT -8 Lynx said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ ,

I've changed it to this:

var marquee = $('<marquee direction=\'left\' scrolldelay=\'' + msg_mqr_spd + '\' onmouseover=\'$(this).stop()\' onmouseout=\'$(this).start()\'>' + msg_mqr + '</marquee>');



I'm no longer getting an error about this.stop (even though it doesn't stop), but getting this:goo 

After i looked up the animations you are correct in using this without $. .start and stop is also native to marquee tags. However i would try a workaround for better browser support and see if it works onmouseover="this.scrollAmount = 6" onmouseout="this.scrollAmount = 0"

[Quozzo]

You still have it calling jQuery, but it is not a jQuery method. Setting the attributes via the inspector works fine.

[Lynx]

Jan 11, 2016 22:16:31 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Jan 11, 2016 18:47:29 GMT -8 Lynx said:

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ ,

I've changed it to this:

var marquee = $('<marquee direction=\'left\' scrolldelay=\'' + msg_mqr_spd + '\' onmouseover=\'$(this).stop()\' onmouseout=\'$(this).start()\'>' + msg_mqr + '</marquee>');



I'm no longer getting an error about this.stop (even though it doesn't stop), but getting this:goo 

After i looked up the animations you are correct in using this without $. .start and stop is also native to marquee tags. However i would try a workaround for better browser support and see if it works onmouseover="this.scrollAmount = 6" onmouseout="this.scrollAmount = 0"

Thanks for the reply, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓.

I've changed it to your suggestion and it still doesn't want to play nice. No more errors in the console, but it doesn't stop either. Guess I'll just have to wait until I can do the whole thing in JS so I can just get rid of the <marquee> tag. Thanks for your time!

Thanks to you for your reply as well, Quozzo.

[Peter]

Lynx ,

I highlighted those attributes in your other thread when I went through your code. I guess you missed it.

You need to set the "scrollamount" using "setAttribute".

developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
developer.mozilla.org/en/docs/Web/API/Element/setAttribute

Edit:  Forgot to explain why this is the case;  Just run this in your console and see if you can notice the problem.

for(var k in document.createElement("marquee")) console.log(k)

Edit: Forget that, forgot it won't show.  Inspect the marquee element and look at the DOM attributes.

Edit:  Something I found interesting when looking at the prototype of a marquee, is that the interface is HTMLDivElement.

Edit again (I can't sleep):  Have a play around with CSS Animations.  Here is a very very basic start...

developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

<style>
 
div.my-marquee {
 
animation-delay: 0s;
animation-direction: normal;
animation-duration: 8s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-name: msg-marquee;
position: absolute;
right: 0px;
 
}
 
@keyframes msg-marquee {
 
100% {

right: 100%;

}

}
 
</style>

<div class="my-marquee">Hello</div>

[Lynx]

I'm still doing something wrong.


var marquee = $('<marquee direction=\'left\' scrolldelay=\'' + msg_mqr_spd + '\' onmouseover=\'this.setAttribute(\'scrollAmount\',\'0\')\' onmouseout=\'this.setAttribute(\'scrollAmount\'.\'6\')\'>' + msg_mqr + '</marquee>');


This thing is getting to be more hassle than it's worth. Might just take a break from it for awhile.

[Quozzo]

Instead of using the same quotation mark or apostrophe for both the string and the elements attributes, make them different so it's easy to differentiate one from the other. The problem with your code is that the parser doesn't know if you're trying to escape the apostrophe for the string or the attribute for the string that's inside the argument in the attribute.

var marquee = $("<marquee direction='left' scrolldelay='" + msg_mqr_spd + "' onmouseover='this.setAttribute(\"scrollAmount\",\"0\")' onmouseout='this.setAttribute(\"scrollAmount\",\"6\")'>" + msg_mqr + "</marquee>");
Provided you use the same for opening and closing the string you can switch them around to suit your preferences.


Just realized you used a dot instead of a comma to seporate one of the arguments in the mouseout attribute. (find it in your post)

As a side note: The marquee is showing up as a shadow dom in the console. Is that normal for marquees?



Run this in the console and check the top of the screen
var msg_mqr_spd = 1, msg_mqr = "hello", marquee = $("<marquee direction='left' scrolldelay='" + msg_mqr_spd + "' onmouseover='this.stop()' onmouseout='this.start()'>" + msg_mqr + "</marquee>").insertBefore("#content");

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Jan 14, 2016 15:45:16 GMT -8 Lynx said:

I'm still doing something wrong.


var marquee = $('<marquee direction=\'left\' scrolldelay=\'' + msg_mqr_spd + '\' onmouseover=\'this.setAttribute(\'scrollAmount\',\'0\')\' onmouseout=\'this.setAttribute(\'scrollAmount\'.\'6\')\'>' + msg_mqr + '</marquee>');


This thing is getting to be more hassle than it's worth. Might just take a break from it for awhile.

It working yet

[Lynx]

Jan 15, 2016 3:07:59 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Jan 14, 2016 15:45:16 GMT -8 Lynx said:

I'm still doing something wrong.


var marquee = $('<marquee direction=\'left\' scrolldelay=\'' + msg_mqr_spd + '\' onmouseover=\'this.setAttribute(\'scrollAmount\',\'0\')\' onmouseout=\'this.setAttribute(\'scrollAmount\'.\'6\')\'>' + msg_mqr + '</marquee>');


This thing is getting to be more hassle than it's worth. Might just take a break from it for awhile.

It working yet

No, unfortunately. I even tried Quozzo's suggestion above with the quotes. What seems to work in console apparently isn't working in the plugin's JS component. I like Peter's idea above, using CSS animation, but that's going to require another re-write, I think. So, I've just stopped working on it for now - maybe some time away from it will let my head clear and then I can try tackling it again.

I do want to thank everyone for their suggestions and help. It has been much appreciated!

EDIT: Version 2.0.0 is now available in the library.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Jan 15, 2016 10:55:19 GMT -8 Lynx said:

Jan 15, 2016 3:07:59 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

It working yet

No, unfortunately. I even tried Quozzo 's suggestion above with the quotes. What seems to work in console apparently isn't working in the plugin's JS component. I like Peter 's idea above, using CSS animation, but that's going to require another re-write, I think. So, I've just stopped working on it for now - maybe some time away from it will let my head clear and then I can try tackling it again.

I do want to thank everyone for their suggestions and help. It has been much appreciated!

EDIT: Version 2.0.0 is now available in the library.

If it works in console and not component are you putting your insert code in a document ready tag?
Also did you remove that period quozzo pointed out?

[Lynx]

It is indeed contained in a document ready function.

Yes. The period has been changed to a comma.