I'm using the grayscale bootstrap template for a wordpress theme. I have my scripts enqueued, but I'm not sure how to fix the syntax on the original javascript. The functionality works like this: click on a link and it slides you down to the id attribute.
Here is the original code:
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
And I replace the $ with jQuery because of .NoConflict
jQuery(function() {
jQuery('.page-scroll a').bind('click', function(event) {
var $anchor = jQuery(this);
jQuery('html, body').stop().animate({
scrollTop: jQuery($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Then I get this error:
TypeError: 'undefined' is not a function (evaluating 'x.easing[this.easing] (e,this.options.duration*e,0,1,this.options.duration)')
The $anchor is local, so I'm sure it doesn't matter. Infact I've replced it also, but I get the same result. Any suggestions? Does the problem lie in this line var anchor = jQuery(this);?
It turns out I was loading the wrong library. I needed to load the easing library instead of the jQuery UI library.
Related
hi i am working on a single page website, issue i am facing right now is when i click on anchor of menu, it goes few pixels bellow the required area as shown in pic
i want it like
i have tried this code but no success
Make anchor link go some pixels above where it's linked to
Javascript i am using is
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
i got the solution of issue just by subtracting the desired height form the actual height.
Complete and running code for me is following
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
var desiredHeight = $(window).height() - 577;
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - desiredHeight
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
How to change this javascript to coffeescript?
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
I tried this code in my rails project,but it doesn't work
$(document).on 'page:change', ->
$('a[href^="#"]').click (event) ->
event.preventDefault()
target = this.hash
$target = $(target）
$('html, body').stop().animate{
'scrollTop': $target.offset().top
}, 900,
'swing', ->
window.location.hash = target
Do I have something wrong?
I think this will work:
$(document).ready ()=>
$('a[href^="#"]').on 'click', (e)=>
e.preventDefault()
target = #hash
$target = $(target)
$('html, body').stop().animate scrollTop:$target.offset().top, 900, 'swing', ()=>
window.location.hash = target
You asked if you've did something wrong, so here's a couple of things to keep in mind (sorry if this is obvious to you already):
The first line of your CoffeeScript version is completely different than the JavaScript version. (document.ready vs. document.on('page-change'))
CoffeeScript is whitespace-sensitive. I don't know if its just the StackOverflow formatting or in your actual code, but without leading spaces in your second line, the callback passed to $(document).on 'page:change', -> is a no-op. In other words, the Javascript version would be $(document).on('page:change', function(){});
Similarly, the spaces that indent lines 9 (the one that starts with 'scrollTop') and 11 (the one that starts with 'swing') are likely to cause problems also.
I know that this problem got probably asked and solved a thousand times, yet I need advice on my specific case.
I've set several anchors on my website and I'm using jquery to smoothly scroll between them. I've been using a #top anchor to scroll to the top of the page and it works. The problem is, however, that if I let the button scroll to #top it won't scroll to the absolute top of the page (since I can't set the anchor high enough on the webpage).
I tried to get it work with the window.scrollTo(0, 0); command, but I don't know how to get it to work while still having the possibility to scroll to anchors.
I used the following jQuery for the anchor-scrolling:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
With this HTML:
<a href="#top">
<img alt="" heigth="60" onmouseout="this.src='http://i.imgur.com/0JvWWER.png'" onmouseover="this.src='http://i.imgur.com/Ow7CVn0.png'" src="http://i.imgur.com/0JvWWER.png" width="60" />
</a>
Now, how do I get the window.scrollTo(0,0); to work and how do I implement it in the html body?
Thanks in advance.
As somethinghere says, do a small change here:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = $(this).attr("href");
$('html, body').stop().animate({
// Change here...
'scrollTop': ((target === '#top') ? 0 : $(target).offset().top)
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
<select>
<option value="#anchor">Anchor</option>
</select>
<a id="anchor">Anchor</a>
I'm trying to get it to scroll smoothly, but it hasn't worked so far. The workable tutorials I found online were with regular vertical menus, not a dropdown. Does anyone know how to get this working? I've been using this:
<script>
$(document).ready(function(){
$('option[value^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 1000, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
seems you need to scroll to anchor when you change the select value so
1st: change you selector to select and use change event for it
2nd: get selected value by using $(this).val();
<script>
$(document).ready(function(){
$('select').on('change',function (e) {
e.preventDefault(); // no need to use this line
var target = $(this).val();
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing', function () { // swing here will work if you include jquery-ui without that it will not make a effect
//window.location.hash = target;
});
}).change();
});
</script>
Working Demo
Note: be sure to include jquery
I'm using the following jquery to make my links scroll to the next div. However, I've run into a problem. From the top of the page the script works fine. As soon as I click a link from another div (another link further down the page) the script only scrolls so far either up or down but not to the next specified div. How can I make the script scroll fully from the current location of where the link is located?
$(function() {
$('#nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
You have a error here:
scrollTop: $($anchor.attr('href')).offset().top
//------^^^^^^^---------------------------------this itself a selector
change to this and try with:
scrollTop: $anchor.attr('href').offset().top
or this one too:
$('#nav a').bind('click',function(event){
var $anchor = $(this).attr('href');
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
CHECKOUT IN FIDDLE
You're not calling the correct spot...
this should do the trick... Set the anchor point first.
$(function() {
$('#nav a').bind('click',function(event){
var $anchor = $(this).attr('href');
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
ok, so I've made you a JSFiddle, the js-code I rewrote to the code below, but you can have a have a look at the full thing here: http://jsfiddle.net/re7Xc/
$(function() {
$('a.scrolltonext').click(function(event){
event.preventDefault();
var parentblock = $(this).parent();
var nextblock = parentblock.next();
//nextblock.css('background-color','#00f');
if(nextblock.size()>0) {
$('html, body').stop().animate({
'scrollTop': nextblock.offset().top
}, 800);
}
});
});
the catch in this script though is that I put the links in the div itself, so it's not in a #nav somewhere. So you'd have to rewrite that part if you put the links in your #nav!
I put an if-statement in there as well, because I thought it'd be better if you check if there is a next-div first, before scrolling there.
Hope it makes some sense, and let me know if it works for you!
cheers