ldb358 Posted December 21, 2009 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
trq Posted December 21, 2009 Share Posted December 21, 2009 $(".video img").hover(function(){ alert($(this).attr('alt')); },function(){ }); Quote Link to comment Share on other sites More sharing options...
ldb358 Posted December 21, 2009 Author Share Posted 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 Quote Link to comment Share on other sites More sharing options...
JustLikeIcarus Posted December 21, 2009 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
ldb358 Posted December 21, 2009 Author Share Posted December 21, 2009 correct Quote Link to comment Share on other sites More sharing options...
JustLikeIcarus Posted December 21, 2009 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
ldb358 Posted December 21, 2009 Author Share Posted December 21, 2009 im getting an error $ is not defined but i dont get why it is executed after jquery is loaded Quote Link to comment Share on other sites More sharing options...
JustLikeIcarus Posted December 21, 2009 Share Posted 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? Quote Link to comment Share on other sites More sharing options...
ldb358 Posted December 21, 2009 Author Share Posted 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'; } } Quote Link to comment Share on other sites More sharing options...
JustLikeIcarus Posted December 21, 2009 Share Posted December 21, 2009 what if you dont include the effects.js file? does the test alert work then? Quote Link to comment Share on other sites More sharing options...
ldb358 Posted December 21, 2009 Author Share Posted December 21, 2009 well i got it the jquery file was named wrong now i feel like an idiot thanks for the help Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.