I have a page with an image. When you hover over the image, a slightly transparent white div appears on top of it with a couple of action buttons and some info. When you move your mouse off the image, the info/button box disappears (display: none).
In that hidden/mouseover box is a facebook like button. It shows up perfectly fine in all other browsers, but As you might have guessed, it has strange behaviour in the notorious IE browsers.
In IE7 - IE8, the like button appears for just a second and then disappears. It still leaves a space in the design like when it would be there, it just isn't. Doesn't matter if I rollover first or not. Button appears for a second, then disappears.
In IE9 however, the button does appear and stays there. When I rollover a second time though, the iframe gets a white background, even though the first rollover got me a transparent background.
html code of hidden mouseover div:
<div id="hoverPopup">
<div class="fbLikeWrapper">
<div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false"></div>
</div>
<a href="javascript:reserveGift(#qry_kadoogle_detail.id_kadoogle_detail#, 1)">
<div class="btn_small_prefix"></div>
<div class="btn_gift_center">button1</div>
<div class="btn_small_suffix"></div>
</a>
<a href="##">
<div class="btn_small_prefix"></div>
<div class="btn_gift_center">button2</div>
<div class="btn_small_suffix"></div>
</a>
</div>
css code:
.fbLikeWrapper
{
/*width : 50px;
margin-left : auto;
margin-right: auto;*/
}
.fbLikeWrapper div
{
display : block;
line-height: normal;
}
screen captures:
IE9
IE7
Try this:
#hoverPopup .fb-like {
width: 47px;
}
.fbLikeWrapper
{
display : inline-block;
width : 51px;
text-align : center !important;
margin : 30px auto 10px;
box-sizing : border-box;
-moz-box-sizing : border-box;
-webkit-box-sizing : border-box;
overflow : hidden;
}
If this not helps, may the javascript causing the problem, not the css and you have to share more information (javascript, html, etc.)...
I found the answer through one of my colleagues who's had a similar problem.
When the page was loaded, the popup needed to be hidden, so I gave them a class that said display:none;. When I hover I toggle the class on and off. In every browser that works with a facebook like button, with IE it doesn't.
I don't exactly know why yet, but I did find out that if I use the jquery .hide() and .show() functions to toggle and initially set the hidden div and not use a class, it works like a charm.
Case closed. IE continues to suck.
Related
I’ve created a few components that handle form submission functionality. In each of these components, I want the form submit/cancel buttons to be fixed at the bottom of the view, much like the functionality available via ion-footer. The submit button needs reference to the variables + methods in the component for [disabled] + (tap) functionality, for example [disabled]="!formGroup.valid" (tap)="submitForm()"
If the component is a child of ion-content then there is no way to add ion-footer as it will be contained within ion-content, instead of below ion-content. At first glance, having ion-footer inside ion-content appears to view properly, but the rendering can be buggy especially in scroll situations. I went as far as setting a force-bottom css class with fixed position/bottom but it looks like the ionic javascript overrides fixed positioning when inside ion-content, so a pure CSS solution does not seem to be possible.
<ion-content>
<a-form-component>
</a-form-component>
</ion-content>
<ion-footer>
<!-- add a-form-component's button here -->
</ion-footer>
Any recommendations on how to achieve the desired functionality?
TIA
Let's say you have a page called page and a component called cp
inside page.html you have the component <cp></cp>
Inside cp.html you have
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div id="the-footer">
<button>login<button>
</div>
inside page.scss:
#the-footer{
background-color: #efefef;
text-align: center;
position: fixed;
width: 100%;
bottom: 0px;
z-index: 99999;
}
This will achieve the same result as ion-footer.
The div containing the button will always be visible regardless of the scrolling.
hope it helps
I'm having a weird display issue when testing a site on an iPhone4 running iOS6.
For some reason, the iPhone ignores the display: inline; rule when I click on the parent link. I've been browsing the test site using Safari developer tools, and the toggle class names are working as intended.
I'm using this piece of javascript to toggle class names on the div:
$('.toggle').click(function() {
$(this).toggleClass('toggle');
$(this).toggleClass('toggle_open');
});
The mark up looks like this:
<div class="toggle">
<span>Parent</span>
<div>
<span>Child 1</span>
<span>Child 2</span>
<span>Child 3</span>
</div>
</div>
CSS:
div.toggle div { display: none; }
div.toggle, div.toggle_open { display: inline; }
If I change display: inline to inline-block it works. If I remove display: inline completely it works, but then causes display issues in the browser. I want to use display: inline; so the contents of my mark up display on 1 line or 2 if required.
I'm aware I could use modinizer to create a rule for 'touch' and 'no-touch', but this seems like over kill for something that is probably a bug created by my code :)
What have I done to upset mobile Safari?
I've got weird problem. I'm trying to add Facebook Like Button on my website, but it doesn't show up in Internet Explorer and Firefox. Yes, I've already added this:
<html xmlns:fb="http://ogp.me/ns/fb#">
and FB-Root and JS SDK. Whenever I'm trying to add XFBML or HTML5 version, it always doesn't show up in IE and Firefox. In Chrome and Safari it works well.
However, when I leave cursor on the button that is displaying div that contains FB like box over the mouse hover, it will display properly. Also, when I put this like button in any other place on my site, it will show up.
Here's the code:
<li id="menu-item-21" class="ikonka menu-item menu-item-type-custom menu-item-object-custom menu-item-21">
<a href="#"><span class="fb ikoneczka"></span>
<div class="box_pop">
<p>Text</p><hr/>
<div class="fb-like" data-href="http://facebook.com/facebook" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>
</div>
</a>
</li>
It looks like Firefox and IE are rendering this box at the start of loading the page. However, they leave space for them. It's weird.
I wish you could help me. Thanks in advance.
OK, so I found solution for this problem.
Firstly, I've clear up all z-index in my css file and set z-index: 8; for .box_pop.
Secondly, set .ikonka div to display: none; and leave .ikonka:hover div with nothing (you can just don't put this in css).
Thirdly, I've set up some jQuery:
<script>
$(document).ready(function() {
$('#your-li-id').hover(function() {
$(this).addClass('pretty-hover');
}, function() {
$(this).removeClass('pretty-hover');
});
});
</script>
Note: where is #your-li-id you must put here id of your li element. This script will add pretty-hover class to your li. Then, in CSS, put this:
.pretty-hover div{
display: block;
}
It should work now.
As you can see, you mustn't set display: none; into your CSS and then - also via CSS - just add display: block; on hover.
If you will do that, iFrame won't be visible in IE or even FF. You must do this trick with jQuery.
I had the same problem on Firefox only (v.29.0.1) and it turned out to be AdBlock plus (v.2.6) blocking the Like and Share buttons from rendering.
im having some problems to understand how to render a web page in a decent way on the iPhone, i think the problem have to be releated with the margin-left but i have no idea how to solve the problem in order to have a good render on pc and mobile.
Here is how it looks on a pc browser:
Sorry for so many white spaces, is just to clarify the div is centered. And this is how its looks on my iPhone:
Even if a move the page with my finger im not abble to see the left side of the blue ribbon, it is just "out of the screen".
This is my code (part of it):
CSS
#center-coupon {
width: 474px;
height: 255px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -237px;
margin-top: -150px;
text-align: center;
}
#rib {
background-image:url(img/ribbon.png);
height:75px; width:474px;
}
#main4 {
position:relative;
background-color:#eeeeee;
height:300px;
width:340px;
left:66px
}
Html
<div id="center-coupon">
<div id="rib"></div>
<div id="main4">
<p style="font-size:35px;font-weight:bold;padding-top:15px;">El bar de mou</p>
<p>coupon awarded to</p>
<img src="http://graph.facebook.com/XXXXXXXXXX/picture" alt="profile picture" class="img-polaroid">
<span style="font-size: 25px; font-weight:bold;"> Domingo</span>
<p style="margin:10px 0 0 0; font-size: 17px;">Valid for: <b>Beer moretti 0.2l</b></p>
<p>created on 2012-10-21</p>
<a data-toggle="modal" href="#destroy_c" class="btn btn-danger btn-large">Destroy Coupon</a>
</div>
</div>
I know the center-coupon div is widder than the iphone screen, but that does not explain why im not abble to see part of the left side of the ribbon... A good solution will be forse the iphone to render the site with less zoom, but i dont know if that is possible, and dont know if that propety will be compatible with other mobile platforms. So what do you think?
I am no iPhone expert, but it is my understanding that the pixel density of the device has nothing to do with the CSS pixels. So, as far as CSS is concerned, the width of the phone is 320px. You are positioning the left edge of the coupon in the middle of the page, then moving it 237 pixels to the left, which essentially places it off of the screen. Have you tried changing the negative margin to a smaller amount?
You're negative margin is more than half the viewport width of an iPhone, therefore it is dragging it out of view.
If you want to center an element, you can use margin: auto (so long as an explicit width is set) rather than positioning the element with absolute positioning.
http://api.jquery.com/animate/
On this page, they give a demo where they have a gray div move across the screen with the click of a button.
Notice that if you click the right button enough times and the DIV block reaches the end of the container it creates horizontal and vertical scrollbars.
I downloaded and modified the code to get rid of the overflow property and what I have so far works BEAUTIFULLY in desktop browsers.
However, Safari on the iPhone handles things a little bit differently. For some reason, Safari completely ignores the overflow property and instead expands the browser window to show you where the block moved to.
I don't want you to be able to see the block. I want it hidden until you hit button again.
Anyone know what the heck is going on?
Here is a pic of the issue:
Here is my code:
div {
position:absolute;
background-color:#abc;
width:100%;
height:100%;
margin:0px;
max-width:100%;
}
body {
margin:0px;
padding:0px;
}
* {
overflow:hidden;
clip:rect(auto, auto, auto, auto);
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=110%"}, "medium");
});
$("#left").click(function(){
$(".block").animate({"left": "-=110%"}, "medium");
});
</script>
Even though I have moved the DIV block off the screen and I have overflow:hidden as a global style, the iPhone will make room for it in the browser window to show you where the DIV has moved to. ANNOYING!
Thank you in advance!
Not completely sure I understand what you want to accomplish here. But if you want to make the gray box disappear as it leaves towards the end of the document, then I would suggest that you wrap the div inside another div, and set the width of the wrapping element to 100% and overflow: hidden;
Like this:
<div class="wrapper">
<div class="block"></div>
</div>
Also add the appropriate styling:
<style type="text/css">
...
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
</style>
Note that you need to absolute position the wrapper as well, otherwise the gray block will still be visible outside it. You'll also need to give it some height (I used 100% in my example) or it will be 0px high (due to the absolute positioned child) and nothing will be visible.
Hope that helps.
Alternative to
overflow:hidden
HTML:/<div class="clear"></div>
CSS:.clear {clear:both;}