jQuery mouseenter event is not executed - javascript

I'm having some trouble with mouseenter event applied on div area in my pages. I'm trying to change background-color of this div on mouse enter but it is all just ignored.
I have a simple HTML CODE:
<div id="services" class="services">
<div id="services-top">
<h2>Services</h2>
</div>
<div id="services-content">
<div id="services-content-left">
<img id="services-content-right-img" class="img-circle" src="http://i.imgur.com/vN5m4vK.jpg" alt="empty">
<h3>STUFF</h3>
</div>
</div>
</div>
And JS stuff with this event:
$(document).ready(function() {
$("services-content-left").mouseenter(function() {
console.log("enter");
$(this).css("background-color", "yellow");
});
});
And as I said before, when I enter this div area, background stays the same, without any changes.
HERE is an example.
Don't you have any idea how to solve it?

Wrong selector :)
$(document).ready(function() {
$("#services-content-left").mouseenter(function() {
console.log("enter");
$(this).css("background-color", "yellow");
});
});

you simply missed out
out in your code, should be $("#services-content-left") instead
$(document).ready(function() {
$("#services-content-left").mouseenter(function() {
console.log("enter");
$(this).css("background-color", "yellow");
});
});
signify a ID selector.

You have missed a # before your services-content-left,
Please have it changed as,
$("#services-content-left").mouseenter(function() {
Working Fiddle: - https://jsfiddle.net/m2wpetp4/4/
Hope this helps!

Related

Hide when no longer hovering using jQuery

I want the div #reloadWarningBackground to show ONLY when hovering over the button #reloadButton.
Here is my code:
$('#reloadButton').mouseover(function() {
$('#reloadWarningBackground').show();
});
Use mouseout like following.
$('#reloadButton').mouseover(function() {
$('#reloadWarningBackground').show();
}).mouseout(function() {
$('#reloadWarningBackground').hide();
})
UPDATE
It is better to use mouseenter since mouseover will be executed repeatedly.
$('#reloadButton').mouseenter(function () {
$('#reloadWarningBackground').show();
}).mouseleave(function () {
$('#reloadWarningBackground').hide();
})
The simplest and best way to address this problem is using toggle().
//html
<button id="reloadButton">
Hover me
</button>
<div id="reloadWarningBackground" style="display:none;">
<p>
Hello this is me
</p>
</div>
//Javascript
$('#reloadButton').hover(function() {
$('#reloadWarningBackground').toggle();
});
fiddle

add spinner in the place of button on click event

I want to add a spinner below or in the place of the button on click event. I am trying with something like this.
not able to get this working.
Here's the fiddle.
<div class = "example test">
<img src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211776983.png" onclick="$('.test').click();">
<div id="justamoment" style="text-align: left;font-family: Signika;color: white;font-size:14px;font-weight: bold;text-decoration: none;visibility:hidden">
<p>
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif" height="12" width="12" Just a moment..
</p>
</div>
<script>
$(".test").change(function(){
$("#justamoment").css("visibility","visible");
});
</script>
Please help.
You need to have a click handler not change
$(".test").click(function () {
$("#justamoment").css("visibility", "visible");
});
Demo: Fiddle
Try this
USe 'click' instead of 'change' . It will work
Wokring fiddle fine
What about this :
$(".test").click(function () {
$("#justamoment").css("visibility", "visible");
});
DEMO

Trying to make hidden div fade in on click

I'm looking for some help with fading hidden div's in.
This is what I have so far, but it doesn't seem to want to work, the div just appears with no fade.
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
$('.one').click(function(){
$("#one").fadeIn("5000");
});
html
<body>
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
Just click event on alike this:
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e) {
//e.preventDefault();
$("#" + $(this).attr("class")).fadeIn(5000).siblings('div').hide();
});
Fiddle
setTimeout(function() {
$("#one").css('display','none');
}, 5000);
Try this.
$("body").on('click', '#button-hide' function(e){
$("#" + $(this).attr("class")).show().siblings('div').hide();
})
$("body").on('click', '#button-show' function(e){
$("#one").fadeIn("5000");
})
For best answers, please explain more detail you problem. Include the context and example.
Salute!
you don't see the change because "One" is staying on the same position. Try to hide it first, then you can fadeIn
$('.one').click(function(){
$("#one").hide().fadeIn("5000");
});

JQuery Remove all links inside a <div> that have a particular class except for the one that's clicked

