I have a one page site with few sections.. Bootstrap template. One of the sections cause a bug after few refreshes of the site. There are no errors in the console.. nothing and I just don't know how to trace and find the problem.
This is the html part of this section
<section id="portfolio" class="section portfolio padding-large text-center" data-section-name="portfolio">
<div class="container margin-bottom-medium">
<div class="row margin-bottom-medium wow fadeInUp">
<h2> Portfolio </h2>
<div class="line main-bg"></div>
</div>
</div>
<div class="portfolio-wrapper margin-bottom-medium">
<div class="portfolio-item">
<div class="portfolio" style="margin-left:5px;"><a href="#" data-lightbox-gallery="portfolio"><img src="img/portfolio/release02-360x360.jpg" alt="">
<div class="portfolio-overlay hvr-rectangle-out">
<h2 class="margin-bottom-small">
<strong class="white-color bold-text" style="font-size: 20px;">Portfolio</strong>
</h2>
<div class="button">Check item</div>
</div>
</a>
</div>
</div>
</div>
<div class="button light margin-top-medium margin-bottom-medium hvr-grow"><i class="icon-reload"></i> Check All</div>
</section>
This is what I have in main.js from the portfolio section
var container = $('.portfolio-wrapper'); // portfoolio container
container.isotope({
itemSelector: '.portfolio-item',
animationEngine: 'best-available',
animationOptions: {
duration: 200,
queue: false
},
layoutMode: 'fitRows'
});
// Split columns for different size layout
function splitColumns() {
var windowWidth = $(window).width(),
columnNumber = 1; // default column number
if (windowWidth > 1200) {
columnNumber = 4;
} else if (windowWidth > 767) {
columnNumber = 3;
} else if (windowWidth > 600) {
columnNumber = 2;
}
return columnNumber;
}
// Set width for portfolio item
function setColumns() {
var windowWidth = $(window).width(),
columnNumber = splitColumns(),
postWidth = Math.floor(windowWidth / columnNumber);
container.find('.portfolio-item').each(function() {
$(this).css({
width: postWidth + 'px'
});
});
}
// initialize isotope
function initIsotope() {
setColumns();
container.isotope('layout');
}
container.imagesLoaded(function() {
setColumns();
});
$(window).bind('resize', function() {
initIsotope();
});
initIsotope();
Here are two images in normal state and when it's crashed. Normal behavior
Here is when it crashed
I really don't have an idea of what can be the issue since there are no errors at all. I think that may be a js problem but again I'm not sure.
Edit: Here are the JS which are included in footer in this order:
<script src="js/vendor/jquery-1.11.1.js"></script>
<script src="js/vendor/jquery-migrate-1.2.1.min.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/twitterFetcher_min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/appear.js"></script>
<script src="js/jquery.circliful.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/main.js"></script>
<script src="js/scrollify.js"></script>
Edit2: Wrapping like this?
// initialize isotope
function initIsotope() {
setColumns();
container.isotope('layout');
}
container.imagesLoaded(function() {
setColumns();
});
$(window).bind('resize', function() {
initIsotope();
});
//initIsotope();
setTimeout(function(){ initIsotope(); }, 0);
From having a look at similar masonry issues. I would suspect one of these two would solve your issue -
$(window).load(function(){
initIsotope()
});
// or
setTimeout(function(){ initIsotope(); }, 0);
Both these are masking the core issue - you should really be reading the section around unloaded media here - http://isotope.metafizzy.co/v1/docs/help.html
I would suggest your content is not fully loaded sometimes and isotope gets confused. Specifying the dimensions lets isotope render correctly despite the images not loading quickly enough. You need to follow this pattern so that slow connections work. Setting timeouts has its uses, but you should fix the underlying issue.
Related
As the title says, here is my snippet. Can someone tell me where I'm going wrong please?
var OnePageNav = function() {
$(".smoothscroll[href^='#'], #ftco-nav ul li a[href^='#'], .scroll-link li a[href^='#'], .scroll-button p a[href^='#']").on('click', function(e) {
e.preventDefault();
var hash = this.hash,
navToggler = $('.navbar-toggler');
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 700, 'easeInOutExpo', function() {
window.location.hash = hash;
});
if (navToggler.is(':visible')) {
navToggler.click();
}
});
$('body').on('activate.bs.scrollspy', function() {
console.log('nice');
})
};
OnePageNav();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p data-aos="fade-up" data-aos-delay="700">About Us</p>
<section class="ftco-section" id="section-about">
<div class="container">
<div class="row">
<div class="col-md-12 mb-5" data-aos="fade-up">
<h1 class="ftco-heading heading-thin mb-5">Founded in 2014, Wholesale Xbox Live has been providing digital keys and game codes to over to over 50 countries worldwide at very competitive prices.</h1>
</div>
</div>
</div>
</section>
I'm not sure where did you get the code and what was the intent (and probably there are more code there) but there are some issues with your code:
this.hash is undefined which means hash will be undefined.
It doesn't matter because when you call to e.preventDefault(); the hash will never changed.
The selector is not correct for the link you have in your example. Because the link has the class scroll-button but the selector contains .scroll-button p a[href^='#']. In your case it should be only .scroll-button.
So, to solve that issue, you can take the hash should be the href of the link. So, in your example, the link should lead to #section-about so you can grab the "hash" from the href attribute with attr() method.
var OnePageNav = function() {
$(".smoothscroll[href^='#'], #ftco-nav ul li a[href^='#'], .scroll-link li a[href^='#'], .scroll-button").on('click', function(e) {
e.preventDefault();
var hash = $(this).attr('href'),
navToggler = $('.navbar-toggler');
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 700, function() {
window.location.hash = '';
});
if (navToggler.is(':visible')) {
navToggler.click();
}
});
$('body').on('activate.bs.scrollspy', function() {
console.log('nice');
})
};
OnePageNav();
#section-about {
margin-top: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p data-aos="fade-up" data-aos-delay="700">About Us</p>
<section class="ftco-section" id="section-about">
<div class="container">
<div class="row">
<div class="col-md-12 mb-5" data-aos="fade-up">
<h1 class="ftco-heading heading-thin mb-5">Founded in 2014, Wholesale Xbox Live has been providing digital keys and game codes to over to over 50 countries worldwide at very competitive prices</h1>
</div>
</div>
</div>
</section>
https://output.jsbin.com/ceforal/7
Notice I removed the "easing" parameter because it doesn't including in the snippet.
Try This
$('a[href*="#"]').click(function (event) {
var href = $(this.hash);
if (href.length) {
event.preventDefault();
$('html, body').animate({
scrollTop: href.offset().top - 85
}, 750, function () {
if (history.pushState) {
history.pushState(null, null, '#' + href.attr('id'));
} else {
location.hash = href.attr('id');
}
});
}
});
.sec{
margin-top: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head></head>
<body id="home">
<!-- Navigation -->
<nav>About Us</nav>
<!-- Main Content -->
<main>
<h2 id="section1" class="sec">Founded in 2014, Wholesale Xbox Live has been providing digital keys and game codes to over to over 50 countries worldwide at very competitive prices</h2>
</main>
</body>
</html>
See Example link
A jQuery code snippet isn't working upon page load. It should replace 'frame--layout-vertical' with 'frame--layout-horizontal' and padding-bottom: 56.25% with padding-bottom: 100% when the screen width is greater than 641. By default, its frame--layout-vertical and padding-bottom: 56.25% (given the html below).
Its working perfectly when I resize the screen a bit after page-load. 'load' isn't working.
Here is the jQuery:
<script type="text/javascript">
$(window).on('load, resize', function frame() {
var viewportWidth = $(window).width();
if (viewportWidth < 641) {
$(".frame").removeClass("frame--layout-horizontal").addClass("frame--layout-vertical");
$(".image").css({'padding-bottom' : ''});
$(".image").css({'padding-bottom' : '56.25%'});
} else {
$(".frame").removeClass("frame--layout-vertical").addClass("frame--layout-horizontal");
$(".image").css({'padding-bottom' : ''});
$(".image").css({'padding-bottom': '100%'});
}
});
</script>
<div class="frame frame--policy frame--layout-vertical">
<div class="frame__hover-area">
<div class="frame__main-content">
<div class="frame__image-wrapper">
<div class="image image--placeholder frame__image wow fadeIn animated" data-wow-duration="1s" data-wow-delay="0s" style="padding-bottom: 56.25%; visibility: visible; animation-duration: 1s; animation-delay: 0s; animation-name: fadeIn;">
<img class="image__inner" src="http://redspark/upload/content/1/2017/03/11-58bd7aaf35385_thumbnail.jpg" role="presentation">
</div>
</div>
<div class="frame__content">
<span>
<a class="section-button section-button--policy" href="/content/blog/category/9/" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Sex</a>
<a class="article-component__link" href="http://redspark/content/blog/9/279-7-vegetarian-recipes-that-are-better-in-a-bowl.html">
<h2 class="headline headline--article">7 Vegetarian Recipes That Are Better in a Bowl</h2>
</a>
<div class="byline">
<a class="author-link" href="">author</a>
<time class="byline__date" datetime="2017-03-11T04:31:06.000Z" title="2017-03-11 04:31">15 days ago</time>
</div>
</span>
</div>
</div>
<div class="frame__border"></div>
<div class="frame__border frame__border--hover"></div>
</div>
</div>
EDIT: When I am using a auto load pagination. The my jQuery code isn't working since the browser isn't loaded. Can you please give me a suggestion? How can I call jQuery code with auto pagination?
Here is the autoloading snippet.
<script language="Javascript" type="text/javascript">
$(function () {
$('div.sponsor-articles.sponsor-section').infinitescroll({
debug: true,
navSelector: 'div.appPaginatorContainer', // selector for the paged navigation
nextSelector: 'div.appPaginatorContainer span.next a', // selector for the NEXT link (to page 2)
itemSelector: 'div.sponsor-articles div.frame', // selector for all items you'll retrieve
bufferPx: 40,
debug:true,
columnWidth: function (containerWidth) {
return containerWidth / 5;
},
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif',
msgText: 'Loading more posts'
}
});
});
</script>
You write wrong
$(window).on('load resize', function frame() {})
there should be no ,
You can use the document ready pattern.
EDIT: Added an initial call for page loaded.
function frame() {
var viewportWidth = $(window).width();
if (viewportWidth < 641) {
$(".frame").removeClass("frame--layout-horizontal").addClass("frame--layout-vertical");
$(".image").css({'padding-bottom' : ''});
$(".image").css({'padding-bottom' : '56.25%'});
} else {
$(".frame").removeClass("frame--layout-vertical").addClass("frame--layout-horizontal");
$(".image").css({'padding-bottom' : ''});
$(".image").css({'padding-bottom': '100%'});
}
$( document ).ready(function() {
frame();
$(window).on('resize', frame);
});
I'm trying to get this infinite load script to work in my project.
Here's my HTML:
<!-- Contents -->
<div id="page-container">
<div id="scroller">
<div id="page_1" class="pagina"></div>
<div id="page_2" class="pagina"></div>
<div id="page_3" class="pagina"></div>
<div id="page_4" class="pagina"></div>
<div id="page_5" class="pagina"></div>
<div id="page_6" class="pagina"></div>
</div>
</div>
<div id="pages-to-load">
<div id="page_7" class="pagina"></div>
...
<div id="page_25" class="pagina"></div>
</div>
And here's the script:
function scrollalert(){
var pages = document.getElementById("scroller").getElementsByTagName("div");
var currentPageId = pages[pages.length - 1];
//console.log("currentPageId is: "+currentPageId);
var scrollbox = document.querySelector('#page-container');
var scrolltop = $(window).scrollTop();
var scrollheight = scrollbox.scrollHeight;
var windowheight = $(window).height();
var scrolloffset=20;
console.log(scrolltop);
console.log(scrollheight);
console.log(windowheight);
console.log(scrollheight-(windowheight+scrolloffset));
if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) {
//fetch new items
console.log("loading more pages");
(function() {
alert('test');
var i;
var pagesToLoad = $("#pages-to-load > div").size();
for (i = 0; i < pagesToLoad; i++) {
console.log(pagesToLoad[i].id);
$.get(pagesToLoad[i].id, function(newitems){
alert('get new page');
$('#scroller').append(newitems);
updatestatus();
})
};
})();
};
}
Whatever I try, I can't seem to load and append my new pages. Also when scrolling down, my scrollTop and scrollHeight don't change. I'm sure I'm missing something obvious here. Also my pages-to-load is undefined?
Here is one infinite-scroll script of mine using JQuery which works:
Html:
<html>
<head>
<title>Scroll Troll Page</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="scrollbox">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</body>
<script type="text/javascript">
$(window).scroll(function () {
//- 10 = desired pixel distance from the bottom of the page while scrolling)
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
var box = $("#scrollbox");
//Just append some content here
box.html(box.html() + "<br /><br /><br /><br /><br /><br /><br />");
}
});
</script>
in Line:
box.html(box.html + "Place content to expand here");
You can add the content that should be added to your container when reaching the bottom of the page while scrolling.
Working jsFiddle:
http://jsfiddle.net/MdrJ4/3/
I think we should rely on intersectionObserver instead of the onScroll event. I have put together an article on medium here explaining the performance gains of the two approaches
you only need vanilla js
i have a problem for using endless scrolling, so i wrote a library and solved my problem. i think this library may help you for this problem.
use this library as easy way to implement infinite scrolling :
https://github.com/hamedtaheri32/infinite-scrolling
example :
<script>
$(document).ready(function(){
$(document).infiniteJscroll({
offset:0,
topOfPage:function(){
console.log('Scrolled to Page Top');
},
bottomOfPage:function(){
console.log('Scrolled to Page Bottom');
addContent();
},
pageInit:function(){
console.log('Initialize page');
addContent();
}
});
});
//This method used for simulate loading data from server. replace it with AJAX loading method.
function addContent() {
var c = '';
for (var i = 0; i < 10; i++) {
c += '<a class="box"></a>';
}
$("#post").append(c);
}
</script>
features :
detect page top
detect page bottom
can use offset for detect page bottom
have page initialize method
ability for mix with AJAX loading page
can use below script
window.onscroll = function (ev) {
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
let currentScrollHeight = window.innerHeight + window.scrollY;
if ((scrollHeight - currentScrollHeight) < 200) {
// your statement
}
};
full example in jsfiddle
This is what I did: (Please correct me if I'm wrong)
$(document).ready(() => {
var page = 1;
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
page++;
if (page == 2) {
$('#div2').removeClass('hide');
}
if (page == 3) {
$('#div3').removeClass('hide');
}
if (page == 4) {
$('#div4').removeClass('hide');
page = 1;
}
}
});
});
.page {
width: 100%;
background-color: black;
color: white;
height: 100vh;
border-top: 1px solid white;
}
.hide {
display: none;
}
body {
margin: 0px;
padding: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Infinite Scroll</title>
<link href='css/bootstrap.css' ref='stylesheet'>
</head>
<body>
<div id='div' class='page'>
<h1>Page 1</h1>
</div>
<div id='div2' class="page hide">
<h1>Page 2</h1>
</div>
<div id='div3' class="page hide">
<h1>Page 3</h1>
</div>
<div id='div4' class="page hide">
<h1>Page 4</h1>
</div>
<script src='js/jquery.min.js'></script>
<script src='js/popper.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script src='js/myjquery.js'></script>
</body>
</html>
// check if scrolling near to bootom of page , load more photos
window.addEventListener('scroll',()=>{
if(window.innerHeight+window.scrollY>=document.body.offsetHeight-100){
//your logic or function
}
});
So I'm trying to make an accordion of sorts for my projects section of my website and I've run into a very strange issue (or maybe I'm just really tired). The first click to expand a selection works fine, but when the header is clicked again to return to the original state the contents of the previously expanded header become hidden. Furthermore, upon clicking the same header again to expand any time after the first the containing border disappears.
To see my problem in action just go to my website:
http://cole.quinnchrzan.com/cc2
and see for yourself by clicking on the projects section.
If you just want to take a look at the code here it is:
$(document).ready(function() {
var sign = 1;
$('#projects > div:not(.header)').on('click', function() {
if (sign == 1) {
$(this).css('border-bottom', 'none');
$(this).children().slideDown(400);
$(this).siblings().slideUp(400);
}
else {
$(this).css('border-bottom', '1px solid black');
$(this).children().slideUp(400);
$(this).siblings().slideDown(400);
$(this).css({
'height': '29px',
'z-index': '2'
});
}
sign = sign*-1;
});
});
and the HTML:
<section id="projects">
<div class="header">Websites</div>
<div>Saia LTL, Inc.
<div></div>
</div>
<div>Insurance House</div>
<div>Scandinavian Collectors Club</div>
<div>Casey Sills Photography</div>
<div class="header">Personal Projects</div>
<div>cTV</div>
<div>PoE DPS calculator</div>
<div>tSlide</div>
</section>
I added some extra css 'height': '29px' 'z-index': '2' to try and make the affected heading show again but it just creates an empty div. Without this css the div has no height.
try this.
live demo here
HTML
<section id="projects">PROJECTS
<div class="header">Websites</div>
<div>Saia LTL, Inc.</div>
<div>Insurance House</div>
<div>Scandinavian Collectors Club</div>
<div>Casey Sills Photography</div>
<div class="header">Personal Projects</div>
<div>cTV</div>
<div>PoE DPS calculator</div>
<div>tSlide</div>
</section>
JavaScript
var sign = 1;
$('#projects > div:not(.header)').on('click', function() {
if (sign == 1) {
$(this).css('border-bottom', 'none');
$(this).children().slideDown(400);
$(this).siblings().slideUp(400);
}
else {
$(this).css('border-bottom', '1px solid black');
$(this).siblings().slideDown(400);
$(!$(this).children(":first")).slideUp(400);
}
sign = sign*-1;
});
------------------------------------------------------------------------------------------------------------------------------------
ALTERNATE SOLUTION
live demo here
HTML
<section id="projects">PROJECTS
<div class="header">Websites</div>
<div>Saia LTL, Inc.</div>
<div>Insurance House</div>
<div>Scandinavian Collectors Club</div>
<div>Casey Sills Photography</div>
<div class="header">Personal Projects</div>
<div>cTV</div>
<div>PoE DPS calculator</div>
<div>tSlide</div>
</section>
JavaScript
var sign = 1;
$('#projects > div:not(.header) > .ShowThis').on('click', function() {
if (sign == 1) {
$(this).css('border-bottom', 'none');
$(this).children().slideDown(400);
$(this).parent().siblings().slideUp(400);
}
else {
$(this).parent().css('border-bottom', '1px solid black');
$(this).parent().siblings().slideDown(400);
$(this).children().slideUp(400);
}
sign = sign*-1;
});
It was a silly mistake. I simply forgot to select only div children when hiding/showing so the a children were remaining hidden or something. In other words I changed this:
$(this).children()
to this:
$(this).children('div')
Thanks to pfried for the indication!
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
<script>
$(document).ready(function() {
$('div.header div.slide').css('display','none');
$('div.header').toggle(
function(){$('div.header').hide('fast'); $(this).show('slow'); $('div.slide').css('display','block');},
function(){$('div.slide').css('display','none'); $('div.header').show('fast');});
});
$(document).ready(function(){
var text = $('div.cont');
$('div.slide').toggle(
function(){$('div.slide').hide('fast'); $(this).show('slow'); $('div.cont').css('display','block');},
function(){ $('div.cont').css('display','none'); $('div.slide').show('fast');});
})
</script>
<style>
.off{display: none;}
.on{ display: block;}
div.cont{ display: none;}
.slide{ display:none;}
</style>
</head>
<body>
<div id="projects">
<div class="header">Websites
<div class='slide'>Saia LTL, Inc.
<div class='cont'>a;dasndiasfhnip</div>
</div>
<div class='slide'>Insurance House<div class='cont'>dasndiasfhnip</div></div>
<div class='slide'>Scandinavian Collectors Club<div class='cont'>dasndiasfhnip</div></div>
<div class='slide'>Casey Sills Photography<div class='cont'>dasndiasfhnip</div></div></div>
<div class="header">Personal Projects
<div class='slide'>cTV<div class='cont'>dasndiasfhnip</div></div>
<div class='slide'>PoE DPS calculator<div class='cont'>dasndiasfhnip</div></div>
<div class='slide'>tSlide<div class='cont'>dasndiasfhnip</div></div></div>
</div>
</body>
i would prefer this one just try it
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>$(document).ready(function() {
var sign = 1;
$('#projects > div.header').on('click', function() {
if (sign == 1) {
$(this).css('border-bottom', 'none');
$(this).children().slideDown(400);
$(this).siblings().slideUp(400);
}
else {
$(this).children().slideUp(400);
$(this).siblings().slideDown(400);
$(this).css({
'height': '29px',
'z-index': '2'
});
}
sign = sign*-1;
});
$('div.slide').click(function(){
$('div.cont').slideToggle('slow');
});
});
</script>
<style>
div.cont{ display: none;}
</style>
</head>
<body>
<div id="projects">
<div class="header">Websites</div>
<div class='slide'>Saia LTL, Inc.
<div class='cont'></div>
</div>
<div class='slide'>Insurance House<div class='cont'></div></div>
<div class='slide'>Scandinavian Collectors Club<div class='cont'></div></div>
<div class='slide'>Casey Sills Photography<div class='cont'></div></div>
<div class="header">Personal Projects</div>
<div class='slide'>cTV<div class='cont'></div></div>
<div class='slide'>PoE DPS calculator<div class='cont'></div></div>
<div class='slide'>tSlide<div class='cont'></div></div>
</div>
</body>
i just tried adding a class to siblings to denote them specifically ---- is it u are looking I'm happy or anything else in particular please comment me ----- thankyou
I have a problem with the scrollTop jquery animation.
It micro-jumps right before the animation. The heavier the content is, worst it is.
I don't understand why does it do that...
Below, a sample of my code. (just copy/paste on file, it's a standalone code, I hadn't good result on jsfiddle)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<style>
html,body{height:100%;width:100%}body{width:100%;height:100%}section{display:block;width:896px;margin:0 auto;padding:0 48px}article{content:' ';position:relative;display:block;top:0;width:100%;height:500px;padding:20% 0}#ghostPage{height:30px;padding:0}section div{text-align:center;width:100%;height:100%}#page1 div{background-color:red}#page2 div{background-color:blue}#page3 div{background-color:#A52A2A}#page4 div{background-color:green}#page5 div{background-color:#FF0}#page6 div{background-color:#000}#page7 div{background-color:orange}#page8 div{background-color:purple}#page_loader{text-align:center;position:fixed;top:0;left:0;background-color:white;width:100%;height:100%;z-index:9999}
</style>
<section class="clearfix">
<div id="page_loader" class="loader1"></div>
<article id="page1">
<div>Page1</div>
</article>
<article id="page2">
<div>Page2</div>
</article>
<article id="page3">
<div>Page3</div>
</article>
<article id="page4">
<div>Page4</div>
</article>
<article id="page5">
<div>Page5</div>
</article>
<article id="page6">
<div style="color: white">Page6</div>
</article>
<article id="page7">
<div>Page7</div>
</article>
<article id="page8">
<div>Page8</div>
</article>
<article id="ghostPage"></article>
</section>
</body>
<script type="text/javascript">
/*
**
** Sliding
**
*/
function goToByScroll(id) {
var speed = 1200;
var offset = $('#page'+id).offset();
if (offset) {
$('body').stop().animate({scrollTop: offset.top},{duration: speed, queue: false});
window.location = '#page'+id;
}
}
/*
**
** Get current page id
**
*/
function getPageId() {
var url = document.location.toString();
if (url.match('#')) {
var anchor = url.split('#')[1];
var anchorId = parseInt(anchor.split('page')[1]);
if (!isNaN(anchorId))
return anchorId;
}
return 1;
}
/*
**
** MouseWheel handling
**
*/
function handle(delta) {
if (delta > 0)
goToByScroll(getPageId() - 1);
else if (delta < 0)
goToByScroll(getPageId() + 1);
}
function wheel(event){
event.preventDefault();
event.stopPropagation();
var delta = 0;
if (event.wheelDelta)
delta = event.wheelDelta/120;
else if (event.detail)
delta = -event.detail/3;
if (delta)
handle(delta);
}
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
/*fades le loader mask out*/
$(document).ready(function() {
$('#page_loader').css('background-image', 'none');
$('#page_loader').css('background-color', 'rgba(255, 255, 255, 0)').animate('slow', function(){$('#page_loader').css('z-index', '-9999');});
});
</script>
</html>
The content is not that heavy so it's hard to see the bug. Firefox make it easier to see and quick scrolling too.
I'm waiting your good advises. :)
ok, the problem is this line: window.location = '#page' + id;
by changing the hash-tag the page jumps to the specified element, then the jQuery kicks in and animates to the same ID. I tried around a little and my final version is this: http://jsfiddle.net/h6CS4/6/
though it's not great...
try this plugin instead of re-inventing the wheel: http://flesler.blogspot.com/2007/10/jqueryscrollto.html