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.

social media link on here

View previous topic View next topic Go down

Solved social media link on here

Post by S-t-e-v-e- on March 11th 2014, 3:47 pm

can someone please tell me how to get it on every page please this be very useful for my forum


S-t-e-v-e-
Forumember

Posts : 450
Reputation : 6
Language : English

Back to top Go down

Solved Re: social media link on here

Post by Pizza Boi on March 11th 2014, 8:47 pm

Hi Very Happy

Can you please paste your forum link and version please.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: social media link on here

Post by S-t-e-v-e- on March 11th 2014, 9:25 pm

pbpbb3 i i managed to get them on all pages how do you get them to move is my problem now

S-t-e-v-e-
Forumember

Posts : 450
Reputation : 6
Language : English

Back to top Go down

Solved Re: social media link on here

Post by Ange Tuteur on March 11th 2014, 9:35 pm

Hi,

If you can find and use our scripts without permission, I'm sure you can find our CSS as well.

ex :
Code:
img { transition:500ms }

img:hover { transform:rotate(360deg) }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: social media link on here

Post by S-t-e-v-e- on March 11th 2014, 9:49 pm

i didn't use your code it was meti or whatever his name was posted it on here...


edit: my code are an mess it work ok in firework, it's an mess on IE

IE8 it look like this :/


here are my css

Code:
#my_social img {
  margin: 9px 4px 0 4px;
  max-height: 50px;
  transition-duration: 0.4s;
  vertical-align: middle;
  transition:100ms;
}

#my_social img:hover {
  transform:rotate(20deg);
 
}


DIV#follow_fdf {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url('http://i55.servimg.com/u/f55/16/09/12/08/follow13.png');
background-origin: padding-box;
background-position: 0px 5px;
background-repeat: no-repeat;
background-size: auto auto;
color: #666;
height: 40px;
floatleftfont-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 1px;
padding-bottom: 0px;
padding-left: 155px;
padding-right: 0px;
padding-top: 0px;
}

here the JavaScript

Code:
$(function(){$('UL.linklist.navlinks').after(' <div id="follow_fdf""><div id="my_social">
  <a href="https://www.facebook.com/staffybullterrieruk" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/facebo10.png" alt="Facebook" /></a>
  <a href="https://twitter.com/@staffybtuk" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/twitte10.png" alt="Twitter" /></a>
  <a href="http://www.youtube.com/user/TheStaffyBTuk" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/youtub10.png" alt="Youtube" />
  <a href="https://plus.google.com/115924220518808349083/posts" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/google10.png" alt="Google Plus" />
  <a href="http://instagram.com/staffybtuk" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/instag10.png" alt="instagam" />
  </div></div>');
  });

S-t-e-v-e-
Forumember

Posts : 450
Reputation : 6
Language : English

Back to top Go down

Solved Re: social media link on here

Post by S-t-e-v-e- on March 12th 2014, 9:54 pm

Ok i been mess around all day i give up i thinks the JavaScript i maybe wrong can anybody help me, over the last 30 days i had 1500 plus hits of people using IE8 so it really needs to be fixed


http://staffy-bull-terrier.niceboard.com/

S-t-e-v-e-
Forumember

Posts : 450
Reputation : 6
Language : English

Back to top Go down

Solved Re: social media link on here

Post by Ange Tuteur on March 13th 2014, 1:20 am

First, I'd probably remove #follow_fdf since you only need one block level element, that and fdf = forum des forums.

You only need one div because you're going to float it to either the left or right.

replace your script by :
Code:
$(function() {
  $('UL.linklist.navlinks').after('<div id="my_social"><a href="https://www.facebook.com/staffybullterrieruk" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/facebo10.png" alt="Facebook" /></a><a href="https://twitter.com/@staffybtuk" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/twitte10.png" alt="Twitter" /></a><a href="http://www.youtube.com/user/TheStaffyBTuk" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/youtub10.png" alt="Youtube" /><a href="https://plus.google.com/115924220518808349083/posts" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/google10.png" alt="Google Plus" /><a href="http://instagram.com/staffybtuk" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/instag10.png" alt="instagam" /></div>');
});

replace your css by :
Code:
#my_social img {
  margin: 9px 4px 0 4px;
  max-height: 50px;
  transition-duration: 0.4s;
  vertical-align: middle;
  transition:100ms;
  }

  #my_social img:hover {
  transform:rotate(20deg);
 
  }

  #my_social {
  background:url('http://i55.servimg.com/u/f55/16/09/12/08/follow13.png') 0px 8px no-repeat;
  float:left;
  padding-left:155px;
  }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: social media link on here

