Forums

keek

Member

Registered: 2009-12-24

Posts: 13

Viewtopic.php Hover Question

Hello everyone,

In each post there's "report", "delete", "edit" and "quote", which are in the "postfootright DIV" of a post. 

I am wanting to keep the postfootright DIV hidden in all posts, and then show when someone hovers over a single posts "box DIV". So it will only show the postfootright DIV of the post someone hovers over.  Can anyone help me with this?  Any help would be greatly appreciated. 

I'm using Fluxbb v.1.2.22.

Last edited by keek (2009-12-24 19:15:45)

keek

Member

Registered: 2009-12-24

Posts: 13

Re: Viewtopic.php Hover Question

Here are a few more examples:

Hovering over the first post.

Hovering over the second post.

Thanks.

Last edited by keek (2009-12-27 17:51:43)

MattF

Member

From: South Yorkshire, England

Registered: 2008-05-06

Posts: 1,230

Website

Re: Viewtopic.php Hover Question

I'd guess by using javascript. Something similar to the following to display the respective div on mouseover. Hide the div via JS too so that it's still visible for people who do not have JS enabled.

http://www.w3schools.com/js/js_animation.asp

Last edited by MattF (2009-12-27 17:53:04)

---

Screw the chavs and God save the Queen!

keek

Member

Registered: 2009-12-24

Posts: 13

Re: Viewtopic.php Hover Question

Thanks for the reply Matt.  I believe Javascript is the only way to go, because from my experiences, CSS hovers can only affect the element being hovered over(so you can't target another element on the page).

If you take a look, this is sort of what I'm looking for (minus the 250 millisecond delay):
http://scott.sauyet.com/Javascript/Demo/2008-14-28a/.

 
  var hide = false;
     $(".rss-link, #rss-subscribe").hover(function(){
         if (hide) clearTimeout(hide);
         $("#rss-subscribe").fadeIn();
     }, function() {
         hide = setTimeout(function() {
             $("#rss-subscribe").fadeOut("slow");
         }, 250);
     });

Which was posted by Scott Sauyet here.

I'll try to fiddle around with it, if anyone knows an easier way to do this feel free to reply!

Last edited by keek (2009-12-27 18:50:01)

Gizzmo

Member

From: Earth, Milkyway Galaxy

Registered: 2008-04-30

Posts: 301

Website

Re: Viewtopic.php Hover Question

Took me a lil bit, but i came up with this.

$(document).ready(function(){
    $('#punviewtopic .blockpost').hover(function(){
        $(this).find('.postfootright').css('visibility','visible');
    },function(){
        $(this).find('.postfootright').css('visibility','hidden');
    })
})

---

~Gizzmo - My Mods: Usermap (Github) - Default Avatar (Github)

Paul

Developer

From: Wales, UK

Registered: 2008-04-27

Posts: 1,623

Re: Viewtopic.php Hover Question

It is possible with css, for example

.pun .blockpost .postfootright {visibility: hidden}
.pun .blockpost:hover .postfootright {visibility: visible}

The trick is to remember that hover can target nested elements. For an example see Eric Meyers pure css popups http://meyerweb.com/eric/css/edge/popups/demo.html

Trouble is IE6 can't hack it because it only recognises hover on links.

---

The only thing worse than finding a bug is knowing I created it in the first place.

keek

Member

Registered: 2009-12-24

Posts: 13

Re: Viewtopic.php Hover Question

Thanks Gizzmo, that'll save me time!

And thanks as well Paul- that works perfectly.  I was unaware you could do that.  If only IE could recognize it.