I have problem in scroll to particular div (id wise),it's works well in desktop but not working mobile devices below (768 px).
I used this code for scroll but it's not working well in mobile.
// Scroll based on devices width
if ($( window ).width() <= 768 ){
$('body').animate({
scrollTop: $("#current-job").offset().top
}, 1000);
}
else {
$('html, body').animate({
scrollTop: $("#current-job").offset().top
}, 1000);
}
Would you please give me the solution for the same ?
Thanks in advance
Ok so there is an issue where mobile webkit just doesn't do that. you COULD build your own animate function and rock an update of some low level prop but let's cheat a bit here.
Scrolling the body is an issue but scrolling a div is not. have a look at this pen.
https://codepen.io/infn8/pen/BYGvjz
This takes a single div, #body-wrapper, as an immediate child of the body and makes it the new window using these styles:
#body-wrapper{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
}
Then you can animate the scrolling on that. the -webkit-overflow-scrolling: touch; is what gives the ability to flick and scroll a bunch.
then you add the following JS
jQuery(document).ready(function($) {
$(".scroll-bottom").click(function(event) {
$('#body-wrapper').animate({scrollTop: $(".scroll-top").position().top}, 'fast');
});
$(".scroll-top").click(function(event) {
$('#body-wrapper').animate({scrollTop: $(".scroll-bottom").position().top}, 'fast');
});
});
Notice the swapping of .offset() for .position() this is important because with the overflow in the div the offset becomes incorrect. It's also important because the item you take the position of must have #body-wrapper as its offset parent (more info here) or the calculation will be wrong.
I have made my example scrollable with two buttons and a different layout than yours so it is a reduced test case scenario and nothing else is in the way. this way you can study this and extact the core concepts into your application.
a quick conversion of your original would look like this:
$('#body-wrapper').animate({
scrollTop: $("#current-job").position().top
}, 1000);
hopefully that helps
The one you have in the else block is fine on its own. Just reduce it all to:
$('html, body').animate({
scrollTop: $("#current-job").offset().top
}, 1000);
and it will work. The key is animating both the html and body elements
Related
On this page:
http://www.petertoth.me/stuff/petertoth_old/www.petertoth.me/index.html
there is a scroll down button, that smoothly scrolls down to the "next page". Anyone recognizes if it's a pre-made jQuery plugin, or a modified one? I've been researching about it quite a while, found out its possible to mimic this one more or less with such approach:
var scrolled=0;
$(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled=scrolled+100;
$("html, body").animate({
scrollTop: scrolled
});
});
});
or
$('#gdb1').click(function(){
$("html, body").animate({ scrollTop: $(window).height()}, 600);
return false;});
http://jsfiddle.net/uw1hdkaf/20/
but would be more than happy to know how to properly make it with jQuery or without it!
You need to factor in, that the elements need to have an exact height of how much you want to scroll down. Check out this example: http://jsfiddle.net/uw1hdkaf/22/
p {
height: 100px;
margin: 0;
}
The paragraph tag has a set margin of 16px, so you need to remove that. Basically making each element completely 0 in everything.
If you set the height to 100px and scroll down 100px using your script, it will guaranteed scroll down to the next element, as long as you make sure the elements are exactly as tall as you set them.
I am using jQuery-1.11.0 in my project. I have a horizontal menu and it looks like sliding menu. my problem was IE support for transition(I applied transition for smooth sliding). My menu works on most of the browser but not works in IE9 and lower. so I decided to do this with Jquery and I got solution for this. When my page loads it works fine (My plan was first i will add left: calc(-100%+50px); to my css and then when my Collapse button clicked I will change this css to left: 0px;so it will expend and agin when Collapse button clicked it wit restore to left: calc(-100%+50px);so it collapsed. But it seems like jquery can not animateleft: calc(-100%+50px);this type of css. I have tried this with jquery .animate() Method. But problem is after expending menu when i go to collapse the menu it don't show any sliding animation. It just add the css to menu.
here is my first try jsfiddle
here is my second try jsfiddle
here is my latest try jsfiddle
Which method is best and what can i do to fix this?
Here is another answer. I fixed your javascript. Should work on resize. What I did was resize and reposition the menu on resize. This way the button which is dependent on the menu moves with it. Below is the javascript code.
(function($) {
$(".button").on("click", function() {
if ($(".menu").css("left") == "0px") {
$(".menu").stop().animate({
left: -1 * $(window).width() + 30
}, 'slow');
} else {
$(".menu").stop().animate({
left: 0
}, 'slow');
}
});
$(window).resize(function() {
var width = $(window).width();
$(".menu").css("width", width);
if ($(".menu").css("left") != "0px") {
$(".menu").css("left", (-1 * $(window).width() + 30));
}
});
}(jQuery));
To get the live window width use below code:
window.innerWidth gives you the viewport width of the window while
window.width gives you the whole window width.
Thanks
In order to get the width of the window you must keep in mind that the user might resize his browser. This is why we wrap our code with the jQuery resize function for a live update of the width. Check the below code:
$(function() {
$(window).resize(function() {
var width = $(window).width();
// update the width of your element, the below line is just an example on how to do that
$("#someElementId").css("width", width);
});
});
I'm using this code to use smooth scrolling in my website (demo):
$("#click-me").click(function(){
$('html,body').animate({
scrollTop: window.screen.availHeight
}, 200);
});
I'm trying to scroll so exactly the height of the page. However, it seems to scroll past this point. I've tried putting in "100%" as a value, but it didn't work.
What is causing this problem, and what should I do to fix it?
Thanks!
It's working correctly but unless you add this (or account for padding and margin on body), the result is slightly off.
body{
padding:0;
margin:0;
}
http://jsfiddle.net/bb9ux/2/ (non-working version: http://jsfiddle.net/bb9ux/3/ )
Scroll to particular div:
$("#click-me").click(function(){
$('html, body').animate({
scrollTop: $('#scroll-here').offset().top
}, 2000);
});
FIDDLE
You guys already helped me out a lot, I hope you can help me with this question to.
This is my website so far: http://stilld.nl/test/
Everything is working pretty good (need to do a lot of tidying up in my code though).
Please scroll down to the portfolio part. Click an item and the details appear beneath the portfolio. PERFECT!
PROBLEM: size you browser down to mobile format. Click a portfolio item. it doesn't scroll down far enough, because my portfolio items are now displayed beneath each other. They take up much more vertical space now!
WHAT I WANT: Is there a way to make code responsive? So something like: if screen size is smaller then 600 px THEN slide down 500px on click.
This is the code I'm using right now:
$(document).ready(function(){
$(".portfolio").click(function () {
if ($('#'+$(this).attr('target')).is(':visible')){
$('#'+$(this).attr('target')).slideUp();
} else {
$('.description').slideUp();
$('#'+$(this).attr('target')).slideDown();
$('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 50 }, 600);
}
});
$(".close").click(function () {
$('.description').slideUp();
$('html, body').animate({scrollTop: $('#p_img').offset().top }, 600);
});
});
You should calculate the offset with either jQuery's .offset() or jQuery's .position().
What you could do for example is:
$(".portfolio").click(function () {
var offSetTarget = $('.description').position().top;
var scrollExtra = 0;
$('body').animate({
scrollTop: offSetTarget + scrollExtra
}, 600);
});
Where you can determine how much extra you want to scroll.
For example if you want to scroll just above the .portfolio, you can add: scrollExtra = -10; . Or if you want to scroll halfway, you could do: scrollExtra = $('.portfolio').height()/2;
I prepared a working example for you HERE.
To prove that it actually works, you can play with the window size here.
I hope that answers your question. Good luck!
Update
To implement it into your example, we would have to determine where to scroll to.
For illustrational purposes, I have chosen to do this with the divs #alldescriptions and #port_img1 in this example.
The jQuery for your website would then be:
$(document).ready(function() {
$(".portfolio").click(function () {
var offSetTarget = $('#alldescriptions').position().top;
var scrollExtra = 0;
if ($('#'+$(this).attr('target')).is(':visible')){
$('#'+$(this).attr('target')).slideUp();
} else {
$('.description').slideUp();
$('#'+$(this).attr('target')).slideDown();
$('body').animate({scrollTop: offSetTarget + scrollExtra }, 600);
}
});
$(".close").click(function () {
$('.description').slideUp();
$('body').animate({scrollTop: $('#port_img1').position().top }, 600);
});
});
Again, mind you that you can alter the exact scrolling location by giving var scrollExtra a different value.
You can find an implementation of this code here and a live fullscreen example here.
Please play around with the window size again so you can see it actually works with every screensize. Good luck!
You could detect the inner width of the screen and then set variables for the offset.
if(window.innerWidth <= 600) {
var offSet = 500;}
else{
var offSet = 600;}
Then replace this in your code:
$('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 50 }, offSet);
BUT.... if you want to simplify your code, you could use CSS Transitions. Then just use jQuery to add and remove a class that triggers the Transition, using media querys to change the offset. It would also have less overhead.
I'm trying to a create a vertically smooth scrolling website, using jQuery. I am using this JavaScript and this tutorial Smooth Scrolling Website to create the site.
But I'm having trouble with a fixed header, the scrolling works fine but it appears half way down the relevant div because the div is aligning to the top of the page, not just below the fixed header as I would like it too.
I've tried adding an offset to scrollTop but all hell breaks loose on the page, things appearing above the fixed header etc. Just a page mash-up really. If anybody could shed any light it would be greatly appreciated.
$(function() {
$('ul.menu a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
I've found this code on StackOverflow (+ $('.fixedheader').outerHeight()) and added it to my code (after scrollTop: $($anchor.attr('href')).offset().top) it does work but seems to have the opposite effect. Anybody know why?
I've solved this,
+ $('.fixedheader').outerHeight()
Should be
- $('.fixedheader').outerHeight()
So silly of me, cheers anyway guys.