jquery apply hover effect to all instances of a class

ldb358 · December 21, 2009

what im trying to do is when you scroll over a video image the title hovers in on top of it all of the images have the same class so what i want to do is grab all instances of that class and apply the effect so far ive tried:

$(".video_image").hover(function(){
alert("test");
},function(){

});
//and
$("img[class*=video_image]").hover(function(){
alert("test");
},function(){

});

but im fairly new to jquery and cant figure out any other way

heres my divs and images for the videos

<div id='videoboxs' >
	    <div class='video'>
	        <img src='videos/{video(0)}.jpg' alt='{video_title(0)}' class='video_image'>
	    </div>
	    <div class='video'>
	        <img src='videos/{video(1)}.jpg' alt='{video_title(1)}' class='video_image'>
	    </div>
	    <div class='video'>
			<img src='videos/{video(2)}.jpg' alt='{video_title(2)}' class='video_image'>
		</div>
	    <div class='video'>
	        <img src='videos/{video(3)}.jpg' alt='{video_title(3)}' class='video_image'>
	    </div>
	    <div class='video'>
	        <img src='videos/{video(4)}.jpg' alt='{video_title(4)}' class='video_image'>
	    </div>
	    <div class='video'>
	        <img src='videos/{video(5)}.jpg' alt='{video_title(5)}' class='video_image'>
	    </div>
	    <div class='video'>
			<img src='videos/{video(6)}.jpg' alt='{video_title(6)}' class='video_image'>
	    </div>
	    <div class='video'>
	        <img src='videos/{video(7)}.jpg' alt='{video_title(7)}' class='video_image'>
	    </div>
	    <div class='video'>
	        <img src='videos/{video(}.jpg' alt='{video_title(}' class='video_image'>
	    </div>
	    <div class='video'>
			<img src='videos/{video(9)}.jpg' alt='{video_title(9)}' class='video_image'>
	    </div>
	    <div class='video'>
	        <img src='videos/{video(10)}.jpg' alt='{video_title(10)}' class='video_image'>
	    </div>
	    <div class='video'>
	        <img src='videos/{video(11)}.jpg' alt='{video_title(11)}' class='video_image'>
	    </div>
	</div>

so once i grab the img i also need to grab the alt attribute from that particular image tag

any ideas???? thanks in advance

trq · December 21, 2009

$(".video img").hover(function(){
  alert($(this).attr('alt'));
},function(){
   
});

ldb358 · December 21, 2009

thanks for the reply, i tried your example and it didnt work so then i was able to narrow it down to the:

$(document).ready(function(){});

is never being run anyone know what causes this

JustLikeIcarus · December 21, 2009

So this is in the head of your document correct?

<script type="text/javascript">
$(document).ready(function(){
  $(".video").hover(function(){
  
  },function(){
   
  });
});
</script>

ldb358 · December 21, 2009

correct

JustLikeIcarus · December 21, 2009

Replace it with this just to see if its getting triggered. I would also use firefox with firebug installed to check for errors.

<script type="text/javascript">
$(document).ready(function(){
alert('test');
});
</script>

ldb358 · December 21, 2009

im getting an error $ is not defined but i dont get why it is executed after jquery is loaded

JustLikeIcarus · December 21, 2009

Sounds like jquery either isnt loading or is in conflict with another framework. what all js are you loading on the page? can you post the html header or the whole doc?

ldb358 · December 21, 2009

heres the whole doc:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
    <link href='/lbflash_cms/templates/mfg/main.css' rel='stylesheet' > 
    <title>home page - Welcome</title> 
    <meta http-equiv=Content-Type content="text/html; charset=utf-8"> 
<script type='text/javascript' src='/lbflash_cms/templates/mfg/jquery.1.3.2.js'></script> 
    <script type='text/javascript' src='/lbflash_cms/templates/mfg/effects.js'></script> 
<script type="text/javascript"> 
$(document).ready(function(){
alert('test');
});
</script> 
    <!--[if ie 7]> <link href='/lbflash_cms/templates/mfg/ie7style.css' rel='stylesheet'> <![endif]--> 
    <!--[if lt ie 6]> <link href='/lbflash_cms/templates/mfg/ie6style.css' rel='stylesheet'> <![endif]--> 
