I have a div (headline) and another div (button) that appears when you hover over the headline. When you leave the headline, the button should disappear.
In my current code the button disappears when you move your cursor to it. Do you have any ideas how to keep the button displayed when you hover over headline or button, so that the button is clickable?
Thanks.
fiddle: http://jsfiddle.net/L6jtotog/
CSS:
.headline {
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding: 5px;
width: 70%;
position: relative;
}
#button{
display: none;
position: absolute;
top: 5px;
right: 100%;
margin-right: 10px;
}
HTML:
<div>
<div class="headline" onmouseover="func(true)" onmouseout="func(false)">Headline 1 <div id="button">Test</div></div>
JS:
function func(showPanel) {
if(showPanel) {
$("#button").show();
}
else {
$("#button").hide();
}
}
Instead of using something like that, you can do everything with CSS alone!
.headline {
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding: 5px;
width: 70%;
position: relative;
}
#button{
display: none;
position: absolute;
top: 5px;
left: -50px;
margin-right: 10px;
padding-right: 50px;
}
.headline:hover #button {
display: block;
}
<div>
<div class="headline">
Headline 1
<div id="button">Test</div>
</div>
</div>
And in your case, when you need to go to Test, it calls the mouseout which cancels the hover. So I gave an extra padding. Now you can go over the text.
When you set the position attribute of #button to absolute, position:absolute;
it makes the browser think that #button is outside of the div .headline
That is why when the mouse cursor reaches over #button, the browser actually thinks it is outside the .headline and thus, invokes the onmouseout function.
This is why you are getting this problem.
You might want to remove position:absolute from #button and use position:relative.
Related
.bot {
background-color: sky-blue;
position: absolute;
line-height: 22px;
width: 78px;
margin-top: 25px;
margin-right: 35px;
top: 0px;
right: 0px;
}
How do I position my clickable button to remain at the top-right inside a <fieldset>? With this my code, the button hangs outside the <fieldset>.
Try making fieldset as position relative like this below
fieldset {
position:relative;
}
I didn't find the right answer to my question.
using Angular, I'm displaying file names in a scrollable div. I need to hover over a file name and see some info in a pop up.
The problem is that pop up shows based on where file name was positioned before user started scrolling. I.e. if I scroll all the way down and hover over a filename, pop up will be displayed somewhere on the bottom of the page.
Another detail is that right after a scrollable div I have a non-scrollable div. I think because of that I can't use position absolute because pop up won't be rendered on top of the second component.
<div style="display:table;" class="upload-item" *ngFor="let f of files; let i = index;">
<span class="filenameblock">
<span class="file-name">{{ f.name}</span>
<span class="tooltiptext">{{f.info}}</span>
</span>
<span style="width:30%;" class="progress">
<span class="bar" [style.width]="f?.progress?.data?.percentage + '%'"></span>
</span>
</div>
<div>Non scrollable div here</div>
css:
.upload-items .upload-item {
width: 100%;
display: block;
margin-bottom: 5px;
height: 5vh;
line-height: 4.9vh;
border: 2px solid #CBCBCB;
border-radius: 3px;
position: relative;
}
.filenameblock {
display: inline-block;
position: relative;
padding: 0 0 5px 5px;
color: #74809D;
margin-left: 5px;
max-width: 300px;
}
.tooltiptext {
visibility: hidden;
width: auto;
padding: 0 15px 0 15px;
background-color: #E7F5FC;
color: #6A6A6A;
text-align: center;
border-radius: 6px;
left: 10vw;
margin-top: 3vw;
position: fixed;
/*z-index: 1000;*/
}
.file-name:hover + .tooltiptext {
visibility: visible;
}
I tried to add 'top' to pop up styling but in this case pop up displayed on the same height all the time.
I have a header with fixed position and inside header I have navigation links but when I zoom into browser links are thrown out of window to right. How can I make the navigation links fixed to 50px right no matter I zoom in or out.
jsfiddle here I don't want to change properties of header.
.header {
width: 100%;
min-width: 500px;
position: fixed;
background: red;
height: 60px;
}
.navlinks {
float: right;
margin-right: 50px;
width: 30px;
margin-top: 4px;
height: 20px;
background: black;
}
<div class="header">hello
<div class='navlinks'></div>
</div>
You've already set the fixed position header to width:100% so the min-width:500px is unnecessary.
Remove that and the issue is solved.
.header {
width: 100%;
position: fixed;
background: red;
height: 60px;
}
.navlinks {
float: right;
margin-right: 50px;
width: 30px;
margin-top: 4px;
height: 20px;
background: black;
}
<div class="header">hello
<div class='navlinks'></div>
</div>
JSfiddle Demo
I am making something and am wondering how to get a div to overlay another div and it's contents. What I am trying to do it kinda like youtube, when you are on a video and you hover over someone's avatar it will show a small box with their channel art and things. Here is a photo of what i'm currently getting screenshot. Here are my codes for the two divs:
circular div
#staff-info {
width: 400px;
height: 300px;
background: #999;
border: 1px solid #333;
border-radius: 6px;
margin: 0 auto;
position: relative;
}
staff boxes
#staff {
width: 256px;
height: 60px;
margin: 7px 4px 7px 4px;
background: #fff;
display: inline-block;
background: #f3f6f9;
}
.staff-avatar {
width: 40px;
height: 40px;
padding: 10px;
display: inline-block;
float: left;
}
.staff-name {
display: inline-block;
padding-top: 8px;
}
.staff-job {
padding-top: -100px;
font-size: 12px;
}
Grey area (main div)
#youtuber-about {
width: 890px;
height: auto;
background: #d5d3d3;
margin-left: auto;
margin-right: auto;
font-size: 16px;
padding: 10px 0px 10px 10px;
display: inline-block;
}
html for the divs
<div id="staff-info">yolo</div>
<div id="youtuber-about" style="color: #333;">Our Staff<br>
<?php
foreach ($staff as $staff) {
echo '
<div id="staff"><img src="'.$staff['avatar'].'" class="staff-avatar"><div class="staff-name">'.$staff['name'].'</div><div class="staff-job">'.$staff['job'].'</div></div>';
}
?>
</div>
If you are using jQuery, you can just append the info div inside of each staff member div whenever the users moves their mouse over that staff member.
$('#youtuber-about > div').mouseover(function(){
$(this).append($('#info'));
});
And then you can style that with CSS quite easily, just setting the info div to be position: absolute; and set to fill the containing element, set to show on hover.
See Demo
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
What I would do is have a div that holds both of these two divs and play with your CSS and the nesting of the divs to overlay them properly.
Absolute and Relative positioning is pretty tricky as first but once you get a hang of it you'll be doing it left and right
So remember
Add both divs to a third empty div and then put the one you want overlaying below the other.
To move use
.something {
position: absolute
top:20%
right:15%
left:10%
bottom:20%
}
I'm using JQuery UI so that I can slide down a div using the blind function, however, it's not working properly.
Here's the JSFiddle I started: http://jsfiddle.net/CBe3w/192/
For some reason, the sides don't register until the sliding animation is done, at which point they pop out. How can I make it so that the sides are registered from start to finish (they should always be the width of the box class)?
HTML:
<div class="box">
Click Me!
<div class="footer">
Why does it do this?
</div>
</div>
CSS:
.box {
background: #f5f5f5;
width: 250px;
padding: 25px;
}
.footer {
background: red;
padding: 15px 25px;
margin-top: 25px;
margin-left: -25px;
margin-right: -25px;
display: none;
}
JS:
$('.box').click(function() {
$('.footer').toggle("blind");
});
I think the issue is with the order in which jQuery changes the attributes of the element when it toggles it, and the fact that you have negative margins set on the footer.
You could potentially take off the left and right padding of .box, and then put your .box content in a separate div inside, which has margins. Kind of a "hacky" way to do it potentially, though.
Here's a potential solution
The jQuery stays the same, only the CSS/HTML have changed.
See the jsfiddle
HTML
<div class="box">
<div class="content">Click Me!</div>
<div class="footer">
The sides don't pop out anymore!
</div>
</div>
CSS
.box {
background: #f5f5f5;
width: 250px;
/* took off the left and right padding */
padding: 25px 0;
}
.content {
/* "simulates" the padding of .box that you had before */
margin: 0 25px;
}
.footer {
background: red;
padding: 15px 25px;
/* took off the negative margins */
margin-top: 25px;
display: none;
}
You don't need jQuery UI at all: LIVE DEMO
$('.box').click(function() {
$('.footer').slideToggle();
});
<div class="box">
<h3>Click Me!</h3>
<div class="footer">
See how the sides popped Greatly?
</div>
</div>
.box {
background: #f5f5f5;
width: 300px;
padding-bottom: 15px;
}
.box h3{
padding:25px 25px 10px;
}
.footer {
background: red;
padding: 15px 25px;
display: none;
}
The explanation : Jquery UI blind effect will set margin:0 while it's animating on the height of your element.
You will have to redesign your html to split your .box in order to remove it's padding, otherwise, patch jquery-ui javascript to remove that 'margin:0' from the effect er,
you'll be able to fix this issue by positionning your inner container 'relative', so no html remake involved.
.footer {
background: none repeat scroll 0 0 #FF0000;
display: none;
left: -20px;
margin-top: 25px;
padding: 15px 25px;
position: relative;
right: 0;
width: 100%;
}
jsFiddled here