Make a div position relative to another that is static - javascript

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;
}

Related

Get Object to Fly From the Left Side to the Right Side of the Screen

Starting with this fiddle we see a basic animation of a box flying from its start position to its finish position. This is the known good code. (I tried it as a stackoverflow snippet, but it didn't work here for some reason.)
HTML
<div id="start">Start</div>
<div id="finish">Finish</div>
<div id="fly">Fly</div>
CSS
#start{
position:absolute;
background:red;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:0px;
}
#finish{
position:absolute;
background:blue;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:200px;
}
#fly{
position:absolute;
background:yellow;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:0px;
transition:1000ms;
}
#fly.finish{
left:200px
}
JavaScript
document.getElementById("fly").className = "finish";
-
Unlike the fiddle above this fiddle below however does not work. Rather than transitioning gently from the start location to the finish, it starts at the finish. This is because it should transition from a "left" property to a "right" property.
HTML
<div id="start">Start</div>
<div id="finish">Finish</div>
<div id="fly">Fly</div>
CSS
#start{
position:absolute;
background:red;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:0px;
}
#finish{
position:absolute;
background:blue;
height:100px;
width:100px;
line-height:100px;
text-align:center;
right:0px;
}
#fly{
position:absolute;
background:yellow;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:0px;
right:auto;
transition:1000ms;
}
#fly.finish{
right:0px;
left:auto;
}
Javascript
document.getElementById("fly").className = "finish";
Although I understand why this doesn't work, I need a box to fly to the right of the screen from just off the left edge of the screen. Most solutions to this issue either look strange on extremely wide screen devices, or have a slow response time on narrow mobile devices. I want an animation that's responsive to browser width, travelling more slowly across narrow screens and more quickly across wide screens.
What is the most elegant solution for this?
Ideally I'd like not to use any external libraries, but if I must, the page is already using jquery, so that would be the ideal one to use if that helps.
I'm not opposed to writing extremely long JavaScript functions, but shorter is always better.
As you know that the animation doesn't work cause can't animate two different attributes, in this case, changing left and right value in hope for the element to be animated.
My suggestion would be this:
#fly.finish {
left:calc(100% - 100px);
}
this is assuming that the box is always 100px width. Hope it helps!
Change your flying elements "left" property to (100% - elements width) as shown below.
#fly.finish{
left: calc(100% - 100px);
}

Putting a caption and an image inside of a centered div that slides down from the top of the screen

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;
}

Selectable Elements outside of container with overflow: hidden

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"

Keep the ads div fully in view

I've got to (unfortunately) put our ads onto our website. They're positioned down the right hand side of the page, outside of the content area.
When the screen width gets smaller, because it's positioned outside of the content they get cut off by the browser. I can offset everything by putting left: -someValuepx, which moves everything over.
Rather than having to put in lots and lots of media queries to keep slightly moving it over, is this something I can do in Javascript, to automatically keep them in the view? Ideally I'd like a function that I can run on page load, and then on the window resize event.
Here's a jsfiddle of the CSS at the moment. Edit the #container left attr to move the content.
And here's the code (as I believe it's required if you link to jsfiddle?)
HTML
<div id="container">
<div id="ads">
</div>
<div id="content">
</div>
</div>
CSS
#container {
width:500px;
min-height:100px;
background-color: firebrick;
margin:0px auto;
position:relative;
left:-50px;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:-170px;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
I have a pure css solution, if you change your div structure to the following:
<div id="container">
<div class="padding">
<div id="ads"></div>
<div id="content"></div>
</div>
</div>
You are able to use the following styles:
#container {
width:670px;
min-height:100px;
margin:0px auto;
position:relative;
}
#container > .padding {
margin-right:170px;
background-color: firebrick;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:0;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
#media (max-width:670px) /*this is the width of the container*/
{
#container {float:right;}
}
And this will keep your adds in view when the viewport is resized
Example
What you can do, is to create a function in JS that gets executed one time when the document is loaded and also when you resize.
This function should add a class (ie: hidden) to the the ads. you want to hide, and with CSS, give the right properties. Just addClass and removeClass, depending on the situation, should make the trick.
Example:
#ads { // normal values that makes the content of the ads visible }
#ads .hide  { // offset values to hide the ads }
This way, you keep behavior & presentation separated.
Hope it helps !
In your html markup, you have both content and the ads inside a container. The problem is that the content takes all space of the container, and the ads are positioned outside of it.
Just make the container wide enaugh to hold both content and the ads, then position them appropriately. Make one break point on the width of content+ads (660px), where you would position the ads below the content, and give the container its current width (500px).

Remove an element from page flow similiar to a fixed position

I was curious if there was a way to remove an element from the page flow similar to position:fixed;, such that the page won't scroll.
Example - currently even though it goes beyond the screen it doesn't increase the size of the document, but if position is changed to absolute / relative it will.
I would like for the position to be absolute (although relative will work), yet not increase the document size.
I'm looking for ways to do this be it html/css work around, JavaScript, or jquery (even browser-specific solutions).
Depending what else you have on the page, this might do the trick.
body {
height:100%;
width:100%;
overflow:hidden;
}
nav{
width:98px;
height:750px;
background:blue;
position:absolute;
}
If you want other elements to overflow the body, use this code.
<div class="wrapper">
<nav></nav>
</div>
body {
height:100%;
}
.wrapper {
position:absolute;
top:0;
bottom:0;
width:100%;
overflow:hidden;
}
nav{
width:98px;
height:750px;
background:blue;
position:absolute;
}

Categories