</head> 
<body> 
    <div id='body'> 
        <div id='header'> 
        <div id="logo"> 
            <a href="/lbflash_cms/index.php"><img src='/lbflash_cms/templates/mfg/forlane/mainlogo.png' id='mainlogoimg' alt='mfg' ></a> 
         </div> 
            <div id='headerform'> 
                    <div id='username'> 
                    	<div id='headerimages' > 
                        <img src='/lbflash_cms/templates/mfg/forlane/username.png' id='usernametxt' alt='username' ><br> 
                        <img src='/lbflash_cms/templates/mfg/forlane/password.png' id='passwordtxt' alt='password' ><br> 
                        <img src='/lbflash_cms/templates/mfg/forlane/joinbutton.png' onclick='registerform();' id='joinbutton' alt='join' > 
                        </div> 
                        <div id='headerinputs'> 
                            <form method='POST' action='login.php' > 
                                <span> 
			<input type="text" name="username"> 
                                <input type="password" name="password"> 
                                <input type="image" src="/lbflash_cms/templates/mfg/forlane/loginbutton.png" id='loginbutton' > 
			</span> 
                            </form> 
                        </div> 
                    </div> 
                    <form method="post" action="{search}"> 
                    <div id="search"> 
                            <input type='image' src='/lbflash_cms/templates/mfg/forlane/searchbutton.png' id='searchbutton' > 
                            <input type='text' name='search' id='searchinput' > 
                    </div> 
                    </form> 
            </div> 
        </div> 
        <div id="sidelinks"> 
            <div class='sidelink' id='sideselected' >Home</div> 
    <div class='sidelink' >Sketch</div> 
    <div class='sidelink' >Original</div> 
    <div class='sidelink' >Highest Rated</div> 
    <div class='sidelink' >MFG's Picks</div> 
    <div class='sidelink' >Featured</div> 
        </div> 
<div id='rightside'> 
    <div id='toplinks'> 
	<a style='background:url(/lbflash_cms/templates/mfg/forlane/buttonsmallsolid.png) no-repeat top left;'>Videos</a> 
	<a>Pictures</a> 
	<a>Profile</a> 
	<a>Community</a> 
	<a>About Us</a> 
    </div> 
    <div id='maincontent'> 
	<div id='pagelabel'> 
	    Videos
	</div> 
	<div id='numofpages'> 
	    <Previous>1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12..... 20<Next>
	</div> 
	<div id='videoboxs' > 
	    <div class='video'> 
	        <img src='videos/in_a_box.jpg' alt='in a box' class='video_image'> 
	    </div> 
	    <div class='video'> 
	        <img src='videos/barbie.jpg' alt='barbie' class='video_image'> 
	    </div> 
	    <div class='video'> 
			<img src='videos/video_club.jpg' alt='video club trailer' class='video_image'> 
		</div> 
	    <div class='video'> 
	        <img src='videos/jones_ad.jpg' alt='jones soda ad' class='video_image'> 
	    </div> 
	    <div class='video'> 
	        <img src='videos/terrorist_torture.jpg' alt='terrorist torture' class='video_image'> 
	    </div> 
	    <div class='video'> 
	        <img src='videos/cool_bean.jpg' alt='cool beans' class='video_image'> 
	    </div> 
	    <div class='video'> 
			<img src='videos/man_vs_e.jpg' alt='man vs e!' class='video_image'> 
	    </div> 
	    <div class='video'> 
	        <img src='videos/the_pythagorean_theorum.jpg' alt='the pythagorean theorum' class='video_image'> 
	    </div> 
	    <div class='video'> 
	        <img src='videos/{video(}.jpg' alt='{video_title(}' class='video_image'> 
	    </div> 
	    <div class='video'> 
			<img src='videos/{video(9)}.jpg' alt='{video_title(9)}' class='video_image'> 
	    </div> 
	    <div class='video'> 
	        <img src='videos/{video(10)}.jpg' alt='{video_title(10)}' class='video_image'> 
	    </div> 
	    <div class='video'> 
	        <img src='videos/{video(11)}.jpg' alt='{video_title(11)}' class='video_image'> 
	    </div> 
	</div> 
    </div> 
