Fixing Smooth Scroll Issue - javascript

A simplified version of what I'm working with: http://jimmehrabbitdesigns.com/scroll.html
I got the scrolling to work, however, it doesn't transition from section to section.
Example: if you click NUMBER 3, it will scroll to section THREE. From there, this is what happens.
- Clicking NUMBER 2 takes you back to section ONE.
- Clicking NUMBER 4 takes you to section TWO.
- Clicking NUMBER 3 again also takes you back to section ONE.
This is the same for all the sections.
jQuery code used:
$('a[href*="#"]:not([href="#"])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('#right').animate({ scrollTop: target.offset().top }, 1000);
return false;
}
}
});

I've changed your code a bit. It's more simple and it helps you understanding what is happening. I hope it helps you:
/*
1. I've changed the position fixed to position absolute on the #right element, the scroll won't work with position: fixed set
2. Added the on click event on the anchor tag this way I'm getting the href of the current clicked anchor by using $(this) and attr() method
3. Added the e.preventdefault() to prevent the default action of the anchor element
4. Doing the smooth scroll using the href got at 2 as id selector
*/
The jQuery code looks like this:
$('#left a').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top
}, 1000);
});
You can see the full working snippet by clicking the below button:
$('#left a').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top
}, 1000);
});
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
}
#left {
width: 100%;
height: 100%;
background-color: #FFFFFF;
position: fixed;
top: 0;
left: 0;
}
#right {
width: 50%;
height: 100%;
background-color: #0000FF;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
#one {
height: 100%;
background-color: #FF0000;
}
#two {
height: 100%;
background-color: #00FF00;
}
#three {
height: 100%;
background-color: #FFFF00;
}
#four {
height: 100%;
background-color: #00FFFF;
}
#five {
height: 100%;
background-color: #FF00FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div id="left">
NUMBER 1
<br>
NUMBER 2
<br>
NUMBER 3
<br>
NUMBER 4
<br>
NUMBER 5
</div>
<div id="right">
<div id="one" width="100%" height="100%">ONE</div>
<div id="two" width="100%" height="100%">TWO</div>
<div id="three" width="100%" height="100%">THREE</div>
<div id="four" width="100%" height="100%">FOUR</div>
<div id="five" width="100%" height="100%">FIVE</div>
</div>
</div>
Also you can check this JSFIDDLE if you want.

Related

JQuery ScrollTop doesn't scroll to the right item

