Hi I am trying to open one div on mouse hover of second div.
The div 1 is display is none by default but when user hover on div 2 the div 1 will be displayed.
But it's not working.
My code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.testtmpblock{
display: none;
background-color: black;
height: 100px;
width: 100px;
}
.tmpd{
height: 100px;
width: 100px;
background-color: blue;
}
</style>
<script>
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(this).find(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).find(".testtmpblock").hide();
});
});
</script>
</head>
<body>
<div class="tmpd">
kjkjkj
</div>
<div class="testtmpblock">
data
</div>
</body>
</html>
div testtmpblock will be appear on hover of div tmpd but it's not working.
I have also write Script for it.
Any guidance that where I am wrong ?
You need to use next instead of find as find is used for desendants and your required element is not descendant.
Live Demo
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(this).next(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).next(".testtmpblock").hide();
});
});
You can avoid next if only single element has class testtmpblock
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(".testtmpblock").hide();
});
});
If the divs are next to each other you do this with CSS only:
.testtmpblock {
display: none;
}
.tmpd:hover ~ .testtmpblock {
display: block;
}
If you want to animate it you can use CSS3 transitions.
99% of time you can get away with CSS only, and the animations will be faster with transitions. It's all about how you handle the markup. If you make the hidden element a child then it's always doable with just CSS, for example:
<div class="tmpd">
kjkjkj
<div class="testtmpblock">
data
</div>
</div>
And you'd use a selector like so:
.tmpd:hover .testtmpblock {}
try next()
$(document).on('mouseenter', '.tmpd', function () {
$(this).next(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).next(".testtmpblock").hide();
});
$(document).ready(function () {
$('body').on('hover','.tmpd', function () {
$(".testtmpblock").show();
}, function () {
$(".testtmpblock").hide();
}
);
});
Related
I want to be able to distinguish if the user clicked an element with a certain class (or child element of that class, such as a paragraph), or if the user clicked anywhere else in the page. I use jQuery to see if the event target was an element of the specific class, but this doesn't work for some reason. It doesn't register when the element is clicked. Can you see where the problem is? (look in the browser inspector for console log messages)
See Fiddle
Here is the code in the fiddle:
HTML:
<div class="redsquare"><p>red square</p></div>
<div class="redsquare"><p>red square</p></div>
CSS
.redsquare {
width: 100px;
height: 100px;
background: red;
margin-bottom: 10px;
}
Javascript:
$(function() {
window.addEventListener('mouseup', function(event) {
if (!$(event.target).hasClass('.redsquare') && !$(event.target.parentNode).hasClass('.redsquare')) {
console.log('target is outside red square');
} else {
console.log('target is red square');
}
});
});
jQuery's .hasClass() does not require you to precede the class name with a dot.
Give .hasClass('redsquare') a try. You can read about it here.
Here's a fiddle.
Also, it would be more straightforward to check if element has that class and leave the other case in the else block instead.
Use event.target.className to get class name.
$(function() {
window.addEventListener('mouseup', function(event) {
if (event.target.className != 'redsquare') {
console.log('target is outside red square');
} else {
console.log('target is red square');
}
});
});
.redsquare {
width: 100px;
height: 100px;
background: red;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="redsquare">red square</div>
<div class="redsquare">red square</div>
You can use this code:
Here is working demo: https://output.jsbin.com/xobafah
https://jsbin.com/xobafah/edit?html,css,js
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="redsquare">red square</div>
<div class="redsquare">red square</div>
</body>
</html>
JavaScript
$(function() {
$(document).mouseup(function(e)
{
var container = $(".redsquare");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
console.log('target is outside red square');
}
else{
console.log('target is red square');
}
});
});
Remove the dot in your classname and it will work as expected:
$(function() {
window.addEventListener('mouseup', function(event) {
if (!$(event.target).hasClass('redsquare') && !$(event.target.parentNode).hasClass('redsquare')) {
console.log('target is outside red square');
} else {
console.log('target is red square');
}
});
});
https://jsfiddle.net/bzp0ef9k/1/
I'm facing such problem. I have div with class oldClass and function that toggle div's class on click. When the class changed clicking on div should trigger other function and call alert, however this behavior doesn't appear and it seems like previous function is called again. I'm quite new in jQuery, so what am I missing?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.oldClass').on('click',function(){
$(this).toggleClass('oldClass').toggleClass('newClass');
});
});
$(function(){
$('.test').on('click',function(){
alert('1111');
});
});
</script>
<style>
.oldClass {
border: 1px solid red;
}
.newClass {
border: 3px solid green;
}
</style>
</head>
<body>
<div class="oldClass" title="qwerty">qwerty
</div>
<body>
</html>
Here you go! You have to subscribe and unsubscribe to events. I'm new to jQuery as well and it might be not the clearest solution, but it works. If anyone can suggest a better solution, you are welcome.
var subNewClass = function () {
$('.newClass').off().on('click', function () {
alert('1111');
});
};
var subOldClass = function () {
};
$(function () {
$('.oldClass').off().on('click', function () {
$(this).toggleClass('oldClass').toggleClass('newClass');
$('.newClass').off().on('click', func);
});
});
.oldClass {
border: 1px solid red;
}
.newClass {
border: 3px solid green;
}
<div class="oldClass" title="qwerty">qwerty</div>
You're declaring document.ready twice ... $(function(){}); is a shortand for $(document).ready(); and not a javascript function declaration ...
To create a function you should first do function foo(){ /* content goes here */ }; or var foo = function(){ /* content goes here */ }; ant then call it whenever you want by writing foo();
Read more about JS functions here
Check this to see how this should work: JSFIDDLE DEMO
var alertTrigger = function (){
$('.newClass').on('click',function(){
$(this).toggleClass('oldClass').toggleClass('newClass');
alert('1111');
});
}
$(function(){
$('.oldClass').on('click',function(){
$(this).toggleClass('oldClass').toggleClass('newClass');
alertTrigger();
});
});
This jQuery code will highlight the div box when clicked.
I want to get the highlight on load, how can I do that?
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin: 0px; width: 100px; height: 80px; background: #666; border: 1px solid black; position: relative; }
</style>
<script>
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
</script>
</head>
<body">
<div id="div1"></div>
</body>
</html>
Put the statement for highlight in document.ready at the same level you are binding click event..
Live Demo
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000); //this will highlight on load
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
Alternatively, this way might be a little cleaner in that if you add some other effects that you want to show on the click state, you only need to define them one time.
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
$('#div1').click();
});
Javascript
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000);
});
This will highlight the div1 when the document is ready. If you also want a click handler, you can keep it and put in whatever code you want (ie. you can also keep the effect in there as well, if you want to).
Fiddle
I have an image in a html document and when the webpage loads i want the image to bounce. I have a jquery function that does this only when the image is clicked on. I can't figure out how to make this work onLoad...
Here is the code
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin-left: 500px; margin-top: 200px; width: 100px; height: 80px; position: relative; }
</style>
<script>
$(document).ready(function() {
$("#logo").click(function () {
$(this).effect("bounce", { times:4, distance:200 }, 400);
});
});
</script>
</head>
<body>
<div id="logo"><img src="http://visionhelp.files.wordpress.com/2012/01/soccer-ball.jpg"/> </div>
</body>
</html>
Thanks for checking this out. Much appreciated! :)
$(document).ready(function () {
$("#logo").effect("bounce", { times:4, distance:200 }, 400);
});
or, using a more modern style of document ready function:
$(function () {
$("#logo").effect("bounce", { times:4, distance:200 }, 400);
});
This work for you:
$(window).load(function() {
$('#logo').effect("bounce", {
times: 4,
distance: 200
}, 400).click(function() {
$(this).effect("bounce", {
times: 4,
distance: 200
}, 400);
});
})
With a jsFiddle example
Just trigger the click event on page load. Try this
$(document).ready(function() {
$("#logo").click(function () {
$(this).effect("bounce", { times:4, distance:200 }, 400);
})
.click();//Will trigger the click event on page load
});
If you don't want this effect on logo click but just on page load then use this.
$(document).ready(function() {
$(this).effect("bounce", { times:4, distance:200 }, 400);
});
I have a jQuery UI Sortable list. The sortable items also have a click event attached. Is there a way to prevent the click event from firing after I drag an item?
$().ready( function () {
$('#my_sortable').sortable({
update: function() { console.log('update') },
delay: 30
});
$('#my_sortable li').click(function () {
console.log('click');
});
});
#my_sortable li {
border: 1px solid black;
display: block;
width: 100px;
height: 100px;
background-color: gray;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<ul id="my_sortable">
<li id="item_1">A</li>
<li id="item_2">B</li>
<li id="item_3">C</li>
</ul>
I had the same problem and since my sortable items contained three or four clickable items (and the number was variable) binding/unbinding them on the fly didn't really seem an option. However, by incident I specified the
helper : 'clone'
option, which behaved identically to the original sortable in terms of interface but apparently does not fire click events on the dragged item and thus solves the problem. It's as much a hack as anything else, but at least it's short and easy..
If you have a reference to the click event for your li, you can unbind it in the sortable update method then use Event/one to rebind it. The event propagation can be stopped before you rebind, preventing your original click handler from firing.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
var myClick = function () {
console.log('click');
};
$().ready( function () {
$('#my_sortable').sortable({
update: function(event, ui) {
ui.item.unbind("click");
ui.item.one("click", function (event) {
console.log("one-time-click");
event.stopImmediatePropagation();
$(this).click(myClick);
});
console.log('update') },
delay: 30
});
$('#my_sortable li').click(myClick);
});
</script>
<style type="text/css" media="screen">
#my_sortable li {
border: 1px solid black;
display: block;
width: 100px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<ul id="my_sortable">
<li id="item_1">A</li>
<li id="item_2">B</li>
<li id="item_3">C</li>
</ul>
</body>
</html>
If you for some reason don't want to use the helper:'clone' trick, this worked for me. It cancels the click event on an item that is dragged. jQuery adds the class ui-sortable-helper to the dragged element.
$('.draggable').click(clickCancelonDrop);
function clickCancelonDrop(event) {
var cls = $(this).attr('class');
if (cls.match('ui-sortable-helper'))
return event.stopImmediatePropagation() || false;
}
$('.selector').draggable({
stop: function(event, ui) {
// event.toElement is the element that was responsible
// for triggering this event. The handle, in case of a draggable.
$( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } );
}
});
This works because "one-listeners" are fired before "normal" listeners. So if a one-listener stops propagation, it will never reach your previously set listeners.
We can also use a flag on the stop event that and check that flag on the click event.
var isSortableCalled = false;
$('#my_sortable').sortable({
stop: function(event, ui){
isSortableCalled = true;
},
update: function() { console.log('update') },
delay: 30
});
$('#my_sortable li').click(function () {
if(!isSortableCalled){
console.log('click');
}
isSortableCalled = false;
});
The answer by mercilor worked for me a couple of caveats. The click event was actually on the handle element rather than the sorted item itself. Unfortunately the ui object, doesn't give you a reference to the handle in the update event (feature request to jquery ui?). So I had to get the handle myself. Also, I had to call preventDefault as well to stop the click action.
update: function(ev, ui) {
var handle = $(ui.item).find('h3');
handle.unbind("click");
handle.one("click", function (event) {
event.stopImmediatePropagation();
event.preventDefault();
$(this).click(clickHandler);
});
// other update code ...
Easier, use a var to know when the element is being sorted...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
$().ready( function () {
$('#my_sortable').sortable({
start: function() {
sorting = true;
},
update: function() {
console.log('update');
sorting = false;
},
delay: 30
});
$('#my_sortable li').click(function () {
if (typeof(sorting) == "undefined" || !sorting) {
console.log('click');
}
});
});
</script>
<style type="text/css" media="screen">
#my_sortable li {
border: 1px solid black;
display: block;
width: 100px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<ul id="my_sortable">
<li id="item_1">A</li>
<li id="item_2">B</li>
<li id="item_3">C</li>
</ul>
</body>
</html>
Thanks to Elte Hupkus;
helper: 'clone'
I have implemented the same and a sample is shown below.
$(document).ready(function() {
$("#MenuListStyle").sortable({
helper:'clone',
revert:true
}).disableSelection();
});
One solution is to use live() instead of normal binding, but Elte Hupkes solution rocks!!!!
$('.menu_group tbody a').click(function(){
link = $(this).attr('href');
window.location.href = link;
});
This solution seems to be working for me. Now i can click on clickables inside sortable elements.
Note: ".menu_group tbody" is .sortable();