I use photoswipe plugin. Photoswipe close when i tap close button. But after photoswipe hided, div tap event triggered on image that was under photoswipe div. How i can prevent this behavior?
For example:
<!DOCTYPE HTML >
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.js"></script>
<style type="text/css">
div
{
width: 300px;
height: 300px;
}
.first
{
background-color: black;
}
.second
{
width: 200px;
height: 200px;
position: absolute;
top : 50px;
left: 50px;
background-color: red;
z-index: 2;
}
</style>
<script type="text/javascript">
$(function()
{
$('.first').tap(function()
{
$(this).css({backgroundColor : 'green'});
});
$('.second').tap(function()
{
$(this).hide();
});
})
</script>
</head>
<body>
<div class='first'></div>
<div class='second'></div>
</body>
</html>
How it work
-tap second div
-fired tap event on second div
-second div hide
-fired tap event on first div
What i want
-tap second div
-fired tap event on second div
-second div hide
-nothing happening
What i should do in second div tap handler for prevent firing tap event on first div?
I changed example to see what events triggered
$(function()
{
$('.first').bind('vmousedown',function()
{
info('vmousedown first' )
}).bind('vmouseup', function(){
info('vmouseup first')
})
.bind('click',function(){
info('click first');
}).bind('tap', function(){
info('tap first');
});
$('.second').bind('vmousedown',function()
{
info('vmousedown second' )
}).bind('vmouseup', function(){
info('vmouseup second');
})
.bind('click',function(){
info('click second');
}).bind('tap', function(){
info('tap second');
$(this).hide();
});
});
PC output:
vmousedown second
vmouseup second
click second
tap second
Android :
vmousedown second
vmouseup second
tap second
vmousedown first
vmouseup first
click first
tap first
Well I think the problem is you are using jQM Alpha (jquery.mobile-1.0a4.1.js), upgrading to the latest release I think it works as expected. Also you might bind the tap event .bind('tap', function()
http://jsfiddle.net/LFPNC/
JS
$(function()
{
$('.first').tap(function()
{
$(this).css({backgroundColor : 'green'});
});
$('.second').tap(function()
{
$(this).hide();
});
});
HTML
<!DOCTYPE HTML >
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div class='first'></div>
<div class='second'></div>
</body>
</html>
CSS
div
{
width: 300px;
height: 300px;
}
.first
{
background-color: black;
}
.second
{
width: 200px;
height: 200px;
position: absolute;
top : 50px;
left: 50px;
background-color: red;
z-index: 2;
}
Related
A div is initially hidden, I want to display it when clicking a button. And once it is visible, I want to hide it when clicking anywhere outside that div.
I'm trying following code, it displays the div, but the problem is in the second part (clicking outside) the box. The second part conflicts with first one so it hides it before displaying.
How can I fix that?
$('button').on('click', function(e){
e.preventDefault();
$('.box').addClass('active');
});
//hide is by clicking outside .box
$(document).on('click', function (e) {
if ($('.box').is(':visible') && !$('.box').is(e.target) && !$('.box').has(e.target).length) {
$('.box').hide();
}
});
button {
margin-bottom: 20px;
}
.box {
width: 200px;
height: 120px;
background: #fab1a0;
display: none;
}
.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<div class="box"></div>
You can stop the propagation of your event so that when button is clicked the event doesn't bubble up to the document. Also instead of hide(), just using removeClass(...) should work for you.
Also that event propagation doesn't stop in this button listener itself but from the next event listener which in your case is on the document and that is what we require.
$('button').on('click', function(e){
e.stopPropagation();
$('.box').addClass('active');
});
//hide is by clicking outside .box
$(document).on('click', function (e) {
if ($('.box').is(':visible') && !$('.box').is(e.target) && !$('.box').has(e.target).length) {
$('.box').removeClass('active');
}
});
button {
margin-bottom: 20px;
}
.box {
width: 200px;
height: 120px;
background: #fab1a0;
display: none;
}
.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<div class="box"></div>
I have recreated a small example of a button with three iframes. When you scroll through the page and just tap on any iframe (just to make a hovering effect), the focus is set on that iframe, which is fine. But, when any other element is tapped (button in this case), the focus from the iframe doesn't get blurred instantly. One has to tap the button atleast 2-3 times to set the focus on the button. How can this be fixed?
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
.container {
display: table;
margin: auto;
text-align: center;
}
#click_check, button {
margin: 12px 0px;
}
iframe {
display: block;
height: 240px;
width: calc(100% - 20px);
margin-bottom: 12px;
border: 0px;
}
</style>
<div class="container">
<div id="click_check">clicked 0 times</div>
<button>Click Me</button>
<iframe src="https://www.youtube.com/embed/f_2rM8A_1-w"></iframe>
<iframe src="https://www.youtube.com/embed/_I6I2JOJhHY"></iframe>
<iframe src="https://www.youtube.com/embed/RntZL4VpVus"></iframe>
</div>
<script type="text/javascript">
let count = 0;
let output = document.getElementById('click_check');
let button = document.getElementsByTagName('button')[0];
function click() {
count ++;
output.innerHTML = 'clicked ' + count + ' times';
}
button.addEventListener('click', click);
</script>
If anyone wants to know, I fixed it with
document.addEventListener('touchstart', (e) => { e.preventDefault(); });
So when I click once it does both the Jquery codes ... I would like it that when I
click it slides down and stays down until I click again, how to?
I tried click1 and click2 but it is not ideal.
I also tried giving them other id but it wasn't logical.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(1500);
});
});
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp(1500);
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
As you've seen, when you attach multiple handlers they all execute at the same time. Instead, attach one handler and call slideToggle() instead.
Also note that you may want to add a call to stop() in there so that when the element is clicked rapidly the animations do not queue up. Try this:
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").stop(true).slideToggle(1500);
});
});
#panel,
#flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
$(document).ready(function(){
$("#flip").click(function(){
if($('#panel').is(':visible')){
$("#panel").slideUp(1500);
}else{
$("#panel").slideDown(1500);
}
});
});
The issue is that there are two click events bound to the div. Instead, you need to keep track of the state (i.e. isUp or isDown) and do it with a single click handler. Something like this:
$(document).ready(function(){
var isDown = false;
$("#flip").click(function(){
if( !isDown ){
$("#panel").slideDown(1500);
isDown = true;
} else {
$("#panel").slideUp(1500);
isDown = false;
}
});
});
Hello I have one confusion in my head.
I'm trying to make a logic in JS when some one click on BUTTON then automatically lead to next page after 1s.
I tried to use onclick function but I'm getting error.
I included simple html and css in purpose of texting.
Can some one help me.
Also That logic must apply to any pages.
Cheers!
#btn {
position: relative;
width: 300px;
height: 80px;
content: 'Button';
background: blue;
border-radius: 9px;
color: white;
vertical-align: center;
}
#next {
position: relative;
width: 300px;
height: 80px;
content: 'Button';
background: blue;
border-radius: 9px;
color: white;
margin-top:50px;
}
#text {
margin:auto;
position: relative;
width: 80px;
height: 40px;
padding-top: 30px;
}
<<!DOCTYPE html>
<html>
<head>
<title>!!!AAA!!!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="btn"><div id="text">Button</div></div>
<div id="next"><div id="text">next</div></div>
</body>
</html>
To go to a different page after 1 second you'll want to use a combination of setTimeout() and window.location and an onclick event on your button.
I am assuming you want to use the button next to make this happen.
First thing create a second html test page.
<html>
<body>
<h1>Page 2</h1>
</body>
</html>
and in the code you shared, after the closing </div> tag for id next add the following:
<!DOCTYPE html>
<html>
<head>
<title>!!!AAA!!!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="btn">
<div id="text">Button</div>
</div>
<div id="nextPage">
<button id="next" onclick="switchLocation(0)">next</button>
</div>
<script>
function switchLocation(counter) {
if (counter == 0) {
counter = 1;
setTimeout(function() {
switchLocation(counter);
}, 1000);
} else {
window.location = "page2.html";
}
}
</script>
</body>
</html>
I edited your code slightly. Removed the extra < on the first line and changed the "next" div to a button.
Here is my jQuery code:
(function() {
var overlay = {
init: function() {
$('<div></div>', {
class: 'overlay'
})
.insertAfter('button');
}
};
overlay.init();
})();
I would expect this to put a div under my button however the HTML that is created contains no div:
<body>
<button>Reveal More Info</button>
</body>
Sorry if this is a newbie question, I have just started learning.
The HTML Head:
<head>
<title>jQuery rules</title>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="script.js"></script>
<style>
body {
background: yellow;
}
button {
margin: 100px 0 0 200px;
}
div {
display: none;
width: 600px;
height: 400px;
background-color: white;
border-radius: 40px;
position: absolute;
left: 25%;
top: 30%;
}
</style>
</head>
From jQuery documentation, see e.g., http://api.jquery.com/jQuery/#jQuery-html-attributes:
Blockquote
The name "class" must be quoted in the object since it is a JavaScript reserved word, and "className" cannot be used since it refers to the DOM property, not the attribute.
The problem is you are including the script.js in your header which is executing before the button is added to the dom so the insertAfter() will not be able to find the button to insert the div.
The solution here is to use document ready handler, or to insert the script at the bottom of the body(just before </body>)
//dom ready handler
jQuery(function ($) {
var overlay = {
init: function () {
$('<div></div>', {
'class': 'overlay'
}).insertAfter('button');
}
};
overlay.init();
});
Demo: Fiddle