In jQuery, how can I remove/disable or change the class of all links inside a <div> that have a particular class except for the one that was clicked? The clicked one's class needs to be changed.
<div class="test">
<div class="link" data-id="1">Link 1</div>
<div class="link" data-id="2">Link 2</div>
<div class="link" data-id="3">Link 3</div>
</div>
In this case, if I clicked Link 1, I'm trying to make Link 2 and Link 3 disappear or change their class, and change the class of Link 1 to noLink.
How can this be done. I'm familiar with add class, remove class, but I'm stuck with getting all others to be removed or changed and change the clicked one to another class.
Something like this?
$('.test div').on('click', function () {
$(this).removeClass('link')
.addClass('noLink')
.siblings('.link')
.remove();
});
DEMO
If you want to change color of clicked link then you can use following code
$('.test .link').on('click',function(){
$('.test .link').css('background', '#38a2de');
$(this).css('background', '#333333');
});
demo
$('.link').on('click', function() {
$('.link').addClass('hide');
$(this).attr('class', 'no-link');
});
Fiddle: http://jsfiddle.net/R3586/
$('.test .link').click(function() {
$(this).removeClass('link').addClass('noLink');
$('.link').remove();
})
This does the trick:
<script>
$('.test .link').click(function(){
$('.test .link').hide();
$(this).addClass('noLink').show();
});
</script>
$('.link').click(function(){
$(this).addClass('noLink').removeClass('link').siblings().hide();
});
$('.link').click(function(){
$(this).removeClass('link').addClass('nolink');
$('.link').remove()
});

How to implement mouseleave in jquery

I have a small problem with sliding in jquery. On hover (mouse over), I need my navigation list item to show its content by sliding down and on mouse out it should slide up.
HTML:
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover">
<a style="background-color:#f78144; color: #000; text-align: center;" href="#">Time Table
</a>
</li>
</ul>
<div id = "hovercontent">
Contents 1
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#mousehover").mouseenter(function(){
$("#hovercontent").slideDown("slow");
});
$("#hovercontent").mouseleave(function(){
$(this).slideUp("slow");
});
});
</script>
Here the problem is when I hover on the list the div slides down, but only after I hover on the div and get out of the nav the div is sliding up. I need the div to slide up even if I mouse out of the list with out entering the div. How can this be done?
Better to use mouseover and mouseout will do it for you..
$("#hovercontent").bind("mouseout", function() {
$(this).slideUp("slow");
});
Try this and put it in the doc ready this way: http://jsfiddle.net/ptVbs/
$("#mousehover").hover(function() {
$("#hovercontent").slideDown("slow");
}, function() {
if (!$("#hovercontent").hover()) {
$("#hovercontent").slideUp("slow");
}
});
$("#hovercontent").mouseleave(function() {
$(this).slideUp("slow");
});
you can try it out in fiddle.
Check out http://www.quirksmode.org/js/events_mouse.html. In your eventhandlers, check for the relatedTarget as described there. Use console.log in the eventhandlers to track what's happening. Unfortunately, I can't help further without having the CSS for the classes you use... maybe you could provide a testcase in JSBin at http://jsbin.com/ ?
try this
$(document).ready(function(){
$("#mousehover").mouseover(function(){
$("#hovercontent").slideDown("slow");
});
$("#hovercontent ,#mousehover").mouseleave(function(){
$('#hovercontent').slideUp("slow");
});
});
try it with event.type on 'hover'
You attach an 'hover' event Handler on your #mousehover content, and with event.type you see what event type is going on. With the Event 'hover' you get mouseenter and mouseleave
$(document).ready(function(){
​$('#mousehover').on('hover',function(event){
switch(event.type){
case 'mouseenter': $("#hovercontent").slideDown("slow");
break;
case 'mouseleave': $("#hovercontent").slideUp("slow");
break;
}
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
});
I recommend using a class:
HTML:
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover" class="menu1">
<a style="background-color:#f78144;color:#000;text-align:center;" href="#">Time Table</a>
</li>
</ul>
<div id = "hovercontent" class="menu1">
Contents 1
</div>
JS:
<script>
$(document).ready(function(){
$("#mousehover").mouseenter(function(){
$("#hovercontent").slideDown("slow");
});
$(".menu1").mouseout(function(){
$("#hovercontent").slideUp("slow");
});
});​
</script>

Categories

Resources