Getting text and bg colors to change on hover

[Lynx]

I'm working on an update for one of my plugins (Navbar Links) to have text and BG color changes on hover. I was going to use a CSS component to handle this - but I've noticed that the CSS template doesn't take plugin variables. Is there another way to do this? Here's what I have for my code update so far:

SPOILER: Click to show


// Navbar Links
// Version: 1.0.1
// Author: MSG
// This header is to remain intact.

function navlinks() {
   var settings = pb.plugin.get('msg_navbar_links').settings;
   var linkName = "";
   var linkColor = "";
   var linkBGColor = "";
   var linkHvText = "";
   var linkHvBG = "";
   var linkDest = "";
   var linkTarget = "";
   var linkBold = "";
   
   if (settings.msg_navlink.length) {
       for (z = 0; z < settings.msg_navlink.length; z++) {
           if (!settings.msg_navlink[z].link_name) {
               pb.window.alert('Plugin: Navbar Links says - Missing Link Name','You must provide a link name for the navbar link.<br /><br />Error at UI Entry: ' + (z + 1),{
                   minHeight: 200,
                   minWidth: 600
               });
               return;
           }
           else {
               linkName = settings.msg_navlink[z].link_name;
           }
           
           if (!settings.msg_navlink[z].text_color) {
               linkColor = "#ffffff";
           }
           else {
               linkColor = '#' + settings.msg_navlink[z].text_color;
           }
           
           if (!settings.msg_navlink[z].bg_color) {
               linkBGColor = "transparent";
           }
           else {
               linkBGColor = '#' + settings.msg_navlink[z].bg_color;
           }
           
           if (!settings.msg_navlink[z].hover_text) {
               linkHvText = linkColor;
           }
           else {
               linkHvText = '#' + settings.msg_navlink[z].hover_text;
           }
           
           if (!settings.msg_navlink[z].hover_bg) {
               linkHvBG = linkBGColor;
           }
           else {
               linkHvBG = '#' + settings.msg_navlink[z].hover_bg;
           }
           
           if (!settings.msg_navlink[z].dest_link) {
               pb.window.alert('Plugin: Navbar Links says - Missing Destination','You must provide a destination link.<br /><br />Error at UI Entry: ' + (z + 1),{
                   minHeight: 200,
                   minWidth: 600
               });
               return;
           }
           else {
               linkDest = settings.msg_navlink[z].dest_link;
           }
           
           if (!settings.msg_navlink[z].tab_type) {
               linkTarget = "_self";
           }
           else {
               linkTarget = settings.msg_navlink[z].tab_type;
           }
           
           if (!settings.msg_navlink[z].do_bold) {
               linkBold = "normal";
           }
           else {
               linkBold = settings.msg_navlink[z].do_bold;
           }
           
           $('#navigation-menu > ul').append('<li><a href="' + linkDest + '" style="color: ' + linkColor + ' !important; background-color: ' + linkBGColor + ' !important; font-weight: ' + linkBold + '" target="' + linkTarget + '">' + linkName + '</a></li>');
       }
   }
};

$(document).ready(function() {
   navlinks();
});


The linkHvText and linkHvBG are for the link text and BG colors on hover (set in the UI as, respectively, settings.msg_navlink[z].hover_text and settings.msg_navlink[z].hover_bg).

I've thought about adding a class to the <li> in the append, but then realized that it would probably change all colors of added navbar links when hovering over just 1. Is this possible to do? If so, could someone please help me on that?

Thanks!

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

Feb 27, 2017 14:26:54 GMT -8 Lynx said:

I'm working on an update for one of my plugins (Navbar Links) to have text and BG color changes on hover. I was going to use a CSS component to handle this - but I've noticed that the CSS template doesn't take plugin variables. Is there another way to do this? Here's what I have for my code update so far:

SPOILER: Click to show


// Navbar Links
// Version: 1.0.1
// Author: MSG
// This header is to remain intact.

