CODEWITHSUNDEEP
jqueryhtmlcss
Rasmus H
Rasmus H

Reputation: 1

jQuery "thumbnail" function

I'm trying to develop some "featured posts" thingys. And I would like them to change when you mouseover() them. I guess this will be done with jQuery, I tried to get started but I'm quite sucky with it so I thought I'd ask here.

I've come up with this jQuery code:

$(document).ready(function)
{
    $("#f_post_long").mouseover(function)
    {
        $("#f_post_long").append("<div class="hello">hello</div>");
    });
});

I thought .appending a new div class with the same class I've got styled in my CSS was needed(?) not sure there though.

CSS looks like this:

#f_post_long
{
    width:500px;
    height:500px;
    background-color:red;
    text-align:center;
}

.hello
{
    background-color:blue;
    width:200px;
    height:200px;    
}

HTML just contains the element #f_post_long.

Am I on the right track or am I completely screwed here? I don't want the perfect solution just some pointers in the right directions on what would be easiest against the server and in amount of code written!

Upvotes: 0

Views: 136

Answers (3)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

If I understand what you want, you dont need jQuery, you can use pure CSS.

First take a look at that fiddle : http://jsfiddle.net/ENWQm/

You just need to hide the .hello with display:none then add this :

.f_post_long:hover .hello{
    display : block    
}

Thumbnail will display on hover.

EDIT : If you want to use .slideUp and .slideDown, here's a fiddle with jQuery : http://jsfiddle.net/ENWQm/1/.

What you need to know, the parent container must be in position relative.

The children container in position absolute with a bottom 0.

Use .hover(fn1, fn2). fn1 is on mouseover and fn2 is mouseout.

I used append but it is not a good solution since it does multiple call (wich is bad). If you load the thumbnail on page load, code will look like that : 

$('.f_post_long').hover(function(){
    $(this).('.hello').stop().slideDown();
},
function(){ 
    $(this).children('.hello').stop().slideUp();
})

Note that it is alway possible to use CSS3 animation, but the browser does not fully support yet.

but in case you want to try, explore the CSS here : http://jsfiddle.net/ENWQm/2/

Upvotes: 0

Rowland Rose
Rowland Rose

Reputation: 69

Like Zenith said, you must escape the "" in your code, or use single quotes inside double quotes.

The parenthesis after function should be () not just ).

I also used $(this) keyword instead of directly referencing the same element for clarity.

Finally, if you want your featured posts to "change" as you said, instead of just get added to, you need to use the .html() function, not append().

Fixed code:

$(document).ready(function() {
    $("#f_post_long").mouseover(function() {
        $(this).html("<div class='hello'>Some different content.</div>");
    });
});

JSFiddle: http://jsfiddle.net/rowlandrose/eMTJq/2/

Upvotes: 2

elyase
elyase

Reputation: 40963

If the amount of content to show is not long, you can consider rendering the div from the beginning(but hidden) and then set it to visible on hover. This uses only css(no js needed). See for example here:

https://stackoverflow.com/a/5210074/1330293

Upvotes: 0

Related Questions