I'm using Bootstrap's Buttons plugin toggle state feature on a custom checkbox. When this button is toggled (on), a hidden element should appear near the top of the page and then the page should scroll to the top. When the button is toggled next (off), the element should disappear and the page should scroll to the top.
The hidden element is toggled when the button is toggled on and off but the scroll is not working.
Changing the data-toggle from 'buttons' to 'button' makes the scroll work but does not visibly toggle the button so that is no good.
I tried setting an onchange event for the checkbox itself but that also doesn't scroll.
It seems that Bootstrap's function for the onclick event is doing something that doesn't allow my onclick function to run properly. I failed at trying to understand it so far (I will keep trying).
Setting a timeout for the window.scrollTo() function makes it work. Why could this be? Is there a way to do this without the timeout?
<body>
<div class="container">
<div>
<h3>Toggle Header and Scroll To Top</h3><hr />
<h1 id="displayMe" class="d-none">Display Me</h1>
<div style="height: 100vh;"></div>
<div class="btn-group-toggle btn btn-success custom-control custom-switch" data-toggle="buttons" id="myButton">
<input type="checkbox" class="custom-control-input" id="myCheckbox">
<label class="custom-control-label" for="myCheckbox">Toggle and Scroll</label>
</div>
</div>
</div>
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/twitter-bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#myButton").on("click", toggleAndScroll);
});
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
//setTimeout(function () {
window.scrollTo(0, 0);
//}, 100);
}
</script>
</body>
https://jsfiddle.net/ews9q50v/
(Uncomment the setTimeout lines to see it working)
I have no idea why it doesn't work. Bootstrap is messing something up.
But you can easily bypass it by moving scrollTo to the end of event loop using setTimeout(func, 0).
$("#myButton").on("click", toggleAndScroll);
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
setTimeout(function () {
window.scrollTo(0, 0);
}, 0);
}
demo
This seems to work for chrome but Firefox is having other issues:
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
}
But since you are using jQuery something like this works in both Firefox and chrome:
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
$("html, body").animate({ scrollTop: 0 }, "slow");
}
I'm not entirely sure what the issue is - probably something to do with the scroll height changing at the same time as scrollTo is called.
Related
I would like to smooth scroll to part called "result" after click on Submit button. But only result I get is just normal scroll, not smooth scroll.
Here is piece of HTML code:
<form action="index.php#result" method="post">
<div id="search-box">
<?php include 'submitt.php'; ?>
<input type="text" name="city" placeholder="Enter city name">
<input type="submit" name="SubmitButton" id="SubmitButton">
</div>
</form>
And here is the result section code:
<section id="result" class="container content-section text-center">
<div class="col-md-8 col-md-offset-2">
<p class="intro-text">Text.</p>
<?php include 'q.php'; ?>
</div>
</section>
A set following in JavaScript:
$("#SubmitButton").submit( function() {
$('html, body').animate({
scrollTop: $("#result").offset().top
}, 2000);
return false;
});
Can you please help how to get the smooth scrolling effect after click on Submit button?
I use Bootstrap framework there.
Many thanks.
see this example http://jsfiddle.net/kevalbhatt18/8tLdq/2129/
I updated your fiddle
$("#myButton").click(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});
You can use Smooth Scrool Plugin: https://github.com/kswedberg/jquery-smooth-scroll
try this
$("#SubmitButton").submit( function() {
$('body').scrollTo('#result',{duration:2000});
return false;
});
Chris Coyier never lets me down. Here is his solution. Again, I can't stress enough that this isn't my solution, it belongs to a legend. Check out the origin by clicking his name above.
// Scroll to specific values
// scrollTo is the same
window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});
// Scroll certain amounts from current position
window.scrollBy({
top: 100, // could be negative value
left: 0,
behavior: 'smooth'
});
// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({
behavior: 'smooth'
});
In my opinion, this is a better solution.
I have a button which opens a modal. This button should always be visible. If the user scrolls down the page, the button should be "affixed" on top.
I use bootstrap v3.1.1 and the affix.js is loaded in the head and is attaching the "affix-top" class to my button like it should.
But when I scroll - I have tried several variants of implmentation - the affix-top class is not changing to affix.
Here is my code.
HTML:
<button class="btn btn-primary m-t-10 m-b-10"
id="standard-questions-button"
type="button"
data-toggle="modal"
data-target="#standard-questions-modal">
Show Questions
</button>
JS:
$('#standard-questions-button').affix({
offset: {top: $('#standard-questions-button').position().top}
});
// for testing only
$('#standard-questions-button').on('affix.bs.affix', function () {
alert('affix');
})
CSS:
#standard-questions-button.affix-top {
color: red;
position: static;
margin-top:25px;
width:228px;
}
#standard-questions-button.affix {
color: green;
top:25px;
float: right;
width:228px;
}
Approach 2 (also not working: wrapped in a function)
$('#standard-questions-button').affix({
offset: {top: function(){return $('#standard-questions-button').position().top}}
});
How can I solve this?
Do I miss something?
I had exactly the same issue. Maybe you have the similar problem.
In bootstrap script (I use the version 2.3.2) there is a code fragment that assigns event handler to the window's scroll:
this.$window = $(window)
.on('scroll.affix.data-api', $.proxy(this.checkPosition, this))
I realized that in my code the scroll event wasn't fired at all so the class was not being changed. When I changed only this fragment for:
this.$window = $('#main_container')
.on('scroll.affix.data-api', $.proxy(this.checkPosition, this))
It finally started to work. Just check what is the element you are scrolling on your webpage and set it in bootstrap's Affix function definition.
You may find helpful this to check if you are able to scroll through window:
$( window ).scroll(function() {
alert("scroll");
});
I'm looking to use jQuery to slide an element down, wait, then slide it back up.
When I use the following code, it slides down fine, but then when sliding back up it seems to slide up and down multiple times.
HTML:
<div id="area">
<div id="summary"><p>hello summary</p></div>
<div id="dropdown">
<div class="item"><p>hello item</p></div>
<div id="functions"><p>hello functions</p></div>
</div>
</div>
<p>TEST ADD</p>
jQuery:
$("document").ready( function () {
$("#test_add").bind("click", add_item_annimate)
})
function add_item_annimate() {
$("#dropdown").slideDown("fast").delay(1500).slideUp("fast");
}
Not really sure why this is happening.
That's probably because of animation queue, for clearing it you can use the stop method:
$("#dropdown").stop(true).slideDown("fast").delay(1500).slideUp("fast");
This code should do the trick!
$("document").ready( function () {
$("#test_add").click( function(){
$("#dropdown").slideUp("fast").delay(1500).slideDown("fast");
//SlideUp and slideDown can be switched.
});
});
Example:
http://jsfiddle.net/xcm8n1s3/
You didn't have anything preventing a user from clicking on "TEST ADD" multiple times before the animation completed.
if ($("#dropdown").is(':animated')) {
return false;
}
$("#dropdown").slideDown("fast").delay(1500).slideUp("fast");
Here is a jsfiddle of the working demo.
I have a code in which when a button is clicked the corresponding div is scrolling up along with the button. I want a code in which when a button is clicked the button must be in its respective position i.e, the buttons must be fixed, but the corresponding div must scroll up. The same should be applied to all the buttons and their respective divs
Here is my code in which I used scrollTo()
<div class="submit-buttons">
<input id="example1" type="submit" name="script" value="Sample1"/>
<input id="example2" type="submit" name="script" value="Sample2"/>
<input id="example3" type="submit" name="script" value="Sample3"/>
</div>
<div id="output1" style="margin-top:200px">This is output1</div>
<div id="output2" style="margin-top:600px">This is output2</div>
<div id="output3" style="margin-top:800px">This is output3</div>
<script>
$("#example1").click(function() {
$.scrollTo( '#output1', 800);
});
$("#example2").click(function() {
$.scrollTo( '#output2', 800);
});
$("#example3").click(function() {
$.scrollTo( '#output3', 800);
});
</script>
When I executed the above code the output1,2,3 are scrolling up but along with example1,2,3. I want a code in which the buttons must be fixed but the divs must move to the position below the buttons div
Make position:fixed for submit-buttons class.
add css and make changes according to your need.
.submit-buttons{
position:fixed;
top:10px;
width:100%;
}
I hope it helps you. http://jsfiddle.net/56P4T/
EDIT:
You can use this script(Ref: ek_'s answer).I hope it helps you.
$(document).ready(function (){
$("#example1").click(function() {
var val = $("#output1").offset().top - ($(".submit-buttons").height()+10);
$("html, body").animate({scrollTop: val}, 800);
});
$("#example2").click(function() {
var val = $("#output2").offset().top - ($(".submit-buttons").height()+10);
$("html, body").animate({scrollTop: val}, 800);
});
$("#example3").click(function() {
var val = $("#output3").offset().top - ($(".submit-buttons").height()+10);
$("html, body").animate({scrollTop: val}, 800);
});
});
Sumit Raghav gave you the right answer about fixed-positioning your buttons.
If you want your outputs to move just below the .submit-buttons div (in fact, it is your entire body which is moving) you may consider animating the scrollTop property, which is, I guess, what your scrollTo plug-in is doing:
$("#example1").click(function() {
// your get the position of #output1 with respect to the top of the document
// and you remove the height of the .submit-buttons div to scroll just below
var val = $("#output1").offset().top - $(".submit-buttons").height();
// animate the scrollTop property
$("html, body").animate({scrollTop: val}, 800);
});
This code works perfectly except when you click on a link, The page is redirected before jquery has a change to visually animate the margin back to zero. Is there a way to prevent the redirect until after jquery animates the margin back to zero?
HTML
<div id="sidebar">
<div class="navigation">
<ul>
<li><img src="dbs/images/home.png" title="" width="40" height="38" />به عقب</li>
<li>فیلم ها</li>
<li>وزارتخانه ها ایران زنده</li>
<li>پرستش</li>
<li>جوانان</li>
<li>کودکان</li>
<li>پزوهش ها</li>
<li>دانشکده مسیح</li>
<li>زنان</li>
<li>کلیپ های سری</li>
</ul>
</div>
</div>
JS
$('.navigation a li').click(function () {
$('.slider').animate({
marginLeft: 0
}, 500);
});
.animate() takes a callback function like so:
$('.navigation a li').click(function () {
$('.slider').animate({
marginLeft: 0
}, 500,function() {
//thing to do when you animation is finished e.g.
location.href = 'http://redirect.to.url';
});
});
For complete documentation, check out the (extremely useful) jQuery docs:
http://api.jquery.com/animate/
Firstly, your HTML is invalid. Put the links inside the list items, not the other way around. Adjust your selector accordingly (.navigation li a).
Next, now that you're setting the event on the link rather than the list item, make your handler:
Prevent the default event
Add a callback to the animation, so that when the animation is over the page goes to this.getAttribute('href').
That should do it.
Stop the event propagation from li click handler.
$('.navigation a li').click(function (e) {
$('.slider').animate({
marginLeft: 0
}, 500);
e.stopPropagation();
});