Hi I use stickToTop (http://sdbondi.github.io/jquery-sticktotop/) from fixate.it to make an sidebar that will move when you scroll down.
Here is my JSfiddle: http://jsfiddle.net/f6VwP/
Everything there is going just fine..just how I want it, but when I use it in my code program it doesn't work at all.
I think it has something to do how I put the js code in the index.html but I am not sure.
I put this script link in the body:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://sdbondi.github.io/jquery-sticktotop/jquery-sticktotop.js"></script>
My other javascript I made in an apart document called: jquery.stickToTop.js this code is in te head code like this:
<script type="text/javascript" src="js/jquery.stickToTop.js"></script>
The code of the stickToTop.js is:
;(function () {
var navHeight = $('.sticky').outerHeight(true);
$('.js-sticky').stickToTop({ offset: {top: 50}});
})();
So, what do I wrong?
Thanks!
everything is fine in fiddle because it presumes the jQuery.ready function I suppose you have to change your jQuery code to this:
$(function () {
var navHeight = $('.sticky').outerHeight(true);
$('.js-sticky').stickToTop({ offset: {top: 50}});
});
let me know how it goes.
Related
I have the following problem:
I tried to make a smooth, slow scroll to the top when clicking on a link using jQuery. I used the following script:
$(document).ready(function() {
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
$('html,body').animate({
scrollTop: $(ziel).offset().top
}, 2000 , function (){location.hash = ziel;});
});
});
On top of the page I have a <h1>-Tag with the id:start, and at the bottom I have a link defined: a href="#start">Back to top</a>
jQuery script included.
Does anybody know why it's not working in my case, but working here?
Thanks for your help!
Your code seems to work fine, when creating code snippets, be sure to include all code (html & javascript)..
please take a look at the jsfiddle i put together for you.
https://jsfiddle.net/gfe3c43u/
HINT: Make sure that you are including the proper libraries wherever you are trying to run this code (note: my jsfiddle is using jquery 2.1.0)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
On this page:
http://alien.devprose.com/screenfad
I'm attempting to have it scroll to a specific position using javascript when the page is loaded. For example purposes I have this code in the head:
<script type="text/javascript">
window.scrollTo(300,300);
</script>
However, nothing is happening. Any ideas?
It appears that you have jQuery, so the code should be in $(document).ready() like so:
<script type="text/javascript">
$(document).ready(function() { window.scrollTo(300,300); });
</script>
This way, when the window is done loading it will scroll.
You can't call window.scrollTo() until after the document has loaded. Scripts in the HTML (including both in the head and in the body) are executed before that. This StackOverflow question should explain the best ways to run scripts after it's finished loading. In summary:
window.onload = function() { window.scrollTo(300,300); };
http://mogswamp.com/testing/
Clicking the "Click to see incentives" header should make the boxes drop down. I have no idea what is wrong. I've been fiddling with this a while, and am at a loss. I'd really appreciate some help.
<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/testing/extend.js"></script>
extend.js
(function(){
$('.incentives').hide();
$('.incentives-click').on("click", function(){
$('.incentives').fadeToggle();
});
})();
If you need me to submit anything else, just ask, but it should be easy to see in the page source. Thanks.
Looks like your code is executing before your scripts and/or page is fully loaded. Try this:
$(document).ready(function() {
$('.incentives').hide();
$('.incentives-click').on("click", function(){
$('.incentives').fadeToggle();
});
});
Either put your javascript at the bottom of the page as you should, rather at the head, or make it work with content added after it. Try event delegation, or waiting for DOM ready
Here is a link to some code that i would like to implement.
http://jsfiddle.net/g7gYy/12/
I am having a bit of trouble working out where to place the code and to actually get it too work.
Here is an html file that I have uploaded: http://www.canning.co.nz/Game/testmarquee.html
Can I please have some help with this?
thanks
First you didnt added jquery lib to your page add it.
<script src="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Next put all your code in document ready because before document get ready your code get executed but elements are not ready to do some operations
$(document).ready(function() {
var $text = $('.text-to-scroll', $marquee);
var textWidth = $text.width();
var $marquee = $('#marquee');
var marqueeWidth = $marquee.width();
$marquee.css('height', $text.height());
function animateLoop()
{
//First lets put if out of view to the left
$text.css('left', -textWidth);
//Now it's out of view, change it's display from none to block
$text.css('display', 'block');
//Now we can animate it so that if scrolls across the screen
//http://api.jquery.com/animate/
$text.animate({ 'left' : marqueeWidth }, 10000, 'linear', animateLoop);
}
});
Your javascript file link is not good.
<script language="JavaScript" type="text/javascript" src="marquee.js">
make sure the marquee.js file is in the same folder as your testmarquee.html page.
Later Edit:
Ow, scratch that, i was wrong, Mateusz was in fact right.:D
I am using the following script to scroll to the top of a scrolling DIV when a link is clicked:
<script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('#disqus_thread').animate({scrollTop: $("#"+id).position().top},3000,'easeOutQuint');
}
</script>
Here's the html for the link:
<div id="commenttext"><img src="files/comment.png" class="imgHoverable"></div>
I would like the textarea that is underneath the DIV that is scrolled to to have the focus added to it after the scroll. I presume this would mean adding code something like this:
$("textarea.placeholder").focus();
But I am not sure how to include this in the above script. I tried adding it as a line at the end of the script, but it didn't work.
Could someone help me out with this?
Thanks,
Nick
function goToByScroll(id){
$('#disqus_thread')
.animate({scrollTop: $("#"+id).position().top},
3000,
'easeOutQuint',
function() { $("textarea.placeholder").focus(); }
);
}
The last argument when passed this way is the complete callback.
Documentation.