Useful javascript-snippets

__useful_javascript-snippets.md

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

animation-ends.js

//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.js

//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);
    });
});

get_closest_in_group.js

//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();
	});

reach_this_inside_funsction.js

//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();
}

scroll-to-top.js

$('html, body').animate({
    scrollTop: ($(this).offset().top)
},500);

skip-to-content.js

$('.js-skip-navigation').click(function(){
  var skipTo="#"+this.href.split('#')[1];
  $(skipTo).attr('tabindex', -1).on('blur focusout', function () {
    $(this).removeAttr('tabindex');
  }).focus();
});

time-interval.js

//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-specific.js

//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();
});