I want to scroll to a div when I load my page, and I can do it using Jquery with this:
<script>
$(document).ready(function (){
$('html, body').animate({
scrollTop: $(".active").offset().top
}, 2000);
return false;
});
</script>
In the same page I have a slider created using flexslider.
After importing flexslider css and js I done this:
<script type="text/javascript">
(function($) {
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
})(jQuery);
</script>
At this link you can see all the flexslider file: https://github.com/woothemes/FlexSlider
The problem is when the page is loaded, the scroll start correctly, but at a certain point
seems that while the scrollout is running the slider is loaded at the same time and this creates problems to the scrollout that does not seem to know where to position the window.
Anyone can help me? I'm getting mad with this, I tried to find an answer on the net but I have not met anyone with my problem.
Thank you.
Related
I have a working "go to top" button in my forum. I have chosen to go with the following code because it does not change my forum's URL in any way, which is important. Within the head section:
<script>
function scrollWindow() {
var top = document.getElementById('goHere').scrollTop;
window.scrollTo(0, top);
}
</script>
The div within the body I want to go to:
<div id="goHere"></div>
The input:
<input type="image" onclick="scrollWindow()" value="Scroll" class="goTop" src="http://example.com/images/26.png" alt="" />
It functions well and leaves my URL clean. My questions:
Can my JavaScript be edited to allow smooth scrolling to the div ID (and if so, would you please help me with the edits)?
Must I link to an external jQuery file in order to achieve this?
So making it as simple as possible, here it is using JQuery, see fiddle http://jsfiddle.net/aq9ptz0L/2/
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#goHere").offset().top
}, 2000);
});
Note in your <head> section add this if you dont already have JQuery:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
Add this script instead of your script and working fiddle here Link
!function(e,t){"use strict";"function"==typeof define&&define.amd?define(t):"object"==typeof exports&&"object"==typeof module?module.exports=t():e.smoothScroll=t()}(this,function(){"use strict";if("object"==typeof window&&void 0!==document.querySelectorAll&&void 0!==window.pageYOffset&&void 0!==history.pushState){var e=function(e){return"HTML"===e.nodeName?-window.pageYOffset:e.getBoundingClientRect().top+window.pageYOffset},t=function(e){return.5>e?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1},n=function(e,n,o,i){return o>i?n:e+(n-e)*t(o/i)},o=function(t,o,i,r){o=o||500,r=r||window;var u=window.pageYOffset;if("number"==typeof t)var a=parseInt(t);else var a=e(t);var d=Date.now(),f=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){window.setTimeout(e,15)},s=function(){var e=Date.now()-d;r!==window?r.scrollTop=n(u,a,e,o):window.scroll(0,n(u,a,e,o)),e>o?"function"==typeof i&&i(t):f(s)};s()},i=function(e){e.preventDefault(),location.hash!==this.hash&&window.history.pushState(null,null,this.hash),o(document.getElementById(this.hash.substring(1)),500,function(e){location.replace("#"+e.id)})};return document.addEventListener("DOMContentLoaded",function(){for(var e,t=document.querySelectorAll('a[href^="#"]:not([href="#"])'),n=t.length;e=t[--n];)e.addEventListener("click",i,!1)}),o}});
function scrollWindow() {
var top = document.getElementById('goHere');
window.smoothScroll(top)
}
</script>
This is my script for scrolling.
$("#oneA").click(function() {
$('html, body').animate({
scrollTop: $("#twoA").offset().top
}, 2000);
});
and my html
<div id='oneA' style='height:100px;'></div>
<div id='twoA' style='height:100px;margin-top:300px'></div>
The above works fine as I tested on a static/normal page. But when I try the same on a popup box, it doesn't work at all. I suspect this could be library conflict between the popup and the jQuery scrolling.
I've placed these libraries
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src='../js/jquery.magnific-popup.min.js'></script>
<script src="../js/index.js"></script>
in the footer for the popup box. Without this the popup won't appear.What's the possible way to make the scrollTop work on this popup, please?
$("#oneA").click(function() {
$('#popupId').animate({
scrollTop: $("#twoA").offset().top
}, 2000);
});
In the place of, html,body I replaced with the popupbox id and it worked within popup.
I am working on this site: http://lisarevson.com/
It's using a wordpress theme with Masonry.js.
I downloaded the site and cloned the DB and the site looks fine locally on MAMP Pro.
Yet on the live site, as you can see, the masonry tiles slide up from the bottom and overlap each other. I'm a bit at a loss why it happens live but not locally, and therefore how to fix.
Thoughts?
Thanks. Everyone was on the right track I found the answer: imagesLoaded.
jQuery(document).ready(function($){
// initialize Masonry
var $container = $('#content-blog').masonry();
// layout Masonry again after all images have loaded
$container.imagesLoaded( function() {
$container.masonry();
});
});
I see you put your js function on header :
<script type="text/javascript">
jQuery(document).ready(function($){
$("#wrapper").vids();
});
jQuery(document).ready(function($){
$('#content-blog').masonry({columnWidth:323});
});
</script>
I think you should move it to footer after mansory.js has been called.
Steve try also
var $container = $('#content-blog');
// initialize
$container.masonry({
columnWidth: 323,
itemSelector: '.post'
});
and as Le says move your script from the top to the bottom and place it after masonry.min.js
Hope this helps
try to call masonry on window.load
<script type="text/javascript">
jQuery(document).ready(function($){
$("#wrapper").vids();
});
jQuery(window).load(function($){
$('#content-blog').masonry({columnWidth:323});
});
</script>
Actually what happens is masonary is executed first then images loads on live server (due to net speed) while on local both load simultaneously
I have a Carousel made from bootstrap and this is the script to run it.
<script>
!function ($)
{
$(function()
{
$('#myCarousel').carousel()
})
}(window.jQuery)
</script>
I tried adding a different effect on the navigation bars I got so that when I click the navigation, it will slide up into the section in that page. I added this script.
<script>
$('a').click(function()
{
$('html, body').animate(
{
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
</script>
when I added the script, the left and right buttons in the carousel stopped working. I really don't know if it had a conflict with the second script. I spent around half an hour looking for the error and finally found out that the second script conflicted with the carousel script.
Is there an error in the scripts? How do I fix it?
My guess is that
$('a').click(function() { /* ... */ })
conflicts with the click event handler set up by carousel(). You could add a class on your navigation links (or use whatever nav class is already there), and use a more specific selector in this second script.
Oh.
Figured it out just now.
Added li in $('a').click(function()
Now it looks like $('li a').click(function()
It doesn't conflict now :))
Having some problems with the jQuery .animate functionality.
I have implemented a 'Back to top' link on my website here: http://www.unforgivengamers.com/
It is supposed to get you back to the top of the page once you click it.
Here is my jQuery code:
<script type="text/javascript">
jQuery.noConflict();
jQuery('a[href=#top]').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
return false;
});
</script>
The problem: the animation is not smooth! I want it to scroll slowly, not instant.
Like this: http://designwoop.com/labs/smooth%20scroll/smooth-scroll.html
Am I missing something out here?
I'm using jQuery 1.8.3
You should put your code within document ready handler, the animation is not even performed on your page, the anchor is on the bottom of the page and your code without document ready on the top of the page.
jQuery(document).ready(function(){
jQuery('a[href=#top]').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
return false;
});
})