Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Useful javascript-snippets

Useful javascript-snippets:

  • fuzzy search
  • Get closest in a group
  • Reach clicked element inside functions
  • Scroll to top of element
  • Skip to content
  • Set timing in javascript
  • toggle specific class via general javascript and data-attributes
//after transition ends
$('.foo').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
// code to execute after transition ends
});
//after animation ends:
$('.foo').one('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend', function(e) {
// code to execute after animation ends
});
//fuzzy search a list or similar.
//from http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$(".commentlist li").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of Comments = "+count);
});
});
//quick tip to find div in a more limited scope than the whole site..
$('#target').click(function() {
$(this).closest('.blogpost').find('.part-of-blogpost').slideToggle();
});
//How to reach this (f.ex the clicked element) inside functions
$('#target').click(function() {
doThis(this); //need to set this to be able to use the variables in calculatePrice();
});
function calculatePrice(that) {
$(that).slideToggle();
}
$('html, body').animate({
scrollTop: ($(this).offset().top)
},500);
$('.js-skip-navigation').click(function(){
var skipTo="#"+this.href.split('#')[1];
$(skipTo).attr('tabindex', -1).on('blur focusout', function () {
$(this).removeAttr('tabindex');
}).focus();
});
//setting timing in js
//interval:
setInterval(function(){
console.log("hello");
},3000);
//etter 3 sekunder:
setTimeout(function(){
console.log("hello");
},3000);
//or:
setTimeout(svar1, 1500);
function svar1(){
console.log("hello");
}
//bedre løsning. Se her:
// https://css-tricks.com/using-requestanimationframe/
function repeatOften() {
// Do whatever
requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);
//Toggle a specific CSS-selector with a general script
//<a href="#" class="js-toggle" data-target="#target" >Toggle specific class</a>
$(".js-toggle").click(function() {
var toggleThis = $(this).data("target");
$(toggleThis).slideToggle(200);
if ($(this).is('.toggle-state--active') ){
$(this).removeClass('toggle-state--active');
} else {
$(this).addClass('toggle-state--active');
}
event.preventDefault();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.