Here is a link to a JSFiddle http://jsfiddle.net/9NYcn/11/ i put together with what i would like to do, but i need to do this with pure css.
function expand(){
var sect = document.getElementById("sect");
var body = document.getElementById("main");
var panes = document.getElementById("panes");
var newHeight = 40 + "px";
var newHeight2 = 120 + "px";
var topVal = 120 + "px";
sect.style.display = "block";
sect.style.height = newHeight;
body.style.height = newHeight2;
panes.style.top = topVal;
}
In the above function i had to set the "top" property of panes in order to get this to work. i need to get it so that the panes section will work like it currently does without using javascript to change the "top" property of "panes". When the user clicks the "expand" button the div with the class "body" will expand and not stick behind or overlap the "panes" div.
I know im doing a terrible job explaining i apologize for that.
Remove the absolute positioning of .panes: http://jsfiddle.net/rHTM8/
It will make it naturally flow after the middle div.
Related
I have a very long div (height: 500px), and I want to detect if user scrolled to the bottom of this div.
I have seen so many answers in the stackoverflow, almost all the answers mentioned scrollTop. However, in my simple example (jsfiddle), the scrollTop is always 0. After reading the MDN, I realize maybe they are talking about scrollable div? But all I want is to detect whether user scrolled to the bottom of a normal div.
Code
<html>
<body>
<!-- This is the very very long div, which may be contained in some other divs -->
<div></div>
</body>
</html>
jQuery Code
Currently, there is no scrollBottom function of jQuery. But, I have created a function that will tell whether we can see the bottom of a specific div element or not.
let aDiv = document.getElementById("aDiv");
$(document).scroll(function () {
var y = $(this).scrollTop();
var windowHeight = $(window).height();
var bottomVal = aDiv.offsetTop + aDiv.offsetHeight- windowHeight;
let s = document.getElementById("txt");
if(y>bottomVal && y< bottomVal + windowHeight){ s.innerHTML = "You can see bottom of aDiv";}
else{ s.innerHTML = "Can't see bottom of aDiv"; }
});
You can go through the following example. This might help you.
https://jsfiddle.net/q2smtvya/3/
Update: Added Vanilla JS Code. The only change will be the following JS Code
let aDiv = document.getElementById("aDiv");
window.onscroll = function(){
var y = window.scrollY;
var windowHeight = window.innerHeight;
var bottomVal = aDiv.offsetTop + aDiv.offsetHeight- windowHeight;
let s = document.getElementById("txt");
if(y>bottomVal && y< bottomVal + windowHeight){ s.innerHTML = "You can see bottom of aDiv";}
else{ s.innerHTML = "Can't see bottom of aDiv"; }
};
You can go through the following example. This might help you.
https://jsfiddle.net/nrp7x61k/1/
setInterval(function() {
var divPosition = $('div').position();
console.log('X: ' + divPosition.left + ", Y: " + divPosition.top");
}, 500);
So I can get the x and y position of this div. left/top but it's a square div on the page. I'm also tracking a section tag that flies around the page, I want to basically do if (_thesectiontag_.left == _thesquarediv_.left || _thesectiontag_.top == _thesquarediv_.top) ... do something so if the section tag is within the div coordinates on the page do something.
But I need to get the full dimensions of the square to be able to do that. I'm a bit lost on where to start and how to go about it.
Can anyone offer some help? Thank you!
Use this two code :
For the Width and Height includes padding :
var Height = document.getElementById('square').clientHeight;
var Width = document.getElementById('square').clientWidth;
For the Width and Height includes padding, scrollBar and borders :
var Height = document.getElementById('square').offsetHeight;
var Width = document.getElementById('square').offsetWidth;
$('div').height($('div').width());
Strictly using JavaScript, I'd like to position the following div element right outside the window, to the right, so that no horizontal scrollbar is present.
How do I do this?
HTML:
<div id = "content">
<header>
<h2>Welcome!</h2>
</header>
</div>
I was thinking something like
$( "#content" ).offset({ left: 1345});
but that unfortunately results in a scrollbar, and it isn't responsive, causing the div to be located far outside the right edge of the window when in mobile view.
If you take the window.innerWidth; value and set that as the left position value it'll hang out right outside of the viewports width.
You'd need to set either your wrapper or body to overflow: hidden; to get rid of the horizontal scroll though.
var hiddenDiv = document.getElementById('content');
var docWidth = window.innerWidth;
hiddenDiv.style.position = 'relative'; // Or absolute, depending on what you want
hiddenDiv.style.display = 'inline-block';
hiddenDiv.style.left = docWidth+'px';
http://jsfiddle.net/c62sqvdk/ <-- JsFiddle for visual example.
Why not just hide it? You can easily do it with javascript with
var link = document.getElementById('content');
link.style.display = 'none';
link.style.visibility = 'hidden';
Depends on what you need it for.
Also, check this https://daneden.github.io/animate.css/
Try
document.body.style.overflow = "hidden";
var content = document.getElementById("content");
content.style.position = "absolute";
content.style.left = window.innerWidth + "px";
jquery
$(function() {
$("body").css("overflow", "hidden")
.find("#content").css({
"position" : "absolute",
"left" : window.innerWidth
});
});
jsfiddle http://jsfiddle.net/guest271314/9zhy2xax/
This question already has answers here:
How can I get the browser's scrollbar sizes?
(25 answers)
Closed 5 years ago.
The following HTML will display a scroll bar on the right inside edge of div.container.
Is it possible to determine the width of that scroll bar?
<div class="container" style="overflow-y:auto; height:40px;">
<div class="somethingBig"></div>
</div>
This function should give you width of scrollbar
function getScrollbarWidth() {
// Creating invisible container
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.overflow = 'scroll'; // forcing scrollbar to appear
outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
document.body.appendChild(outer);
// Creating inner element and placing it in the container
const inner = document.createElement('div');
outer.appendChild(inner);
// Calculating difference between container's full width and the child width
const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
// Removing temporary elements from the DOM
outer.parentNode.removeChild(outer);
return scrollbarWidth;
}
Basic steps here are:
Create hidden div (outer) and get it's offset width
Force scroll bars to appear in div (outer) using CSS overflow property
Create new div (inner) and append to outer, set its width to '100%' and get offset width
Calculate scrollbar width based on gathered offsets
Working example here: http://jsfiddle.net/slavafomin/tsrmgcu9/
Update
If you're using this on a Windows (metro) App, make sure you set the -ms-overflow-style property of the 'outer' div to scrollbar, otherwise the width will not be correctly detected. (code updated)
Update #2
This will not work on Mac OS with the default "Only show scrollbars when scrolling" setting (Yosemite and up).
offsetWidth includes width of scroll bar and clientWidth doesn't. As rule, it equals 14-18px. So:
let scrollBarWidth = element.offsetWidth - element.clientWidth;
That will return 0 if the element doesn't currently have a scroll bar, so here's a simple function which computes the browser's scroll bar width by creating a temporary element that has a scroll bar:
function getScrollBarWidth() {
let el = document.createElement("div");
el.style.cssText = "overflow:scroll; visibility:hidden; position:absolute;";
document.body.appendChild(el);
let width = el.offsetWidth - el.clientWidth;
el.remove();
return width;
}
I think this will be simple and fast -
var scrollWidth= window.innerWidth-$(document).width()
If the child takes the full width of the container excluding scrollbar (the default), then you can subtract the widths:
var child = document.querySelector(".somethingBig");
var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;
If you use jquery.ui, try this code:
$.position.scrollbarWidth()
I've used next function to get scrollbar height/width:
function getBrowserScrollSize(){
var css = {
"border": "none",
"height": "200px",
"margin": "0",
"padding": "0",
"width": "200px"
};
var inner = $("<div>").css($.extend({}, css));
var outer = $("<div>").css($.extend({
"left": "-1000px",
"overflow": "scroll",
"position": "absolute",
"top": "-1000px"
}, css)).append(inner).appendTo("body")
.scrollLeft(1000)
.scrollTop(1000);
var scrollSize = {
"height": (outer.offset().top - inner.offset().top) || 0,
"width": (outer.offset().left - inner.offset().left) || 0
};
outer.remove();
return scrollSize;
}
This jQuery-based solutions works in IE7+ and all other modern browsers (including mobile devices where scrollbar height/width will be 0).
Here's an easy way using jQuery.
var scrollbarWidth = jQuery('div.withScrollBar').get(0).scrollWidth - jQuery('div.withScrollBar').width();
Basically we subtract the scrollable width from the overall width and that should provide the scrollbar's width. Of course, you'd want to cache the jQuery('div.withScrollBar') selection so you're not doing that part twice.
Assuming container is only on page once and you are using jQuery, then:
var containerEl = $('.container')[0];
var scrollbarWidth = containerEl.offsetWidth - containerEl.clientWidth;
Also see this answer for more details.
this worked for me..
function getScrollbarWidth() {
var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
$('body').append(div);
var w1 = $('div', div).innerWidth();
div.css('overflow-y', 'scroll');
var w2 = $('div', div).innerWidth();
$(div).remove();
return (w1 - w2);
}
function scrollContent(){
var div = $('#scrolling-content'),
ul = $('ul.image'),
// unordered list's left margin
ulPadding = 0;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
}
This is how I scroll my image list. The problem is that #scrolling-content element's size is dynamic. It changes on window resize. Here;
$(window).resize(function() {
$("#scrolling-content").css("width",$(window).width() + "px");
$("#scrolling-content").css("height",($(window).height()-400) + "px");
});
So it has to recalculate the left value when user changes windows size. How sould I change script to do that? Recalling scrollContent() function with window.resize function is a noob solution I guess. And it creates conflict for IE.
You could set the width on resize and make your function call the variable like so. This method turns your function into a js object and the window update resets the width var inside that object. Course now you call the function like this: scrollContent.scroll();
var scrollContent = {
width: 0,
scroll:function(){
var div = $('#scrolling-content'),
ul = $('ul.image'),
// unordered list's left margin
ulPadding = 0;
//Get menu width
scrollContent.width = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var left = (e.pageX - div.offset().left) * (ulWidth-scrollContent.width) / scrollContent.width;
div.scrollLeft(left);
});
}
};
$(window).resize(function() {
$("#scrolling-content").css("width",$(window).width() + "px");
$("#scrolling-content").css("height",($(window).height()-400) + "px");
scrollContent.width = $(window).width();
});
You can also just declare a standard js var and use that to keep things simple. I just prefer working with js objects to eliminate possible var interference.