insertBefore

[Lynx]

Okay - Marquee 2.0.0 is almost done (I think), but need a little help on this last part.

It does check to make sure it's the Home page being displayed (only runs on home page now) via if (pb.data('route').name == "Home") and I'd like to insert it before the News Feed. Since I know the News Feed is on the Home page, and its ID is #news, I'm looking at this but it doesn't look right:

$(msg_mqr).html('<marquee direction="left" scrolldelay="'+msg_mqr_spd+'" onmouseover="this.stop()" onmouseout="this.start()" '+msg_mqr+'</marquee>').insertBefore('#news')

Yeah, I'm cheating a bit by using the marquee tag, but I wrote my own code on this - so I'll use this method until I know JS better.

msg_mqr contains every text line and (if used) link (links are checked for and skipped if not present) - so for 6 autoforms filled out, this variable would contain all 6 forms. It was initialized via msg_mqr = ""; and then added to (using a for loop to go through the forms) msg_mqr +=" to keep appending to the end.

I'm betting there's something wrong with that jQuery statement above - I just don't know what.

Thanks!

Note: This is the only line that's stopping me from being able to test and debug anything else.

[Former Member]

.prepend("#news")

"<marquee>" regardless is just lazy, sorry! 

[Lynx]

Thanks for the reply, @synthtec.

Won't the .prepend('#news') try to shove the marquee on the same line and to the left of the news? (Asking because I'm still learning). That's why I had thought the .insertBefore('#news') was needed.

Thanks!

[Former Member]

I'm not sure of the layout so it is hard to tell.
If you want to prepend a parent div you could try

.parent('div').prepend('#news')

[Lynx]

