first post...
So the issue is with two child elements being selectable outside of their parent container.
I have a container DIV with "overflow:hidden". Inside this container is a fixed image element, which I'm using to create a frosted glass overlay. So something like this:
<div id="container1" style="position:fixed; top:0px; left:0px; width:100px; height:100px; z-index:1;">
content, which is either the unblurred image, or a textarea, depending
</div>
<div id="container2" style="position:fixed; top:0px; left:0px; width:100px; height: 50px; z-index:3; overflow: hidden">
<img id="frostedIMGcopy" style="position:fixed; top:0px; left:0px; width:100px; height:100px; z-index:2; filter:blur(8px);"/>
<div id="selectableMenuElement">Menu Option</div>
</div>
where "container2" has an opacity:0.5 background and the img is blurred. That looks how I want it too, no issues with getting that to work at all. I can adjust the height of container2 and it reveals the appropriate amount of blurred image, leaving it looking like the frosted glass overlay, no problems there either.
But when I want to access content on the lower "uncovered" 50px of container1, I am unable to get past the invisible portion of the what-should-be-inaccessible blurred img. It literally selects and drags the "hidden" portion of the picture "frostedIMGcopy" beyond the 50px threshold of container2.
There's more going on, but this is definitely the heart of the problem. My code actually has the identical problem with a frosted overlay of a textarea. In this scenario, selecting the uncovered textarea of container1 actually selects the text inside container2. Same problem, but this is why I need to sort this out.
The syntax in my actual code is fine, and otherwise everything works perfectly.
I can post more code if need be, but the problem really does boil down to these conceptual elements, and I'm completely lost as to what is happening here. Hopefully someone can shed some light on the situation so I'm not hung up on this detail forever.
The only thing I can figure is that the nested z-index is messing with things, but that still doesn't explain why the image in container2 is accessible outside its overflow bounds.
Thanks for any help with my "stack overflow" issue
*edited the code to reflect how it's being used
this is because the attribute "position: fixed", the element in this case is relative to the browser Window/viewport, not to the parent element,
replace this:
<img id="frostedIMGcopy" style="position:fixed; top:0px; left:0px; width:100px; height:100px; z-index:2; filter:blur(8px);"/>
with this:
<img id="frostedIMGcopy" style="position:absolute; top:0px; left:0px; width:100px; height:100px; z-index:2; filter:blur(8px);"/>
the same for id="selectableMenuElement"
Related
I have a position: fixed div that loads a dynamic image from an external source, the image height changes every time it loads.
Now I need to position the next div immediately from where the first div ends.
Have tried by getting the height during runtime but sometimes it takes time to load and the height sent is not proper.
Is there any CSS solution to it.
Theres many ways to do it, the most optimal would be to use floats (float:left;)
div{
float:left;
}
.img{
background-color:red;
width:100px;
height:100px;
}
.div{
background-color:lime;
width:100px;
height:100px;
}
<div class="img">Dynamic Image</div>
<div class="div">Div next to it</div>
I want to make a gallery in HTML/CSS/jQuery. I have a bunch of thumbnails that all represent different images of varying sizes and orientations. When the thumbnail is clicked, I want the image to slide down from the top of the screen. The image should be as large as possible but still fitting in the window, taking into account margins and the like.
I have gotten all this to work properly in the past. However, now I want to add a caption below the image.
My solution was this. I have a div container that is fixed and is positioned with top:-96% and bottom:100% When a thumbnail is clicked, jQuery moves that to top:2% and bottom:2%
Previously I had a border that surrounded the image. Now I want to make that border actually part of a div instead, so that the border can go around the caption which should be below the image and centered, and said image.
Nothing I am doing is working, however. The image will not fit into the viewport, and will always be its max size no matter what I change the percent to.
I'm completely lost, I have no idea how to make this all work out. If you need code, I can give it to you, but as I said, it doesn't work. Thank you all in advance.
EDIT: Added code
HTML:
<div id=imgHoverCont>
<div id=imgBg>
<img id=imgHover src="" alt="">
<div id=commentHover></div>
</div>
</div>
CSS:
#imgHoverCont{
text-align:center;
position:fixed;
left:2%;
right:2%;
top:-96%;
bottom:100%;
}
#imgHover{
display:block;
height:100%;
width:auto;
}
#imgBg{
position: relative;
display: inline-block;
max-width:100%;
max-height:100%;
}
#commentHover{
position:absolute;
left:0;
bottom:0;
width:100%;
color:black;
background-color:white;
}
JS: Thumbnails are stored in an array of objects with their ID and their source.
for(let i in thumbnails){
$(thumbnails[i].id).on("click",function(livingHell){
return function(){
$("#imgHover").attr("src",thumbnails[livingHell].src)
$("#imgHoverCont").css("display","block");
$("#commentHover").html(thumbnails[livingHell].comment);
$("#imgHoverCont").animate({bottom:"2%",top:"2%"},1000);
}
}(i));
};
I've made some changes to your CSS
if I understood your question it works like expected, look here: https://jsfiddle.net/cratgjks/
#imgHoverCont{
text-align:center;
position:fixed;
left:2%;
right:2%;
top:-96%;
bottom:100%;
width:100%; /*new rule*/
}
#imgHover{
display:block;
height:100%;
width:100%;/*changed rule*/
}
#imgBg{
position: relative;
display: inline-block;
max-width:100%;/*changed rule*/
max-height:100%;
width:1500px
}
#commentHover{
position:absolute;
left:0;
bottom:0;
width:100%;
color:black;
background-color:white;
}
I'm trying to make a fullscreen site, also responsive, but on smaller screens the elements in the container overflow making it not 100% it varies depending on how many items are in it. Using:
top:100%;
position:relative;
width:100%;
height:100%
works, only if the screen is a certain size, on mobile devices using that it doest work, and appears half on the previous container.
Is there a way to position from the bottom of the element rather than top?
http://jsfiddle.net/q8tvwm2k/2/
Update:
Never minds found a pretty bad but working solution.
I'm pretty sure you really want a position:absolute to have another div relative to it. You just didn't word the question correctly. position:relative sets the point to which its children can be position:absolute, which is where you want to use top and the like. This is the structure you need to see:
HTML
<div class='surround'>
<div class='inside'>
<div class='outer'>
<div class='inner'>
</div>
</div>
</div>
</div>
CSS
.surround{
position:relative;
}
.inside{
height:100px; width:100px; position:absolute; top:100px; left:100px;
}
.outer{
height:100px; width:100px; position:relative;
}
.inner{
position:absolute; top:30px; left:10px;
}
I am trying to inject a banner div
<div id='banner'></div>
on top of an existing webpage in such a manner so that when a person scrolls the webpage the banner remains on top. Also the webpage should be pushed down by the banner so that every part of the page remains accessible.
Here is my CSS:
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
}
Here is my jquery:
$("body").prepend("<div id='banner'></div>");
I tried using jquery to find all divs that were fixed and changing them to relative before executing the above line but still the banner does not work. The error is shown in the following picture https://drive.google.com/file/d/0B0sCu8aj8zu2akhtcEdtajJJZEU/edit?usp=sharing
Please Help.
And I am not looking for ad revenue here this is just a practice task.
Here is a jsFiddle I have created. The banner div is at the top of the page.
It stays at the top while scrolling.
The HTML:
<div class="page">
</div>
The css:
.oldBody
{
width:100%;
height: 3000px;
background-color: navy;
margin-top:250px;
}
#banner
{
position:fixed;
top:0px;
background-color:#FFFFFF;
width:100%;
height:250px;
border:2px solid;
z-index:10000;
}
The JS:
$("body").wrapAll("<div class='oldBody'></div>");
$("body").prepend("<div id='banner'></div>");
Please maintain z-index of banner div.Z-index should be grater then other div on that page.
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
z-index : 99999
}
i'd just like to present a different way to create the element:
var $banner = $('<div/>', { 'id' : 'banner' });
$('body').prepend($banner);
this technique for creating elements with jquery comes in handy when you have several different element to create. as a note, you can also create the element like so:
var $banner = $('<div/>').attr('id', 'banner');
I think the best way is first keep your ad on top in relative position when a person scroll page your function check the page-scroll .scrollTop() and then add fixed position on banner ad container just like freeze header, if you need further help in this regard let me know, I will provide you code. thanks I hope this technique will help you
I have a table with images, and I need to add an icon to the corner of each image (so that the center of the icon matches the corner). I managed to do that with css relative position, but since the icons are partially outside cells, they mess up the table.
Now I'm trying to add the icons outside the table, and set their position from there. However, I'd like to avoid hardcoding the positions of the images, and determine it on the fly. But using .offsetLeft and jQuery's offset() both return 0, apparently because the elements are positioned automatically. Is there really no way to determine the element's exact position in this case?
to make it with js it's longer and complicated, i advice you to make it with css and for the problem of the icons you can use overflow:hidden so that the icons don't be shown outside of the cells
For example here:
http://jsfiddle.net/CdLEm/
<div id="container">
<div id="corner"></div>
</div>
#container {
overflow:hidden;
position:relative;
height:200px;
width:200px;
border:1px solid #222;
}
#corner {
position:absolute;
left: -13px;
top:-13px;
border-radius:50%;
background:#FF0000;
width:30px;
height:30px;
}