I have a small problem. To scroll child in the begging of parent. After
click button 'BOOK NOW' this block must be scroll at the begging of popup
I try something like this
jQuery('.booking-now').each(function(){
jQuery(this).click(function(e){
var btn = jQuery(this);
var btnParent = btn.closest('.sidebar-wrapper');
var btnParentOffset = 0;
function getParentOffset() {
return btnParentOffset = btnParent.offset().top
}
getParentOffset();
console.log(btnParentOffset);
jQuery('.events-booking-custom').animate({
scrollTop: btnParentOffset
}, 500);
})
})
Well firstly, it looks like you are trying to scroll the .events-booking-custom instead of the HTML/body:
$('html, body').animate({
scrollTop: buttonParentOffset
}, 500);
Secondly, it doesn't look like you are preventing the default action for the button:
e.preventDefault();
I'm not sure what's going wrong though. Do you have a sample of the HTML or can you create a JSFiddle?
Related
I am using the following jquery code to scroll to particular sections when a menu in the navigation tab is clicked. You must have well guessed by now that its a one page website. So coming further, the problem is that when the menu is clicked it scrolls to that particular DIV section but the header hides behind the menu's div. I mean it scrolls way too much up. I want to limit the level of scrolling. Say the it should stop 200px before than what it actually reaches a stop point now. Is it possible?
Here is my code
$(document).ready(function() {
$('body').find('a').click(function(){
var $href = $(this).attr('href');
var $anchor = $($href).offset();
var $li = $(this).parent('li');
$li.addClass('active');
$li.siblings().removeClass('active');
$('body,html').animate({ scrollTop: $anchor.top }, 1000);
return false;
});
});
Instead of hard coding the header value, a better approach would be dynamically getting the height of header, so it won't create issues in mobile and other devices.
$(document).ready(function() {
$('body').find('a').click(function(){
var $heightEx = $('.navbar').height(); // use your respective selector
var $href = $(this).attr('href');
var $anchor = $($href).offset();
var $li = $(this).parent('li');
$li.addClass('active');
$li.siblings().removeClass('active');
$('body,html').animate({ scrollTop: ($anchor.top - $heightEx) }, 1000);
return false;
});
});
EDIT
This is the code I personally use
$("a").on('click', function(event) {
$heightEx = $('header').height();
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: ($(hash).offset().top - $heightEx)
}, 800);
}
});
Maybe, you need to change 'animate' scrollTop parameter:
$('body,html').animate({ scrollTop: $anchor.top - 200px }, 1000);
I have a div whose id is 'regOrg' and initially it is hidden using a css
display: none;
The link to be clicked has an id of back.
On clicking a link I want it to show and smooth scroll down to it (the div regOrg).
This is the code i have:
function goBack() {
$("#regOrg").show();
$("#back").click(function() {
$('html, body').animate({
scrollBottom: $("#regOrg").offset().bottom
}, 2000);
});
}
I call the function goback() on the onclick event of the hyperlink.
However it doesn't work. It only shows the div but doesn't scroll to it.
You are not executing the scroll. You are just binding it to the click event.
Try:
function goBack() {
$("#regOrg").show();
$('html, body').animate({
scrollBottom: $("#regOrg").offset().bottom + 'px'},2000);
}
EDIT: I added the missing "px" to it.
Try with something like this :
function goBack() {
$("#regOrg").show();
var myDiv = $('#regOrg');
var height = myDiv[0].scrollHeight;
myDiv.scrollTop(height);
}
It works on jsfiddle
You could take a look at this post too.
My page shows a div after a radio button from id="yourgoal" is clicked. I'd like the page to scroll to that div only on the first time a button in "yourgoal" is clicked. Here is the code I am using. I don't want the page to scroll to the div after the first click though.
$('input:radio[name="yourgoal"]').change(function() {
if ($('#calculations1').css('display') == 'none') {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
The problem is, it breaks the rest of the functions I have on .change(). I don't want to put all the functions after the scroll within the if and then again into an else {} statement as that seems like a ton of redundant code (it also breaks it)? How do I just do a simple if statement which doesn't affect the rest of the actions within the .change function?
Maybe there is a simpler solution and I am overthinking this?
Thanks in advance!
$('input:radio[name="yourgoal"]').one('change',
function () {
if ($('#calculations1').css('display') == 'none') {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
}
);
I recommend using one. After first time event is triggered it is automatically removed.
If you have more code to go in that change that needs to stay after the first change, you can use event namespacing and attach more than one change.
$('input:radio[name="yourgoal"]').one('change.firstChange',
function () {
if ($('#calculations1').css('display') == 'none') {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
}
);
$('input:radio[name="yourgoal"]').on('change.allChanges',
function () {
// All your other code that stays attached
}
);
EDIT: Seems like one won't work since that 'one' event will be attached to each radio button that has name yourgoal, so it will scroll once for each first radio button click individually but you can do this if you only want to scroll the first time a radio button is selected and not upon the first selection of other radio buttons that all share the yourgoal name.
Fiddle: http://jsfiddle.net/31s3LLjL/3/
$('input:radio[name="yourgoal"]').on('change.firstChange',
function () {
$('input:radio[name="yourgoal"]').off('change.firstChange');
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
);
$('input:radio[name="yourgoal"]').on('change.allChanges',
function () {
// Other change stuff
}
);
You may use event.stopImmediatePropagation() to prevent execution of subscribed callbacks on specific event.
$('input:radio[name="yourgoal"]').one('change',function(event) {
event.stopImmediatePropagation();
if ($('#calculations1').css('display') == 'none') {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
});
Just make sure that your code prepends all other change handler definitions.
The website I'm working on: zarwanhashem.com
You can find my previous question (which includes my code) here: Bootstrap one page website themev formatting problems
The selected answer solved my issues but I have another problem because of the jQuery adjustment with the -50. Now the navbar incorrectly indicates the page I am on. i.e. The navbar is supposed to darken the section that you are currently in. So if you click "about" it will take you to the about page and darken the about link in the navbar. But the link BEFORE the page you are on is highlighted because the -50 makes the navbar think that it is on the previous section. You can easily try this to see what I mean.
How can I fix this? Thanks. The reason I didn't add this onto my old question is because the person stopped looking at it.
Also please keep your explanations simple/dumb them down a little for me. I know very basic HTML and CSS, and I don't know any Javascript.
scrolling js:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
js added at end of document as suggested by poster in previous question:
$(window).ready(function(){
$('div[class^="content-section"]').css('min-height', $(window).height());
})
You are putting the .active class on the wrong element somehow. You need to put the .active class on the clicked element. You should handle the active state with js. This is my solution based on your HTML structure but I'm sure there are different solutions as well.
$(document).on('click', '.page-scroll', function(event) {
var clicked = event.target; //get the clicked element
if($(clicked).closest('ul').hasClass('dropdown-menu')){ //check if clicked element is inside dropdown
$(clicked).closest('ul').parent().siblings().removeClass('active'); //remove active class from all
$(clicked).closest('ul').parent().addClass('active'); add active class on clicked element parent - in your case <li> tag.
}else{
$(clicked).parent().siblings().removeClass('active');
$(clicked).parent().addClass('active');
}
}
Let me know if this works for you.
EDIT after you posted your code
Try replacing your function with this:
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo');
if($($anchor).closest('ul').hasClass('dropdown-menu')){
$($anchor).closest('ul').parent().siblings().removeClass('active');
$($anchor).closest('ul').parent().addClass('active');
}else{
$($anchor).parent().siblings().removeClass('active');
$($anchor).parent().addClass('active');
}
event.preventDefault();
});
});
here is a work around this problem.
just change the contents of your scrolling-nav.js to the following:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo', function(){
$('ul.navbar-nav li, ul.dropdown-menu li').removeClass('active');
$($anchor).parent('li').addClass('active');
});
event.preventDefault();
});
});
This code automatically inserts value to input field class name chat_box when a link is clicked.
Now, it works completely fine.
I want to add one more action here.
I want it to jump to chat_box part when a link is clicked.
How can I do that?
jQuery(document).ready(function () {
$(document).on('click', 'a#username', function() {
$(".chat_box#body_input").val($(this).attr('value'));
});
});
Use scrollIntoView
$(".chat_box#body_input").val($(this).attr('value'))[0].scrollIntoView();
Changed requirement:
In case you need to jump 20px above of chat_box and focus to the input field, try this:
var input = $(".chat_box#body_input");
input.val($(this).attr('value'));
$(document).scrollTop(input.offset().top - 20);
input.focus();
You can do this:
$(document).on('click', 'a#username', function (e) {
e.preventDefault(); // Cancel the default action (navigation) of the click
var $elem = $(".chat_box#body_input");
$elem.val(this.value);
$('html, body').animate({
scrollTop: $elem.offset().top - 20
}, 'slow');
});