0

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!

Hugo Dozois
  • 8,147
  • 12
  • 54
  • 58
Rasmus H
  • 1
  • 1
  • Not the answer, but make sure you escape the `""` in your append code – dsgriffin May 18 '13 at 17:37
  • Your question is too vague for me – Timidfriendly May 18 '13 at 17:45
  • I want a div box to appear when you mouseover the parent element. Inside this div a short text fetched from a database should appear. The box should slideUp() from the bottom of the
    f_post_long. Is the question clearer now? I wrote it in a hurry, sorry! And of course, the box should disappear when mouseleave(). Thanks!
     – Rasmus H May 18 '13 at 17:55

3 Answers3

2

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/

Rowland Rose
  • 69
  • 4
  • 1
    Thank you, that's basically what I was looking for. Will be building further on this code. Although I'm quite unsure what the difference between append() and html() is! Does html() add content to be visible and append just adds the class or ID to be modified later? – Rasmus H May 18 '13 at 18:12
  • 1
    @RasmusH `.html()` **'replaces'** the current contents with the one that is specified within. `.append()` **adds** the code as a last child. So content that was already there will not be removed. – Bram Vanroy May 18 '13 at 18:21
  • Oh, thanks! Although there won't be any other information in this f_post_long than an image, but you recommend using .html for this anyways? – Rasmus H May 18 '13 at 18:28
0

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

Community
  • 1
  • 1
elyase
  • 39,479
  • 12
  • 112
  • 119
  • Well, I would like to keep the box that shows on hover with jQuery just because it contains so much functionality that i need like slideUp() and fadeOut. – Rasmus H May 18 '13 at 18:09
  • May be you can also get this with css, see for example: http://css-tricks.com/different-transitions-for-hover-on-hover-off/ – elyase May 18 '13 at 18:11
0

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/

Karl-André Gagnon
  • 33,662
  • 5
  • 50
  • 75
  • Thanks, I will check this out as well! Feels like anything is possible with CSS and HTML these days :) – Rasmus H May 18 '13 at 18:15
  • Edited my answer since i didnt see your comment about slide up and down. – Karl-André Gagnon May 18 '13 at 18:27
  • Can I ask you why you use stop() and how the "," is used within jQuery? Thank you so much! – Rasmus H May 18 '13 at 18:55
  • Sure, `.stop()` is the function that will clear the queue, without it the animation will finish before starting antoher one. The best way to see what it does is to test without it and move the mouse fast hover and out the div. – Karl-André Gagnon May 18 '13 at 19:31
  • As for the ",", it's just the way we splice the argument in a function. You probly saw once a function like `doSomething('astring', true)`, well that mean the function `doSomething` will reveive 2 arguments. `.hover()` accept 2 argument. The first one is the function on hover, then after the function you use the comma the insert another argument. The second argument is the function when the mouse leave the div. See [jQuery hover](http://api.jquery.com/hover/) for more information. – Karl-André Gagnon May 18 '13 at 19:35
  • Ah, I see! Thank you so much, I'll modify this code so it fits my needs. Perfect! – Rasmus H May 18 '13 at 19:54