I have an Html page with an scroll ,and I'd like when the page starts (onload) to put the focus in the 60% parox (y axis) of the page. that means to scroll automatically the 60% of the page.
is this possible? thankyou
Try this website:
link text
Thats should work!
function pageScroll() {
var height = document.documentElement.clientHeight;
window.scrollBy(0, Math.floor(0.6 * height)); // horizontal and vertical scroll increments
}
window.onload = pageScroll;
You can use window.scrollBy() method:
http://www.mediacollege.com/internet/javascript/page/scroll.html
Or use scrollTo jQuery plugin, which gives you more flexibility.
http://plugins.jquery.com/project/ScrollTo
With jQuery and it's scrollTop method:
function loadedScroll() {
$(window).scrollTop(0.6*$(document).height());
}
window.onload = loadedScroll;
Then it scrolls to 0.6 times the document's height when the page has finished loading. :)
<html>
<head>
<script>
scroller = function() {
bodyHeight = Math.max(
Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
Math.max(document.body.clientHeight, document.documentElement.clientHeight)
);
scrollToPosition = Math.floor(bodyHeight / 100 * 60);
window.scrollTo(0, scrollToPosition);
}
</script>
</head>
<body onload="scroller()">
</body>
</html>
Depending on what you want to display, you can add id selectors to you content and then have the page skip to them using a url eg.
<div id="content">
<!--Content Goes Here -->
</div>
And open the page using:
http://www.mysite.com/mysite.html#content
Another example would be this:
start html page scrolled
Related
I am in the process of redesigning my portfolio and one mechanic I want to do is have my portfolio page transition to another page by scrolling. The idea is once the page scrolls to the bottom, it immediately transitions to the new page. The current javascript I have transitions to a new page after it times out at a certain point which doesn't make the transition seamless.
<script>
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset ) >= document.body.offsetHeight) {
setTimeout(function(){
window.location.href = "https://www.google.com";
}, 5000);
}
};
</script>
<body>
<h1>This is page 1</h1>
<img src="https://picsum.photos/seed/picsum/1200/800">
</body>
If there anyway what I am requesting can be achieved using the onscroll feature?
Any help would be appreciated.
Instead of using a setTimeout function to wait for a certain amount of time before transitioning to the new page, you can simply transition to the new page once the user has scrolled to the bottom of the page.
<script>
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
window.location.href = "https://www.google.com";
}
};
</script>
<body>
<h1>This is page 1</h1>
<img src="https://picsum.photos/seed/picsum/1200/800">
<div style="height: 2000px;"></div>
</body>
This is a simple and pretty straightforward question:
If media query breakpoints are set at 750px and 970px, using jquery, is it possible to refresh the page after the width of .container div changes on browser resize and how?
You probably want to use a media query instead but, you can listen to a resize event if you really want to do this:
addEventListener('resize', function() {
location.reload();
});
If you want to only reload if a breakpoint is past, you can keep track of the last innerWidth and only reload if a certain value is crossed. Or instead of using innerWidth, use a width of a div. For example:
var last = document.getElementById('mydiv').clientWidth;
addEventListener('resize', function() {
var current = document.getElementById('mydiv').clientWidth;
if (current != last) location.reload();
last = current;
});
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div id="mydiv">
<h1>Page Resize demo</h1>
</div>
<script>
$(window).resize(function ()
{
if ($(window).width() < 700)
{
$("#mydiv").css("background", "red");
}
else
{
$("#mydiv").css("background", "orange");
}
});
</script>
I'm creating a Pure JS scroll to Top button. I'm writing a function to gather the window height and with, then write the appropriate margins to the scroll button, to keep it in a fixed position outside of the container(container is the 901 in marginx variable). However, when I load the page, the function isn't applying any of the margins to the "scroll" element, and I have no errors.
my code:
<head>
<script>
function displayScrollTop(){
var w=window,
d=document,
e=d.documentElement,
g=d.getElementsByTagName('body')[0],
x=w.innerWidth||e.clientWidth||g.clientWidth,
y=w.innerHeight||e.clientHeight||g.clientHeight;
var marginy = 60-y; //margin-top value
var marginx = "-" + (x-901)/2 - 60;
//image is floated right, this creates a negative margin left to pull to center.
The width of the window - 901 (width of the container)/2 to get the side
margins, - 60 (width of button)
document.getElementById('scroll').style.marginTop = marginy;
document.getElementById('scroll').style.marginLeft = marginx;
}
</script>
</head>
<body onload="displayScrollTop();">
<div id="scroll">
<a onclick="scrollToTop(500);"><img src="images/scrolltotopbutton.png" /></a>
</div>
<div id="container">
</div>
</body>
Any ideas?
You'll need to specify that the margin values are in px, by appending "px" to them.
I have an issue with a jquery function. You can see a working demo here - http://dev.sreejesh.in/menuissue/ . As you can see when the user scrolls down to the page, I have written a jQuery function(which will triger on scroll) to check scroll pixel. When the browser scrolls to a certain pixel(height of the sidemenu block), the Menu block will stay fixed & rest of the content scrolls as normal.
The functionality is working now, however the problem is menublocks makes a jumps when this function runs. I think this is because of the delay in running the function. Hope you guys have any nice trick to fix this.
I used an if/else function to check the scroll pixel, so when the scrolled pixel is greater than menublock height it will add a class "fixed" .
I use the following code.
HTML
<div id="globalwrapper">
<div id="menubar">
---- Menu List items-----
</div>
<div id="mainblock">
----Main content area----
</div>
</div>
jQuery
$(document).ready(function(){
$(window).scroll(function() {
adjustScroll();
});
});
function adjustScroll(){
var windowHeight = $(window).height();
var menublockHeight = $('#menubar').height();
var scrollValue = $(document).scrollTop();
var posValue = menublockHeight - windowHeight;
var menuStatus = $('#menubar').css('left');
$('#menubar').css('minHeight', windowHeight);
$('#menubar').css('height', menublockHeight);
console.log(menuStatus);
$(document).scroll(function() {
if(menuStatus == '0px') {
if(scrollValue > posValue){
$('#menubar').addClass('fixed');
$('#menubar').css('marginTop', -posValue);
}else {
$('#menubar').removeClass('fixed');
$('#menubar').css('marginTop', '0px');
}
}
});
}
I think only CSS can solve this issue, add this style:
#menubar{
position: fixed;
}
just test on Google Chrome,you can have a try.
I'm developing a mobile web app. This is the main structure from top to bottom: header div, menu div, content div, footer div. The header, menu and footer are constant and pages are loaded into the content div using ajax.
Some of the pages have lots of content and they fill out the page so scroll is needed. Some of the pages have only one or two lines of content so they leave a big empty part (Not necessarily different pages - one page for example shows a list of orders, you can have no orders and you can have hundreds...).
This is what i want to achieve: If the page is not full with content, the footer will be in the bottom of the page. If the page is full and scroll is needed, the footer will be immediately after the content (so you scroll down the page and in the end you reach the footer).
The sticky footer solutions are not good for me because i don't want the footer to stick to the bottom always, only when the page is not full of content.
Is there anyway to achieve that? Thanks.
Then you have to use javascript for that - calculate the height of the content - substract it from the window height and set the margin-top of the footer from that distance:
jsfiddle
jsfiddle show
HTML
<div id="header" class="header">Header</div>
<div id="content" class="content">Content</div>
<div id="footer" class="footer">Footer</div>
JS (This example uses jQuery, it should be included before this script.)
$('#footer').css('margin-top',
$(document).height()
- ( $('#header').height() + $('#content').height() )
- $('#footer').height()
);
You can put an onresize window that call this function on any resize of the window.
[edit blag :]
Here is the onResize method (but with a min-height and not a margin-top)
Check the JSFiddle
// function to set the height on fly
function autoHeight() {
$('#content').css('min-height', 0);
$('#content').css('min-height', (
$(document).height()
- $('#header').height()
- $('#footer').height()
));
}
// onDocumentReady function bind
$(document).ready(function() {
autoHeight();
});
// onResize bind of the function
$(window).resize(function() {
autoHeight();
});
Borders, padding and margin
If you want to have borders and padding included in the calculation you can use outerHeight() instead of height(). Alternatively outerHeight(true) also includes margins.
A CSS Sticky footer should solve your problem.
Here's an example
That is super easy to setup and use. It will force the footer down the page with the content, and if the content isn't big enough to fill the page it will stick to the bottom.
function autoHeight() {
var h = $(document).height() - $('body').height();
if (h > 0) {
$('#footer').css({
marginTop: h
});
}
}
$(window).on('load', autoHeight);
The following solution works for me, based on the answer from Александр Михайлов. It finds the bottom of the footer and determines if it is less than the document height and uses top margin on the footer to make up the shortfall. This solution might give issues if your content is being resized on the go.
$(function () {
updateFooterPosition();
});
$(window).resize(function () {
updateFooterPosition();
});
function updateFooterPosition() {
var bottomOfFooter = $('footer').offset().top + $('footer').outerHeight(true);
var heightShortage = $(document).height() - bottomOfFooter;
if (heightShortage < 0) heightShortage = 0;
$('footer').css('margin-top', heightShortage);
}
Here's the solution i came to on my project
function autoHeight() {
if ( document.body.clientHeight < window.innerHeight ) {
document.querySelector('#footer').style.position = 'absolute';
document.querySelector('#footer').style.bottom = '0';
}
}
document.addEventListener("DOMContentLoaded", function() {
autoHeight();
});
This solution worked for me. I think this is perfect if you have more than only a #header and #footer. It just push the content down with a padding-bottom if body is smaller than the viewport.
function autoHeight() {
var bodyHeight = $("body").height();
var vwptHeight = $(window).height();
var gap = vwptHeight - bodyHeight;
if (vwptHeight > bodyHeight) {
$("#content").css( "padding-bottom" , gap );
} else {
$("#content").css( "padding-bottom" , "0" );
}
}
$(document).ready(function() {
autoHeight();
});
$(window).resize(function() {
autoHeight();
});