I'm trying to show a popup when someone clicks on a youtube thumbnail. This works fine in Chrome but the click event isn't firing in Firefox.
I've managed to cut the problem down to what I've got below (Fiddle here)
<div class="Youtube">
<img class="Thumb" src="http://img.youtube.com/vi/RsYlGFBEpM4/mqdefault.jpg" alt="Marrakech"/>
<img class="PlayButton" src="http://ec2-54-229-110-227.eu-west-1.compute.amazonaws.com/Content/images/VideoPlay.png" alt="Play button"/>
</div>
The attach is happening fine but the handler doesn't get called in Firefox
$(".Youtube").click(function () {
alert('clicked');
return false;
});
I suspect it's something to do with the positioning/layout of the div or images
.Youtube
{
margin: 5px;
width: 320px;
height: 180px;
overflow: hidden;
cursor: pointer;
border: solid 5px #f00;
position: relative;
}
div.Youtube img.Thumb {
position:relative;
z-index:-1;
}
.Youtube img.PlayButton {
height: auto;
width: 160px;
position:relative;
left:20px;
top:-160px;
z-index:-1;
opacity: .7;
}
Can someone point out my mistake? (I've just noticed the border of the div catches clicks are appropriate, just not any content)
Try : This updated jsFiddle - removed superfluous use of z-index property.
.Youtube
{
margin: 5px;
width: 320px;
height: 180px;
overflow: hidden;
cursor: pointer;
border: solid 5px #f00;
position: relative;
}
div.Youtube img.Thumb {
position:relative;
}
.Youtube img.PlayButton {
height: auto;
width: 160px;
position:relative;
left:20px;
top:-160px;
opacity: .7;
}
With a positive z-index set on .Youtube class works fine on FF too.
Code:
.Youtube
{
margin: 5px;
width: 320px;
height: 180px;
overflow: hidden;
cursor: pointer;
border: solid 5px #f00;
position: relative;
z-index: 1;
}
I'm searching for the reason on the net...
Demo: http://jsfiddle.net/IrvinDominin/6Zkua/
EDIT
I think the reason why is that we are defining all the elements in the same stacking context relative, but firefox in this context assume undefined if the z-index is not set so the element will be always at lower index.
Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
Explicitly adding z-index to Div makes it work on firefox
z-index:0
http://jsfiddle.net/LsqAq/3/
Related
I have to resize the buttons on the screen initial size of button 157*70px and required size on screen is 100*50px. It has to be compatible with IE8 where the background-size property is not working although this property works fine in FF.
HTML:
<div id="return_button">
<a class="new_return_button" name="PREVIOUS">Previous</a>
</div>
CSS:(Firfox)
.new_return_button{
background: url("images/previous.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
backgound-size: 100px 50px;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 70px;
line-height: 70px;
width: 157px;
}
#return_button{
color: #FFFFFF;
font-weight: bold;
height: 70px;
left: 10px;
line-height: 70px;
margin: 0;
position: absolute;
text-align: center;
width: 157px;
}
This css works fine in Firefox with background-size property and shrinks the image of 157*70px to area of 100*50px but doesn't work in IE8.
Please suggest a solution to this issue
One way to solve this is to use another element. You probably need to tweak the margins of the <span> to have it working as desired. Also note that this does not guarantee a specific height, instead it will give you the correct aspect ratio for the scaled graphic.
<style>
#return_button {
position: relative;
width: 100px;
}
#return_button img {
max-width: 100%;
height: auto;
}
#return_button span {
position: absolute;
top: 50%;
margin-top: -5px;
left: 10px;
right: 10px;
text-align: center;
}
</style>
<div id="return_button">
<img src="images/previous.png" alt="Button graphic">
<span>Button label</span>
</div>
Example site
I have a site divided into your usual vertical sections. Header and footer both contain backgrounds with background-attachment: fixed. I have a slide-out nav, which you can see is activated on the first link. Everything works dandy except...
Issue:
Safari 6 (I'm not sure about 5.1, but it seems to be on Mac as my Windows Safari doesn't have the issue) has a nasty flicker upon animation. This can be resolved with the usual -webkit-backface hack HOWEVER upon using this, a new problem arises. The fixed background images start behaving very badly, and if you scroll/resize the browser enough, the images get distorted or content overlays improperly. Is there an alternative method I can use for this technique, or an actual fix?
HTML
<section>Hi CLICKME</section>
<section>hi</section>
<section>hi</section>
<section>hi</section>
<footer><p>I am some text</p></footer>
<aside class="menu">
I'm a menu.
</aside>
CSS
body {
background: #222;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
}
body.bump {
transform: translate(-258px, 0);
}
section {
background: #CBA;
color: white;
line-height: 450px;
font-size: 32px;
height: 500px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
z-index: 1;
}
section:nth-child(2) {
background: #FAFAFA;
}
section:nth-child(3) {
background: #CCC;
}
section:nth-child(4) {
background: #ABC;
}
section:first-child {
background: url(http://placekitten.com/1600/500) center top;
background-attachment: fixed;
-webkit-backface-visibility: hidden;
}
#media all and (min-width: 73.75em) {
section:first-child {
background-size: cover;
}
}
footer {
background: url(http://placekitten.com/1400/500) center top;
background-attachment: fixed;
color: white;
font-size: 32px;
height: 500px;
}
#media all and (min-width: 73.75em) {
footer {
background-size: cover;
}
}
footer p {
position: fixed;
bottom: 200px;
left: 0;
text-align: center;
width: 100%;
}
aside.menu {
background: #222;
color: #FFF;
height: 100%;
padding-top: 30px;
position: fixed;
top: 0;
right: 0;
text-align: left;
transform: translate(516px, 0);
transition: all 0.3s;
width: 258px;
-webkit-backface-visibility: hidden;
}
.bump aside.menu {
transform: translate(258px, 0);
}
JS (using Jquery)
$('section a').click( function(e) {
$('body').toggleClass('bump');
});
I did a workaround, by applying the fixed background to the body, wrapping everything in body in another div (animating that instead, so it wasn't affecting the body background) and the footer stayed the same, since having scrolled that far there is no way to pop the sidebar out anyway (so no animation flicker to worry about).
So i have a popup window with a scroller. For scroller i used basic css element overflow: scroll. But the problem is scroller appears on the side and on the bottom. Now i want to know if there is anyway to remove the bottom scroller, because even though its locked its useless to me and it would look better without it. Ive googled it and havent found anything so if you have a solution please share it. If you need any of the code tell me and i will post it.
This is "my" css for popup (i got the code from http://www.zurb.com/playground/reveal-modal-plugin):
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
height: 400px;
background: #eee url(modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
overflow:scroll;
}
.reveal-modal h1{
color: green;
font-size: 40px;
}
.reveal-modal strong{
font-style: inherit;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
a better way of doing it would be
overflow-x:hidden;
overflow-y:auto;
That way it means that if a page gets bigger with jquery and then you need to scroll the view won't get smaller and affect your measurements
This should work:
overflow-x:hidden;
overflow-y:auto;
I am trying to create a button with "caps" on either end, and a repeating background, in order to keep the button a flexible size.
In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button's background-covered space (using negative values).
It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are "outside" the button, and therefore are hidden. Does anyone know how to pop these pseudo-elements "out" of the button, so that they will render?
I want to keep the HTML to just the <button></button> element, and am using SASS.
You can see a jsFiddle here: http://jsfiddle.net/Dqr76/8/ or the code below:
button {
display: inline-block;
zoom: 1;
*display: inline;
border:0;
background-image: url(../images/btn_bg.png);
background-repeat: repeat-x;
color: #fff;
font-weight: bold;
height: 22px;
line-height: 22px;
position: relative;
margin: 0 5px;
vertical-align: top;
&:before {
display: inline-block;
height: 22px;
background-image: url(../images/btn_left.png);
width: 5px;
position: absolute;
left: -5px;
top: 0;
content: "";
}
&:after {
display: inline-block;
height: 22px;
background-image: url(../images/btn_right.png);
width: 5px;
position: absolute;
right: -5px;
top: 0;
content: "";
}
}
Just a sidenote, before someone brings it up, I know that these pseudo-elements do not work in < IE8, and have created a work-around that is not effecting this problem.
Add overflow: visible; to the button element, and it shows up.
Demonstrated at this jsFiddle
I swear I tried that already, but I guess not. Thanks to this question
Is it possible to block the UI when using $.mobile.pageLoading(false)?
This feature isn't implemented in jQueryMobile Alpha 1.0a4.1.
I solved the problem adding a overlay div with high enough z-index.
JS:
$(document).ready(function () {
$('body').append('<div id="block-ui"></div>');
$('#ajax_request').click(function(){
$('#block-ui').show();
$.mobile.pageLoading(false);
});
});
CSS:
#block-ui {
display: none;
cursor: wait;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 9;
background-color: #CCCCCC;
opacity: 0.5;
}
If you're using using fixed-bars you need to override z-index value:
.ui-header-fixed, .ui-footer-fixed {
z-index: 8 !important;
}