function navlinks() {
   var settings = pb.plugin.get('msg_navbar_links').settings;
   var linkName = "";
   var linkColor = "";
   var linkBGColor = "";
   var linkHvText = "";
   var linkHvBG = "";
   var linkDest = "";
   var linkTarget = "";
   var linkBold = "";
   
   if (settings.msg_navlink.length) {
       for (z = 0; z < settings.msg_navlink.length; z++) {
           if (!settings.msg_navlink[z].link_name) {
               pb.window.alert('Plugin: Navbar Links says - Missing Link Name','You must provide a link name for the navbar link.<br /><br />Error at UI Entry: ' + (z + 1),{
                   minHeight: 200,
                   minWidth: 600
               });
               return;
           }
           else {
               linkName = settings.msg_navlink[z].link_name;
           }
           
           if (!settings.msg_navlink[z].text_color) {
               linkColor = "#ffffff";
           }
           else {
               linkColor = '#' + settings.msg_navlink[z].text_color;
           }
           
           if (!settings.msg_navlink[z].bg_color) {
               linkBGColor = "transparent";
           }
           else {
               linkBGColor = '#' + settings.msg_navlink[z].bg_color;
           }
           
           if (!settings.msg_navlink[z].hover_text) {
               linkHvText = linkColor;
           }
           else {
               linkHvText = '#' + settings.msg_navlink[z].hover_text;
           }
           
           if (!settings.msg_navlink[z].hover_bg) {
               linkHvBG = linkBGColor;
           }
           else {
               linkHvBG = '#' + settings.msg_navlink[z].hover_bg;
           }
           
           if (!settings.msg_navlink[z].dest_link) {
               pb.window.alert('Plugin: Navbar Links says - Missing Destination','You must provide a destination link.<br /><br />Error at UI Entry: ' + (z + 1),{
                   minHeight: 200,
                   minWidth: 600
               });
               return;
           }
           else {
               linkDest = settings.msg_navlink[z].dest_link;
           }
           
           if (!settings.msg_navlink[z].tab_type) {
               linkTarget = "_self";
           }
           else {
               linkTarget = settings.msg_navlink[z].tab_type;
           }
           
           if (!settings.msg_navlink[z].do_bold) {
               linkBold = "normal";
           }
           else {
               linkBold = settings.msg_navlink[z].do_bold;
           }
           
           $('#navigation-menu > ul').append('<li><a href="' + linkDest + '" style="color: ' + linkColor + ' !important; background-color: ' + linkBGColor + ' !important; font-weight: ' + linkBold + '" target="' + linkTarget + '">' + linkName + '</a></li>');
       }
   }
};

$(document).ready(function() {
   navlinks();
});


The linkHvText and linkHvBG are for the link text and BG colors on hover (set in the UI as, respectively, settings.msg_navlink[z].hover_text and settings.msg_navlink[z].hover_bg).

I've thought about adding a class to the <li> in the append, but then realized that it would probably change all colors of added navbar links when hovering over just 1. Is this possible to do? If so, could someone please help me on that?

Thanks!

Another way to accomplish variables in css styles is by using the global header/footer component (I use the header part)
then I use 

<script>document.write("<style>.ledgerholder, .playholder, .backgroundholder {font-family:"+pb.plugin.get('animal_keeper').settings.font_name+"; font-size:"+pb.plugin.get('animal_keeper').settings.font_size+";}</style>")

</script>and it will write a css style in the header that includes plugin variables that way.

I think you should go with a mouse enter and mouse leave targeting a specific class in this case
$('.yourclass').on('mouseenter',function(){$(this).changecolors})

$('.yourclass').on('mouseleave',function(){$(this).changecolorsback})


Run something like that after you have your html appended to the page
the .changecolors needs to be replaced with something such as .css('background-color','#'+pb.plugin(blah).color)
any trouble just tag me. I can't seem to join your ventrillo chat room

[Lynx]

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

Does that mean I can take this line:


$('#navigation-menu > ul').append('<li><a href="' + linkDest + '" style="color: ' + linkColor + ' !important; background-color: ' + linkBGColor + ' !important; font-weight: ' + linkBold + '" target="' + linkTarget + '">' + linkName + '</a></li>');


and make the <li><a href...> into <li class="myclass"><a href=...>?

If so, will the ... $(this).changecolors target just the link they are currently moused over, or does each link need it's own class (to prevent all of them from changing colors)?

Also, as far as Ventrilo goes - they had done some maintenance awhile ago and it ended up changing the IP. They've given us a hostname to use that will keep working (so they say) if the IP changes again from maintenance. You can find our current Ventrilo Hostname and Port here (guest-friendly link).

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

Feb 28, 2017 20:39:37 GMT -8 Lynx said:

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

Does that mean I can take this line:


