1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

help please

Discussion in 'HTML & Website Design' started by Praveen198830, Apr 12, 2014.

0
  1. #1
    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>
     
    Praveen198830, Apr 12, 2014 IP
  2. tylerman169

    tylerman169 Member

    Messages:
    92
    Likes Received:
    0
    Best Answers:
    2
    Trophy Points:
    43
    #2
    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.
     
    tylerman169, Apr 12, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    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.
     
    deathshadow, Apr 12, 2014 IP
    kenzo22 likes this.
  4. Praveen198830

    Praveen198830 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Thanks a lot.. :)
     
    Praveen198830, Apr 12, 2014 IP
  5. Praveen198830

    Praveen198830 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    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/

     
    Praveen198830, Apr 12, 2014 IP
  6. ez-designs

    ez-designs Well-Known Member

    Messages:
    230
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    105
    #6
    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).
     
    ez-designs, Apr 14, 2014 IP