When having two html elements positioned on top of each other and the element behind is containing an anchor tag, IE on WP7 and 8 "clicks through" the top element and clicks the anchor.
Desktop browsers including IE and other mobile devices like Android browser and Mobile Safari doesn't have this behaviour.
html
<div class="back">
Min sida<br />
Min sida<br />
Min sida<br />
Min sida<br />
Min sida<br />
</div>
<div class="front">
</div>
css
.back
{
position: absolute;
top:0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
}
.front{
position: absolute;
top:0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
background-color: rgba(255, 0, 0, 0.5);
}
The following jsfiddle displays the problem: http://jsfiddle.net/BSunW/6/
Is this the expected behaviour? Is there some way to change this behaviour?
I had same problem while customizing Foundation 4 select boxes.
What I did is I have catched all clicks for element below dropdown list (it was a .footer-ul div) like this:
wp8fix: function() {
$('.dropdown').click(function(){
$('.foooter-ul').bind('click',function(e){
e.stopPropagation();
return false;
});
});
}
you have to remember to unbind this after you dont need it anymore
$('.foooter-ul').unbind('click');
$('.element_on_the_overlay').click(function(e){
$('.overlay').preventDefault();
});
$('.overlay').click(function (event) {
event.preventDefault();
event.stopPropagation();
});
Hi, I've found this solution.
Hope you enjoy. :D
Only thing that worked for me in WP8 was this:
$("input").prop("disabled", true);
$("option").prop("disabled", true);
$("div").prop("disabled", true);
Related
I have a two div which HAVE to be displayed above each others using z-index;
Both however have to react to the same click event as if the event was propergated from a child to a parent.
Is this possible in any way?
here is an example
<body>
<div id="upper" style=" position: absolute; z-index: 1; width: 100px; height: 100px; background-color: #000"></div>
<div id="lower" style="position: absolute; z-index: 0; width: 120px; height: 120px; background-color: #00f"></div>
</body>
Both should be listening to native click events since the lower sibling could hold an iframe.
EDIT For More Clerifications
The Goal is to make the youtube iframe in this example clickable as well as keep all the controls on the canvas element.
https://playground.babylonjs.com/#1DX9UE#51
Just write a Javascript event listener to click the other button when one is clicked.
document.getElementById('upper').addEvenListener('click', () => {
console.log('parent clicked')
})
document.getElementById('lower').addEvenListener('click', () => {
document.getElementById('upper').click()
})
I've experimented with a simple "feature" on my Shopify theme, where I want a link to jump to a specific part of the page - quite simple, and I've done it like this.
Jump to section
<span id="jumpto">The section i want to jump to</span>
It works like a charm, but! I have a sticky header, where the "The section i want to jump to" is hidden behind. Is there any way, with css, push it a bit down down, so "The section I want to jump to" is shown, right beneath the header.
Basically I want the span element to appear for example 50px beneath the header.
My setup looks something like this
<div id="sectiona">
</div>
<span id="jumpto">The section i want to jump to</span>
<div id="sectionb">
</div>
If i use margin og padding, the gab between would be to big.
You can use JavaScript to solve your problem and make smooth scrolling as well.
$('a[href*="#"]').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top - 50
}, 500);
return false;
});
This might not the prettiest solution, but it should do the trick. By having an empty span (.jump-marker) acting as the jumping point you can offset the position where the anchor jumps to.
.jump-marker {
position: absolute;
margin: -120px 0 0;
}
You could also use JS/jQuery to offset the scroll distance by your header height and also allow smooth scrolling, which is much more pleasing to the eye, but that wasn't asked for! :)
Example:
body {
padding-top: 120px;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255,0,0,0.25);
height: 100px;
}
.more-content {
height: 1000px;
background: #f7f7f7;
}
section {
position: relative;
}
.jump-marker {
position: absolute;
margin: -120px 0 0;
}
<header></header>
Jump to section
<div class="more-content"></div>
<section>
<div class="section-content">
<span id="jumpto" class="jump-marker"></span>
The section i want to jump to
</div>
</section>
<div class="more-content"></div>
I make a basic header fixed and made the links tag link offset from the place I want to link too. This solution is really rough but can work with good CSS and placing
html:
<div class="jumpTo">
<a id="0">0</a>
</div>
<h2>0</h2>
css:
.jumpTo{
margin-bottom: 100px;
font-size: 0;
}
https://jsfiddle.net/ovcx2t9z/
or a fiddle based on the Jquery solution
You can use JavaScript to solve your problem and make smooth scrolling as well.
$('a[href*="#"]').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top - 50
}, 500);
return false;
});
https://jsfiddle.net/qy03xb1r/2/
How is the page layed out? Have you tried using padding or margin adjustments like.. padding-top:50px; or margin-top:50px.
When a user hovers over the ? glyphicon, I want to display a information card which follows the mouse around.
I achieved this with the below code, but then hovering over the icon, the div flickers constantly like a strobe light when using Chrome.
In IE it works fine, and in Firefox the div doesn't appear at all
Why?
HTML
<span class="glyphicon glyphicon-info-sign"></span>
<div id="machinesInfo" class="infoCard">
some cool text
</div>
JQuery
$(document).on('mousemove', function(e){
$('.infoCard').css({
left: e.pageX,
top: e.pageY
});
});
CSS
.infoCard {
display: none;
position: absolute;
}
.glyphicon-info-sign:hover + .infoCard {
display: block;
}
Adjusted my JS to
$(document).on('mousemove', function(e){
$('.infoCard').css({
left: e.pageX + 20,
top: e.pageY + 20
});
});
and it now works great
I have an image, and on top of that image is another smaller image. When the first image is clicked, the second one appears, and it disappears when the first image is clicked again. My problem is when the second image appears over the first one, it makes the area that it covers of the first image unclickable. Is it possible to make it so the first image can be clicked through the second image?
This is the HTML for the second image (it's generated in PHP):
Echo '<img src="images/tick.png" id="tick' . $i .'" class="hidden" style="position: absolute; top: 0px; left: 70%;"/>';
Simply put both images in a container div, and attach the click event handler to that instead of the bigger image. This way you can simply make use of event bubbling (which isn't available on the bigger image since it cannot have child elements, such as the smaller image).
Find a working solution here:
https://jsfiddle.net/6nnwy3xw/
$(document).ready(function() {
$('.imgcontainer').on('click', function() {
$(this).toggleClass('toggleImg');
});
})
.imgcontainer {
height: 300px;
width: 300px;
position: relative;
}
.imgcontainer img:first-child {
display: block;
height: 300px;
width: 300px;
}
.imgcontainer img+img {
position: absolute;
top: 50px;
left: 50px;
opacity: 0;
transition-duration: 0.3s;
}
.imgcontainer.toggleImg img+img {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="imgcontainer">
<img src="http://lorempixel.com/300/300" />
<img src="http://lorempixel.com/200/200" />
</div>
I'm assuming your use-case is some kind of checkbox replacement element? In this case, this may also be of interest to you:
Use images like checkboxes
If that is the case, I'd make the surrounding diva label instead, so it also automatically checks your (probably hidden) real checkbox.
If I understand the issue you're describing properly, you could try turning pointer-events off for the second image, that is often displayed over the click-target:
.two { pointer-events: none; }
Note that this is only supported with HTML in Internet Explorer 11 and up (as well as in Chrome and Firefox). For SVG, support was available in IE 9. That may suffice for a work-around if needed.
Fiddle: http://jsfiddle.net/tbqxjp19/
For better support you should move your handler to an element that will not be obstructed, and as such will always work to toggle the visibility of the second image:
<div class="images">
<img src="http://placehold.it/100x100" class="one" />
<img src="http://placehold.it/100x100/000000" class="two" />
</div>
document.querySelector( ".images" ).addEventListener( "click", function () {
this.classList.toggle( "toggled" );
});
The above simply binds a handler to click events on the .images container, toggling a class that will hide and/or reveal the second image, given the following:
.toggled .two {
opacity: .1;
}
Fiddle: http://jsfiddle.net/tbqxjp19/1/
Try this , if you are fine with jquery solution.
HTML
<img src="images/large.png" class ="image" id="image1" style="position: absolute; top: 0px; left: 0px;" />
<img src="images/small.png" id="image2" class ="image" style="position: absolute; top: 0px; left: 0px; z-index:10;" />
css
.hiddenimage{
display:none;
}
JQuery
$(".image").click(function(){
("#image2").toggleClass("hiddenimage");
})
I am using HTML5's full screen capabilities to expand a youtube embedded video in an iframe.
What I need to do is to show another iframe with an image on top of the first one, while on full screen.
I am looking at z-index but without success.
Code sample:
<iframe src="smiley.png" id="image"></iframe>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player" align="center"></div><br>
<button onclick="goFullscreen('player'); return false">Fullscreen</button>
Also (javascript to go fullscreen):
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
And finally (CSS):
.iframeclass {
position: absolute;
top: 0; left: 0;
width:100%;
height:100%;
}
iframe.image {
position: relative;
left:50px;
top:50px;
z-index: 3;
}
iframe.player {
position: relative;
left:50px;
top:50px;
z-index: 1;
}
Thanks!
If it is youtube video as you said, you can solve it by adding wmode=transparent, or wmode=opaque, in iframe code (HTML atrtributes, not CSS). I have that problem before so I found the solution.
Something like <iframe ... ... wmode=transparent>.
That's the problem with Flash actually, not YouTube only, I guess.
Here is the answer from Stack Overflow.