please check this website and tell me what did i do wrong with my code..its not working http://jsfiddle.net/KumcX/ i am trying to get exactly what this above website has <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script type="text/javascript"> $('ul li').mouseenter(function(){ var image= $(this).find('img'), caption = $(this).find('div'); caption.width(image.width()); caption.height(image.height()); caption.fadeIn(); }).mouseleave(function(){ var image= $(this).find('img'), caption = $(this).find('div'); caption.width(image.width()); caption.height(image.height()); caption.fadeOut(); }); </script> <style> ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;} ul li div{display:none; background:white; opacity:.5; position:absolute;} </style> </head> <body> <ul> <li> <div class="caption">this is my caption</div> <img src='http://d13yacurqjgara.cloudfront.net/users/22122/screenshots/244072/empirestate02_d_teaser.png'/> </li> <li> <div class="caption">this is my caption</div> <img src='http://d13yacurqjgara.cloudfront.net/users/22122/screenshots/244072/empirestate02_d_teaser.png'/> </li> <li> <div class="caption">this is my caption</div> <img src='http://d13yacurqjgara.cloudfront.net/users/22122/screenshots/244072/empirestate02_d_teaser.png'/> </li> <li> <div class="caption"><span>this is my caption</span></div> <img src='http://d13yacurqjgara.cloudfront.net/users/22122/screenshots/244072/empirestate02_d_teaser.png'/> </li> </ul> </body> </html>
The reason your code is not working is because the jfiddle has the use normalized css option checked so you would also have to include this stylesheet to get your code to work: http://jsfiddle.net/css/normalize.css You can do that by including this line in your code: <link rel="stylesheet" type="text/css" href="http://jsfiddle.net/css/normalize.css" /> Or you can create a localized css file with the same contents as http://jsfiddle.net/css/normalize.css and include that stylesheet in your html file.
I have a question: Why are you wasting time using javascript to do CSS' job? STUNNING example of jQuery for nothing -- and if these are going to have a hover effect for some reason, might they also be anchors so they can take the user someplace? (just saying). You also seem to have classes for nothing, and even in testing you REALLY should have that required ALT attribute on those images. I just tossed together this quick demo for you of "no scripting needed": http://www.cutcodedown.com/for_others/Praveen198830/ The changes to the markup for each item: <li> <a href="#"> <span>this is my caption</span> <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367' alt="DESCRIBE THIS!!!" /> </a> </li> Code (markup): Opens the door to having those actually go somewhere (which I'd assume is the point, otherwise why have a hover effect) and makes them keyboard navigable. Since an anchor is inline-level that DIV had to be downgraded to a span. The real magic is in the CSS: .captionedImages span { position:absolute; top:0; left:0; width:100%; height:100%; background:#FFF; opacity:0; filter:alpha(opacity=0); /* IE 8 and lower */ -webkit-transition:opacity 0.5s; -moz-transition:opacity 0.5s; transition:opacity 0.5s; } .captionedImages a:active span, .captionedImages a:focus span, .captionedImages a:hover span { opacity:0.5; filter:alpha(opacity=50); /* IE 8 and lower */ } Code (markup): Focus is for keyboard navigation, active is for legacy IE flavors that ignore focus and treat active as such. The opacity transition is handled entirely in the CSS as is the sizing of the span to the image; since it's absolute positioned the anchor sizes to the image -- since the anchor is position:relative 100% height and width become the anchor's 100%. CSS3 handles the fade-in / fade-out animation. Admittedly IE9/earlier doesn't know transitions, but they still get the opacity effect. OH noes, legacy browsers on the way out the door don't get some goofy animation -- not that. -- I'd gladly make that trade to stop using javascript for a presentational effect and to swing a giant axe at all the jQuery BS. Especially since it adds keyboard navigation, uses less battery power on mobile, and usually animates way smoother than anything a timeout driven scripted animation ever could achieve.
hi thank you..now i get that how it works..next thing i wanted to do was like this website when u scroll down new images keeps appearing..can you please help me? http://www.outdoortechnology.com/
Hey, what you're looking for is called "lazy-loading images". I personally use this jQuery plugin: http://luis-almeida.github.io/unveil/ It's really easy to implement. Include jquery and the plugin you downloaded on your page: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.unveil.js"></script> <script> $(document).ready(function() { $("img").unveil(); }); </script> Then you just add data-src="img1.jpg" inside your <img> tags and replace the regular src with some placeholder loading icon (eg. http://luis-almeida.github.io/unveil/img/loader.gif).