Jquery show/hide hover or mouse enter issue - javascript

Ok so im trying to get some text that is hidden to display when the mouse enters the div then hide when it leaves
so far ive got this on my fiddle
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
Thanks any help would be great


You Should Read Basic of JavaScript
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
})//added
Updated Demo


You were missing a });
Also, you can simplify your code to:
$(document).ready(function () {
$(".image").mouseover(function () {
$(".hover").show();
}).mouseout(function () {
$(".hover").hide();
});
});
BTW, your HTML is broken. Fix that first.


Both your HTML and JS code are badly written. And you didn't include jQuery is your jsfiddle, which means that '$' isn't recognized.
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
});
$(".image").mouseout(function(){
$(".hover").hide();
});
});
You can test it here: http://jsfiddle.net/5PR5E/3/

Related

check if the url is a hash link in Jquery

Hello i have following code, and i know this must be very simple but i cant figure out the issue.
jQuery(document).ready(function(){
jQuery("a").click(function() {
$('#loader').show();
}); });
The code above works perfect
what i want now is to show the #loader only if the link is not a hash link.
i tried this but dosent works
jQuery(document).ready(function(){
jQuery("a").click(function() {
if (window.location.hash ) {
$('#theloader_90').show();
}
}); });
any help is appreciated. Thankx

Want to hide error from console $(...).focusOut is not a function

I am really surprised why i am getting this error on console because this code is working absolutely fine. Actually on hover i am showing div over image. Div smoothly slideUp on hover for that i am using this code
<script>
$(function(){
$('.slide').focusOut(
function(){
$(this).find('.caption').slideDown(600);
});
$('.slide').hover(function(){
$(this).find('.caption').slideUp(600);
});
});
</script>
But if i remove focusout then it stucks while sliding up. Hope i am able to understand you. what i want is how can i stop this error or what is the alternative of this
I have edited my code and now it is working absolutely fine
$(function(){
$('.slide').on('hover',function(){
$(this).find('.caption').slideUp(600);
});
$('.slide').on('mouseleave',function(){
$(this).find('.caption').slideDown(600);
});
});

Try the on function:
<script>
$(function(){
$('.slide').on('focusout',function(){
//CODE
});
});
</script>

Your syntax is wrong. Try it...
<script>
$(function(){
$('.slide').focusout(
//CODE
});
});
</script>

how i can add a id in js on click event

Hey all i am new in java script so please help me out
i have a inputtag so what i want is when some body click on input tag so the #helptext will call automatically by js.
how i can achieve this below the demo code and desired result image....
DEMO
i want like this image :-
please check my updated DEMO bit of change in my markup i need like my current demo

try this :
$(document).ready(function() {
$("a").click(function(event) {
$(this).append(event.target.id);
});
});

$('input').focus(function() {
$('#helptext').show();
});

Here is the working JSFiddle
http://jsfiddle.net/tn98m/9/
$('#myInput').focus(function() {
$('#helptext').show();
});
$('#myInput').blur(function() {
$('#helptext').hide();
});

JQuery missing : after property ID

So I am working with some jquery code to do a simple hide of a p and a show of a p. I am simple adding a class called showp and showing it while making sure the others are not shown by hiding them first. But I keep getting an error missing : after property ID. Any help would be greatly appreciated.
$(document).ready({
$("#phone").click(function(){
$(".hide2").addClass(".hide2").hide("slow");
$(".hide3").addClass(".hide3").hide("slow");
$(".hide1").addClass("showp").show("slow");
});
});

Change this:
$(document).ready({
To this
$(document).ready(function(){

Try this:
$(document).ready(function() {
$("#phone").click(function() {
$(".hide2, .hide3").hide();
$(".hide1").show();
});
});

Your document ready is invalid.
$(document).ready(function() {
// stuff here.
});
Or better yet, a shorthand:
$(function() {
// stuff here.
});

Force jQuery content slider to pause on hover

I would be grateful if someone can help with with some javascript code. I have a content slider which can be found here:-
link text
This works fine but I would like to change the following code so that it pauses on hover. Any ideas?
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
Thanks in advance of your help.
Kind regards
Jonathan

What you're looking for is the stop method. Something along the lines of:
$(".ui-tabs-panel").mouseover(function(e) {
if($(this).is(':animated')) {
$(this).stop();
}
});

Looks like you're using jQuery.UI. Here's how i've done it in the past using the same library (courtesy of this tutorial):
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});

Categories