jQuery run onclick function only once - javascript

How can I execute this function only one time?
I tried .one but it doesn't work
$('a.inspire-tag').on('click',function () {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
});


If you want to do is just click once to enable
Try this:
$('a.inspire-tag').on('click',function () {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
$('a.inspire-tag').off('click');
});


$('a.inspire-tag').on('click',doThis);
function doThis () {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
//you can off all on callback function
$('a.inspire-tag').off('click',doThis);
}


Use .off(), with name spaced event names
$('a.inspire-tag').on('click.myevent', function () {
if (...)
// remove current event handler
$(this).off('click.myevent')
});


var oneTime = true;
$('a.inspire-tag').on('click',function () {
if(oneTime) {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
oneTime = false;
}
});


var inspiretag = $('a.inspire-tag');
inspiretag.on('click',function () {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
inspiretag.off('click');
});
http://api.jquery.com/off/

Related

Variable in jquery

How can I use this property .animate({ scrollTop: 0 }, 'fast'); here :
forcedScrollToTop = () => {
let ul = this.scrollarea;
ul.scrollTop(0);
};
I want to call jQuery’s animate here instead of the native scrollTop method?

You can try this:
$("#btn").on('click', function() {
$("HTML, BODY").animate({ scrollTop: 0 }, 1000);
});

Javascript array click

I'm trying to avoid having the same lines of Javascript for the same purpose.
I have 3 sections:
<div class="specs"></div>
<div class="description"></div>
<div class="comments"></div>
And these 3 links:
Produkt beskrivelse
Produkt specs
</i>Kommentarer
And this javascript which, on click scrolls to the section
$(".facebook").on('click', function () {
$('html, body').animate({
scrollTop: $(".comments").offset().top - 200
}, 1000);
});
$(".readMore.desc").on('click', function () {
$('html, body').animate({
scrollTop: $(".description").offset().top - 200
}, 1000);
});
$(".readMore.spec").on('click', function () {
$('html, body').animate({
scrollTop: $(".specs").offset().top - 200
}, 1000);
});
These 3 pieces of javascript code is annoying because it does the exact same thing.
A live example can be seen here a live example. You'll see the 3 buttons on the right of the product image.
I don't know if a solution could be to add an array of some sort?

