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.
Related
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
So I have the following code:
$("#btn1").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#div").offset().top
}, 2000);
$("#div").addClass("flash");
setTimeout( function(){
$("#div").removeClass("flash"), 1000;
}, 1000);
});
When I click on the button it will scroll down to the div and flash its color (flash class). But what if the div is at the bottom of the page? I need the ode above to be changed so that the scrollTop is executed first AND is finished and then execute the next piece of code (the addClass and the setTimeout function). I assume I need to add a delay? Or something that checks whether the function is complete and if so, start the next one?
I think what you're looking for is animation callback. It's the forth parameter to the .animate() method: http://api.jquery.com/animate/
So in your case it would look like this:
$("#btn1").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#div").offset().top
},
2000,
'swing',
function () {
$("#div").addClass("flash");
setTimeout( function(){
$("#div").removeClass("flash"), 1000;
}, 1000);
});
});
Btw. it's a good practice to cache a jQuery selectors for optimisation (jQuery won't be searching the DOM for the queried nodes, and running the its constructor function each time).
I also refactored this code a bit for readability and to separate the flashing functionality, so you can either use it conveniently in such callbacks (in which case the function will get the animated element as this object, or just run it directly, passing it any jQuery element (e.g. flash($('.anything')))
$("#btn1").click(function(event) {
event.preventDefault();
$div = $('#div');
$('html, body').animate({
scrollTop: $div.offset().top
}, 2000, 'swing', flashElement});
});
function flashElement(element) {
element = element || this;
element.addClass("flash");
setTimeout( function(){
element.removeClass("flash"), 1000;
}, 1000);
}
You just need a callback...
$("#btn1").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#div").offset().top
}, 2000, function(){
$("#div").addClass("flash");
setTimeout( function(){
$("#div").removeClass("flash"), 1000;
}, 1000);
});
});
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.
I'm using a simple piece of code inorder to have internal links scrolls to specific divs. It works they way I intended but it also reloads the page. The scroll works perfect, just that I need it to not reload the page. Also if this matters, Im using this inside a Wordpress theme I created.
HTML:
This may sound crazy, So hire me maybe?
<div id="hiremenow"></div>
SCRIPT:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
void(0);
});
});
});
Return a false value.
$('a[href^="#"]').on('click',function (e) {
//whatever...
return false;
});
This means "the click event has been handled, do not perform the standard action".