Here, i am beginner in jquery and i am building a web page in which i am facing an issue.
in this, when i click the article1 or article2 then section and page click event are automatically called. i want to stop calling them.
here is page.html
<div id="page">
<div id="section">
<div id="article1">this is article 1</div>
<div id="article2">this is article 2</div>
</div>
</div>
here is page.js
$('#page').on('click', function () {
alert('page');
});
$('#section').on('click', function () {
alert('section');
});
$('#article1').on('click', function () {
alert('article1');
});
$('#article2').on('click', function () {
alert('article1');
});
here is page.css
#page {
height: 600px;
width: 600px;
background-color:brown;
}
#section {
height: 100px;
width: 100px;
background-color:red;
}
#article1 {
background-color:green;
}
#article2 {
background-color:yellow;
}
please suggest any solution.
Thanks in Advance.
Use evt.stopPropagation():
$('#page').on('click', function (evt) {
evt.stopPropagation();
alert('page');
});
$('#section').on('click', function (evt) {
evt.stopPropagation();
alert('section');
});
$('#article1').on('click', function (evt) {
evt.stopPropagation();
alert('article1');
});
$('#article2').on('click', function (evt) {
evt.stopPropagation();
alert('article1');
});
JSFiddle
using
event.stopPropagation();
here is a jsfiddle.
http://jsfiddle.net/Lsn8n0yp/
use stopPropagation() man.
$(document).ready(function(){
$('#page').on('click', function (e) {
e.stopPropagation();
alert('page');
});
$('#section').on('click', function (e) {
e.stopPropagation();
alert('section');
});
$('#article1').on('click', function (e) {
e.stopPropagation();
alert('article1');
});
$('#article2').on('click', function (e) {
e.stopPropagation();
alert('article1');
});
})
Related
I want to change margin of one tag when mouse is hovered on its parent.
mouseIsOver() method doesn't making any change.
function der(){
if($(".experience-div li").mouseIsOver()){
$(".star").css('margin-right','10px');
}
}
der();
I changed it to is() method, still nothing has changed.
>
function der(){
if($(".experience-div li").is(":hover")){
$(".star").css('margin-right','10px');
}
}
der();
There is no mouseIsOver function in jQuery or the DOM.
You can use jQuery's hover:
function der(){
$(".experience-div li").hover(
function() {
$(".star").css('margin-right','10px');
},
function() {
$(".star").css('margin-right','auto'); // Or whatever it should be when not hovered
}
);
}
der();
I wouldn't recommend manipulating the style directly like that, though, I'd use a class:
function der(){
$(".experience-div li").hover(
function() {
$(".star").addClass('hovered');
},
function() {
$(".star").removeClass('hovered')
}
);
}
der();
With
.star.hovered {
margin-right: 10px;
}
Live Example:
function der() {
$(".experience-div li").hover(
function() {
$(".star").addClass('hovered');
},
function() {
$(".star").removeClass('hovered')
}
);
}
der();
.star.hovered {
margin-right: 10px;
color: red;
}
<div class="star">I'm the star</div>
<div class="experience-div">
<ul>
<li>Hover me</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
To listen to events (such as mouseover) in jQuery you need to use the .on function:
$(".experience-div")
.on('mouseenter', 'li', function () {
$(".star").css('margin-right', '10px');
})
.on('mouseleave', 'li', function () {
$(".star").css('margin-right', '0');
});
You don't need to use JS to complete this. you simply need to add a :hover state to the class in question.
So I have this code
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn().siblings('.popup').hide();
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
But I'm not quite sure how to animate it. What I want to do is when you click a link, the div fades in (it works), but when you click the related links, I don't want the box to fade out and in again (except for the texts inside it though).
Here's the fiddle
Thanks! x
Hope this works for you
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn(function(){
$(this).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the updated fiddle
To get this to fade properly both ways I think you need to play with the z-index:
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).css('z-index', 1).fadeIn(function(){
$(this).css('z-index', 0).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the fiddle
I know this is a old question , but i've searched a lot .
i want to remove class after clicked outside the like body . here is my code :
Html
<div id="user-login-top">Enter</div>
<div id="user-login-wrapper" class="">visible</div>
Jquery
$(function () {
$("#user-login-top").on("click", function () {
$("#user-login-wrapper").addClass("wide");
});
$(document).on("click", function (e) {
if ($(e.target).is("#user-login-wrapper") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
and here is the fiddle : Fiddle
Appreciate your help !?
Thx
It is because of the propagation of event.
When you click on user-login-top, the first click handle is triggered which is adding the class, then because of event propagation the handler attached to the document is triggered where it satisfies the if condition and removes the class.
One possible solution here is to use event.stopPropagation()
$(function() {
$("#user-login-top").on("click", function(e) {
$("#user-login-wrapper").addClass("wide");
e.stopPropagation()
});
$(document).on("click", function(e) {
if ($(e.target).is("#user-login-wrapper") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
#user-login-wrapper {
opacity: 0;
}
#user-login-wrapper.wide {
opacity: 1 !important;
}
<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible</div>
Another is
$(function() {
$("#user-login-top").on("click", function(e) {
$("#user-login-wrapper").toggleClass("wide");
});
$(document).on("click", function(e) {
if ($(e.target).is("#user-login-wrapper, #user-login-top") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
#user-login-wrapper {
opacity: 0;
}
#user-login-wrapper.wide {
opacity: 1 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible</div>
<section>
<div class="click-text">
click inside and outside me
</div>
</section>
const concernedElement = document.querySelector(".click-text");
document.addEventListener("mousedown", (event) => {
if (concernedElement.contains(event.target)) {
console.log("Clicked Inside");
} else {
console.log("Clicked Outside / Elsewhere");
}
});
this is what i have so far - i'm trying to get the text only to show when the 'timelineTile' is made bigger..
$(function () {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if($('.selected').children().hasClass("clicked")){
$('.details').addClass('show');
}
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
});
});
fiddle also
Add the following css as well to show text only when box is bigger
.timelineTile table{
display: none;
}
.timelineTile.clicked table{
display: block;
}
http://jsfiddle.net/devools/gjyksjuh/1/
try that fiddle?
$(function () {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if($('.selected').children().hasClass("clicked")){
$('.details').removeClass('show');
$(this).children('.details').addClass('show');
}
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
});
});
I am trying to perform a simple animation on click of a link. I want that the link should get disabled after the 1st click and should be re-enabled only after the animation, that started as a result of the first call, completes.
HTML:
<a id="link" href="#">Click</a>
<div id="test" style="float:left;border:1px solid #000;width:100px;height:100px;">Test</div>
<div id="test2"></div>
jQuery:
$('#link').click(function(e){
$('#link').bind('click', disableLink);
ht = $('#test').height();
$('#test').animate({height:'+=50'},5000,function(){$('#link').unbind('click', disableLink);});
$('#test2').html(ht);
});
function disableLink(e) {
e.preventDefault();
return false;
}
Fiddle: http://jsfiddle.net/uHR7a/2/
You can use anonymous function where you declare a variable in_process and depends on it start new animation or not.
Demo: http://jsfiddle.net/dUarG/1/
(function () {
var in_process = false;
$('#link').click(function (e) {
e.preventDefault();
if (!in_process) {
in_process = true;
$('#test').animate({height: '+=50'}, 2000, function () {
in_process = false;
});
}
});
})();
use this code as you jquery:
$('#link').click(function(e){
$('#link').removeAttr('href');
ht = $('#test').height();
$('#test').animate({height:'+=50'},5000,function(){$('#link').attr('href', '#')});
$('#test2').html(ht);
});
function disableLink(e) {
e.preventDefault();
return false;
}
You can use on() and off() for this:
$('#link').on('click', anim); //bind click
function anim(e) {
$(e.target).off('click'); //unbind click when animating
ht = $('#test').height();
$('#test').animate({
height: '+=50'
}, 5000, function() {
$(e.target).on('click', anim); //rebind when done
});
$('#test2').html(ht);
}
FIDDLE