Hi all. I'd like to be able to highlight a div inside a container DIV that has overflow:hidden set (changing this is not an option). I'm using the CSS 'outline' and 'box-shadow' properties to do this. The issue is that when the DIV is the full size of the outer div, you can't see that it's selected as the outline is (unsurprisingly) clipped to the outer div. Also, if the inner div is against one of the edges the issue occurs.
The attached images shows the layout of the divs, red is the outer div, purple the 'outline' and black the DIV I want to highlight - in that example the purple highlight to the left is clipped.
So the question is, is there a way (JavaScript & jQuery are fine) of overlaying the black div with another div such that (a) the overlay div isn't clipped to the outer div, and (b) when the black div moves or is resized, the overlay moves/resizes with it?
EDIT: It looks like this simply isn't possible in HTML/CSS in the way I described.
Set theblack div to "positon:relative". Then put the outline into that div, and set it with "position:absolute". With top,left,with and height you can put it "around" the black div.
Edit:
Sry, the black div has to be position absolute, too. Working example see here:
http://jsfiddle.net/t94FV/
Maybe you can use margins with percentages.
The trick is in only parent cover div with relative position. No position:relative children of overflow:hidden div. Only parent!
<div class="trick-container" style="position:relative">
<div class="overflow-hidden" style="overflow:hidden">
<div class="no-relative-position-1">
<div class="no-relative-position-2">
<div class="no-relative-position-N">
<div class="position-absolute" style="position:absolute"></div>
</div>
</div>
</div>
</div>
</div>
Related
I need to use position:fixed; for top div so the animation happens then I want to show other content and elements under it .
Right now the hello divs are over the container which I want them to be under the blue container .
This is the Codesandbox link
It looks the body is the blue container, so you can't put anything outside of that, but you could style another element as the blue container. z-index can be used to control what appears above/below other positioned elements.
I have checked other posts but none mentioned about a precise location to overlay.
Consider that I have an image, for eg. a traffic light. I need to overlay (not sure if this is the correct term or not) a div on top of the precise location of, the green lamp, for example. This is so that I can animate the div via jQuery to change the colour of the div in order to have an effect that the image is being animated.
The problem now is how to be precise in this, so that the location of the div completely matches that part of the image? Does it mean having to measure the pixels before setting the top and left of the divs? Or is there a smarter way?
I have considered other options such as using canvas (or svg, or silverlight) to redraw the whole thing instead of embedding the image (i.e. redraw a whole new traffic light picture). However, for this I believe it will be way more complicated than what I asked. Correct me if I am wrong here.
Please advise.
One way is to put the image inside a div which is either positioned relative if you want it to be inline with other elements or positioned absolute if you want to set its position on the page. Then position absolutely the overlapping div inside the same div as the image.
for example
Styles
#holder {
position:relative;
}
#over {
position:absolute;
width:40px;
height:40px;
left:20px;
top:30px;
}
Body
<div id='holder'>
<img src='IMAGE SOURCE'>
<div id='over'></div>
</div>
You will need to adjust the width, height, left and top of the div with id='over' as necessary.
You could replace the div with id='over' with an image use position absolute on this image and set left and top as needed.
I was trying to create an image map tool as part of my project
http://jsfiddle.net/MBThE/12/
Full screen result : http://jsfiddle.net/MBThE/12/embedded/result/
I tried to place the links as divs and positioning using css..
But the problem is that adding or deleting new hot spots reults in repositioning of other elements..I found the solution for this as
position:fixed for hot spot divs ..But this makes the hotspots remain there itself even if user scrolls down or up....So is there any way to find the number of pixels scrolled up or down using javascript and trigger an event when scrolling happens,so that i can increment or decrement the divs positions according to scrolling ?
I consider another alternative as HTML5 canvas....But that results in unwanted resizing of image...
So is there any way to make the divs does not affect each other but also place them inside the container div?
Note:- click 'add hot spot' button and click on the image to add hotspot..hover the hotspot to edit the hotspot
Yes, position:absolute will position absolutely based off of the closest parent that is either position:absolute or position:relative. So you could use the following to create a parent and then position within it.
<div style="position:relative" id="parentDiv">
<div style="position:absolute; top:15px; left:15px">I am 15 pixels from the top and left side of my parent div </div>
<div style="position:absolute; top:30px; left:30px">I am 30 pixels from the top and left side of my parent div </div>
</div>
hope that helps
Hi all you wonderfully helpful people!
I was practicing my CSS skills, and I thought I would push my CSS to the limit and animate some <div>s. Well the CSS has failed me and I'm wondering if there's a an easy way to achieve the effect I describe below using javascript.
<div id="container">
//on hover div with background img expands in every direction from center acting as border
<div id="expanding-background">
<div id="img-div"> //border's solid-color stroke increases, but size remains same
<img>
</div>
</div>
//label sits at bottom and drops down as expanding-background expands down.
<p id="label" style="text-align:centered;">Label</p>
</div>
With the CSS, I jerry-rigged a solution, but it only worked when I hovered the inner img, so mouseovering the border only made the expanding-background div work. Similar issues occurred with the label's animation. Is there an easy way to initiate animation of a number of divs with the hover of a single div?
Thanks in advance helpful people!
$('#yourdiv').bind('hover', function() {
// Animations to do when hovering. Example:
#(this).find('#innerDiv').animate('height', '+=200');
}, function() {
// Animations to do when leaving with the mouse. Example:
#(this).find('#innerDiv').animate('height', '-=200');
});
I am experiencing problem with the layout of a page where my controls are shifting when I attempt to change the class using a javascript event. Can anyone help with some ideas around the problem. It only seems to be a problem in IE when the left scroll bar appears.
Here is an example of the html
<div id="container" style="overflow:auto;">
<div id="control1Container" style="left:17%;top:145px;display:inline;position:absolute;">
<div id="control1" class="listOUT" >I am a control</div>
</div>
<div id="control2Container" style="left:67%;top:145px;display:inline;position:absolute;">
<div id="control2" class="listOUT" >I am a control</div>
</div><!-- more controls here -->
</div>
So now the imagine that the controls within the container div take up enough space that the overflow margin appears on the left i.e. the controls extend below the bottom of the container div. If I attempt to change the listOUT class on control1 to say listIN using javascript the control will shift to the left. To me it almost seems like the browser is readjusting the control1Container to a new location that is 17% if the container div's new width with the scrollbar in place.
Any idea's?
You need to give to the container div position:relative, so that the absolute positioned elements inside it get positioned in relation to it ..