I am making a side scrolling blog post page for a client. After much trial and error I have ended up using JQuery to make the site scroll to the right if it's large or scroll up and down if it's mobile. Only problem is when the document loads initially in a non-mobile browser it is 40,000px wide. Here is the code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script>
(function($){
var windowH = $(window).height();
var windowW = $(window).width();
$(window).on('load', function(){
if(windowW >= windowH) {//this is horizontal
var allImgWidth = 0;
$('article img').each(function(){
allImgWidth += $(this).width() + 10 ;//10 is padding
});
$('html, body').width(allImgWidth); //makes page width of all images and padding that I have set elsewhere
$('article img').height(windowH - 150);//this accounts for header height and margin height from top
// $('article img').css('margin-left', '10px');
} else {
$('article img').width(windowW);//if window width is not greater than window height, the images are the width of the original window
}
if(windowW >= windowH) {
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.documentElement.scrollLeft -= (delta*80); // Multiplied by 80 (increases speed of scroll)
document.body.scrollLeft -= (delta*80); // Multiplied by 80
e.preventDefault();
}
if (window.addEventListener) {
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
window.attachEvent("onmousewheel", scrollHorizontally);
}
})();//function scrollHorizontally ends
} else {
}//else ends
});//onload ends
$(window).resize(function(){
var windowH = $(window).height();
var windowW = $(window).width();
if(windowW >= windowH) { //horizontal
var allImgWidth = 0;
$('article img').each(function(){
allImgWidth += $(this).width() + 11 ;
});
$('html, body').width(allImgWidth);
$('article img').height(windowH - 150);
$('article img').css('width','auto');//dynamically resizes pics
$('article img').css('margin-left', '9px');
} else { //vertical
$('html, body').width(windowW);
$('article img').width(windowW);
$('article img').css('height','auto');
$('article img').css('margin-top', '10px');
}
if(windowH >= windowW) {
$(window).on('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
} else {
// scroll down
}
});
} else {
$(window).off('mousewheel DOMMouseScroll');
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.documentElement.scrollLeft -= (delta*80); // Multiplied by 80 (increases speed of scroll)
document.body.scrollLeft -= (delta*80); // Multiplied by 80
e.preventDefault();
}
if (window.addEventListener) {
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
window.attachEvent("onmousewheel", scrollHorizontally);
}
})();//function scrollHorizontally ends
}
});//window resize ends
})(jQuery);//full function ends
</script>
And then the body of the page itself...
<div id="page-wrap">
<article class="post">
<img src="assets/images/tumblr_nqvdnry3Du1ttpk3mo1_1280.jpg">
<p>This is a caption!</p>
</article>
<article class="post">
<img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo3_1280.jpg">
<p>This is a caption!</p>
</article>
<article class="post">
<img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo2_1280.jpg">
<p>This is a caption</p>
</article>
<article class="post">
<img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo1_1280.jpg">
<p>this is a caption</p>
</article>
<article class="post">
<img src="pictures/photo3.jpg">
</article>
<article class="post">
<img src="pictures/photo4.jpg">
</article>
<article class="post">
<img src="pictures/photo5.jpg">
</article>
<article class="post">
<img src="pictures/photo6.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo1.jpg">
</article>
</div>
When the page is resized, it works fine. And onload is fine for small screens. It is only in the large screen when the page initially loads that it is this big. Thoughts?
You're adding all of the image widths together with this code:
$('article img').each(function(){
allImgWidth += $(this).width() + 11 ;
});
and then setting your html/body width to that number.
So, if the width of the page is 40,000px then that is what allImgWidth equals. Check to make sure there are not other images on the page that are being included with the $('article img') selector.
Related
I've finally figured out how to get my first logo to fade out to reveal the second logo on scroll down. The idea is that as the user begins to scroll down, the first logo will fade out while the second logo fades in. I'm wanting a seamless, fluid transition from one logo to the other. But what I have now is the first logo slowing fading out and then the second logo just appearing without a gradual fade-in ... though I including what I believed to be the correct code for the proper fade-in effect. What have I done wrong? Thanks in advance for your help.
<div id="nav" class="navbar">
<div id="full_logo"> <img src="images/logo_6_small.png" alt="full_logo" /></div>
</div>
<header>
<div id="nav" class="navbar">
<div id="nav_left">
HOME
SERVICES
PORTFOLIO
</div>
<a href="index.html" id="logo" class="Claire_logo">
<img src="images/logo_6_small.png" alt="logo2" id="logo_Claire" class="logo_main" style="display:none" />
<img src="images/logo_bluebird_90_cc.png" alt="logo1" id="logo_Claire_blue" class="logo" />
</a>
<div id="nav_right">
BLOG
ABOUT
GET IN TOUCH
</div>
</div>
</header>
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$('#logo_Claire_blue').fadeOut(800, function() {
$('#logo_Claire_blue').replaceWith('<div id="full_logo"><img src="images/logo_6_small.png" alt="full_logo"/></div>').fadeIn(800);
});
}
});
});
Why are you replacing HTML when you already have your logo in the code? Replace the code of the if (scroll > 0) with this:
$('#logo_Claire_blue').fadeOut(800);
setTimeout(function() {
$('#logo_Claire').fadeIn(800);
}, 600)
First it fades the displayed logo, then, with a delay set by setTimeout, it triggers the fade in of the second one. For better transition lower the setTimeout to something like 500, but then, you need to play with the logos positions in the DOM in order for the new to be over the old one and not next to it or on top (position: relative, position: absolute)
You can use .eq() to change between logos
Use .stop() to stop repeat the animation.. Try to remove it to see
You change between eq(0) and eq(1) up to your need
Example 1
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$('a.Claire_logo img').eq(1).stop().fadeOut(200 , function(){
$('a.Claire_logo img').eq(0).stop().fadeIn(200);
});
}else{
$('a.Claire_logo img').eq(0).stop().fadeOut(200 , function(){
$('a.Claire_logo img').eq(1).stop().fadeIn(200);
});
}
});
});
header{
position : fixed;
top : 0;
}
main{
height : 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div id="nav" class="navbar">
<div id="nav_left">
HOME
SERVICES
PORTFOLIO
</div>
<a href="index.html" id="logo" class="Claire_logo">
<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo2" id="logo_Claire" class="logo_main" style = "display : none;"/>
<img src="https://via.placeholder.com/100x60?text=Visit+Blogging.com+Now" alt="logo1" id="logo_Claire_blue" class="logo" />
</a>
<div id="nav_right">
BLOG
ABOUT
GET IN TOUCH
</div>
</div>
</header>
<main></main>
Example 2 using attr("src")
You can use only one <img> tag and change src attribute of it
Use .stop() to stop repeat the animation.. Try to remove it to see
$(document).ready(function() {
var Check = false;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > 0 && Check == false){
Check = true;
$('a.Claire_logo > img').stop().fadeOut(function(){
$(this).attr("src" ,"https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now").fadeIn(300);
});
}else if(scroll <= 0){
Check = false;
$('a.Claire_logo > img').stop().fadeOut(function(){
$(this).attr("src" ,"https://via.placeholder.com/100x60?text=Visit+Blogging.com+Now").fadeIn(300);
});
}
});
});
header{
position : fixed;
top : 0;
}
main{
height : 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div id="nav" class="navbar">
<div id="nav_left">
HOME
SERVICES
PORTFOLIO
</div>
<a href="index.html" id="logo" class="Claire_logo">
<img src="https://via.placeholder.com/100x60?text=Visit+Blogging.com+Now" alt="logo2" id="logo_Claire" class="logo_main"/>
</a>
<div id="nav_right">
BLOG
ABOUT
GET IN TOUCH
</div>
</div>
</header>
<main></main>
Example 3 You need to work around the css style to avoid the delay between both images places
$(document).ready(function() {
var Check = false;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0 && Check == false) {
Check = true;
$('a.Claire_logo img').eq(1).stop().fadeOut(800);
$('a.Claire_logo img').eq(0).stop().fadeIn(800);
}else if(scroll <= 0 && Check == true){
Check = false;
$('a.Claire_logo img').eq(0).stop().fadeOut(800);
$('a.Claire_logo img').eq(1).stop().fadeIn(800);
}
});
});
header{
position : fixed;
top : 0;
}
main{
height : 2000px;
}
.Claire_logo{
position : relative;
height : 60px;
display : block;
}
.Claire_logo > img{
position: absolute;
top : 0;
left : 0;
height : 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div id="nav" class="navbar">
<div id="nav_left">
HOME
SERVICES
PORTFOLIO
</div>
<a href="index.html" id="logo" class="Claire_logo">
<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo2" id="logo_Claire" class="logo_main" style="display : none;"/>
<img src="https://via.placeholder.com/100x60?text=Visit+Blogging.com+Now" alt="logo1" id="logo_Claire_blue" class="logo" />
</a>
<div id="nav_right">
BLOG
ABOUT
GET IN TOUCH
</div>
</div>
</header>
<main></main>
I'm trying to make a website scroll divs. When a visiter wants to scroll it should automatically go to the next or previous div.
Below you can see how my html looks like.
<body>
<header>
</header>
<div id="content">
<div id="contentv1">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv3">
</div>
</div>
</body>
I'm trying it with the following code:
(function() {
var scrollTo = function(element) {
$('html, body').animate({
scrollTop: element.offset().top
}, 500);
}
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if ($current.index() != $('#content > div').length - 1) {
$current.removeClass('current').next().addClass('current');
scrollTo($current.next());
}
});
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if (!$current.index() == 0) {
$current.removeClass('current').prev().addClass('current');
scrollTo($current.prev());
}
});
})();
The header has an height of 10% and sticks to the top. The content divs have a height of 90%. So when scrolled the top of the content divs should aline with the bottom of the header.
Can anyone help me into the right direction?
I am using jQuery code from http://www.dconnell.co.uk/blog/index.php/2012/03/12/scroll-to-any-element-using-jquery/ to scroll to a Div within a Wrapper.
The code provided animates the body (Scrolls the body down onClick) I am trying to animate the scroll inside a div, not body.
My code below:
HTML:
Scroll Down
<div class="Wrapper" style="height:400px; width:600px; overflow:hidden;">
<div id="Div1" style="height:200px; width:600px;"></div>
<div id="Div2" style="height:200px; width:600px;"></div>
<div id="Div3" style="height:200px; width:600px;"></div>
</div>
jQuery
function scrollToElement(selector, time, verticalOffset) {
time = typeof(time) != 'undefined' ? time : 1000;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('html, body').animate({
scrollTop: offsetTop
}, time);
}
$(document).ready(function() {
$('a.ScrollDown').click(function (e) {
e.preventDefault();
scrollToElement('#Div3');
});
});
I know it has something to do with $('html, body').animate({ }) but im not sure how to change it.
Thanks
JSFiddle http://jsfiddle.net/3Cp5w/1/
Animate the wrapper instead of the body:
$('.Wrapper').animate({
scrollTop: offsetTop
}, time);
http://jsfiddle.net/robbyn/qU6F7/1/
Try the following Code
<body>
Scroll Down
<div class="Wrapper" style="height:200px; width:600px; overflow:scroll;">
<div id="Div1" style="height:200px; width:600px;background-color:red;" ></div>
<div id="Div2" style="height:200px; width:600px;background-color:green;" ></div>
<div id="Div3" style="height:200px; width:600px;background-color:yellow;" ></div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function scrollToElement(selector, time, verticalOffset) {
time = typeof(time) != 'undefined' ? time : 1000;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('.Wrapper').animate({
scrollTop: offsetTop
}, time);
}
$(document).ready(function() {
$('a.ScrollDown').click(function (e) {
e.preventDefault();
scrollToElement('#Div3');
});
});
</script>
i think you want div3 to scroll down inside Wrapper
you need to first specify the height of Wrapper to a small number so that scroll is visible
&
as you guessed change html,body to .Wrapper
do ask for help
Add the jQuery updated file reference
<script src="http://code.jquery.com/jquery-1.10.2.js" />
First time posting, please bear with me.
I'm trying to create a slideshow that:
assigns a z-index to each <section>
sets all slides with an opacity of 0.7
assigns the currently top slide an opacity of 1
Here is the HTML:
<div id="slides">
<section class="slide">
<article>
<h1>6</h1>
</article>
</section>
<section class="slide">
<article>
<h1>5</h1>
</article>
</section>
<section class="slide">
<article>
<h1>4</h1>
</article>
</section>
<section class="slide">
<article>
<h1>3</h1>
</article>
</section>
<section class="slide">
<article>
<h1>2</h1>
</article>
</section>
<section class="slide">
<article>
<h1>1</h1>
</article>
</section>
</div>
<div id="prev">
←
</div>
<div id="next">
→
</div>
Here is the JS so far:
$(document).ready(function() {
var z = 0;
var inAnimation = false;
$('section.slide').each(function() {
z++;
$(this).css('z-index', z);
});
function swapFirstLast(isFirst) {
if(inAnimation) return false;
else inAnimation = true;
var processZindex, direction, newZindex, inDeCrease;
if(isFirst) {
processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1;
} else {
processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1;
}
$('section.slide').each(function() {
if($(this).css('z-index') == processZindex) {
$(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() {
$(this).css('z-index', newZindex)
.animate({ 'top' : '0' }, 'slow', function() {
inAnimation = false;
});
});
} else {
$(this).animate({ 'top' : '0' }, 'slow', function() {
$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
});
}
return false;
}
$('#next a').click(function() {
return swapFirstLast(true);
});
$('#prev a').click(function() {
return swapFirstLast(false);
});
});
});
I thought I could insert the following code into the script:
if($(this).css('z-index') == processZindex) {
$(this).css('opacity', 1);
} else {
$(this).css('opacity', 0.7);
}
The problem is I can't seem to get the opacity at 1 to keep up with the z-index value of 6. So I thought about writing $(this).css('z-index') == processZindex as $(this).css('z-index') != 6 but the issue occurs.
Is there a simpler way to code this?
I just used the ordering of elements instead of z-index, using appendTo,preprendTo:
http://jsfiddle.net/jtbowden/RAT8N/1/
I couldn't decide if one function or separate functions was better. Here is two separate functions:
http://jsfiddle.net/jtbowden/5LJcA/3/
Is that what you are going for?
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