Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Trouble in adding a icon on a CSS chat

    Hello, i'm trying to add a icon on my blog's chat. I would like to put a facebook icon in the left side of the chat, in the way that it icon goes up or down together with the chat. In the same way that the button to open and close it does.

    Take a look on my blog: http://www.xbox-link.com/

    My knowledge on CSS and Html is very poor, i spent some hours trying to get it done with no progress... i hope that someone can help me on this.

    The CSS:

    Code:
    #gb {
    position:fixed;
    bottom:-492px;
    z-index:+1000;
    right:0px;
    }
    * html #gb {
    position:relative;
    }
    .gbtab {
    height:48px;
    width:677px;
    margin-left: 50px;
    margin-bottom: -2.5px;
    cursor:pointer;
    background:url('http://img849.imageshack.us/img849/1807/teste600x46.png') no-repeat;
    margin-top:0px; }
    .gbcontent { float:left; border:0px solid #000; background:#000; -webkit-border-radius: 20px; border-radius: 20px; -khtml-border-radius: 20px; padding:6px;}

    Code:
    <script type='text/javascript'>
    function showHideGB(){
    var gb = document.getElementById(&quot;gb&quot;);
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 465-w) : moveGB(465-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById(&quot;gb&quot;);
    var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;
    var dir = xf&gt;x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.bottom = x.toString() + &quot;px&quot;;
    if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
    }
    </script>
     <div id='gb'> <div class='gbtab' onclick='showHideGB()'> </div> <div class='gbcontent'>
    <div style='line-height:0;background-position:center;width:944px;height:480px;'>
    <embed align='middle' allowscriptaccess='sameDomain' flashvars='id=187838206&amp;rl=Brazilian' height='480' name='chat' pluginspage='http://xat.com/update_flash.shtml' quality='high' src='http://www.xatech.com/web_gear/chat/chat.swf' type='application/x-shockwave-flash' width='934' wmode='transparent'/> </div> </div> </div>

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    I see the chat. Where is the facebook icon? Or, did you not add it yet?
    My signature :)

  • #3
    New to the CF scene
    Join Date
    May 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ttkim View Post
    I see the chat. Where is the facebook icon? Or, did you not add it yet?

    No, not yet. I tried to put it, but i did'nt have idea from were to start... the icon it self isn't too important... the ideia is to make a button that by pushing it, you go to my group on facebook, you know...

    If you want i could make a image to explain what i want... my english is very poor and a think that maybe i didn't make myself understood.

  • #4
    New to the CF scene
    Join Date
    May 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I did a new icon but it isn't really what i want...



    I need a icon that sticks together with the chat... goes up when the chat goes up, and goes down when the chat goes down... and it should be right in the left side of the chat... touching it.

    Someone could help me? I don't think that it is a hard thing to do for who knows about CSS... but i'm really a noob on this and i don't have ideia from where to start.

  • #5
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Oh ok. So you have this right now (your FB icon)

    Code:
    <div id="grupoface">
    <a href="https://www.facebook.com/groups/xboxlink/" target="_blank"><img src="http://img827.imageshack.us/img827/8018/oie161143538fl0novm.jpg"></a>
    </div>
    Put that right before this code:

    Code:
    <div class="gbcontent">
    Then, change your CSS for your FB icon to this:

    Code:
    #grupoface {
    float:left;
    border: none;
    }
    Note that I took out a lot of the CSS. They were unnecessary.

    Try that first. The chat and FB icon will now be next to each other and moving together, but you'll need to mess around with the position a bit to get them looking the way you want them to look.
    My signature :)

  • Users who have thanked ttkim for this post:

    superevitors (05-20-2013)

  • #6
    New to the CF scene
    Join Date
    May 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello! Thank you for answering... the stuff that you said before worked great! It is getting exactly the effect that i wanted.

    But i'm with another problem on the chat... take a look on those images:





    On mozilla firefox i get this bug that is showed on the red rectangules... Parts of the chat get behind of the videos that i post from YouTube. On Google Chrome it doesn't happen... i don't know why...

    Do you think that could show me my mistake on the code? I'm sure that i done something wrong on it... i tried to put a high value z-index, but it didn't work...

  • #7
    New to the CF scene
    Join Date
    May 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello gain!

    After sending my last message i notice that the code didn't really worked... when i made the changes the chat goes "under" the browser when i click on it to hide it. The tab don't stop on the top of the bottom part of browser... it vanishes, you know...

    Look what i'm talking about:



    Do you know what is happening? Thanks again..

  • #8
    New to the CF scene
    Join Date
    May 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Why my posts aren't being released?

    I posted twice now, but it don't shows up on the thread...

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Posts by new members are moderated if they contain images or suspicious links. You just have to be a little patient.

  • #10
    New to the CF scene
    Join Date
    May 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Posts by new members are moderated if they contain images or suspicious links. You just have to be a little patient.
    Ok... i waited for some days before asking it... but thanks for answering anyway.

    Edit: One of my posts was released... could some moderator release the other one? It was posted right after of that one with big PrintScreens images.
    Last edited by superevitors; 05-29-2013 at 11:06 AM.

  • #11
    New to the CF scene
    Join Date
    May 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I did a test blog to show you the problem: http://test-xbox-link.blogspot.com.br/

    When you close the tab of the Chat it goes under the browser... i don't know how to fix it.

  • #12
    New to the CF scene
    Join Date
    May 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Could someone help me on this? Thanks for advance.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •