I have the following code to show the next element in the dom on click, I would like to convert this same code into something I could use for a simple hover event. Does jQuery have a simple method to do something like this or should I be using .bind() to mouseover and mouseout events? I know this should be simple, I am probably just not thinking clearly.
$('#el').click(function(e){
e.preventDefault();
var $prevEl = $(this).parent().find('.prev-el');
$prevEl.fadeToggle();
});
One thing to mention is I would like the $prevEl to stay visible after hovering the triggering #el element. What is the best way to go about this?
Thank you in advance,
DT
You can use $('#el').mouseover(... instead of $('#el').click(..., but you should use fadeIn instead of fadeToggle when you're using mouseover:
$('#el').mouseover(function(e) {
var $prevEl = $(this).parent().find('.prev-el');
$prevEl.fadeIn();
});
http://jsfiddle.net/mblase75/eXjTb/3/
If you want it to fade back out on mouseout, though, use .hover as a shorthand way to combine the two and keep the fadeToggle:
$('#el').hover(function(e) {
var $prevEl = $(this).parent().find('.prev-el');
$prevEl.fadeToggle();
});
http://jsfiddle.net/mblase75/eXjTb/2/
this should work:
$('#el').mouseover(function(){
$(this).parent().find('.prev-el').fadeIn();
});
By the way, you can use .next() and .prev() instead of .parent().find(...) (depending on your html)
Related
this is the code: code on jsfiddle. On the first run it doesn't show the "slideDown" animation but subsequent times it works fine.
$("#more-news") .click(function() {
$(".news-hide") .slideDown('slow').removeClass("hide");
});
Use the following.
$("#more-news").click(function() {
//changed the line below.
$(".news-hide").hide().removeClass('hide').slideDown('slow');
$("#less-news").fadeIn('slow').removeClass("hide");
$("#more-news").fadeOut().addClass("hide");
});
DEMO
Instead of using multiple elements and multiple events, you can use like this,
$("#more-news").click(function() {
var button = $(this)
$(".news-hide").slideToggle(function() {
$(".news-hide").is(":visible") ? button.text("Less News") : button.text("More News")
});
});
Fiddle
The bootstrap hide class doesn't quite work the same way as the jQuery hide function, creating a confusing result.
To jQuerify your hidden things before sliding them around, you can do something a little like this:
$('.hide').hide().removeClass('hide');
$("#more-news") .click(function() {
$(".news-hide") .slideDown('slow');
});
Now you don't have to worry about that hide class every time you do something, but it keeps things hidden until the document is ready to javascript itself.
You can do something like:
function myFunct(){/*.....*/}
$("body").on("click", "li.itemlist", function(){
alert("ping");
});
which would have all li.itemlist under body to have the click event.
Is there a way to convert:
var _OPTIONS_ = {
containment: "#stage",
start:function(){/*...*/},
drag:function(){/*...*/},
stop:function(){/*...*/}
};
$("li.itemlist").draggable(_OPTIONS_);
to:
$("body").on("draggable", "li.itemlist", _OPTIONS_);
EDIT: I have not tried the second one. I didnt think it would work because draggable is a JQuery function, not a standard js listener.
No, but there is another way to do it.
$("body").on("mouseenter","li.itemlist:not(.draginit)",function(){
$(this).draggable(_OPTIONS_).addClass("draginit");
})
The first time the element is moused over, the draggable widget will be applied to it.
I'd suggest using something better than body though, such as the ul.
When you hover over one <div>, I want an <a> on a separate part of the page to be "hovered" on also.
<div class="initiator">
</div>
<div>
<a class="receiver href="#">Touch the div and I get hovered!</a>
</div>
I've tried this jQuery, but it doesn't trigger the <a>'s hover CSS.
$(".initiator").hover(function(){
$(".receiver").hover();
console.log("div was hovered");
});
Try this:
$('.initiator').on('mouseenter mouseleave', function(e) {
$('.receiver').trigger(e.type);
})
It will apply the same triggers for the receiver as the initiator receives for both mouseenter and mouseleave. Note that:
.hover(over, out)
is just a high-level variant of:
.on('mouseenter', over).on('mouseleave', out)
so using that information you can be more precise when binding and triggering mouse events.
As noted in the comment, you can also use:
$('.initiator').hover(function(e) {
$('.receiver').trigger(e.type);
})
There are lots more to read here: http://api.jquery.com/hover/
You could do something like-:
$(".initiator").hover(function(){
$(".receiver").addClass('hover');
console.log("div was hovered");
}, function(){
$(".receiver").removeClass('hover');
});
And now you can have a class that holds the css rules.
Not sure what you mean by "hovered", but assuming you have some CSS defined for .receiver:hover pseudo class I would suggest to move them to the separate CSS class .hover and use jQuery toggleClass function.
Here is a quick example that makes link text bold when you move mouse over the div - http://jsfiddle.net/Pharaon/h29bh/
$(".initiator").hover(function(){
$(".receiver").toggleClass("hover");
console.log("div was hovered");
});
hover() is a jQuery method that ties together mouseenter and mouseleave events
try
$(this).find('.receiver').mouseenter()
Or
$(this).find('.receiver').trigger('mouseenter')
However you will likely have far better results adding a class to the a tag and adding a new css rule.
$(this).find('.receiver').toggleClass('hoverClass')
I have a task here that requires heavy DOM manipulation. Because this can have a bad impact on the performance, I clone the element, make the changes there and replace the clone with the original.
After replacement, the elements have a hover function.
Because I want faded transition, I do the change like this:
myElement.fadeOut(500, function(){
myClone.hide();
myElement.replaceWith(myClone);
myClone.fadeIn(500);
});
This is working, but after that the hover functionality does not work anymore. When I remove the callback from fadeOut, I can hover again but the timed transitions does not look good anymore.
What can I do about it? Why do the elements lose their hover-functionality when using the callback?
i have a different solution for you. CSS approach:
You can set one of your element's position;
#myElement { top:100px; left:200px; }
#myElement, #myClone { position:absolute; }
jQuery:
$(document).ready(function() {
var myElement = $('#myElement');
var myClone = $('#myClone');
var myEleTop = parseInt(myElement.css('top'));
var myEleLeft = parseInt(myElement.css('left'));
myClone.hide();
myClone.css({'top':myEleTop+'px','left':myEleLeft+'px'});//sets position here
myElement.mouseenter(function() {
myElement.fadeOut(500, function(){
myClone.fadeIn(500);
}
});
myElement.mouseleave(function() {
myClone.fadeOut(500, function(){
myElement.fadeIn(500);
}
});
});
or you can just use appendTo() and remove() methods, i am not really experienced with these methods but try this:
myElement.mouseenter(function() {
myElement.fadeOut(500, function(){
myElement.remove();
myClone.appendTo($('.container'));
myClone.fadeIn(500);
}
});
myElement.mouseleave(function() {
myClone.fadeOut(500, function(){
myClone.remove();
myElement.appendTo($('.container'));
myElement.fadeIn(500);
}
});
When an object is cloned, the clone will no longer have event listeners attached to it. One way to fix it is to attach the event handlers using "on":
$("my-clone-container").on("hover", "my-clone-selector", myHoverHandler);
This way, whenever you add a clone, it will automagically handle hover events as you want it to. See the docs for 'on'.
I think I've been too much time looking at this function and just got stuck trying to figure out the nice clean way to do it.
It's a jQuery function that adds a click event to any div that has a click CSS class. When that div.click is clicked it redirects the user to the first link found in it.
function clickabledivs() {
$('.click').each(
function (intIndex) {
$(this).bind("click", function(){
window.location = $( "#"+$(this).attr('id')+" a:first-child" ).attr('href');
});
}
);
}
The code simply works although I'm pretty sure there is a fairly better way to accomplish it, specially the selector I am using: $( "#"+$(this).attr('id')+" a:first-child" ). Everything looks long and slow. Any ideas?
Please let me know if you need more details.
PS: I've found some really nice jQuery benchmarking reference from Project2k.de here:
http://blog.projekt2k.de/2010/01/benchmarking-jquery-1-4/
Depending on how many of these div.click elements you have, you may want to use event delegation to handle these clicks. This means using a single event handler for all divs that have the click class. Then, inside that event handler, your callback acts based on which div.click the event originated from. Like this:
$('#div-click-parent').click(function (event)
{
var $target = $(event.target); // the element that fired the original click event
if ($target.is('div.click'))
{
window.location.href = $target.find('a').attr('href');
}
});
Fewer event handlers means better scaling - more div.click elements won't slow down your event handling.
optimized delegation with jQuery 1.7+
$('#div-click-parent').on('click', 'div.click', function () {
window.location.href = $(this).find('a').attr('href');
});
Instead of binding all the clicks on load, why not bind them on click? Should be much more optimal.
$(document).ready(function() {
$('.click').click(function() {
window.location = $(this).children('a:first').attr('href');
return false;
});
});
I would probably do something like;
$('.click').click(function(e){
window.location.href = $(this).find('a').attr('href');
});