One way of handling this is giving each link a data- property that describes where the link should scroll to. You can use .data() to access these properties.
$(".readMore").on('click', function() {
// Get the selector of where to scroll to
var selector = $(this).data('selector');
$('html, body').animate({
scrollTop: $(selector).offset().top - 200
}, 1000);
});
html, body {
height: 100%;
}
div {
height: 100%;
margin-top: 20px;
border: solid 1px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Produkt beskrivelse
Produkt specs
Kommentarer
<div class="specs">
Specs
</div>
<div class="description">
Description
</div>
<div class="comments">
Comments
</div>

Common classes (which you have) and data attributes will save you here.
Produkt beskrivelse
Produkt specs
</i>Kommentarer
And now, one handler to rule them all:
$(".readMore").on('click', function () {
var dest = $(this).data("dest");
$('html, body').animate({
scrollTop: $(dest).offset().top - 200
}, 1000);
});

//extraced the common parts
function scrollToTop ( elementSelector ) {
$('html, body').animate({
scrollTop: $(elementSelector).offset().top - 200
}, 1000);
}
$(".facebook").on('click', function () {
scrollToTop('.comments');
});
$(".readMore.desc").on('click', function () {
scrollToTop('.description');
});
$(".readMore.spec").on('click', function () {
scrollToTop('.specs');
});

Use a helper function instead of copy-pasting your code
function foo(target, element) {
target.on('click', function () {
$('html, body').animate({
scrollTop: element.offset().top - 200
}, 1000);
});
}
foo($(".facebook"), $(".comments"));
foo($(".readMore.desc"), $(".description"));
foo($(".readMore.spec"), $(".specs"));

Probably better you just read the class on the object, split it to get the value you want. As such:
$('.readMore').on('click', function() {
var classes = $(this).attr('class');
var cursor = class.split(' ')[1];
if(cursor == 'facebook') {
...
}else if(cursor == 'desc') {
...
} else if(cursor == 'spec') {
...
}
});

First you'll need to map which dom is effecting which. you could have solved this by using some kind of class name convention. I'll assume you can't decide on the class names. So let's create a map/object/hash
var map = {
spec: "specs",
desc: "description",
facebook: "comments,
}
Now let's just iterate the map and add the functionality
Object.keys(map).forEach(function(key) {
var value = map[key];
$(".readMore." + key).on('click', function () {
$('html, body').animate({
scrollTop: $("." + value).offset().top - 200
}, 1000);
});
})
And now you are a happy coder.

If you've learned closures, I prefer those to make re-usable events more readable...
I have a jsFiddle for this here
// use a closure to make your event's callback,
// with the target as a parameter
function makeClickFn(target) {
return function() {
$('html, body').animate({
scrollTop: $(target).offset().top - 200
}, 1000);
};
}
var clickFn;
// facebook comments
clickFn = makeClickFn('.comments');
$(".facebook").on('click', clickFn);
// readmore description
clickFn = makeClickFn('.description');
$(".readMore.desc").on('click', clickFn);
// readmore specs
clickFn = makeClickFn('.specs');
$(".readMore.spec").on('click', clickFn);

jQuery combine 2 scripts to achieve smooth scrolling to anchor

I have the following jquery function which shows / hides content depending on the div that is selected...
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
jQuery(this).addClass('selected').siblings().removeClass('selected');
jQuery('.targetDiv').hide();
var selector = '#div' + jQuery(this).data('target');
jQuery(selector).show();
location.hash = selector;
});
});
http://jsfiddle.net/W4Km8/7944/
I also have the following script taken from http://1stwebmagazine.com/jquery-scroll-to-anchor-point
$(document).ready(function(){
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-40
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
I am trying to combine the 2 so that instead of jumping to the anchor it scrolls to it. Do I need to combine them or can they be made to work separate?

Looks like you can combine them easily enough, I've made it work with this jsfiddle: http://jsfiddle.net/9soxbhpj/
var target = jQuery(selector);
target.show()
$('html, body').stop().animate({
'scrollTop': target.offset().top-40
}, 900, 'swing', function () {
window.location.hash = selector;
});

You can add the scroll action in the same click call.
See the js:
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
var _el = jQuery(this),
_target = jQuery('#div' + _el.data('target')),
_targetDiv = jQuery('.targetDiv');
_el.addClass('selected').siblings().removeClass('selected');
_targetDiv.hide();
_target.show();
// Scroll to object
$('html, body').animate({
scrollTop: _target.offset().top
}, 800);
});
});
Here is a working example.

jQuery - Create a function and call it

How can I create a function in jQuery and call it?
This doesn't seems to be correct:
var scrollLink = function() {
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top-20
}, 300);
};
$('.js-ask').click(function(e) {
e.preventDefault();
$('[href="' + this.dataset.target + '"]').tab('show');
reportReadMessages();
});
$(".js-scroll").click(function(e, scrollLink) {
e.preventDefault();
scrollLink();
});

You aren't passing what is this in the scrollLink(). It is a function with empty parameters, when it doesn't understand what this is. So please change it to:
$('.js-ask').click(function(e) {
e.preventDefault();
$('[href="' + this.dataset.target + '"]').tab('show');
reportReadMessages();
});
$(".js-scroll").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top-20
}, 300);
});
You are not passing the scrollLink in the right way. That's why it didn't work.
Or you can extend the function this way:
$.fn.scrollLink = function() {
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top-20
}, 300);
};
And you can call on the elements like:
$(this).scrollLink();
$(selector).scrollLink();
See How to add a function to jQuery? for more information.

Smooth Scroll Down whilst slideDown

How can I make the page smoothly scroll down a specified amount at the same time as the slideDown? e.g. 75% or 750px
$(document).ready(function(){
$("#block-full-content-thumb-1").click(function(){
$("#panel-1").slideDown("slow");
});
});

$(document).ready(function(){
$("#block-full-content-thumb-1").click(function(){
$("#panel-1").slideDown("slow");
});
});
$(document).ready(function () {
$('#block-full-content-thumb-1').click(function () {
$('html, body').animate({
scrollTop: $('#portfolio-sep').offset().top
}, 'slow');
});
});
$(document).ready(function(){
$("#panel-close").click(function(){
$("#panel-1").slideUp("slow");
});
});
$(document).ready(function () {
$('#panel-close').click(function () {
$('html, body').animate({
scrollTop: $('#portfolio-top').offset().top
}, 'slow');
});
});

Categories

Resources