I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>
Related
new to webdev so bear with me. I am developing a prototype of a Messaging Application, I have most of the basics worked out and I'm trying to add the little touches to make it feel nicer to use. I'm trying to make it so that when an individual message is hovered over, the time that message was sent will slide out from the message.
Here is my code at the moment: http://codepen.io/RBrNx/pen/GNzOWr
(Note: Click on "Toni" again and his message will appear, small bug. You can also send messages from the text box).
Now here are some images showing what I mean:
http://imgur.com/a/elB04
Ideally I think the 2nd one would look better.
I tried to implement it by adding a span inside the bubble like so:
<div class="bubble you">Test Message<span class="hover-time">13.45</span></div>
.hover-time{
position: relative;
left: 60px;
}
But that made the inside of the bubble stretch to account for the Span.
How can this be done?
EDIT: Thanks to Antidecaf I managed to get the left side working and figured out the right hand side as well. Here is the CSS I added:
.container .right .bubble.you .hover-time {
display: none;
position: absolute;
left: 110%;
color: #999;
width: 100px;
}
.container .right .bubble.me .hover-time {
display: none;
position: absolute;
right: 90%;
color: #999;
width: 100px;
}
These deal with the left hand messages (from the person you are messaging) and the right hand messages (from me). I also added:
.container .right .bubble.you:hover .hover-time{
display: inline-block;
}
.container .right .bubble.me:hover .hover-time{
display: inline-block;
}
So that the hover-time span is shown on hover.
You can do this with the markup you suggested by positioning .hover-time relative to .bubble. To do this, add position: relative to .bubble and position: absolute to .hover-time. Here's some more info on the technique.
<div class="bubble you"><span class="hover-time">13.45</span>Test Message</div>
CSS for positioning timestamp to the right:
.bubble {
position: relative;
}
.hover-time {
position: absolute;
left: 110%;
color: #999;
}
Same approach goes for positioning it to the left, but in this case you'll need to add a bit of margin to the bubble in order to free up space for the timestamp:
.bubble {
position: relative;
margin-left: 50px;
}
.hover-time {
position: absolute;
left: -50px;
color: #999;
}
<style>
.hover-time {
position: relative;
left: 60px;
display: none;
}
.bubble:hover .hover-time {
background-color: #ccc;
color: #000;
display: inline-block;
}
</style>
<div class="bubble you">Test Message <span class="hover-time">13.45</span></div>
Works for me. You'll probably want to spice it up a little with some transform or other fancy anim stuff.
EDIT: Perhaps you meant like so:
<style>
.bubble {
border: 1px solid #ccc;
width: 300px;
}
.hover-time {
float: right;
display: none;
}
.bubble:hover .hover-time {
background-color: #ccc;
color: #000;
display: inline-block;
}
</style>
<div class="bubble you">Test Message <span class="hover-time">13.45</span></div>
Border and width just to have a visual guide.
Maybe I'm misunderstanding, but are you styling the DIV as the speech bubble, then taking the span inside the div and telling it 'but not you buddy, you are special'?
If so, isn't it cleaner and less headaches to put your text message in a span also, styling the span as text bubble, and keeping the div as an invisible structural element?
I'm not super comfortable with JS , but that seems to be the best way to do this , having a hard time applying other peoples solutions to my scenario.
Want an image to appear when hover over text.
I can get the image to appear on hover, but it appears up way up at top of page, and I am having a hard time getting it to appear in the viewport without indicating what the top margins is. Is that the best way to do it?
So far I have:
<div id="popup">
<div class="large-6 columns">
Bristol Hayward-Hughes <span> <img src="bristol.jpg" alt="Bristol" id="bristol"> </span>
</div>
</div>
and
#popup span {
display: none;
}
#popup a:hover span {
display: block;
position: absolute;
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
#bristol {
position: absolute;
z-index: 1;
margin-top: 100px;
}
If I'm understanding the question correctly, you'll need to place position:relative; in the parent Div: #popup that the image is residing in.
Check this Fiddle for reference: https://jsfiddle.net/rjschie/q87um7wd/2/
For an example: comment the position:relative; line under #popup and re-run the example. You'll see that the Image appears at the top of the window. Then uncomment it, and re-run and it will appear relative to the #popup div.
Please give relative positioning to your span that holds your image.
#popup a:hover span {
display: block;
position: relative; // Changed absolute to relative
//Give top and left position with respect to your anchor tag.
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
Remove the margin-top from the image tag as well.
#bristol {
position: absolute;
z-index: 1;
/*margin-top: 100px;*/ //Removed margin-top on the image
}
I can't seem to get the black box to the center of the screen as opposed to the center of the div its inside in.
EDIT: For clarification, I only want the black box in the center of the results panel not the pink box with it. Also I would also like to keep my javascript intact.
EDIT 2: I'm trying to have something like an overlay that popsup in the middle of the screen when a user clicks on the image. Not sure if this is the best way or the best code to achieve that!
Would appreciate if anyone can help.
Here's my attempt: http://jsfiddle.net/BPLcv/1/
HTML
<div class="tooltip">
<div class="description">Here is the big fat description box</div>
</div>
<div class="tooltip">
<div class="description">Poop</div>
</div>
CSS
.tooltip {
position: relative;
border: 1px #333 solid;
width: 200px;
height: 200px;
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkI2PXYOOOHltHwgIz6xwfuN079IAJDLsmOV68rQNNLCE-GFZ1_aQN89U');
}
.overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.description {
position: absolute;
width: 300px;
height: 300px;
display: none;
background-color: black;
text-align: center;
z-index: 1;
/* centering???? */
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -75px;
}
Thank you!
If you want the description/overlay in the middle of the screen, your best bet is to use an element outside of your tooltip-elements, as these are fixed width.
If you have a top-element with width: 100%, your centering css wil work for any immidiate children.
Working fiddle: http://jsfiddle.net/BPLcv/4/
Here the overlay is filled with whatever is in the description element of the tooltip you're hovering:
overlay.html($(this).find(".description").html());
The description class is always hidden.
Check this Demo jsFiddle
CSS
body{
margin:auto;
width:50%;
}
Try this. Assign the div of interest id = CenterDiv, then add this css:
z-index:10;//remove left:50%
Now try adding this function via onload or onclick, etc:
function centerDiv() {
document.getElementById("CenterDiv").style.marginLeft = ((screen.availWidth - 300)
/ 2) + 'px';
}
The number 300 can be any number that represents the width of your element of interest.
Substituting the width of your element (here, 300px), this function will center an element with absolute position.
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you
Hi I'm trying to leave the image alone and center the name "Tim Heidecker" in this div..
http://jsfiddle.net/4huq3/
Thanks for the help.
Updated your fiddle.
http://jsfiddle.net/thomas_peklak/4huq3/24/
#left {
width: 228px;
height: 60px;
border: 1px solid #000;
}
#left a{line-height:60px}
.icon {
vertical-align:middle
}
try adding vertical-align:middle; to your .icon rule
What I did was add an id to the tag with the name link, then position it. See this forked jsfiddle:
http://jsfiddle.net/98RhD/10/
You could use absolute positioning like this:
HTML:
<div id="left"><a href="..." class="icon"><span>Time Heidecker</span></div>
CSS:
#left { position: relative; width: 228px; height: 60px; border: 1px solid #000; }
#left span { position: absolute; top: 15px; left: 70px; }
You'll have to fiddle with the numbers to get exactly your final center position according to the size of the text and final box and / or if you want vertical centering (CSS Top) or horizontal centering (CSS Left).
I hope this helps!