I am working on a library that draws brackets.
I am calculating the coordinates of each element (matches and lines) using javascript. Each element has position: absolute; and uses left and top to set their x and y coordinates.
Because I am using position: absolute; it is necessary to set the parent to position: relative; so that the children are positioned relative to their parent.
This was working perfectly until I noticed that the parents height was not updating from its children, because position: absolute; elements are taken out of the flow of the document.
I need the parent to have height so that I can place other elements underneath, and give the parent styles such as background-color...
Is there an alternative to absolute positioning that uses x and y coordinates but also keeps them in the flow of the document to allow the parents width and height to adjust automatically?
Or, if that is not possible, is there away using vanilla javascript (no jQuery or other libraries) to find out the width and height of the contents of the parent div. If this is possible I can just set the parent's width and height styles through javascript.
What I've tried so far
I tried to set the children to position: relative; instead of position: absolute; which I believe would work if you only have one child. However, with more than one child, the children are not relative to the parent but are now relative to the previous child which messes things up.
Even though the parent has no height there is still a vertical scrollbar on the page. Using javascript, I tried to get the scrollHeight and height of elements such as document, document.body and window. This did not work because either the result was undefined or the result was incorrect.
Right now my temporary solution is to set body height to 2500px which should be the highest it will ever need to be. The problem with this is that there will always be a scrollbar, most of the time scrolling to nothing.
Code
<div class="BrackChart_wrapper">
<div class="BrackChart_match"> ... </div>
<div class="BrackChart_line"></div>
etc.
</div>
.BrackChart_wrapper {
position: relative;
top: 0px;
left: 0px;
}
.BrackChart_match, .BrackChart_line {
position: absolute;
}
Thank you for the help, much appreciated!
JSFiddle: https://jsfiddle.net/jmjcocq8/1/
Solution: https://jsfiddle.net/jmjcocq8/2/
I'm fairly sure there's no alternative that both lets you position the children absolutely (relative to their parent) and keeps them in the flow such that they contribute to the size of the parent.
But since you're calculating the positions of the elements yourself, and you know how tall they are, you can set the height of the parent based on the lowest child's y plus height.
You haven't shown your code, but for instance:
var forEach = Array.prototype.forEach;
function positionChildren(parent) {
var left = 0;
var top = 0;
forEach.call(parent.children, function(child, index) {
child.style.left = left + "px";
child.style.top = top + "px";
left += 20;
top += 10;
});
var height = top - 10 + 1 + parent.lastElementChild.clientHeight;
console.log("height = " + height);
parent.style.height = height + "px";
}
positionChildren(document.getElementById("parent"));
#parent {
border: 1px solid black;
background-color: #ddd;
position: relative;
}
.child {
position: absolute;
border: 1px solid blue;
padding: 0;
margin: 0;
}
<div id="parent">
<div class="child">Child1</div>
<div class="child">Child2</div>
<div class="child">Child3</div>
</div>
Related
I've just revamped my tooltip code due to issues with the position altering depending on the size of it's parent (mostly due to using offsetX/Y instead of pageX/Y, but page was being weird, too). So I decided to just have one tooltip for each of my site's pages, parented to the main div, and just feed it different text depending on what the mouse is hovering over (I'll be dealing with the visibility part later).
And it's worked quite well so far, but the only issue is that, the smaller I make my window, the farther the tooltip is from my mouse, until it's not even in view anymore.
Here's the JavaScript coding I've done for it.
var body = document.getElementsByClassName("test");
var tooltip = document.getElementById("tooltip");
body[0].addEventListener("mousemove", tooltipMove)
function tooltipMove(event) {
var x = event.pageX;
var y = event.pageY;
tooltip.style.top = (y + -900) + "px";
tooltip.style.left = (x + -875) + "px";
}
The CSS coding for the tooltip:
.tooltip {
visibility: hidden;
width: 170px;
background-color: white;
background-image: url("images/tooltipbackground.png");
color: black;
text-align: center;
border-style: groove;
border-color: #f4bb4c #ffd966 #ffd966 #f4bb4c;
border-radius: 2px;
padding: 5px 5px;
position: absolute;
z-index: 1;
}
.notfound:hover .tooltip {
visibility: visible;
}
And the HTML:
<div class="test" style="top: 70px; position: relative; height: 100%; width: 100%;">
<h1>TEST</h1>
<img src="images/pagenotfound.png">
</div>
<div style="width: 1px; height: 1px; position: relative;">
<span class="tooltip" id="tooltip">testing</span>
</div>
I should mention the body's (which has the "notfound" class) height is 900px, and it's width 600px, in case that's one of the problems.
The 1 pixel div is just what I'm using to "host" the tooltip, not sure if it's causing any problems as well. I inspected the page in order to see it, and it never seemed to slide around with the window size.
Any sort of help would be greatly appreciated. I've tried to switch it from pageX/Y to clientX/Y, but it's the same issue. And using offset causes it's position to shift depending on what I'm hovering over, which is the reason I'm revamping the code in the first place.
I've also tried to change the tooltip's position from absolute to, well, anything else (after resizing it's parent so it doesn't get squashed), but that hasn't helped.
Another thing I should mention is that, for some reason, the shifting doesn't seem to happen in the Y axis, it's only when I squish the window horizontally that the tooltip shifts, at least from what I've noticed.
I had thought changing the tooltip's position to fixed had made it disappear, but I just couldn't see it due to the massive repositioning I had done to it. Once I deleted that it was visible and fine, and better yet, it stays in it's proper position no matter the screen size!
Also note: I had to change pageX/Y to clientX/Y, as using page made the tooltip shift vertically when squished.
<div style="height: 1px; width: 1px; position: relative;">
<span class="tooltip" id="tooltip" style="position: fixed;">Placeholder</span>
</div>
for (i = 0; i < tip.length; i++) {
tip[i].addEventListener("mousemove", tooltipMove)
tip[i].addEventListener("mouseleave", defaultVis)
}
function tooltipMove(event) {
var x = event.clientX;
var y = event.clientY;
tooltip.style.visibility = "visible";
tooltip.style.top = (y + -50) + "px";
tooltip.style.left = (x + -200) + "px";
}
function defaultVis() {
tooltip.style.visibility = "hidden";
}
How do I enlarge a div while scrolling from a size of 20% width and height in the center to 100% width and height?
I'm currently trying at my first website and I'm almost there. All that is missing is animations and improvements in CSS. One of my ideas is that you have a div with a background inside and while scrolling the picture gets bigger up to the whole viewpoint. I would be very grateful if someone could help me.
You can use transform scale to do it.
CSS part will set the element to take 100% of width and height (i use viewport units), and set it position to fixed (so you will see what happen when you scroll).
Since we gonna change it's scale while scroll, set it initial scale to be 20% of it's original size.
JS part will listen to scroll event and scale the div that it won't be less then 20% but also won't be larger then 100%.
Play with the numbers on the condition to get what you need:
const demoDiv = document.querySelector("#demo");
window.addEventListener('scroll', function() {
if (pageYOffset*0.0001 > 1 || pageYOffset*0.0001 < 0.2) { return; }
else { demo.setAttribute('style', 'transform: scale('+pageYOffset*0.0001+');'); }
});
body {height: 40000px; margin: 0; padding: 0;}
p {position: fixed; top: 0; left: 0; font-size: 40px;}
#demo {
text-align: center;
font-size: 10vw;
position: fixed; top: 0; left: 0;
width: 100vw;
height: 100vh;
background-color: black;
color: white;
transform: scale(0.2); /* since you ask for 20% */
}
<p style="">Scroll to see it grow.</p>
<div id="demo">My minumum width and height are 20% and i will stop grow when i get to 100%</div>
Firstly, Congratulations on your first website. Good luck on your coding journey.
You can do it by using CSS & JavaScript. There is many way, but I'm writing one here. I hope it will be some good.
Let us call the div with an CSS ID animatedDiv.
<div id="animatedDiv"></div>
Now, lets style it with CSS
#animatedDiv
{
margin-top: 200px;
background: #dc143c;
min-height: 350px;
min-width: 20%;
position: absolute;
}
Here, I gave the div a background color, Absolute type of position, and margin-top of 200px. You can change it according to your needs. I used min-height and min-width property because these value will not be any fixed value, they will change on scroll.
Now, lets write some JavaScript
var aDiv = document.getElementById("animatedDiv");
function changeWidth()
{
var scrollVal = window.pageYOffset;
var scrollSlow = (scrollVal / 4);
//Changing CSS Width
aDiv.style.width = Math.min(Math.max(scrollSlow, 20), 100) + "%";
}
window.addEventListener('scroll', function()
{
requestAnimationFrame(changeWidth);
}, false);
Here, on a user define function, I catch the div with it's ID and assign into aDiv variable. Then I catch the page offset on Y axis (How much pixel the page was scrolled) and store it into a variable scrollVal, Next I divide the value by four (you can use 5, 10 20). It will slow the changing effect.
I've use Math methods (min and max) to assign a value between 20 to 100%.
To make the function work on scroll, window.addEventListener is used, and the window.requestAnimationFrame() method will tell the browser that we wish to perform it as an animation.
I hope it will be some help to you. I don't know did I explain well the process to you or not. English is not my mother language, so please don't mind if I made any grammatically mistake.
Wish you all the best.
I am trying to use the new top and left of the child div inside a rotated parent to limit the draggable area of the rotated parent. Im using jquery draggable for this.
EDIT :
Here is the jsfiddle . Im planning to use the red dot on the rotated div to use as marker to check if it collided with the boundaries of the container. I need to get the new position(top and left) of that red marker to make use of my ready made function to contain the draggable.
In order to calculate the top or left offset for any element, you need to use .getBoundingClientRect(), in addition to accounting for the window scroll.
This is also the case for rotated elements, as can be seen in the following example:
function findTopLeft(element) {
var rec = document.getElementById(element).getBoundingClientRect();
return {
top: rec.top + window.scrollY,
left: rec.left + window.scrollX
};
}
console.log(findTopLeft('inner'));
#outer {
position: absolute;
top: 25%;
left: 25%;
width: 100px;
height: 50px;
border: 1px solid black;
transform: rotate(90deg);
}
<div id="outer">
<div id="inner">Text</div>
</div>
Hope this helps! :)
I have a div with position: absolute and overflow: auto. Inside this div I have a div that should act sticky and should be fixed(top: 0, bottom: 0, overflow: auto) when I scroll.
I can fix this div, but I can't return it to original position because I can't attached the scroll event when this div is fixed.
$('.right').scroll(function() {
if ($('.scroll').offset().top <= 0) {
$('.scroll').css({
'position': 'fixed',
'top': 0,
'left': '20px',
'right': '0',
'overflow': 'auto'
})
}
})
Please check my JSFiddle for more info - JSFIDDLE
Thank you.
Here's how I would do it. This doesn't position it fixed but it has the same appearance. Once scrollTop is equal to or greater than where the top of the fixed content "should be" then we set the top absolutely to that of scrollTop, if you scroll upwards once the scrollTop reaches the point where the fixed content used to be, it will drop it again.
$(document).ready(function() {
oldOffset = $('.scroll').offset().top;
$('.right').scroll(function() {
if ($('.right').scrollTop() > oldOffset) {
$('.scroll').css({
'position': 'absolute',
'top': $('.right').scrollTop(),
'left': '20px',
'right': '0',
'overflow': 'auto'
});
}
});
});
(Demo)
Set the outside div to
position: relative;
Set the inside div to
position: absolute;
top: 15px;
right: 15px;
This will put the top right corner of the inside div at the designated location within the parent container. When setting position absolute, the image is set relative to the first parent container with position defined to anything other than default, I believe. If there is no DOM element assigned a position, the absolute element will be positioned relative to the viewport.
It is very strange task you want to accomplish :)
But anyway there is the problem:
When you set you inner div to position: fixed you positioned this div above your div.right and it is prevents scrolling event from fire.
So what you need is to set pointer-events: none to the div.scroll to allow your div.right listen scroll events without any problems.
But when you do that you will face another problem - when you set your div.scroll to position: fixed it will lose its place inside the div.right and div.right jumps to the top of the scroll automatically. To prevent that you need to create clone of the div.scroll and set his height to 0 initially, and to auto when your inner element is fixed.
Note pointer-events: none - disable all mouse events including the text selection.
There is the code:
JS
$(document).ready(function() {
var cnt = $('.right');
var scrollEl = $('.scroll');
var scrollClone = scrollEl.clone().addClass('clone');
scrollEl.before(scrollClone);
cnt.scroll(function() {
var expression = scrollClone.offset().top <= 0;
scrollEl.toggleClass('stick', expression);
scrollClone.toggleClass('stick-clone', expression);
})
})
CSS
.scroll {
background: yellow;
pointer-events: none;
overflow: hidden; /* Remove top offset from h1*/
}
.scroll.stick {
position: fixed;
left: 20px;
right: 0;
top: 0;
}
.scroll.clone {
height: 0;
overflow: hidden;
}
.scroll.clone.stick-clone {
height: auto;
}
JSFiddle
You can try the following example:
Firstly, instead of adding the css as inline styles, create a css class that you can add and remove from the .scroll element.
CSS
.fixed-top {
position:fixed;
top:0;
left:20px;
right:20px;
}
Wrap your .scroll element with another div which will be used in the javascript to keep track of the original height of your .scroll div.
HTML
<div class="scroll-wrapper">
<div class="scroll"></div>
</div>
Lastly, store the scrollTop value in a variable when the fixed position is applied for the first time. You can then use that value to determine when to remove the fixed styles from the .scroll div. Also set the height of the .scroll-wrapper element equal to the height of your .scroll element to make sure the content is scrollable.
Javascript
var startScrollTop = 0;
$('.right').scroll(function () {
var $scroll = $('.scroll');
if ($scroll.offset().top <= 0 && $('.right').scrollTop() > startScrollTop) {
if (startScrollTop === 0) {
startScrollTop = $('.right').scrollTop();
}
$('.scroll-wrapper').css("height", $('.scroll').height() + 300);
$scroll.addClass("fixed-top");
} else {
$scroll.removeClass("fixed-top");
}
})
Take a look at this fiddle.
http://jsfiddle.net/a924dcge/25/
Hope that helps!
I saw this effect here.
The main content section of the page moves over and above a div when the page is scrolled.
I tried recreating this effect using the parallax effect,but in vain.The issue is that using parallax,i can change the speed of 2 objects within the same div only.Also apart from that,i will have to put some unncessary tags all over the page to make the script work.
Is there a simpler(or working) way to achieve this effect?Thanks a lot
You can do this with CSS.
#head, #subHead{
position: fixed;
height: 80px;
width: 100%;
display: block;
left: 0;
top: 0;
z-index: 10; /* on top of all */
}
#subHead{
z-index: 4; /* below all */
top: 80px; /* height of the top div */
}
#content{
position: relative;
z-index: 6; /* below the top div, but above the one below it */
margin-top: 160px; /* the height of the two divs above combined */
}
And to make subHead scroll slower:
window.onscroll = function(ev){
var subHead = document.getElementById('subHead'),
topHeight = document.getElementById('head').offsetHeight;
subHead.style.top = (topHeight - document.body.scrollTop / 4) + 'px';
};
jQuery:
$(window).on('scroll', function(){
$('#subHead').css('top', ($('#head').height() - $('body').scrollTop() / 4));
});
There definitely seems to be some parallax going on at least. I haven't looked through the markup thoroughly enough, but one thing of note is that the area with the graphic and the content area (along with the area for the ads) are sibling <div>s.
Just top of head, with some CSS positioning and z-indexing, it'd be a bit straightforward to render the content <div> above the graphic <div>. It seems that only the graphic <div> is being controlled via parallax scrolling. If that makes sense.
You could attach onscroll event for your first div and set scroll position of second div in your JS.
<div id="div1" onscroll="OnScrollDiv()">
<div id="div2"></div>
</div>
javascript:
function OnScrollDiv () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.scrollTop = div1.scrollTop * 2;
}
More info in here:
http://help.dottoro.com/ljurkcpe.php
http://help.dottoro.com/ljnvjiow.php