How did they accomplish this? Have you guys seen: http://www.skittles.com? The site never ends!
Well, here's one way of doing it:
$(document).ready(
function(){
$(window).scroll(
function(){
if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
$('div').clone().appendTo('body');
}
}
);
}
);
With the requisite JS Fiddle demo.
Bear in mind that any interactive content that's cloned/appended/inserted dynamically will require some kind live() or delegate() for jQuery to interact with them.
That said, there are caveats:
Infinite scrolling isn't necessarily a pleasant navigation aid, particularly if the user is likely to want to view some of the content half way down an infinite page.
There comes a point at which a browser will crash or become sluggish/unresponsive due to the sheer volume of content it's required to maintain in memory.
Related
After combing the forums and how-to guides, I have found a solution to a Smooth Scrolling problem that I had, but I'd like to ask some kind folks if the solution below will work for me before I try it, or if I'm missing something important.
I'm working on a live site and I don't want to create problems or break anything, so I'd like to be sure before I add the code below. I also know nothing about java or coding, so please forgive me if I don't use the right terms.
I want to enable smooth scrolling to an anchor on another page.
e.g. from my home page "domain.com/home", click the link, then
load the new page, e.g. "domain.com/contact"
and on loading the new page, smoothly scroll to the anchor, "domain.com/contact#section1".
Currently, it simply jumps, and I'd like to know if the steps below will enable the smooth scrolling.
I'm planning to:
Add the following codes to the website template's '' section (in the Joomla admin panel):
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
I'm unsure whether this is necessary because I already use jQuery with some components, is it unnecessary to load jQuery again? Or will it not hurt to add this code regardless?
Then add this code to the same section in the template:
<script type="text/javascript" >
$('html').css({
display: 'none'
});
$(document).ready(function() {
var hashURL = location.hash;
if (hashURL != "" && hashURL.length > 1) {
$(window).scrollTop(0);
$('html').css({
display: 'block'
});
smoothScrollTo(hashURL);
} else {
$('html').css({
display: 'block'
});
}
});
function smoothScrollTo(anchor) {
var duration = 5000; //time
var targetY = $(anchor).offset().top;
$("html, body").animate({
"scrollTop": targetY
}, duration, 'easeInOutCubic');
}
</script>
As far as I know, this will enable the smooth scrolling, but I haven't added anything like 'smoothscroll.js' (which I've read a lot about) -- will that also need adding in the '' (after I upload it to the server), or is that included in the jQuery library?
I'm sorry if this seems very naive, I'm learning as I go. Thank you very much in advance to anyone who provides some feedback on this, I am truly grateful for your time and patience.
Best,
Ben
Firstly, Joomla already loads jQuery, so you do not need to load it again. I would either use a Joomla extension (there is a free one here) or use a smooth scroll library (like this one). Assuming you choose to do the latter, you just need to put the link in your Joomla template to the JS file and initialise it (this is all explained on the Github project page).
Both options are simple but if you don't have much experience in coding then the extension is probably the best way to go.
EDIT: To use smoothscroll on page load with the GitHub library, you will need to change your last function to:
function smoothScrollTo(anchor) {
var scroll = new SmoothScroll();
scroll.animateScroll(anchor);
}
Does anyone have a suggestion on how to extend a site automatically?
For example the site "9gag.com" also known as 9fag. It loads a part into the browser, but as you scroll, the site extends itself, without the need to click on "the next site".
I woule like to use this in on a shop I created.
For example here:
http://saasil.de/wohnraumleuchten/deckenleuchten/
When you scroll down, you see that you can choose to go to the 2nd site...
It would be great if someone could just point me to the correct technology to use here.
As someone mentioned above in comments, you are searching for infinite-scroll. There is plenty of jQuery plugins which can help you achieve desired effect. Of, course if you are loading content dinamicaly, you can fetch your data with AJAX.
Similar technology is used at Twitter, Pinterest, etc, and of course on 9gag.
You can see explanation and working demo at http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin
Have a look at this question on SO. In this example, the page will extend 100px before reaching the bottom of the page
function loadMore()
{
console.log("More loaded");
// load your content (e.g. via ajax)
$("body").append("<div>");
$(window).bind('scroll', bindScroll);
}
function bindScroll()
{
if($(window).scrollTop() + $(window).height() > $(document).height() - 100)
{
$(window).unbind('scroll');
loadMore();
}
}
$(window).scroll(bindScroll);
thanks to JoeFletch!
I've been attempting to make an infinite (well semi-infinite) scroll that feeds itself from hard-coded divs (because I don't know any back-end languages yet). My research has turned up a ton of great jQuery for infinite scrolls, but they are all meant to be used with a database, not hard-coded content.
What I'm trying to achieve, ultimately, is an infinite scroll that starts by loading X div into the DOM, and as the user reaches the bottom of the page, loads X more divs, and repeats until no more divs are left to load.
Do any of you know of some good or relevant scripts or any fiddles that may help me? Part of my issue is that I'm still in that learning curve of JS; I often understand what's going on when I look at a script but I still have a hard time writing my own from scratch.
Any help or direction is appreciated. Thanks in advance!!
Based on the code here: Alert using Jquery when Scroll to end of Page
Create a new <div> element when you reach the bottom of the page
$(window).scroll(function() {
if (document.documentElement.clientHeight + $(document).scrollTop() >= document.body.offsetHeight)
{
$('body').append('<div></div>');
}
});
Your HTML needs to be stored somewhere and if you have enough of it to think about infinite scrolling you probably don’t want to load it all with the initial request, so let’s say each “post” is stored in an individual HTML file on your server: /posts/1.html. And you want to append those to a div in your main document: <div id="posts"></div>.
You need a method to download a given post and append it to your div:
function loadPost (id) {
$.get('/posts/'+id+'.html').done(function (html) {
$('#posts').append(html);
});
}
Now you need a way to trigger loadPost() when you scroll to the bottom of the page. This example uses jQuery Waypoints to call a handler function when the bottom of the div comes into view:
var currentPost = 1;
$('#posts').waypoint({
offset: 'bottom-in-view',
handler: function () {
loadPost(currentPost++);
}
});
I'm working with the Foundation Framework and I was wondering if there are any callbacks or functions that will deliver jQuery or javascript based on the current screen size or media query.
For example
if ('screen_size' =< 'small') {
// do some jquery
}
Not sure if this is possible.
Any Ideas?
I am not sure if there are any mixins for it, but you can manually load a script via jquery, based on the window width (maybe attach it to a resize event as well as to onload?)
if( $(window).width() <= 1024 ){
$.getScript("test.js", function(){
alert("Running test.js");
});
}
I really love the jRespond plugin. Very useful for this sort of thing.
https://github.com/ten1seven/jRespond
I am using Mootools extensively for a site which I am developing. But recently I noticed a problem that the animations slow down alot when I zoom (using the browsers Zoom In) in into the site. What could be a possible reason for this problem ? Or is this problem inherit in Mootools itself. This happens in Chrome 6.0.472 as well as Firefox 3.6.8.
Thanks,
Nitin
many things are wrong here with regards to speed optimisations.
lets take a look at this mouseover code that seems to slow down:
this.childNodes.item(1).style.left="0px";
this.getElements('div').setStyles({'opacity':'1'});
this.getElements('div').set('morph', {duration:'normal',transition: 'sine:out'});
this.getElements('span').set('morph', {duration:'normal',transition: 'sine:out'});
this.getElements('div').morph({'left':'-28px'});
this.getElements('span').morph({'left':'-30px','color':'#FFF'});
obviously this will work as it does but it's so very wrong i don't know where to begin.
the idea is to abstract and setup the repetitive tasks so they are done as a one off.
consider line by line the code above:
this.childNodes.item(1).style.left="0px";
this is wrong for a mootools app anyway, it would need to be this.getFirst().setStyle("left", 0);
the this.getFirst() is a lookup, it should be cached - although that's not a slow one.
then comes the bad part.
you select all child divs 3 times and all spans twice, where NO SELECTION should be applicable. VERY EXPENSIVE
you reset the Fx.morph options every mouseover event where there are no changes (although you seem to have a different duration for mouseenter and mouseleave - this is expensive)
consider this code:
[document.id("menu1"), document.id("menu2")].each(function(el) {
// use element storage to save lookups during events
el.store("first", el.getFirst());
el.store("divs", el.getElements("div"));
el.store("spans", el.getElements("span"));
// store the fx.morph options once and for all, no need to do so
// on every event unless you are changing something
el.retrieve("divs").set("morph", {
duration: 'normal',
transition: 'sine:out',
link: 'cancel'
});
el.retrieve("spans").set("morph", {
duration: 'normal',
transition: 'sine:out',
link: 'cancel'
});
// add the events
el.addEvents({
mouseenter: function(e) {
// retrieve the saved selectors from storage and do effects
this.retrieve("first").setStyle("left", 0);
this.retrieve("divs").morph({
"left": -28
});
this.retrieve("spans").morph({
'left': '-30px',
'color': '#FFF'
});
}
});
});
it will save a lot of processing on the events.
similarly, there are plenty of places where you are not really using the mootools api.
document.getElementById(curr).style.cursor="pointer";
$(this).removeEvents -> no need for $, this is not jquery.
document.getElementById("lightbox").style.visibility="hidden";
m=setTimeout('gallery()',5000); --> use the mootools var timer = (function() { ... }).delay(5000);, don't use strings with setTimeout/interval as it forces eval and reflows but pure anon functions
etc etc.
you really can make a day out of refactoring all this and making it 'nice' but it's going to be worth it.
also, learn about chaining
$("ribbon").set('morph', {duration:'long',transition: 'bounce:out'});
$("ribbon").morph({'top':'-10px'});
$("ribbon").addEvents({
this is calling up a selector 3 times. instead you can:
store it. var ribbon = $("ribbon"); ribbon.set...
chain it. $("ribbon").set("morph", {duration: 500}).morph({top:-10}).addEvents() - mootools element methods tend to return the original element so you can take the response of the last function and apply more to it.
1 is better for readibility, 2 is faster to do.
also. you have way too many global variables which makes your scope chain lookups more expensive, this will affect many call ups and places. try to namespace properly, if you need to access real global vars from functions and closures, use window.varname etc etc.
Another possible improvement here would be the use of event delegation (event bubbling will cause events to fire up the dom tree to the parents, mootools has an api to deal with it so you can add singular events to parent elements and not have to attach nnn events to all children) - look it up.
P.S. please don't take this in the wrong way - it's not meant to rubbish your work and it's just some constructive (i hope) advice that can help you bring it to the next level. good luck :)
I haven't seen any specific code in MooTools or any other library that checks if browser is zooming during animation, so I think that animation slows down, since browser using more CPU for computing zooming process.