I am trying to scroll to an item inside a div container. The scroll to top function works however it seems to overshoot the item.
Javascript
<script>
$(document).ready(function () {
var container = $('#directory'),
scrollTo = $('.highlight_bg');
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
}, 2000);
});
</script>
HTML:
<div id="directory" class="directory" style="height: calc(100% - 111px)">
<div class="directoryitem"></div>
<div class="directoryitem"></div>
<div class="directoryitem highlight_bg"></div>
<div class="directoryitem"></div>
</div>
So the end is to scroll to the div item with class name highlight_bg
Not sure where am going wrong?
Your Javascript code is actually working. So maybe a CSS issue ?
$(document).ready(function () {
var container = $('#directory'),
scrollTo = $('.highlight_bg');
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
}, 2000);
});
/* DEMO STYLISING PART */
.directoryitem {
display: block;
height: 90%;
width: 90%;
background-color: #CCC;
border: 5px solid gray;
}
.highlight_bg {
background-color: green;
}
/* SCROLL PART */
html, body {
height: 100%;
width: 100%;
}
.directory {
position: relative;
height: 100%;
width: 100%;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="directory" class="directory" style="height: calc(100% - 111px)">
<div class="directoryitem"></div>
<div class="directoryitem"></div>
<div class="directoryitem highlight_bg"></div>
<div class="directoryitem"></div>
</div>

change only the background-image smooth without text in front of it

I have a website, where I want to change between images in the background very smoothly. This is my actual javaScript-code for it:
var bg=[
'images/best.jpg',
'images/61182.jpg',
'images/bg.jpg'
];
$('._container-1').css('background-image','url('+bg[2]+')');
window.setInterval(
function(){
img=bg.shift();bg.push(img);
document.getElementsByClassName('_container-1')[0].style.backgroundImage='url('+img+')';
},
10000
);
Now, I want to change the images very slowly. I have tried a lot with jQuery-fadeIn/fadeOut-methods like this:
window.setInterval(
function(){
img=bg.shift();
bg.push(img);
$('._container-1').fadeOut(600, function() {
$('._container-1').css('background-image','url('+img+')');
$('._container-1').fadeIn(600);
});
},
17000
);
The problem is, that there are buttons and text in the container and they changes with the images. I want that the text and buttons are in the front all the time, only the background should fadeIn/fadeOut. My english is not perfect, I hope you understand my problem.
Can somebody help me please?
nina_berlini
I have uses 2 elements as background to achieve the effect. Also check demo on https://jsfiddle.net/n380u3cy/1/
HTML:
<div class="container">
<div class="background"></div>
<div class="background"></div>
<button>
Test button
</button>
</div>
CSS:
.container { position: relative; line-height: 100px; }
.container > .background,
.container > .background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: contain; z-index: 0; }
.container > *:not(.background) { position: relative; z-index: 1; }
Javascript:
var bg=[
'images/best.jpg',
'images/61182.jpg',
'images/bg.jpg'
];
var Transition = 1000;
$('.background').css('background-image','url('+bg[bg.length - 1]+')');
window.setInterval(
function() {
img=bg.shift();
bg.push(img);
var $Backgrounds = $('.background');
$Backgrounds.eq(1).hide(0).css({
'background-image': 'url('+img+')'
}).fadeIn(Transition * .9);
$Backgrounds.eq(0).show(0).fadeOut(Transition, function(){
$(this).show(0).css({
'background-image': 'url('+img+')'
});
$Backgrounds.eq(1).hide(0);
});
}, 2000
);
Make a wrapper and include both the background div and button div inside it with position absolute and the following CSS styles. This way you can control and animate the background separately from the buttons.
var bg = [
'https://placehold.it/1001x201',
'https://placehold.it/1002x202',
'https://placehold.it/1003x203'
];
$('._container-1').css('background-image', 'url(' + bg[2] + ')');
window.setInterval(
function() {
img = bg.shift();
bg.push(img);
document.getElementsByClassName('_container-1')[0].style.backgroundImage = 'url(' + img + ')';
},
10000
);
window.setInterval(
function() {
img = bg.shift();
bg.push(img);
$('._container-1').fadeOut(600, function() {
$('._container-1').css('background-image', 'url(' + img + ')');
$('._container-1').fadeIn(600);
});
},
17000
);
.wrapper {
position: relative;
width: 100%;
height: 200px;
}
._container-1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover;
background-position: top center;
}
.buttons {
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
left: 0;
}
button {
background: red;
padding: 5px 10px;
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="_container-1"></div>
<div class="buttons">
<button type="button">
Button 1
</button>
<button type="button">
Button 2
</button>
</div>
</div>
thank you for your great solution. I am not well familiar with jQuery and have a question about your code:
$Backgrounds.eq(1).hide(0).css({
'background-image': 'url('+img+')'
}).fadeIn(Transition * .9);
means it that the second "background-div" first hides, then get a new background-image and after that it ist fadeIn? And means hide(0) that it immediately hides?
nina_berlini

Load on scrolled div

I'm trying to load on the content div at a specific point without any animation.
http://jsfiddle.net/utbeuebw/
HTML
<div class="fixed-block">
Fixed Block
</div>
<div class="content">
Content
</div>
CSS
.fixed-block {
background: red;
height: 400px;
width: 100%;
position: fixed;
top: 0;
}
.content {
height: 700px;
margin-top: 400px;
background: yellow;
position: relative;
}
JS
if(window.location.hash) {
var hash = window.location.hash;
var link = $("[href='"+ hash +"']");
if ( hash == "" ) {
$('html, body').animate({
scrollTop: $(".content").offset().top
}, 1000);
}
It works this way:
var hash = window.location.hash;
var link = $("[href='"+ hash +"']");
if ( hash == "" ) {
$('html, body').animate({
scrollTop: $(".content").offset().top
}, 1000);
}
http://jsfiddle.net/utbeuebw/2/
I removed this: if(window.location.hash) { for a couple of reasons:
1 - the closing bracket of that if block was missing
2 - it makes no sense checking if an empty string has a boolean value
3 - you already check that here: if ( hash == "" )

Count back percentage using JQuery

I have the code below where I'd like to the numbers count back to 0% once hover the object out. Also I can't figure our how to make the value disappear again as it was on load. Could you please help me solve this.
Thanks in advance.
HTML
<div class="container">
<div class="fill" data-width="80%"></div>
</div>
<div class="container">
<div class="fill" data-width="50%"></div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 30px;
background-color: blue;
margin: 10px auto;
}
.fill {
height: 100%;
width: 0;
background-color: red;
line-height: 30px;
text-align: left;
z-index: 1;
text-align: right;
}
JQuery
$(function() {
$('.container').hover( function(){
var width=$(this).find(".fill").data('width');
$(this).find(".fill").animate({ width: width }, {
duration:800,
step: function(now, fx) {
$(this).html(Math.round(now) + '%');
}
});
},
function(){
$(this).find(".fill").animate({ "width": "0px" }, 800);
});
});
jsFiddle http://jsfiddle.net/zp8pe069/
jsBin demo
CSS: set overflow: hidden to .fill to prevent the text being visible after the animation ends.
HTML: remove % from the data attribute
JS and here you go. all you need:
$('.container').hover(function( e ){
var $fill = $(this).find(".fill");
var width = $fill.data('width');
$fill.stop().animate({width: e.type=="mouseenter" ? width+"%" : "0%" }, {
duration : 800,
step : function(now) {
$(this).html(Math.round(now) + '%') ;
}
});
});
Note also the use of the .stop() method, if you hover multiple time hysterically :) it'll prevent endless animations.

jQuery: Div elements are not showing up

I am adapting the Coverflow technique to work with a div. Following is the html:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body,html {
margin: 0;
padding: 0;
background: #000;
height: 100%;
color: #eee;
font-family: Arial;
font-size: 10px;
}
div.magnifyme {
height: 80px;
padding: 80px;
position: absolute;
top: 0px;
left: 0px;
width: 2000px;
}
div.wrapper {
margin: 0px;
height: 470px;
/*border: 2px solid #999;*/
overflow: hidden;
padding-left: 40px;
right: 1px;
width: 824px;
position: relative;
}
div.container {position: relative; width: 854px; height: 480px; background: #000; margin: auto;}
div.nav {position: absolute; top: 10px; width: 20%; height: 10%; right: 1px; }
div.magnifyme div {
position: absolute;
width: 300px;
height: 280px;
float: left;
margin: 5px;
position: relative;
border: 2px solid #999;
background: #500;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui.coverflow.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript">
$(function() {
$("div.magnifyme").coverflow();
$("#add").click(function() {
$(".magnifyme").append("<div id=\"div5\">hello world</div>");
$("div.magnifyme").coverflow();
});
});
</script>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="magnifyme">
<div id="div0">This is div 0</div>
<div id="div1">This is div 1</div>
<div id="div2">This is div 2</div>
<div id="div3">This is div 3</div>
<div id="div4">This is div 4</div>
</div>
</div>
<div class="nav">
<button type="button" id="add">Add to Deck</button>
</div>
</div>
</body>
</html>
The coverflow function (included as a js file in the head section) is here. When I click the button, I was expecting it to add a DIV to the already present deck. For some reason, it doesn't show the newly added DIV. I tried calling the coverflow() function after I added the new element but that didn't work either. The modified coverflow function is given here:
;(function($){
$.widget("ui.coverflow", {
init: function() {
var self = this;
this.items = $(this.options.items, this.element).bind("click", function() {
self.moveTo(this);
//$("div.slider").slider("moveTo", self.current, null, true);
});
this.itemWidth = this.items.outerWidth(true);
this.current = 0; //Start item
this.refresh(1, 0, this.current);
this.element.css("left",
(-this.current * this.itemWidth/2)
+ (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
- (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
);
},
moveTo: function(item) {
this.previous = this.current;
this.current = !isNaN(parseInt(item)) ? parseInt(item) : this.items.index(item);
if(this.previous == this.current) return false; //Don't animate when clicking on the same item
var self = this, to = Math.abs(self.previous-self.current) <=1 ? self.previous : self.current+(self.previous < self.current ? -1 : 1);
$.fx.step.coverflow = function(fx) {
self.refresh(fx.now, to, self.current);
};
this.element.stop().animate({
coverflow: 1,
left: (
(-this.current * this.itemWidth/2)
+ (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
- (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
)
}, {
duration: 1000,
easing: "easeOutQuint"
});
/*current = this.current;
$("[id^=div]").each(function() {
if(this.id != "div"+current) {
console.info(this.id + " Current: " + current);
$(this).fadeTo( 'slow', 0.1);
}
});*/
},
refresh: function(state,from,to) {
var self = this, offset = null;
this.items.each(function(i) {
var side = (i == to && from-to < 0 ) || i-to > 0 ? "left" : "right";
var mod = i == to ? (1-state) : ( i == from ? state : 1 );
var before = (i > from && i != to);
$(this).css({
webkitTransform: "matrix(1,"+(mod * (side == "right" ? -0.5 : 0.5))+",0,1,0,0) scale("+(1+((1-mod)*0.5))+")",
left: (
(-i * (self.itemWidth/2))
+ (side == "right"? -self.itemWidth/2 : self.itemWidth/2) * mod //For the space in the middle
),
zIndex: self.items.length + (side == "left" ? to-i : i-to)
});
if(!$.browser.msie)
$(this).css("opacity", 1 - Math.abs((side == "left" ? to-i : i-to))/2);
});
}
});
$.extend($.ui.coverflow, {
defaults: {
items: "> *"
}
});
})(jQuery);
One thing I did notice is that after clicking the button for about 5-10 times, the elements show up but not along with the already present divs but rather below them. I am guessing that this has something to do with the CSS of the magnifyme class (2000px), but I am not sure what it is. Is there any way I can make this work?
You need to write an additional function for the coverflow widget:
add: function(el) {
var self = this;
this.element.append(el)
this.options.items = $('> *', this.element);
this.items = $(this.options.items, this.element).bind("click", function() {
self.moveTo(this);
});
this.itemWidth = this.items.outerWidth(true);
this.moveTo(this.items.length-1);
},
and then call it like so:
$("#add").click(function() {
$("div.magnifyme").coverflow('add', "<div></div>");
});
First, you need to add a references to the jQuery UI core, and it also appears that it requires the jQuery slider plugin.
Second, in your click event you're doing a location.reload, which is refreshing the page from the server, resetting any changes you had made to the page. (if you make the DIVs much smaller you can see one flash in before the page is reloaded).
You are getting a js error on the page -- "$.widget is not a function" because you didn't include the jqueryUI library. http://jqueryui.com/
Also if you remove the location.reload line, your code will work, however, I would rewrite that script block like this, so that everything clearly runs when the document is ready:
<script type="text/javascript">
$(document).ready(function() {
$("div.magnifyme").coverflow();
$("#add").click(function() {
$(".magnifyme").append("<div id=\"div5\">hello world</div>");
$("div.magnifyme").coverflow();
});
});
</script>

Categories