I'm just looking to have it inserted above the News Feed, @synthtec. It does check to make sure it's on the Home page before running, because I believe the News Feed only shows on the Home page (since the #news isn't on any other page). If the News Feed is off, it basically places itself in the area the News Feed would be.

I have no problems using .prepend - I was mostly curious if there was a difference between the 2 I missed (back to my tutorials ).

Thanks again for the reply!

[Former Member]

If you are looking to check if you are on the homepage, then the DOM needs to be loaded/ready first.

can you point me to the url ?

[Lynx]

Okay. Posting this here so people can laugh at my shoddy coding skills. It doesn't work anyways.

// Forum Marquee
// Version 2.0.0
// Authored By:
// This heading is to remain intact.

$('window').load(function() {
    if (pb.data('route').name == "Home") // Only run on the Home page
    {
        if (pb.plugin.get('msg_forum_marquee').settings.marquee_and_links.text_line[0] != undefined) // See if user filled in the first text line
        {
            var mag_mqr_spd = 0; // Set spped to 0 then check to see if user entered a number from 1 to 10
            if (pb.plugin.get('msg_forum_marquee').settings.marquee_speed < 1)
            {
                msg_mqr_spd = 1;
            }
            else if (pb.plugin.get('msg_forum_marquee').settings.marquee_speed > 10)
            {
                msg_mqr_spd = 10;
            }
            else
            {
                msg_mqr_spd = pb.plugin.get('msg_forum_marquee').settings.marquee_speed;
            }
            var msg_mqr = ""; // Set our marquee to an empty string
            var msg_mqr_tlr = "#000000"; // Set our default text color to black
            for (var a = 0, a < (pb.plugin.get('msg_forum_marquee').settings.marquee_and_links.text_line).length, a++) // Start going through all the forms and adding them in
            {
                msg_mqr += "<font color="+pb.plugin.get('msg_forum_marquee').settings.marquee_and_links.text_color+">"+pb.plugin.get('msg_forum_marquee').settings.marquee_and_links.text_line+"<font>";
                if (pb.plugin.get('msg_forum_marquee').settings.marquee_and_links.link != undefined && pb.plugin.get('msg_forum_marquee').settings.marquee_and_links.link_url != undefined) // Do we have links?  If not, skip
                {
                    msg_mqr += "    Link: <a href='"+pb.plugin.get('msg_forum_marquee').settings.marquee_and_links.link_url+"'>"+pb.plugin.get('msg_forum_marquee').settings.marquee_and_links.link+"</a>";
                }
                if (pb.plugin.get('msg_forum_marquee').settings.marquee_and_links.text_line[a+1] != undefined)
                {
                    msg_mqr += "    "+pb.plugin.get('msg_forum_marquee').settings.separator_indicator+"    ";
                }
                else
                {
                    msg_mqr += "    <<<>>>    ";
                }
            }
        }
        else
        {
            msg_mqr = "<font color="+msg_mqr_tlr+">Thank you for using the Forum Marquee 2.0.0</font>"
        }
    $.html('<marquee direction="left" scrolldelay="'+msg_mqr_spd+'" onmouseover="this.stop()" onmouseout="this.start()" '+msg_mqr+'</marquee>').prepend('#news');
    }
}

I did add the ; to the end of this line:

msg_mqr = "<font color="+msg_mqr_tlr+">Thank you for using the Forum Marquee 2.0.0</font>"

and even tried this line with and without the first part after the $ sign (without above, with shown below):

$(msg_mqr).html('<marquee direction="left" scrolldelay="'+msg_mqr_spd+'" onmouseover="this.stop()" onmouseout="this.start()" '+msg_mqr+'</marquee>').prepend('#news');

I'm at a loss.

[Peter]

Lynx ,

Could you post a build version of your plugin?

I can see your problems by looking at your code above, but I would like to go through it line by line, tweak it, and then test it using the plugin. I will modify your version to show you what I would have done differently, and will comment what I change. I don't want you to use anything I post, it is just for you to learn from.

In regards to the "marquee" tag; yeah, I get it, you are starting out, and it's absolutely fine. However, when you write that plugin again for v3 (I encourage you to do so), I hope to see that gone. There are much nicer* ways to do the marquee effect.

You are making progress, so stick with it.

* There are a few ways to do the marquee effect. Since you are learning the JS side of things, I would recommend you do it purely with JS, however, you may want to look into using jQuery for the effects side of things, because doing that yourself may be a little difficult for someone so new to JS. I did recommend not to use jQuery, but in this case, I think it's fine. You could also look into CSS animations as well, but I would recommend pure JS for now for learning purposes.  It's good to know the different ways it could be done anyway.

[Lynx]

Peter,

Here you go: Forum Marquee_200.pbp (2.4 KB)

[Lynx]

Dec 10, 2015 20:00:59 GMT -8 @synthtec said:

.prepend("#news")

"<marquee>" regardless is just lazy, sorry!

My apologies for not being an expert coder. That's rather difficult when one is basically just starting out. So, I apologize for taking the "lazy" route while I learn JS.

[Peter]


// Forum Marquee
// Version 2.0.0
// Authored By: MSG
// This heading is to remain intact.

// DOM ready event
// Can call it a few different ways, most common is $(document).ready(your_function)

$(function(){

// Always assume that something might not exist
// "Home" is "home".  If you are unsure, lowerCase() it.

if(pb.data("route") && pb.data("route").name && pb.data("route").name == "home"){
var plugin = pb.plugin.get("msg_forum_marquee");
var settings = null;

// Assume that plugin or settings don't exist
// Never should happen, but it's good practice.
// This can be a ternary if you know them.

if(plugin && plugin.settings){
settings = plugin.settings;
}

// We have settings?

if(settings){

// Setup some vars

var marquee_and_links = settings.marquee_and_links;
var msg_mqr = "";
var msg_mqr_tlr = "#000";
var msg_mqr_spd = parseInt(settings.marquee_speed);

if(msg_mqr_spd < 0){
msg_mqr_spd = 1;
} else if(msg_mqr_spd > 10){
msg_mqr_spd = 10;
}

// Do we have any entries for the marquee?

if(marquee_and_links.length){
for(var a = 0; a < marquee_and_links.length; a ++){
msg_mqr += "<span style='color" + marquee_and_links[a].text_color + "'>" + marquee_and_links[a].text_line + "</span>";

if(marquee_and_links[a].link.length && marquee_and_links[a].link_url.length){
msg_mqr += "&nbsp;&nbsp;&nbsp;&nbsp;Link: <a href='" + marquee_and_links[a].link_url+"'>" + marquee_and_links[a].link + "</a>";
}

if(typeof marquee_and_links[a].text_line[a + 1] != "undefined"){
msg_mqr += "&nbsp;&nbsp;&nbsp;&nbsp;" + settings.separator_indicator + "&nbsp;&nbsp;&nbsp;&nbsp;";
} else {
msg_mqr += "&nbsp;&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;&gt;&gt;&gt;&nbsp;&nbsp;&nbsp;&nbsp;";
}
}
} else {
msg_mqr = "<span style='color=" + msg_mqr_tlr + "'>Thank you for using the Forum Marquee 2.0.0</span>";
}

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

// Prepend it to the content div.  The news element might not exist.

$("#content").prepend(marquee);
}
}

});

You weren't far off to be honest, a few mistakes in your code, that was all.  I'll try to list them so you know what they were.

"Home" is "home" for the route.

for (var a = 0, a < (pb.plugin.get('msg_forum_marquee').settings.marquee_and_links.text_line).length, a++)

Close with the for loop.  After initialising the variable "a", you had a comma instead of a semi colon.  You also were trying to loop over the "text_line" and not the actual auto form.  "text_line" is a child of the auto form.

A few minor things when building the strings with quotes.

For the jQuery part I didn't change that in mine, just fixed it  You already know how to do it without jQuery now.

Good stuff

[Former Member]

Lynx Ah right, OK sorry, I didn't know you were just starting out coding.

The <marquee> won't do you any favors, especially while you are learning because using those depreciated elements it will teach you bad habits.

[Lynx]

I can follow almost all of that, Peter. This line:

if(typeof marquee_and_links[a].text_line[a + 1] != "undefined"){

though, I don't know what the typeof is for and why it would need to be in there.


I do thank you very much for your time to go through it and point out my errors. Now to figure out how to do mine without using any of your code. I can see I'm not going to have this done this weekend. Well, people will just have to wait a bit longer - if anyone even uses it anymore. I did put what you did in Notepad++ so I can reference it so I can see how you did it, and to make sure I don't use your code in mine.

I do feel better knowing that I was, at least, on the right path (I think).

[Peter]

Ok, little bit confusing I suppose, as it looks basically the same as your check doesn't it, only longer?

There are a few reasons I use typeof...

- Main one is that it has become a habit
- "undefined" global property used to be mutable (ES 5 fixed that)
- Checking a variable that you weren't sure existed (aka undeclared) wouldn't trigger an error

developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof

[Lynx]

Yeah, this just isn't happening. I can't get the stupid thing to work at all, so it's probably gonna have to get scrapped. Not sure what's still wrong. Been pulling my hair out over it. Looks like 2.0.0 isn't even going to "hit the shelves".

Thanks for the help, Peter. There's just no way I can get it to work with my code.