I have navigation nested in a div that is offscreen to the left and when the user scrolls down the page and reaches pixel 296, the left navigation slowly appears by it's width growing towards the right.
What I have now is half working. The navigation nested in the div appears when the user scrolls down the page but I want it to animate slowly to the right and that is not happening. Not sure what I am doing wrong. The specific line I am having problems with is:
$("#slidebottom").animate({ width: "100" }, 'slow');
But here is my entire code:
$(window).scroll(function(){
var wintop = $(window).scrollTop(), docheight = $(document).height(),
winheight = $(window).height();
var bottomHeight = $("#slidebottom").height();
var zeroheight = 0;
if (wintop > 296) {
bottomHeight = $('#slidebottom').height(docheight);
$("#slidebottom").animate({ width: "100" }, 'slow');
}
if( wintop < 296)
{
bottomHeight = $('#slidebottom').height(zeroheight);
//$("#slidebottom").animate({ width: "0" }, 'slow');
}
});
The jQuery docs show ints, not strings, as the arguments to width:
$("#slidebottom").animate({ width: 100 }, 'slow');
Edit: So I was wrong, that's not the problem; it handles strings just as well.
Try the following maybe?
$("#slidebottom").animate({ width: '100px' }, 'slow');
I have a feeling that the unit is important for this, since 100 can mean anything. Not very specific. And you can define this as a string just fine. In fact, in the example they give for .animate it is defined as a string.
Related
This is basically my current website:
https://jsfiddle.net/s0wgnvk2/
And now I have the problem in the #About section when I click right it goes to #right section and, you can't see it in fiddle but in my webpage the transition is really smooth and I like it how it is, but I just don't know how to make it work for the left side since it is positioned left:-100%.
$(function() {
$('#About a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
I know about the fullPage.js plugin but I'd like to have my own solution and web layout even thought fullPage is probably a lot better.
I would appreciate if you could help me out
EDIT
Fiddle corrected: https://jsfiddle.net/s0wgnvk2/1/
scrollLeft denotes the scroll bar position from the left, see ref here. So it cannot be negative (the left most position is 0).
What you need might be marginLeft, try:
$('html, body').animate({ marginLeft: '100%' });
Here is a working jsfiddle example. Note that I have make the header position: fix, so that it knows where to anchor and how to width itself when the left margin of the element changes.
Use animation not scroll
see what issue you face when you use scroll https://jsfiddle.net/kevalbhatt18/s0wgnvk2/4/
And as you said in your site animation is working smoothly and not in fiddle
that is because you haven't selected jauery from droupdown which is
present in left side of fiddle editor so your animation is not working so if you see your console it will give you Uncaught ReferenceError: $ is not defined in your example https://jsfiddle.net/s0wgnvk2/
Left right animation Example: https://jsfiddle.net/kevalbhatt18/vunL9ec2/
$('#About a').bind('click', function (event) {
var $anchor = $(this);
if ($anchor.context.innerHTML === "RIGHT" ) {
$($anchor.attr('href')).stop().animate({
left: '-=100%'
}, 1000);
} else if ($anchor.context.innerHTML === "LEFT") {
$($anchor.attr('href')).stop().animate({
left: '+=100%'
}, 1000);
} else {
console.log($(this).context.offsetParent.id )
$('#'+$(this).context.offsetParent.id ).stop().animate({
left: $(this).context.offsetParent.id ==='right'?'+=100%':'-=100%'
}, 1000);
}
I had this working with no problems for the entire build of the site. Then, the day I was supposed to launch, the sticky menu stopped working right. The menu is supposed to start at the bottom, scroll to the top, then stick (position: fixed).
Now, it scrolls about 10px and then jumps to the top. Why is the scrollTop distance not calculating correctly?
Live site at [site no longer exists]
Here's the code for the sticky menu. I'm also using JS to set min-height of divs to window height, but haven't included that code here.
$(function(){
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {
$('#wrapper-wcf53badf7ebadf7').css({position: 'fixed', top: '0px', 'background-image':'url(http://amarshall.360zen.com/wp-content/uploads/2014/07/menu-fade-background2.png)'});
$('#block-bcf53bf14093931c').css({display: 'block'});
} else {
$('#wrapper-wcf53badf7ebadf7').css({position: 'static', top: '0px','background-image':'none'});
$('#block-bcf53bf14093931c').css({display: 'none'});
}
});
});
Thanks in advance for any help! I'm not a JS or jQuery expert yet, so any suggestions for cleaning things up would be appreciated.
NOTE: The site is built on WordPress, so no-conflict mode is in effect.
I think you are initialising the sticky menu function before you set the min-height of $('big-div').
On page load, the menu starts at 54px from the top, and so when you store the offset().top value as stickyRibbonTop, it is stored at 54px. Then on your scroll event you are comparing against this.
Try setting the min-height of the divs first in your code, then run this same script afterwards. The value of stickyRibbonTop should then be correct.
Bear in mind that you will need to reset stickyRibbonTop every time the window.height() is updated, so you should probably make this sticky menu function a named function and call it at the end of the wrapper_height function. something like this:
function stickyNav() {
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).unbind('scroll', scrollEvent);
$(window).on('scroll', stickyRibbonTop, scrollEvent);
};
function scrollEvent(event) {
var stickyRibbonTop = event.data;
if ($(window).scrollTop() > stickyRibbonTop) {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'fixed', top: '0px', 'background-image': 'url(http://www.adammarshalltherapy.com/wp-content/uploads/2014/07/menu-fade-background2.png)' });
$('#block-bcf53bf14093931c').css({ display: 'block' });
}
else {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'static', top: '0px', 'background-image': 'none' });
$('#block-bcf53bf14093931c').css({ display: 'none' });
}
};
function wrapper_height() {
var height = $(window).height();
var wrapperheight = height - 75;
wrapperheight = parseInt(wrapperheight) + 'px';
$(".bigDiv").css('min-height', wrapperheight);
$("#wrapper-wcf53bad125d7d9a").css('height', wrapperheight);
stickyNav();
}
$(function () {
wrapper_height();
$(window).bind('resize', wrapper_height);
});
Someone know how convert a bottom position to top with CSS transition and jQuery?
I need to change the anchor of my image. And i have this problem. There is a conflict between bottom and top.
EDIT : In my scenario, the image has 100% of the width of the screen. And when the window is resized, i have a code in JS whoes get the new position of the image. If my anchor is always "top" for example, in some situations I have this hole who show-up for severals milliseconds and if I set at this moment bottom instead of top it will fix my issue. But I have this "jump" in the animation.
I made this fiddle to understand my issue.
Sorry for my English! Someone have an idea about this? Thank you !
You can get around the jumps by using a class, and removing the inline style as you go, like so:
if ( image.hasClass("bottom") ) {
image.css("bottom", "").animate( { top: "0" } , 1000, function(){
image.removeClass("bottom");
});
} else {
image.css("top", "").animate( { bottom: "0" } , 1000, function(){
image.addClass("bottom");
});
}
and add a css class
.bottom {
bottom: 0;
}
as per http://jsfiddle.net/rZPq3/
edit for cross-browser:
var top = image.position().top + 'px';
var bottom = image.parent().height() - image.height() + 'px';
if (image.hasClass("bottom")) {
image.finish().css({ "bottom": "", "top": top }).animate({ top: "0px" }
, 500, function () { image.removeClass("bottom"); });
} else {
image.finish().css({ "top": "","bottom": bottom }).animate({bottom:"0px"}
, 500, function () { image.addClass("bottom"); });
}
http://jsfiddle.net/wCuuX/
You should stick with one of the properties to avoid conflicts. I changed your fiddle to use top only and using a class to toggle the value instead.
var toggle = $("button#toggle");
var image = $("div img");
toggle.click(function () {
image.toggleClass("toggled");
});
See updated test case on jsFiddle.
I would like to center a div by clicking it. So if I'm clicking a div I want it to scroll to the center of the browser viewport. I don't want to use anchor points like the guides and examples I've seen. How can I achieve this?
In some way you have to identify the clickable elements. I build an example, that uses the class-attribute for that.
Step 1
This is the script, that does the work:
$('html,body').animate({
scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2
}, 200);
What you tried is to scroll the container to the top of the page. You also have to calculate and subtract the difference between the container height and the viewport height. Divide this by two (as you want to have the same space on top and bottom and you are ready to go.
Step 2
Then you add the click handler to all the elements:
$(document).ready(function () {
$('.image').click( function() {
$('html,body').animate({ scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2 }, 200);
});
});
Step 3
Set up some HTML/CSS:
<style>
div.image {
border: 1px solid red;
height: 500px;
width: 500px;
}
</style>
<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>
And you're done.
Check out the demo
Try it yourself http://jsfiddle.net/insertusernamehere/3T9Py/
HTMLElement.prototype.scrollToCenter = function(){
window.scrollBy(0, this.getBoundingClientRect().top - (window.innerHeight>>1));
}
Achieved with pure JavaScript for Scrolling to Center in the vertical direction. And it's similar in the horizontal direction.
I don't take elements' height into consideration, because they maybe larger than the height of screen.
I know this question is old, but right now, you can use scrollIntoView:
For example:
document.body.scrollIntoView({
behavior: 'smooth',
inline: 'center',
block: 'center'
});
I've got one slight modification to offer.
If the "adjustment factor" i.e. ( $(window).height() - $(this).outerHeight(true) ) / 2 is < 0 you can get undesirable results whereby you overshoot that element in the viewport with your scroll.
I added a max(0,adjustment factor) to correct :
function scrollIntoView(el) {
var offsetTop = $j(el).offset().top;
var adjustment = Math.max(0,( $j(window).height() - $j(el).outerHeight(true) ) / 2);
var scrollTop = offsetTop - adjustment;
$j('html,body').animate({
scrollTop: scrollTop
}, 200);
}
I want to implement something like this page does: link
Look at the Clicker box. The box has two animations going on. One for the easeInQuad, then the other animation is for the easeInOutSine.
How can I implement something like that in my own function?
$(function()
{
var iH = window.innerHeight + 80;
var position = $(window).scrollTop();
$(window).scroll(function()
{
var scroll = $(window).scrollTop();
if(scroll > position)
{
$("body").animate(
{
scrollTop: iH
},1000,
"easeInOutQuart")
.animate(
{
scrollTop: parseInt($(window).scrollTop()) - 80
},1000,
"easeInOutQuart");
}
else if(scroll < position)
{
$("body").get(0).scrollTop = 0;
}
position = $(window).scrollTop();
});
});
The second animate doesn't work quite well. But it does scroll it up. But it scroll it up too much not just 80 pixels. It scroll it up to the top, then the animation gets into an infinite loop. After the second .animate it will continue to animate it again and again and again. Non stop.
I think its better to use a toggle effect
http://www.sohtanaka.com/web-design/examples/toggle/
$("body").stop(true)
This will clear all animation Queues on the object.
http://docs.jquery.com/Effects/stop