jquery one page scroll start at the bottom - javascript

I'm using the One Page Scroll jquery plugin (https://github.com/peachananr/onepage-scroll) and I want to have the site start from the bottom.
I have five sections, so when I added:
$( window ).load(function() { $(".main").moveTo(5); })
The page loads at the top and then immediately scrolls down to the bottom. I'm trying to avoid that: just want it to load at the bottom and then the user can navigate upwards.
I'm still learning jquery/javascript so I have a feeling this is a simple fix and thats why I couldn't find an answer in the forum.
Thanks in advance for any help or guidance.
Edit: here's the working example

This will be very difficult for two reasons:
The browser constructs the DOM from top to bottom, like stacking blocks upside down. Handlers on window.onload or $(document).ready don't run until after the page has already been built and rendered. Any delay while your scripts and content are loading will exacerbate the lag time. To affect how it looks from the very beginning, your code would need to run even before window.onload. (EDIT: You can do that with JS that's outside an event handler and physically before the elements you're rendering, but it will run before those elements exist. Among other problems, you won't know how tall anything is yet.)
Before the DOM is rendered, there is no bottom of the page. It gains height as more blocks are stacked. You can add some kind of wrapper with an absolute height, but that has its own issues.
If you really want this to work smoothly, you may need a more radical approach. I suggest you exclude the first page from the initial response, then add it dynamically afterward. You can give it an inline style="display:none" or just add it later via AJAX. Injecting content at the top will push everything else down, so you'll need to automatically scroll down as the page expands upward. If you do it right, the user should never be able to tell.

Try this:
jQuery( document ).ready(function( $ ) {
$(".main").moveTo(5);
});
".ready()" will wait for the DOM to load and then execute the script within

I would suggest you to make us of fullPage.js instead and make use of the 'active' class to determine which section will be visible on load as detailed in its docs:
Each section will be defined with a div containing the section class. The active section by default will be the first section, which is taken as the home page.
...
If you want to define a different starting point rather than the first section or the first slide of a section, just add the class active to the section and slide you want to load first.
Living demo
<div id="fullpage">
<div class="section">One</div>
<div class="section">
<div class="slide">
<div class="demo">Demo</div>Two</div>
<div class="slide">Three</div>
</div>
<div class="section active">Third</div> <!-- Active section -->
<div class="section">Four</div>
</div>

Related

IE11 renders page incorrectly in an inactive tab

