How do we make a Text box float and remain floating

HTML & CSS
1

Hi,

We want to have a OnMouseOver effect where a Text box will float above the item and which Text box will remain floating until Mouse is out of the item which caused the float as well as the Text box floated, so that People can click in the hyperlinks in the floated Box. You can see what we are trying to do here:

https://www.anoox.com/ask_answer/qanda_test.php?q_id=135357

Look at the last answer that has gotten 3 Likes.
If you hold your Mouse over the Thumbs Up for this answer, you will see a Text box Window will Pop up, but it has 2 problems:
1- It is floating down from the like icon, it should float above it
2- The Text box Window does not stay floated when the Mouse is over the Text box Window, as it should.

So the Text box Window show go away when the Mouse is no longer over the like icon which caused the float as well as no longer over the Text box Window floated.

Thanks you for your suggestions how to fix this.

2

I think the easiest way to do this (no JS) would be to have that text box as a child element of the hover-item, not a sibling. This way the hover effect automatically also applies when hovering the text box. Just position it close enough so that there’s no gap between the two elements… something along these lines, roughly:

HTML

<span class="likes">
    Thumb
    <ul>
        <li><a href="foo">foo<a></li>
        <li><a href="bar">bar<a></li>
    </ul>
</span>

CSS

.likes {
    position: relative;
}

.likes ul {
    display: none;
    position: absolute;
    bottom: 0;
    background-color: white;
    border: 2px solid black;
    list-style: none;
}

.likes:hover ul {
    display: block;
}
1 Like
3

Hi,

I have gotten this working almost as we wanted to, with one little issue remaining.
That is when OnMouseOver the Text box that Pops up is covering the Like button (icon).
So how can we move the Pop Up Window up on the Z Axis by like 30 Px to be clear off the Like button?

You can see what I mean by going to URL posted in original message and holding your Mouse over the Like button of the 1st answer which has 3 Likes.

Thanks,
Dean

4

You do realise that won’t work for anybody using a touchscreen device or keyboard navigation, don’t you?

3 Likes
5

The z-index property specifies in which order the elements are “stacked”. So if the pop-up box has a higher z-index than the like button (which it already has) it will cover the button; if it has a lower z-index, the like button will cover the pop-up box. It doesn’t affect the position, though. What you probably want is setting margin-top: 30px.

That said, I’d not manipulate the DOM with JS where it’s not necessary (even less inline!). It just muddles your HTML, JS and CSS, and then you’ll end up with superfluous inline-styles like margin-bottom: -20px and visibilty: visible which serve no purpose whatsoever.

1 Like
6

m3g, so I added the
margin-top: 30px.
as you suggested to this DIV but it is having the opposite effect!
That is the Pop Up Window rather than moving to above the Mouse by like 10 Px, it is moving below it.
And even worse that is now breaking the remain float effect as you can see here
https://www.anoox.com/ask_answer/qanda_test.php?q_id=135357
(which is the test page)
vs here which is the live page that does not have the margin-top: 30px.
https://www.anoox.com/ask_answer/qanda.php?q_id=135357

Thanks

7

Well yes, sorry… but moving it up by 30px (as per your previous post) would have cleared the like-button even less!? :-P

You can set the like-button (to be more specific, the direct ancestor of the box) to position: relative and the box to bottom: 0 (as I suggested in my first reply), which will align the bottom of the box to the bottom of the like-button. You can then move it up by, say, 10px by setting margin-bottom: 10px.

To make sure that the box stays there when hovering it has to be a child element of the like-button, and it has to overlap it so that there’s no gap. You can experiment with the values yourself; but if you position it directly beneath the like-button you’re on the safe side regarding browser-specific paddings etc.

8 
    m3g4p0p, I am sorry, I have gone through your message a few time but cannot figure out what CSS code  you want are suggesting to add!

Can you write the exact CSS code that you are suggesting to add to this to fix these 2 issues?
If you want we can meet on Skype for this. My Skype nick is: deanxxx
xxx is for xteme sports :smile:

Thanks,
Dean

9

Hey,

Just wanted to know that I fully resolved this and all this development issue is done.
You can see a sample her:
https://www.anoox.com/ask_answer/qanda.php?q_id=135455
Hold your Mouse over the number of Likes issued for a given Answer and you will see.

Thanks again.

10

Ah I did want to reply to this and forgot.
So the Reply:
1- You do realise that that is one of the short comings of viewing something on a Mobile phone, that is you have NO OnMouseOver functionality, since of course NO Mouse is typically available for Mobile viewing

2- The functionality, that we offer in case of OnMouseOver are “icing on the cake” sort of things. So no good Site designor App should offer OnMouseOver based functions that are anything but “icing on the cake” sort of things, since many in todays World on Mobile or iPad type device are handicapped regarding OnMouseOver capability.

Cheers,

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.