$('#navigation-menu > ul').append('<li><a href="' + linkDest + '" style="color: ' + linkColor + ' !important; background-color: ' + linkBGColor + ' !important; font-weight: ' + linkBold + '" target="' + linkTarget + '">' + linkName + '</a></li>');


and make the <li><a href...> into <li class="myclass"><a href=...>?

If so, will the ... $(this).changecolors target just the link they are currently moused over, or does each link need it's own class (to prevent all of them from changing colors)?

Also, as far as Ventrilo goes - they had done some maintenance awhile ago and it ended up changing the IP. They've given us a hostname to use that will keep working (so they say) if the IP changes again from maintenance. You can find our current Ventrilo Hostname and Port here (guest-friendly link).

Since this has your color defaults, the entire code is necessary and good to accomplish your goals


$('#navigation-menu > ul').append('<li><a href="' + linkDest + '" style="color: ' + linkColor + ' !important; background-color: ' + linkBGColor + ' !important; font-weight: ' + linkBold + '" target="' + linkTarget + '">' + linkName + '</a></li>');

Since you want to affect specific links, yes you only need to make one class for anything you want affected by your plugin.

$('#navigation-menu > ul').append('<li><a href="' linkColor + ' !important; ...');

Since you are using the !important flag (probably necessary in this case because of most theme developers) you cannot target the <li> element, because the !important will ignore any styling done to it previously.
Therefore the class="myclass" will be on the <a> tag


$('#navigation-menu > ul').append('<li><a class="myAwesomeBackgroundClass"> ...');

That will allow you to change only your <a> links.

When you reference the class $('.myAwesomeBackgroundClass') you are given an array with every element that has that class
You could potentially loop through them all via

for(a=0;a<$('.myAwesomeBackgroundClass').length;a++){
$($('.myAwesomeBackgroundClass')[a]).html('Your links now say HI')
}

Or look for a specific trait to distinguish which one you want to modify, such as one with a certain html
then change that html
for(a=0;a<$('.myAwesomeBackgroundClass').length;a++){

if($($('.myAwesomeBackgroundClass')[a]).html()
=='Special Link')
$($('.myAwesomeBackgroundClass')[a]).html('Now is regular link')
}


However none of this is important for your cause.
The $(this) target only affects the specific class that it was fired on. (the event target)
$(this) does the ground work of finding only 1 element out of the whole array that started the function.

If you did
$('.myAwesomeBackgroundClass').on('mouseenter',function(){$('.myAwesomeBackgroundClass').html('hi')})

$('.myAwesomeBackgroundClass').on('mouseleave',function(){$('.myAwesomeBackgroundClass').html('bye')})


It would change all the links with that class to 'hi' when hovered
and bye when you moved

However if you did
$('.myAwesomeBackgroundClass').on('mouseenter',function(){$(this).html('hi')})

$('.myAwesomeBackgroundClass').on('mouseleave',function(){$(this).html('bye')})



It would only affect the specific link that started the hover event and nothing else in that class would be affected.
This keeps you from having to make a whole bunch of different classes for no reason.

One more note with the !important flag, you can't specify !important using the .css() jquery for whatever reason.
This isn't necessarily a problem though. You will just have to accomplish your color changes using .attr('style')
Which means you will have to re-create the style tag in it's entirety.

So your final code would look more like:
$('#navigation-menu > ul').append('<li><a class="myAwesomeBackgroundClass" href="' + linkDest + '" style="color: ' + linkColor + ' !important; background-color: ' + linkBGColor + ' !important; font-weight: ' + linkBold + '" target="' + linkTarget + '">' + linkName + '</a></li>');

$('.myAwesomeBackgroundClass').on('mouseenter',function(){$(this).attr('style','color: ' + NEWlinkColor + ' !important; background-color: ' + NEWlinkBGColor + ' !important; font-weight: ' + NEWlinkBold')})


$('.myAwesomeBackgroundClass').on('mouseleave',function(){$(this).attr('style','color: ' + linkColor + ' !important; background-color: ' + linkBGColor + ' !important; font-weight: ' + linkBold')})

At this point you would have to reference linkColor, NEWlinkColor, linkBGColor, NEWlinkBGColor, linkBold, NEWlinkBold
as either Global variables, or do away with the shorthand and reference them directly from the plugin via
pb.plugin('blah').settings.linkColor etc. etc.