I have a div with applied property position: fixed;. I need to stop this property on some height of screen scroll. Any ideas?
I just need the css code only.
You can do it with jQuery pretty easily:
$(window).scroll(function(){
if ($(window).scrollTop() >= target) { // change target to number
$("#el").css('position', 'relative');
}
});
or pure JavaScript:
window.onscroll = function(){
if(window.scrollY >= target) { // change target to number
document.getElementById('el').style.position = 'relative';
}
};
Related
I've got a parent DIV. Set with. I then have a inner DIV which is overflow-x: scroll.
It all works perfectly. But I want to display a message ONLY when scrolling is needed.
Is there a CSS or JAVASCRIPT method which can pick up on this without using libraries such as jQuery or Bootstrap?
Look for when I div is wider than the other...
function myFunction() {
var x = 0;
var parentWidth = document.getElementById("myDIV").clientWidth;
var x = document.getElementById("thisDIV").querySelectorAll(".awiderDIV");
if (x[0].clientWidth > parentWidth){
document.getElementById("scroll").style.display = "flex";
} else {
document.getElementById("scroll").style.display = "none";
}
}
I am creating a pop-up overlay modal and am having problems getting the positioning/scrolling working correctly.
I can set my modal to be position:fixed but then if the modal's height is too much, then the modal overflows off of the window and you cannot see the bottom of it.
If I set the modal to be position:absolute then the element becomes positioned relative to the closest ancestor with position:relative, correct? (or at least thats what it appears to do) Instead I want the modal to ALWAYS be relative to the window so that I can center it easily.
Is there a way to make the below .modal positioned relative to the window ( or element) even if the element is nested deep inside the DOM like this:
<body ng-app="myapp" ng-controller="mycontroller">
<div>
<div>
<div ui-view>
<div class=".modal"></div>
</div>
</div>
</div>
</body>
If you insist on having it in that same markup and nested in the same manner, your best bet is in JavaScript.
Here's some JS code that gives a good method of accomplishing what you asked for:
function ShowDivInCenter()
{
try
{
divWidth = 100;
divHeight = 100;
divId = 'divLogin'; // id of the div that you want to show in center
// Get the x and y coordinates of the center in output browser's window
var centerX, centerY;
if (self.innerHeight)
{
centerX = self.innerWidth;
centerY = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
centerX = document.documentElement.clientWidth;
centerY = document.documentElement.clientHeight;
}
else if (document.body)
{
centerX = document.body.clientWidth;
centerY = document.body.clientHeight;
}
var offsetLeft = (centerX - divWidth) / 2;
var offsetTop = (centerY - divHeight) / 2;
// The initial width and height of the div can be set in the
// style sheet with display:none; divid is passed as an argument to // the function
var ojbDiv = document.getElementById(divId);
ojbDiv.style.position = 'absolute';
ojbDiv.style.top = offsetTop + 'px';
ojbDiv.style.left = offsetLeft + 'px';
ojbDiv.style.display = "block";
}
catch (e) {}
}
You can then call the function through any event, for example:
<body onload='ShowDivInCenter();' onresize='ShowDivInCenter();'>
if you want it to be dynamic.
i am having a hard time finding any information on the ordering of directives and their updating of css properties.
for example, i have two directives, one to set an element to full screen height, and one to align content vertically.
app.directive('fullscreenElement', function() {
return {
restrict: "A",
link: function(scope,element,attrs){
$(element).each(function(){
$(this).css('height', $(window).height());
});
}
};
});
app.directive('alignVertical', function() {
return {
restrict: "A",
link: function(scope,element,attrs){
var height = $(element).height();
var parentHeight = $(element).parent().height();
var padAmount = (parentHeight / 2) - (height / 2);
$(element).css('padding-top', padAmount);
}
};
});
They both work independantly, the trouble is when they are nested, the align-vertical directive doesnt work, im assuming this is because the css height hasn't been set yet? how do i make sure it is set before the alignVertical directive runs? any tips for writing these two directives in a more angular way would be appreciated.
this works:
<header style="height:800px">
<div align-vertical>
this content is centered vertically as expected
</div>
</header>
this doesn't work (content doesnt center vertically, even though header height is now fullscreen):
<header fullscreen-element>
<div align-vertical>
the header element is now fullscreen height but this content is *not* centered vertically
</div>
</header>
thanks
Figured out a solution, posting it here in case anyone finds it helpful.
The trick is to use scope.watch and scope.evalAsync to monitor changes of height to the parent container and run them after rendering is complete.
app.directive('alignVertical', function() {
return {
link: function($scope, element, attrs) {
// Trigger when parent element height changes changes
var watch = $scope.$watch(function() {
return element.parent().height;
}, function() {
// wait for templates to render
$scope.$evalAsync(function() {
// directive runs here after render.
var that = $(element);
var height = that.height();
var parentHeight = that.parent().height();
var padAmount = (parentHeight / 2) - (height / 2);
that.css('padding-top', padAmount);
});
});
},
};
});
I encountered a strange problem, maybe someone can help.
There are multiple img on the page, each one is defined as:
<td><img src="img1" onmouseout="Hide(\'div1\');"></td>
When user clicks on the image, the hidden div should appear in the middle of the page and disappear on the mouseout.
This is hidden div:
<div id="div1" style="width:400px;height:220px;padding:8px;position:absolute;display:none;border:6px solid #CC6600;background-color:#FFDAB4">
Everything works fine till I start scrolling up and down. At some specific positions and at the end of scroll the hidden div is not appearing. Does anyone understand why?
Here is javascript:
function Show (div)
{
var winW=630,winH=460,t,l;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
t=winH/2-240/2+scrollTop;
l=winW/2-400/2+scrollLeft;
document.getElementById(div).style.top=t+"px";
document.getElementById(div).style.left=l+"px";
document.getElementById(div).style.display="block";
}
function Hide(div)
{
document.getElementById(div).style.display="none";
}
I just realized that it is not scrollTop problem.
Anchor inside div does not occupy whole div, only lower portion. Strange that cursor changes on the whole img, onclick is called on the whole img, but hidden div shows only when clicking on the lower portion.
I tried style="display:block" without any success. Out of desperation, I put style="opacity:0.9" and it does work! The only problem is that hidden div shows behind img (like having z-index lower than img). I am not using z-index since hidden div is position:absolute.
* Still looking for some smart person!!!
Try jQuery solution
$(function() {
$('body').scrollTop(0);
});
Meanwhile if you want a JavaScript solution try
document.body.scrollTop = document.documentElement.scrollTop = 0;
I have a html page which is table based. I have a ul as menu few charts and few tables. I am trying to design it such that it just fits in any screen without any scrollbar. My browser doesn't honer the height=100% which i tried for the main table of the page. Any thoughts? Thanks in advance :)
you will not fit height as you want except using javascript, or use frameset
Here is javascript/jquery code that I have used to force the height of certain elements.
function resize(){
winH = 460;
if (document.body && document.body.offsetWidth) {
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winH = window.innerHeight;
}
$('#container').height(winH);
}
$(function(){
resize();
});
//the following code readjusts the element's height every time the browser window is altered.
window.onresize = function() {
resize();
}