SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Button No Showing on Firefox or IE Only on Chrome

    Please help me, my site is www.luarangkasa.com

    I add Google Follow button on the top navigation, it does not show up on Firefox or IE, but it works on Google Chrome.
    google-button-not-work.pnggoogle-button-on-chrome.png

    Please tell me what's wrong. Thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    To try and narrow the problem down try adding this css to show the widget by default.

    Code:
    .social-expand {display:block!important}
    I'm wondering if the script isn't working because the element is hidden to start with. At least the code above should either confirm or rule out that avenue of debugging.

  3. #3
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I follow your advice, the button does show up, any advice to make it work?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could try setting it to display:block to start with and then hiding it with js once the document has loaded.

    e.g.

    Add this JS before the closing body tag at the end of the html.
    Code:
    <script type="text/javascript">
    jQuery(document).ready(function(){
    	jQuery('.social-expand').css( "display", "none" );
    });
    </script>
    Then adjust the CSS:

    Code:
    .social-expand {display:block}
    If that doesn't work I'll move the thread to the JS forum as this is more js related than css

  5. #5
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for trying helping me, but it still does not work.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I don't see the css I gave you in your stylesheet?

    You still have the display:none on .social-expand.

  7. #7
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B, I tested it on localhost. Here I updated it on the live website, please check.

  8. #8
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B, sorry it seems that I can't edit above post. I wanted to say that when first visit to the website the button does not show up, but then if you refresh the page, it shows up. I tried and close Firefox, and the same thing happens again, first visit the button not show up but after refresh it shows up.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    FYI: I see the Google plus button in Firefox and IE11 when the page is first opened; same as Chrome.

  10. #10
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,188
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    I think it's there but because of the computed color (.hma #262626 from https://apis.google.com/_/scs/apps-s...IGm-1WaRsKajkQ) you can't see it.
    Turn of CSS and it's there
    follow.png

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Perhaps try not hiding the element with display:none but hide it off-screen instead.

    e.g.
    Code:
    .toggle-social + .social-expand{
    display:block!important;
    left:-999em;
    right:auto;
    }
    
    .toggle-social.active + .social-expand{
    display:block!important;
    left:auto;
    right:58px;
    }
    If that doesn't work then I'll move the thread to the JS forum as I think the solution will be there.

  12. #12
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, sorry was busy working at the office, only have time during the weekend. I tested the code, Paul, and it is working. Thank you.


Bookmarks

Posting Permissions

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