The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Toolbar Share links hover

View previous topic View next topic Go down

Solved Toolbar Share links hover

Post by HoeGy48 on July 29th 2017, 9:03 am

Hello,

I got a question concerning the share links in the toolbar. I've added them in a javascript code.
But i would like to know what the code is to change the pictures when i hover over them.



So when i hover over the green facebook icon, i want it to be blue.
I already made a blue image of it but i'm not able to make it work.

my code:
Code:
$(function() {
  var share = {
 
    text : 'Social Media',
 
    buttons : {
      /* DEFAULT SHARE BUTTONS */
      fb : {
        enable : false,
        innerHTML : '<img src="https://i.servimg.com/u/f11/19/67/94/12/fbicon11.png" />',
        href : 'https://www.facebook.com/oriongamingcod/',
        title : 'Like us on Facebook',
        target : '_blank'
      },

   
      twitter : {
        enable : false,
        title : 'Share on Twitter'
      },
   
      gp : {
        enable : false,
        title : 'Share on Google Plus'
      },
   
      mail : {
        enable : false,
        title : 'E-mail this page to someone'
      },
   
      rss : {
        enable : false,
        title : 'View this forum\'s RSS feed'
      },
     
    facebook : {
        enable : true,
        innerHTML : '<img src="https://i.servimg.com/u/f11/19/67/94/12/fbicon14.png" />',
        href : 'https://www.facebook.com/oriongamingcod/',
        title : 'Like us on Facebook',
        target : '_blank'
      },
     
      youtube : {
        enable : true,
        innerHTML : '<img src="https://i.servimg.com/u/f11/19/67/94/12/youtub12.png" />',
        href : 'https://www.youtube.com/channel/UCiUIC3V1wo4sqPZi6HETHkA',
        title : 'Subscribe us on Youtube',
        target : '_blank'
      },
     
      twitch : {
        enable : true,
        innerHTML : '<img src="https://i.servimg.com/u/f11/19/67/94/12/twitch11.png" />',
        href : 'https://www.twitch.tv/orion_gaming_cod',
        title : 'Watch us on Twitch',
        target : '_blank'
      },

 
      /* START CUSTOM SHARE BUTTONS */
   
      /* extra share buttons */
      pinterest : {
        enable : false,
        innerHTML : '<img src="https://i.servimg.com/u/f21/18/21/60/73/pinter10.png" />',
        title : 'Share on Pinterest',
     
        onclick : function(e) {
          var media = prompt('You\'re about to pin this page. Share an image ?');
       
          if (media == null) return false;
          else if (media == '') media = $('meta[property="og:image"]').attr('content') || '';
       
          window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(window.location.href) + (media ? '&media=' + encodeURIComponent(media) : '') + '&description=' + encodeURIComponent(document.title), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600');
          e.preventDefault();
        }
      },
   
      tumblr : {
        enable : false,
        innerHTML : '<img src="https://i.servimg.com/u/f21/18/21/41/30/tumblr11.png" />',
        title : 'Share on Tumblr',
     
        onclick : function(e) {
          window.open('http://www.tumblr.com/share/link?url=' + encodeURIComponent(window.location.href), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600');
          e.preventDefault();
        }
      },
   
      reddit : {
        enable : false,
        innerHTML : '<img src="https://i.servimg.com/u/f21/18/21/41/30/reddit10.png" />',
        title : 'Share on Reddit',
     
        onclick : function(e) {
          window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600');
          e.preventDefault();
        }
      },
   
      /* misc buttons */
      print : {
        enable : false,
        innerHTML : '<img src="https://i.servimg.com/u/f21/18/21/60/73/print11.png" />',
        title : 'Print this page',
     
        onclick : function(e) {
          window.print();
          e.preventDefault();
        }
      },
   
      copy_url : {
        enable : false,
        innerHTML : '<img src="https://i.servimg.com/u/f21/18/21/41/30/link10.png" />',
        title : 'Copy BBCode URL',
     
        onclick : function(e) {
          prompt('Copy the BBCode URL of this page ?', '[url=' + window.location.href + ']' + document.title + '[/url]');
          e.preventDefault();
        }
      },
   
      top : {
        enable : false,
        innerHTML : '<img src="https://i.servimg.com/u/f21/18/21/41/30/top10.png" />',
        title : 'Top of the page',
        href : '#top'
      },
   
      bottom : {
        enable : false,
        innerHTML : '<img src="https://i.servimg.com/u/f21/18/21/41/30/bottom11.png" />',
        title : 'Bottom of the page',
        href : '#bottom'
      }
      /* END CUSTOM SHARE BUTTONS*/
    }
  },
 
  newList = document.createElement('SPAN'),
  fa_share,
  fa_share_text,
  existingNode,
  newNode,
  i, k;
 
  $(function() {
    fa_share = document.getElementById('fa_share');
    fa_share_text = document.getElementById('fa_share_text');
    if (!fa_share) return;
 
    // apply new share text
    if (fa_share_text) fa_share_text.innerHTML = share.text + ' : ';
 
    // redefine share buttons
    for (i in share.buttons) {
      existingNode = document.getElementById('fa_' + i);
 
      // modify exisiting share buttons
      if (existingNode) {
        if (share.buttons[i].enable) {
          for (k in share.buttons[i]) if (k != 'enable') existingNode[k] = share.buttons[i][k];
          newList.appendChild(existingNode);
        }
        else existingNode.parentNode.removeChild(existingNode);
      }
   
      // create a new share button
      else if (share.buttons[i].enable) {
        newNode = document.createElement('A');
        newNode.id = 'fa_' + i;
     
        for (k in share.buttons[i]) if (k != 'enable') newNode[k] = share.buttons[i][k];
        if (!newNode.href) newNode.href = '#';
     
        newList.appendChild(newNode);
      }
 
    }
 
    fa_share.appendChild(newList);
  });
});




Last edited by HoeGy48 on July 29th 2017, 9:17 pm; edited 1 time in total
avatar
HoeGy48
Forumember

Posts : 71
Reputation : 1
Language : Dutch

http://www.oriongaming.forumotion.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by Justice™ on July 29th 2017, 9:36 am

Hi,

Please post your forum's link.
avatar
Justice™
Forumember

Posts : 524
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by HoeGy48 on July 29th 2017, 9:40 am

I think my question is clear, no?
avatar
HoeGy48
Forumember

Posts : 71
Reputation : 1
Language : Dutch

http://www.oriongaming.forumotion.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by Justice™ on July 29th 2017, 10:10 am

The question is as clear as possible, but the fact that I need your forum's link is also pretty clear.

So, post that link or wait for someone else to help you, the choice is all yours.
avatar
Justice™
Forumember

Posts : 524
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by APE on July 29th 2017, 1:30 pm

Hello when asking for help on appearance problems we always ask you to give us a link to your forum
This is normal for us here on the support forum



avatar
APE
Manager
Manager

Male Posts : 11296
Reputation : 1081
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Toolbar Share links hover

Post by HoeGy48 on July 29th 2017, 5:19 pm

Ooh, i'm sorry guys. Didn't knew that Very Happy

www.orion-gaming.com
avatar
HoeGy48
Forumember

Posts : 71
Reputation : 1
Language : Dutch

http://www.oriongaming.forumotion.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by Justice™ on July 29th 2017, 6:04 pm

Hi,

Add this JS code with placement on all pages:
Code:
$(function(){
$(function(){
var hi={
facebook:"https://i.servimg.com/u/f58/19/67/94/12/login10.png",
youtube:"https://i.servimg.com/u/f58/19/67/94/12/regist10.png",
twitch:"https://i.servimg.com/u/f58/19/67/94/12/login10.png"
}
var fi={
facebook:$("#fa_facebook>img").attr("src"),
youtube:$("#fa_youtube>img").attr("src"),
twitch:$("#fa_twitch>img").attr("src")
}
$("#fa_share>span>a").mouseover(function(){
var nm=$(this).attr("id").replace("fa_", "");
if(nm=="facebook"){
$("#fa_"+nm+">img").attr("src", hi.facebook);
};
if(nm=="youtube"){
$("#fa_"+nm+">img").attr("src", hi.youtube);
};
if(nm=="twitch"){
$("#fa_"+nm+">img").attr("src", hi.twitch);
};
})
$("#fa_share>span>a").mouseout(function(){
var nm=$(this).attr("id").replace("fa_", "");
if(nm=="facebook"){
$("#fa_"+nm+">img").attr("src", fi.facebook);
};
if(nm=="youtube"){
$("#fa_"+nm+">img").attr("src", fi.youtube);
};
if(nm=="twitch"){
$("#fa_"+nm+">img").attr("src", fi.twitch);
};
})
})
})

You have to modify the links here:
Code:
var hi={
facebook:"https://i.servimg.com/u/f58/19/67/94/12/login10.png",
youtube:"https://i.servimg.com/u/f58/19/67/94/12/regist10.png",
twitch:"https://i.servimg.com/u/f58/19/67/94/12/login10.png"
}
avatar
Justice™
Forumember

Posts : 524
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by HoeGy48 on July 29th 2017, 6:37 pm

Hello and thanks for the quick reply Smile

But i would like to make sure that i would like to keep those green buttons like they are.
But i would like to add a hover on all of them.
So when i hover over the facebook icon it turns blue, the youtube turns red, and the twitch turns purple.
i can make the hove images myself but i've no idea to add them in current javascript.
avatar
HoeGy48
Forumember

Posts : 71
Reputation : 1
Language : Dutch

http://www.oriongaming.forumotion.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by Draxion on July 29th 2017, 6:49 pm

So this is what you want?
Code:
#fa_twitch > img:hover {
  background-color: #6441A5;
}
#fa_youtube > img:hover {
  background-color: #E62117;
}
#fa_facebook > img:hover {
  background-color: #3B5998;
}

Unfortunately, if you want the actual image to change, you would have to change the image on hover, not background color.


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1856
Reputation : 232
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Toolbar Share links hover

Post by HoeGy48 on July 29th 2017, 7:10 pm

This code is changing the background indeed, but i would to change it to an image when hovering.
so what code will that be then? Smile
avatar
HoeGy48
Forumember

Posts : 71
Reputation : 1
Language : Dutch

http://www.oriongaming.forumotion.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by Justice™ on July 29th 2017, 7:43 pm

This code should do the trick:
Code:
$(function() {
    $(function() {
        var hi = {
            facebook: "https://i.servimg.com/u/f58/19/67/94/12/login10.png",
            youtube: "https://i.servimg.com/u/f58/19/67/94/12/regist10.png",
            twitch: "https://i.servimg.com/u/f58/19/67/94/12/login10.png"
        }
        var fi = {
            facebook: $("#fa_facebook>img").attr("src"),
            youtube: $("#fa_youtube>img").attr("src"),
            twitch: $("#fa_twitch>img").attr("src")
        }
        $("#fa_share>span>a").mouseover(function() {
            $("#fa_facebook>img").attr("src", hi.facebook);
            $("#fa_youtube>img").attr("src", hi.youtube);
            $("#fa_twitch>img").attr("src", hi.twitch);
        })
        $("#fa_share>span>a").mouseout(function() {
            $("#fa_facebook>img").attr("src", fi.facebook);
            $("#fa_youtube>img").attr("src", fi.youtube);
            $("#fa_twitch>img").attr("src", fi.twitch);
        })
    })
})
avatar
Justice™
Forumember

