Forums

Unfortunately no one can be told what FluxBB is - you have to see it for yourself.

You are not logged in.

#1 2009-12-24 19:12:19

keek
Member
Registered: 2009-12-24
Posts: 14

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. 
yepy.jpg

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)

Offline

#2 2009-12-27 17:44:03

keek
Member
Registered: 2009-12-24
Posts: 14

Re: Viewtopic.php Hover Question

Here are a few more examples:


Hovering over the first post.
topbottom.jpg


Hovering over the second post.
topbottom2.jpg



Thanks.

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

Offline

#3 2009-12-27 17:52:45

MattF
Member
From: South Yorkshire, England
Registered: 2008-05-06
Posts: 1,233
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!

Offline

#4 2009-12-27 18:27:11

keek
Member
Registered: 2009-12-24
Posts: 14

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)

Offline

#5 2009-12-27 19:40:19

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)

Offline

#6 2009-12-27 20:21:55

Paul
Developer
From: Wales, UK
Registered: 2008-04-27
Posts: 1,653

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.

Offline

#7 2009-12-28 16:45:08

keek
Member
Registered: 2009-12-24
Posts: 14

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.

Offline

#8 2013-03-20 09:27:15

greetings
New member
Registered: 2013-03-20
Posts: 1

Re: Viewtopic.php Hover Question

1) Such questions should be asked on phpbb.com
2) You need to enable PHP in templates in Security section of Admin Panel.
3) Make sure you refresh the template from Admin Panel and clear your browser cache after you've modified the code

Offline

Board footer

Powered by FluxBB