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.

i like to have that code side bar

View previous topic View next topic Go down

Solved i like to have that code side bar

Post by Michael_vx on April 8th 2014, 4:18 pm

i like to have that code side bar when you hover the icon the side page apper
this an image

when hover on icon


or the way to get that code
Edit:
i forget to add this code looks like that one but the one i have got no youtube

Code:
<script type="text/javascript" src="http://micsoft.xp3.biz/code.js"></script> <style type="text/css">
img, a { border: 0; }
#likebox_1 {
z-index: 10005;
border:2px solid #3c95d9;
background-color: #fff;
width:196px;
height: 320px;
position: fixed;
top: 10%;
right: -200px;
}

#likebox_1_1 {
width:196px;
height: 320px;
overflow: hidden;
}

#likebox_1 img {
position: absolute;
top: -2px;
left: -47px;
}

#likebox_1 iframe {
border:0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
left:-2px;
top:-3px;
}
#polecam_1 {
z-index: 10004;
border:2px solid #6CC5FF;
background-color: #6CC5FF;
width:246px;
height: 375px;
position: fixed;
top: 18%;
right: -250px;
}

#polecam_1_1 {
width:246px;
height: 375px;
overflow: hidden;
}

#polecamy_img {
position: absolute;
top: -2px;
left: -47px;
border: 0;
}
#google_1 {
z-index: 10003;
border-top:2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-right:2px solid #0056a0;
border-left: hidden;
background-color: #006ec9;
width:152px;
height: 97px;
position: fixed;
top: 26%;
right: -154px;
}

#google_1_1 {
width:152px;
height: 97px;
overflow: hidden;
}

#google_img {
position: absolute;
top: -2px;
left: -46px;
border: 0;
}
#youtube_1 {
z-index: 10003;
border:2px solid #cb1c0e;
background-color: #fff;
width:196px;
height: 353px;
position: fixed;
right: -200px;
}

#youtube_1_1 {
width:196px;
height: 353px;
overflow: hidden;
}

#youtube_1 img {
position: absolute;
top: -2px;
left: -35px;
}
</style>
<!--
 
  facebook
  -->
<div id="likebox_1">

<div id="likebox_1_1">
<img
 
src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/facebook.png"
 alt="" /> <a href="http://micsoft.logu2.com">مايكل سوفت
للتطوير</a>
<div dir="rtl" style="padding: 0pt; font-weight: bold; font-size: 10pt;
background: none repeat scroll 0% 0% rgb(255, 255, 255); margin: 0pt;
overflow: scroll; width: 190px; color: rgb(51, 51, 51); font-family:
tahoma; height: 302px; text-align:
center;">

<div id="fb-root">

</div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=265543160288028";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://micsoft.logu2.com" data-width="180" data-numposts="5" data-colorscheme="light">

</div>

</div>

</div>

</div>

<!--
 
  facebook
  -->
<!--
  twitter
 
-->
<div id="polecam_1">

<div id="polecam_1_1">
<img
 id="polecamy_img"
src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/twitter.png"
 /><a href="http://micsoft.logu2.com">مايكل سوفت
للتطوير</a><a class="twitter-timeline"
href="https://twitter.com/Michael_vx"
data-widget-id="435029586120679425">Tweets by @Michael_vx</a>
<script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 
</div>
</div>

<!--
  twitter
 
 -->
<!--
  google_1
  -->
<div id="google_1">

<div id="google_1_1">
<img
 id="google_img"
src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/google_plus.png"
 /> <a href="http://micsoft.logu2.com">مايكل سوفت
للتطوير</a>
<div style="color:#999;font-size:11px; padding-top: 15px;
padding-right:30px; margin:5px; width:98px; height:97px;">
<script
 type="text/javascript"
src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone> <a http:=""
micsoft.logu2.com="" <="" div=""> </a>
</div><a http:="" micsoft.logu2.com="" <="" div=""></a>
<!--
 
  google_1
  -->
</div>
</div>


Last edited by Michael_vx on April 11th 2014, 1:03 am; edited 1 time in total (Reason for editing : solved)

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: i like to have that code side bar

Post by Illest on April 10th 2014, 12:42 am

Hello,

Where have you added this code in your forum?

Illest
Forumember

Male Posts : 135
Reputation : 9
Language : English
Location : USA

http://mixedmedia.userboard.net

Back to top Go down

Solved Re: i like to have that code side bar

Post by Kite Trojan on April 10th 2014, 1:22 am

Looks like a widget.

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: i like to have that code side bar

Post by Michael_vx on April 10th 2014, 12:46 pm