Posts : 524
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by HoeGy48 on July 29th 2017, 7:51 pm

Unfortunately it just changes my icons back to the regular ones and there is no hover on it. Draxion's code is almost right, only now just the background color changes and not the image.
avatar
HoeGy48
Forumember

Posts : 71
Reputation : 1
Language : Dutch

http://www.oriongaming.forumotion.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by Draxion on July 29th 2017, 7:51 pm

Do you have the images you want them to change on hover?


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1856
Reputation : 232
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Toolbar Share links hover

Post by HoeGy48 on July 29th 2017, 7:54 pm

avatar
HoeGy48
Forumember

Posts : 71
Reputation : 1
Language : Dutch

http://www.oriongaming.forumotion.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by Draxion on July 29th 2017, 8:04 pm

You can add those to the CSS code, like this.
Code:
#fa_twitch > img:hover {
  background-color: #6441A5;
  background-image: url(https://i11.servimg.com/u/f11/19/67/94/12/twitch12.png);
}


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1856
Reputation : 232
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Toolbar Share links hover

Post by HoeGy48 on July 29th 2017, 8:06 pm

Yea i tried that, but nothing happened. Has it something to do that i added the share links in javascript?
avatar
HoeGy48
Forumember

Posts : 71
Reputation : 1
Language : Dutch

http://www.oriongaming.forumotion.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by SLGray on July 29th 2017, 8:10 pm

Add !important to the CSS code.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41171
Reputation : 2815
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Toolbar Share links hover

Post by Justice™ on July 29th 2017, 8:18 pm

CSS cannot be used to change that image. It has been added by JS as an img element. @HoeGy48, what exactly do you want? When you hover over one of the share links, all the share links are changing to there blue version(or whatever they change to). When you move the mouse out of the share link, everything changes to the initial images. Is this what you want or...

Not hovered:


Hovered:
avatar
Justice™
Forumember

Posts : 524
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by HoeGy48 on July 29th 2017, 9:17 pm

adding !important worked like a charm! Thanks guys!
avatar
HoeGy48
Forumember

Posts : 71
Reputation : 1
Language : Dutch

http://www.oriongaming.forumotion.com

Back to top Go down

Solved Re: Toolbar Share links hover

Post by SLGray on July 29th 2017, 9:19 pm

You're welcome.

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41171
Reputation : 2815
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum