i like to have that code side bar

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
i like to have that code side bar Image
when hover on icon
i like to have that code side bar Image
i like to have that code side bar Image
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
Michael_vx
Forumember

Male Posts : 664
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
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
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
i like to have that code side bar Image
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
Michael_vx
Forumember

Male Posts : 664
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
Ange Tuteur
Forumaster

Male Posts : 13223
Reputation : 2961
Language : EN, JA, FR
Location : Macungie, PA

https://sethclydesdale.github.io/

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
Michael_vx
Forumember

Male Posts : 664
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
Ange Tuteur
Forumaster

Male Posts : 13223
Reputation : 2961
Language : EN, JA, FR
Location : Macungie, PA

https://sethclydesdale.github.io/

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
https://help.forumotion.com/t131836-side-box-code-force-the-color-box-to-stop-somthing-like-conflicting-scripts
it also solved
Michael_vx
Michael_vx
Forumember

Male Posts : 664
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
Ange Tuteur
Forumaster

Male Posts : 13223
Reputation : 2961
Language : EN, JA, FR
Location : Macungie, PA

https://sethclydesdale.github.io/

Back to top Go down

Back to top


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