@Illest wrote:Hello,

Where have you added this code in your forum?
its widget
@Kite Trojan wrote:Looks like a widget.
you right its widget
the problem is the code i have with out the youtube icon
have no youtube
and i sow that code looks like it but with youtube
i want the code with the youtube system that is al thanks
Edit:
i tried to add something on the code i have and i manged to add the 4rd icon of youtube but the icon wont move like others when i hover on it

here the code
Code:


<script type="text/javascript" src="http://adminstar20.3rab.pro/10969.js"></script> <style type="text/css">
img, a { border: 0; }
#likebox_1 {
z-index: 10005;
border:2px solid #3c95d9;
background-color: #fff;
width:196px;
height: 353px;
position: fixed;
top: 20%;
right: -200px;
}

#likebox_1_1 {
width:196px;
height: 353px;
overflow: hidden;
}

#likebox_1 img {
position: absolute;
top: -2px;
left: -47px;
}

#likebox_1 iframe {
border:0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
left:-2px;
top:-3px;
}
#polecam_1 {
z-index: 10004;
border:2px solid #6CC5FF;
background-color: #6CC5FF;
width:246px;
height: 353px;
position: fixed;
top: 27%;
right: -250px;
}

#polecam_1_1 {
width:246px;
height: 353px;
overflow: hidden;
}

#polecamy_img {
position: absolute;
top: -2px;
left: -47px;
border: 0;
}
#google_1 {
z-index: 10003;
border-top:2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-right:2px solid #0056a0;
border-left: hidden;
background-color: #006ec9;
width:152px;
height: 97px;
position: fixed;
top: 34%;
right: -154px;
}

#google_1_1 {
width:152px;
height: 97px;
overflow: hidden;
}

#google_img {
position: absolute;
top: -2px;
left: -47px;
border: 0;
}
#youtube_1 {
z-index: 10001;
border:2px solid #cb1c0e;
background-color: #fff;
width:196px;
height: 353px;
position: fixed;
top: 13%;
right: -200px;
}

#youtube_1_1 {
width:196px;
height: 353px;
overflow: hidden;
}

#youtube_1 img {
position: absolute;
top: -2px;
left: -47px;
}

</style>
<!-- youtube -->
<div id="youtube_1"><div id="youtube_1_1">
<img src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/youtube.png" alt="" />
<a href="http://micsoft.logu2.com">Michael_vx</a>
you tube box
</div>
</div>
</div>
<!-- youtube -->
<!-- facebook -->
<div id="likebox_1"><div id="likebox_1_1">
<img src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/facebook.png" alt="" />
<a href="http://micsoft.logu2.com">Michael_vx</a>
<div id="fb-root">
</div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=265543160288028";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<P>your facebook code to active this box</P>
</div>
</div>
<div id="polecam_1"><div id="polecam_1_1">

  <img id="polecamy_img"
src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/twitter.png"
 />
<a href="http://micsoft.logu2.com">Michael_vx</a>
<P>your twiter widget code here to active this</P>
</div>
</div>

<!-- twitter -->
<!-- google_1 -->
<div id="google_1"><div id="google_1_1">
<img id="google_img" src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/google_plus.png" />
<a href="http://micsoft.logu2.com">Michael_vx</a>
<div style="color:#999;font-size:11px; padding-top: 15px;
padding-right:30px; margin:5px; width:98px; height:97px;">

  <script type="text/javascript"
src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
</div>
</div>

<!-- google_1 -->

i hope to find out why it wont work

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: i like to have that code side bar

Post by Ange Tuteur on April 10th 2014, 3:42 pm

