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 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Smile ie 10 and fb like button in a popup box

    Hi,
    Facebook like button is placed in a popup box that comes up when an image is hovered. Chrome, Firefox and Opera work well but IE 10 does not. The like button is never visible in IE 10 after refresh unless mouse is hovered qontinuously above the image while pressing F5 to refresh the page. Any ideas how to solve this?

    One try was to window.onload the popup box on every refresh to have it visible but it did not help to show the fb like button.



    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    
    <style type="text/css">
    #pop_fb_trigger {
    }
    #pop_fb_box {
    	border: 1px solid #00FFFF;
    	position: absolute;
    	z-index: 9999;
    	width: 250px;
    	height: 85px;
    	top: 2px;
    	display: none;
    	left: 30px;
    }
    #socials .social {
    	float: left;
    }
    </style>
    
    </head>
    
    <body>
    <!-- bo fb -->
    <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/fi_FI/all.js#xfbml=1&appId=400359720007370";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!-- eo fb -->
    
    	<div id="socials">
    		<div class="social">
    			<div id="pop_fb_trigger"><img alt="" src="../images/fb-icon.png" onmouseover="document.getElementById('pop_fb_box').style.display = 'block';" onmouseout="document.getElementById('pop_fb_box').style.display = 'none';" >
    				<div id="pop_fb_box" onmouseover="document.getElementById('pop_fb_box').style.display = 'block';" onmouseout="document.getElementById('pop_fb_box').style.display = 'none';">
    					<div class="fb-like" data-width="225" data-show-faces="false" data-send="false"></div>
    				</div>
    			</div>
    		</div><!-- eo social -->
    	</div><!-- eo socials -->
    
    <br />
    <p>aaaaaaaaaaaa aaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa aaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa aaaaaaaaaaaaaa</p>
    
    </body>
    
    </html>
    Thanks.
    Last edited by JonesJ; 09-01-2013 at 04:24 PM. Reason: to activate instant email notification

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Please don't open up new threads for problems that occur with something you already do have a thread for. Also please read entire answers, not just the first half. I gave you a very clear answer, stating what would be preferable.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Cool

    Thank you for your concern on behalf of the users of this site to keep the site neat and clear. The tips you gave me worked perfect and they are part of the code.

    There is a new issue concerning IE 10 and the appearance of fb like button in a popup box.

    Since this is a new issue, a new thread sounded the best option.

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    I will post the same answer again with a subtle emphasize of what I am referring to

    A quick'n'dirty working version can be seen here: http://jsfiddle.net/w4MYS/1/

    However, this is something that CSS3 can do without any Javascript. If you search for "css tooltip", you will find plenty examples, for example this. A pure CSS solution is typically preferable to a Javascript solution.
    So unless you have a good reason forcing you to use Javascript over pure CSS, I suggest you look into it. Looks way nicer, too.


  •  

    Tags for this Thread

    Posting Permissions

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