Post by S-t-e-v-e- on March 13th 2014, 8:16 am

still the same mate Sad

S-t-e-v-e-
Forumember

Posts : 450
Reputation : 6
Language : English

Back to top Go down

Solved Re: social media link on here

Post by Ange Tuteur on March 13th 2014, 10:40 am

The problem could be where it is being placed. Try placing it before the search box :
Code:
$(function() {
    $('#search-box').before('<div id="my_social"><a href="https://www.facebook.com/staffybullterrieruk" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/facebo10.png" alt="Facebook" /></a><a href="https://twitter.com/@staffybtuk" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/twitte10.png" alt="Twitter" /></a><a href="http://www.youtube.com/user/TheStaffyBTuk" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/youtub10.png" alt="Youtube" /><a href="https://plus.google.com/115924220518808349083/posts" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/google10.png" alt="Google Plus" /><a href="http://instagram.com/staffybtuk" target="_blank"><img src="http://i55.servimg.com/u/f55/16/09/12/08/instag10.png" alt="instagam" /></div>');
});

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: social media link on here

Post by S-t-e-v-e- on March 13th 2014, 10:45 am

still the same i dont understand becasue the links on here work fine on IE8

S-t-e-v-e-
Forumember

Posts : 450
Reputation : 6
Language : English

Back to top Go down

Solved Re: social media link on here

Post by Ange Tuteur on March 13th 2014, 11:12 am

After looking over your HTML I noticed you forgot to close you anchor tags on youtube, google plus, and instagram. This is most likey what was causing the errors.

See if that works :
Code:
$(function() {
    $('#search-box').before(
'<div id="my_social">'+
    '<a href="https://www.facebook.com/staffybullterrieruk" target="_blank">'+
        '<img src="http://i55.servimg.com/u/f55/16/09/12/08/facebo10.png" alt="Facebook" />'+
    '</a>'+
    '<a href="https://twitter.com/@staffybtuk" target="_blank">'+
        '<img src="http://i55.servimg.com/u/f55/16/09/12/08/twitte10.png" alt="Twitter" />'+
    '</a>'+
    '<a href="http://www.youtube.com/user/TheStaffyBTuk" target="_blank">'+
        '<img src="http://i55.servimg.com/u/f55/16/09/12/08/youtub10.png" alt="Youtube" />'+
    '</a>'+
    '<a href="https://plus.google.com/115924220518808349083/posts" target="_blank">'+
      '<img src="http://i55.servimg.com/u/f55/16/09/12/08/google10.png" alt="Google Plus" />'+
    '</a>'+
    '<a href="http://instagram.com/staffybtuk" target="_blank">'+
      '<img src="http://i55.servimg.com/u/f55/16/09/12/08/instag10.png" alt="instagam" />'+
    '</a>'+
'</div>')
});

I edited the code some so it is easier to read.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: social media link on here

Post by S-t-e-v-e- on March 13th 2014, 11:18 am

It works Smile thanks Ange Tuteur solved you want to do an Tips & Tricks for this Smile

S-t-e-v-e-
Forumember

Posts : 450
Reputation : 6
Language : English

Back to top Go down

Solved Re: social media link on here

Post by Ange Tuteur on March 13th 2014, 11:24 am

You're welcome :rose:

We'll see. Wink

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.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