The problem is I try to render an iframe with some another page inside of it.
The code looks a bit like this:
<div>
<iframe></iframe>
</div>
The outer div is abolutely positioned and has width and height. The iframe and div are created dynamically.
The problem is inner html tag's top, when it's rendered, positioned above the iframe top, making all inner content to render incorrectly. And it is positioned static and have no css rules that could possibly move it to the top. Or sometimes it could be only the inner content, in the body, or the upper rendered div inside of it, on the second nesting level, while the other elements on the above levels being rendered correctly.
This issue reproduces in IE only (I'm not sure if this is 11th version only) and only when you you have some other tab selected while it loads in another, inactive tab.
I also couldn't reproduce this issue in JSFiddle or anywhere else by having some similar constructs. And I can't give real code from the production enviroment.
I know, it is crazy to ask people to help with such lack of information, but I hope, someone had the same issue and knows how to solve it, because I'm really out of ideas.
Does anyone know how this issue could possibly be solved?

One div and its content on website loading last

UPDATE : With help from #TrueBlueAussie,
Yes, since I am not hiding the div, the code below is useless. So ignoring it (The script I used below) , is there a proper solution to my problem.
I have a website, http://frankvinyl.com/
It is a wordpress website. The featured image at the top, it loads after all the website is loaded.
I tried for different solutions for loading the DIV first, but its not working.
$(document).ready(function() {
$("#main1").show();
});
The problem is, the content of #main1 loads after all the website and content is loaded. I just want to load the div with the flow as the rest of the content.
Have been tweaking around but cannot find a appropriate solution.
You are waiting for the document to be ready in your jquery.
Try putting $("#main1").show(); before the document ready.
Don't know if it will work, it has been a long time :p

how to keep the document from autoscrolling when i add content?

i have a web app that has content like a facebook wall. when you click a button it adds more content at the end of the current content then should scroll to it. but currently if im scrolled any amount down, when i add the content the page suddenly scrolls down a seemingly random amount, and I have not added the scroll-to code yet. Why is the page auto scrolling? and how do i get it to stop?
The simplest way to do this without looking to far into what your code might be would just be offsetting what you add. So using some js find out the height the new content would add and then when you add it, scroll down that amount
While I'm not exactly sure why it's happening, I do know that you should be able to play around with CSS to avoid any scrolling while adding content to the page. If you set the body overflow to hidden PRIOR to adding the content, then setting it back to visible afterward, you should be able to prevent any scrolling from happening.
If you're using jQuery, something like this:
$(document.body).css('overflow','hidden');
// do your stuff here e.g.
for(var i=0;i<1000;i++) {
$(document.body).append('<div>some content to append here</div>');
}
$(document.body).css('overflow','visible');
NOTE: if it's a 3rd party library that's appending the content and they're using JS to scroll the page, this solution may not work.

Floating Images mess up Bootstrap Scrollspy

I have set up a page using bootstrap. (http://ethnoma.org/about.html) I have a sidebar navigation that is affixed (which is working great). I also am using bootstrap scrollspy on this navigation and all links in the navigation are within the same page (using ancors). Everything was working fine (even with a smooth-scroll plugin added). I simply had to call this script to force Scrollspy to refresh after all content is added to the page (which I placed in the <head>).
<script type="text/javascript">
// ScrollSpy
$(function () {
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
});
</script>
My client then asked me to add images to the page. I did so using bootstrap markup and css classes like the following:
<a class="pull-right pad5" href="#">
<img class="media-object img-polaroid" src="assets/img/about-001.jpg" alt="Partnership"/>
</a>
Which makes the parent "a" tag float to the right (in this case) and makes the img into a block element.
Problem is these floated images make the page longer than it was originally. Yet Scrollspy is still switching the active link at the same place. This causes scrollspy to activate links for content farther down the page than you currently are.
I am at a loss for how to force Scrollspy to take the floated images into account when calculating the location of the ID's the ancors link to. Do any of you have an idea how I could fix this. You can see the problem in effect at the following page http://ethnoma.org/about.html
I just came across this issue myself, so I thought I'd provide some explanation, and a possible solution, in case anyone else finds themselves in this bind.
First, scrollspy is working correctly. At the time that it computes the offsets of the various elements on the page, the images haven't loaded yet, so they have an effective height of 0. Later, when the images load, the browser determines their native dimensions, recalculates the page layout, and then repaints the page with the images. However, scrollspy is completely unaware that the page has been repainted, so it continues to use the stale offsets.
If you were to refresh scrollspy after all the images loaded, you'd find that the offsets would be correct. So, the question is how to do this.
One solution is to attach an onLoad event handler on every image, and then refresh scrollspy inside the handler. A simplified approach might look like this:
<script type="text/javascript">
function refreshScrollspy() {
$('[data-spy="scroll"]').each(function() {
$(this).scrollspy('refresh');
});
}
$(function() {
refreshScrollspy();
});
</script>
<img onload="refreshScrollspy()" src="assets/img/about-001.jpg" alt="Partnership"/>
Here's a working jsfiddle example. Note that that image's load handler has to be registered before the image actually loads. Otherwise, it won't get fired. That's why I'm using an inline event handler here. A more elegant solution is left to the reader.
Came across this issue myself while trying to use the Scrollspy from Bootstrap, and it seems that the script doesn't take into account of the image's height while calculating, thus causing the Scrollspy to be in accurate.
I believe this is due to that the image doesn't have a height set to it. By inspecting the page, I have found that the floating images I have included in the page had the height set to auto, and when I've set it to a specific value after media queries in the CSS, my Scrollspy was working perfectly.

if i'm using jquery library with some plugins should i place all at bottom , just before </body>

if i'm using jquery library with some plugins can i place all at bottom , just before </body> or it depends?
are there some situations where library+plugin should place in not at end of not bottom?
yes, place at the bottom of the page before </body> for fastest load time.
http://developer.yahoo.com/performance/rules.html#js_bottom
technically you could put it at the top of the page like Reigel is suggesting, but it locks up the whole page's execution, which is lame. the best idea would be to do it parallely, where you simply add the script as a DOM Node after the DOM has been loaded, if possible (if it doesn't mess up your page):
$( function(){ $( 'body' ).append( '<script src="plugin.js"></script>' ); } );
also, there is seriously a thread on this subject every week. search first.
As much as I know you should move JS from head to the body, as it does not delay of the page rendering itself, but the loading of other external scripts (css). I moved it to the bottom of the page, just to easily find it when looking at the source code..
The real reason behind putting everything at the bottom, right before the </body>, is so that your pages renders fast.
It is an optimization technique, that allows your page to show up in the browser before everything is loaded, if you put all your javascript at the top, the page will look blank until it has finishing loading the scripts, and the user will feel your site is very slow and probably leave.
So, it doesn't matter where you put it, it will still work, the difference is that you let your visitors, see some content and even click on a link even before all the javascript is loaded.
#Dan Beam: Placing your css at the bottom, might show the first render of the page in a weird way, because the CSS is not yet loaded.
<head>
<!--
.....
jquery should be at the top of all scripts... just the scripts
before you call
$(document).ready(function(){ .... });
-->
</head>
Document on how to setup.

Categories