Change your code to :
Code:
<script type="text/javascript" src="http://adminstar20.3rab.pro/10969.js"></script> <style type="text/css">
  img, a { border: 0; }
  #likebox_1 {
  z-index: 10005;
  border:2px solid #3c95d9;
  background-color: #fff;
  width:196px;
  height: 353px;
  position: fixed;
  top: 20%;
  right: -200px;
  }

  #likebox_1_1 {
  width:196px;
  height: 353px;
  overflow: hidden;
  }

  #likebox_1 img {
  position: absolute;
  top: -2px;
  left: -47px;
  }

  #likebox_1 iframe {
  border:0px solid #3c95d9;
  overflow: hidden;
  position: static;
  height: 360px;
  left:-2px;
  top:-3px;
  }
  #polecam_1 {
  z-index: 10004;
  border:2px solid #6CC5FF;
  background-color: #6CC5FF;
  width:246px;
  height: 353px;
  position: fixed;
  top: 27%;
  right: -250px;
  }

  #polecam_1_1 {
  width:246px;
  height: 353px;
  overflow: hidden;
  }

  #polecamy_img {
  position: absolute;
  top: -2px;
  left: -47px;
  border: 0;
  }
  #google_1 {
  z-index: 10003;
  border-top:2px solid #0056a0;
  border-bottom: 2px solid #0056a0;
  border-right:2px solid #0056a0;
  border-left: hidden;
  background-color: #006ec9;
  width:152px;
  height: 97px;
  position: fixed;
  top: 34%;
  right: -154px;
  }

  #google_1_1 {
  width:152px;
  height: 97px;
  overflow: hidden;
  }

  #google_img {
  position: absolute;
  top: -2px;
  left: -47px;
  border: 0;
  }
  #youtube_1 {
  z-index: 10006;
  border:2px solid #cb1c0e;
  background-color: #fff;
  width:196px;
  height: 353px;
  position: fixed;
  top: 13%;
  right: -200px;
  -webkit-transition:600ms;
  -moz-transition:600ms;
  -o-transition:600ms;
  transition:600ms;
  }
 
  #youtube_1:hover { right:0; }

  #youtube_1_1 {
  width:196px;
  height: 353px;
  overflow: hidden;
  }

  #youtube_1 img {
  position: absolute;
  top: -2px;
  left: -47px;
  }

  </style>
  <!-- youtube -->
  <div id="youtube_1"><div id="youtube_1_1">
  <img src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/youtube.png" alt="" />
  <p><a href="http://micsoft.logu2.com">Michael_vx</a>
  you tube box</p>
  </div>
  </div>

  <!-- facebook -->
  <div id="likebox_1"><div id="likebox_1_1">
  <img src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/facebook.png" alt="" />
  <a href="http://micsoft.logu2.com">Michael_vx</a>
  <div id="fb-root">
  </div><script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=265543160288028";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  <P>your facebook code to active this box</P>
  </div>
  </div>
  <div id="polecam_1"><div id="polecam_1_1">
 
<img id="polecamy_img"
src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/twitter.png"
 />
  <a href="http://micsoft.logu2.com">Michael_vx</a>
  <P>your twiter widget code here to active this</P>
  </div>
  </div>
 
<!-- twitter -->
  <!-- google_1 -->
  <div id="google_1"><div id="google_1_1">
  <img id="google_img" src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/google_plus.png" />
  <a href="http://micsoft.logu2.com">Michael_vx</a>
  <div style="color:#999;font-size:11px; padding-top: 15px;
  padding-right:30px; margin:5px; width:98px; height:97px;">
 
<script type="text/javascript"
src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
  </div>
  </div>
  </div>
 
<!-- google_1 -->

You needed to set the pixels on the right to 0 on hover so it would show.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: i like to have that code side bar

Post by Michael_vx on April 10th 2014, 7:29 pm

really i dont know how to thank you for this great help its solved
last thing if i would add more icons reply with the steps and lock the topic because i may try to add more icons by my self
thanks for the great help

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: i like to have that code side bar

Post by Ange Tuteur on April 11th 2014, 1:05 am

Add more HTML and change the IDs :
Code:
<!-- myfield -->
  <div id="myfield_1"><div id="myfield_1_1">
  <img src="/myicon.png" alt="" />
  <p><a href="/mylink">My link</a>
  Extra text</p>
  </div>
  </div>

Then add onto your CSS and adjust it as needed :
Code:
#myfield_1 {
  z-index: 10006;
  border:2px solid #cb1c0e;
  background-color: #fff;
  width:196px;
  height: 353px;
  position: fixed;
  top: 13%;
  right: -200px;
  -webkit-transition:600ms;
  -moz-transition:600ms;
  -o-transition:600ms;
  transition:600ms;
  }
 
  #myfield_1:hover { right:0; }

  #myfield_1_1 {
  width:196px;
  height: 353px;
  overflow: hidden;
  }

  #myfield_1 img {
  position: absolute;
  top: -2px;
  left: -47px;
  }

If the icon is above the others, increase the z-index by one, if it is below the others lower the z-index until it is perfect.
Code:
z-index: 10006;

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: i like to have that code side bar

Post by Michael_vx on April 11th 2014, 1:09 am

got it
thank you so much
now i understand how the code works
Archive the topic Very Happy
its solved allready along with the other one
http://help.forumotion.com/t131836-side-box-code-force-the-color-box-to-stop-somthing-like-conflicting-scripts
it also solved

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: i like to have that code side bar

Post by Ange Tuteur on April 11th 2014, 1:20 am

You're welcome :rose:

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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