</div> 
<div id='footer'> 
</div> 
    </div> 
    <div id='blackdiv' class='blackdiv1'></div> 
</body> 
</html>

and heres the other JavaScript doc(partially converted to jquery)

$(document).ready(function(){
alert("test");
$(".video_image img").hover(function(){
	alert($(this).attr('alt'));
},function(){
   	});
$(".video_image").click(function(){
	alert("test");
});
});
function registerform(){
    var screenwidth = document.body.offsetWidth+20;
    var screenheight = document.body.offsetHeight;  
    $("#blackdiv").css("width", screenwidth + 'px');
    $("#blackdiv").css("height", screenheight + 'px');
    $("#blackdiv").css("position" , 'fixed');
    $("#blackdiv").css("left" , '0px');
    $("#blackdiv").css("right" , '0px');
    $("#blackdiv").css("top" , '0px');
    $("#blackdiv").css("bottom" , '0px');
    $("#blackdiv").html("<div id='registerform' ><div id='close' onclick=\"close_effect('blackdiv')\">Close</div><form method='POST' action='register.php' name='registerform' ><div class='registerlabels'>Username:<br>Password:<br>Confirm:<br>Email:<br>First Name:<br>Last Name:</div><div class='registerinputs'><input type='text' value='' name='username'><br><input type='password' value='' name='password'><br><input name='cpassword' type='password' value='' ><br><input type='text' value='' name='email'><br><input type='text' value='' name='first' ><br><input type='text' value='' name='last' ><br><input type='submit' value='Register'></div></form></div>");
    $('#registerform').hide();
$('#registerform').css("left", (document.body.offsetWidth - 350)/2 + 'px');
    $('#registerform').css("right" , (document.body.offsetWidth - 350)/2 + 'px');
    $('#registerform').css("top" , '20px');
$("#registerform").fadeIn("slow");
}
function close_effect(id){
    var element = document.getElementById(id);
    element.innerHTML ='';
    element.style.visible = 'hidden';
    element.style.width = '1px';
    element.style.height = '1px';
}
function confirmpassform(id2){
    var id = id2.substr(0,id2.length-1);
    var screenwidth = document.body.offsetWidth+20;
    var screenheight = document.body.offsetHeight;  
    var blackdiv = document.getElementById('blackdiv');
    var value = document.getElementById("change"+id).value;
    if(value == ''){
        window.alert("No Value Set");
    }else{
    blackdiv.style.width = screenwidth + 'px';
    blackdiv.style.height = screenheight + 'px';
    blackdiv.style.position = 'fixed';
    blackdiv.style.left = '0px';
    blackdiv.style.right = '0px';
    blackdiv.style.top = '0px';
    blackdiv.style.bottom = '0px';
    blackdiv.innerHTML = "<div id='registerform' ><div id='close' onclick=\"close_effect('blackdiv')\">Close</div><div id='edituservalue'>Changing " +id+ " : "+value+"</div><br><form method='POST' action='change.php' name='registerform' ><div class='registerlabels'>Password:<br>Confrim:<br></div><div class='registerinputs'><input type='text' value='' name='password'><input type='password' value='' name='cpassword'><input type='submit' value='Submit Change'></div></form></div>";
    var formbox = document.getElementById('registerform');
    formbox.style.left = (document.body.offsetWidth - 350)/2 + 'px';
    formbox.style.right = (document.body.offsetWidth - 350)/2 + 'px';
    formbox.style.top = '20px';
    }
}

JustLikeIcarus · December 21, 2009

what if you dont include the effects.js file? does the test alert work then?

ldb358 · December 21, 2009

well i got it the jquery file was named wrong now i feel like an idiot thanks for the help

Sign In

jquery apply hover effect to all instances of a class

Recommended Posts

ldb358

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

ldb358

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

ldb358

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

ldb358

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

ldb358

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

ldb358

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information