This is a continuation of my last question which got buried in the forums somewhere.
So, I have this website: WEBSITE LINK. If you scroll down to Some Nuts, Some Bolts, you’ll see a dynamically scaling 4 icon placeholders that show text when you hover over them. Pretty sweet. However, my problem is that if you’re viewing on an iPhone, (or if you simply make the browser window REALLY small,) the text won’t fit into the container.
How can I automatically make the container bigger (taller) to fit all the text without making the text microscopic?
There is no way for the text box to influence the height of its ancestoral container as the web page narrows because the text box is absolutely positioned. Absolutely positioned elements are removed from the flow of the page and do not influence their surroundings.
Plus a grandparent container has overflow:hidden so the overflowing / cut off text isn’t obvious unless one is reading it and realizes that it should continue… but doesn’t. You should remember that overflow:hidden fundamentally chops off text that overflows the container. Conveniently, it contains margins and clears floats.
You need to get rid of the absolute:positioning on the text box so it remains in the flow of the page and can push the content that follows down the page as needed to accommodate the text.
Does this help or do you want someone to do it for you?
Aside: are those circles supposed to represent nuts, bolts, screws, and rivets? or what?
As Ron said the main cuplrit is the overflow:hidden which stops you seeing the text. You don’t want to make the text any smaller but what you could do is make sure that it is visible when it overlays.
I assume you want it to overlay the nuts and bolts so you should still stick with absolute positioning for the rollover but allow it to go above and below the nuts and bolts when it slides in. It might be a good idea t give it a subtle shadow so that depth is perceived so people know it is on top.
Hm. Close, it does expand now and stuff, but I want to keep the box covering all the symbols when the screen isn’t an iPhone or is large enough that the text will fit as is. With your code, if the screen is a normal laptop, the box floats above the bottom of the bottom two symbols. Is there a way maybe to check if they’re using an iphone and then only run the code up there if it is or something?
By using PaulOB’s code, I got it to show over all of them by adding
min-height:100%
as a property of .rollover
After that, however, if you slowly move your mouse on the left side of the overlay, it’ll totally glitch out, showing different screens at a rapid pace.
You would need some javascript to do this properly and detect touchstart and touchend rather than click so that the effect is only supplied while the finger is on the element to get much the same effect as hovering.
I put up an old demo here and you can copy the code form view source as its pretty straight forward.
If you use click then you can do much the same thing and add a class when clicked which triggers the rollover and then remove the class on a second click.Of course that may confuse users a little as they may not realise they have to click again on mobile.
This is great. I think I’m going to change this to clicks instead however, because of the annoying magnifying glass that pops up when you hold a finger down in iOS. Unless there’s any way to change that? (Or if you have any other ideas, I’d love to hear them)
If you use the click method then just add a class to the element on click and use that class as would the :hover rule. (I usually name the class .hover so you know what it does.)
The click method does leave the element visible and easier to read than having your finger over the top but you may want to add ‘click to close’ for smaller devices (use a media query to only show the message to smaller devices)/