Developers: jQuery

Showing posts with label jQuery. Show all posts

Image Load detection

$('<img />').load( function(){
console.log('Image Loaded');
$(".js-gallery-popup-loader").hide();
}).attr('src', item.imagePath);

Javascript/jQuery Same but little difference

mousedown vs click
parents vs closest

iFrame Resizer

https://github.com/davidjbradshaw/iframe-resizer

<iframe frameborder="0" src="https://bookings.thepoodle.com.au" width="100%" scrolling="no"></iframe>

<script type="text/javascript" src="js/iframeResizer.min.js"></script>

$(function() {
 iFrameResize();
})

iFrame height

$('iframe').load(function () {
    $('iframe').height($('iframe').contents().height());
});

$( window ).load(function() {
    var iFrames = $('iframe');
    for (var i = 0; i < iFrames.length; i++) {
        $frame = $(iFrames[i]);
        $frame.height($frame.contents().height());
    }
});

Infiniy Scroll

jQuery(window).scroll(function($) {
   if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height() && load_data==true) {
      jQuery('.loadMoreBlogBtn').trigger('click');
   }
});

Portfolio

jQuery.noConflict();

jQuery(document).ready(function($){

    mixitupCall();
    
    function mixitupCall() {

        $('#portfolio').mixitup({
            targetSelector: '.item',
            transitionSpeed: 450,
            onMixLoad: function(state){
                changeRow(state);
            },
            onMixEnd: function(state){
                changeRow(state);
            }
        });
    }

    function changeRow(state) {
        var $per_row = 3;
        var $count = 0;
        var $row = 0;
        $(state.origOrder).each(function (key, value) {
            $current = $(this);
            $current.attr('class', $current.attr('class').replace(/row-.*/, ''));
            if($current.is(':visible')) {
                if($count % $per_row == 0){
                    $row++
                }
                $count++;
                $current.addClass('row-'+$row);
                $current.attr('rel', $row);
            }
        });
    }

    var portfolio_top = $('#header').height();

    $(".single-portfolio a").live('click', function (e) {
        e.preventDefault();

        var $single_portfolio = $(this).parent();
        var row = $single_portfolio.attr('rel');
        var post_id = $single_portfolio.attr('data-post_id');

        $(".portfolio-description").remove();

        data = {
            action:'portfolio',
            post_id: post_id        }

        $.ajax({
            method:"POST",
            url:ajax_url,
            data: data,
            success: function (response) {
                var html = '<div class="col-sm-12 portfolio-description" style="display: none">'+response+'</div>';

                $( ".row-"+row).last().after(html);
                $(".portfolio-description").slideDown("slow");

                if($(".our-work-section-portfolio .portfolio-description").length > 1){
                    $(".our-work-section-portfolio .portfolio-description").not(":last").remove();
                }

                customScrollTo(jQuery(".portfolio-description").offset().top - portfolio_top, 500)
            }
        });
    });


    $(".portfolio-close").live('click', function (e) {
        e.preventDefault();
        var post_id = $(this).attr('rel');
        customScrollTo(jQuery(".portfolio-"+post_id).offset().top - portfolio_top, 500);
        $(".portfolio-description").slideUp("slow", function () {
            $(".portfolio-description").remove();
        });
    });

    $('.portfolio-more').click(function () {
        
        var current_page = parseInt($(".current_page").val());
        current_page = current_page + 1;
        var total_page = parseInt($(".total_page").val());
        var item_per_page = $(".item_per_page").val();
        var start = (current_page - 1) * item_per_page;

        $.ajax({
            method : "POST",
            url : ajax_url,
            data : {
                action : 'more_work',
                current_page : current_page,
                limit : item_per_page,
                start : start            },
            success : function (response) {
                $("#portfolio").append(response);
                $(".current_page").val(current_page);
                mixitupCall();

                if(total_page <= current_page){
                    $('.portfolio-more').remove();
                }
            }
        })
    });
});

Select Text jQuery

jQuery(".category-short-code").click(function () {
   selectText(jQuery(this).attr('id'));
});

function selectText(containerid) {
   if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(document.getElementById(containerid));
      range.select();
   } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(document.getElementById(containerid));
      window.getSelection().addRange(range);
   }
}

Unselect Radio Buttons with jQuery

    <input type="radio" name="radio_group" />radio a<br />
    <input type="radio" name="radio_group" />radio b<br />
    <input type="radio" name="radio_group" />radio c<br />

<script type="text/javascript">
            $(function(){
                        var allRadios = $('input[type=radio]')
                        var radioChecked;

                        var setCurrent =
                                        function(e) {
                                            var obj = e.target;

                                            radioChecked = $(obj).attr('checked');
                                     }

                        var setCheck =
                                    function(e) {

                                        if (e.type == 'keypress' && e.charCode != 32) {
                                            return false;
                                        }

                                        var obj = e.target;

                             if (radioChecked) {
                             $(obj).attr('checked', false);
                             } else {
                             $(obj).attr('checked', true);
                             }
                                 }

                        $.each(allRadios, function(i, val){
                             var label = $('label[for=' + $(this).attr("id") + ']');

                         $(this).bind('mousedown keydown', function(e){
                                setCurrent(e);
                            });

                            label.bind('mousedown keydown', function(e){
                                e.target = $('#' + $(this).attr("for"));
                                setCurrent(e);
                            });

                         $(this).bind('click', function(e){
                                setCheck(e);
                            });

                        });
            });
</script>
http://www.12robots.com/index.cfm/2009/6/9/Unselecting-Radio-Buttons-with-jQuery

More Less

<div class="whole-content">
<div>
    This is the paragraph to end all paragraphs. You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life. Congratulations!
</div>

<div style="display:none;" class="more-content">
    This is the paragraph to end all paragraphs. You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life. Congratulations!This is the paragraph to end all paragraphs. You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life. Congratulations!This is the paragraph to end all paragraphs. You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life. Congratulations!This is the paragraph to end all paragraphs. You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life. Congratulations!
</div>
<a href="#" class="more-less-button">More</a>
</div>

jQuery

$('.more-less-button').click(function(ev) {
    ev.preventDefault();
    $(this).closest('.whole-content').find('.more-content').slideToggle();
    var text = ( $(this).text().toUpperCase() =='MORE') ? 'Less' : 'More';
    $(this).html(text);
});

=================

<div class="container-area">
<p>
<div class="short-description">Short Content</div>
<div class="full-description" style="display: none">Full Content Full Content</div>
</p>
<a href="#" class="readmore read-more-less read"><span>+</span>Read More</a>
</div>

$(".read-more-less").click(function (e) {
e.preventDefault();
$(this).parent().find('.short-description').slideToggle();
$(this).parent().find('.full-description').slideToggle();

$(this).toggleClass("read");
var $read_more_text = '<span>+</span>Read Less';
if($(this).hasClass('read')){
var $read_more_text = '<span>+</span>Read More';
}
$(this).html($read_more_text);
})

jQuery widgets

Draggable: https://jqueryui.com/draggable/
Slider: http://api.jqueryui.com/slider

Scroll Menu

 http://codetheory.in/change-active-state-links-sticky-navigation-scroll/

Setup

<nav>

  <ul>

    <li><a href="#1">First</a></li>

    <li><a href="#2">Second</a></li>

    <li><a href="#3">Third</a></li>

    <li><a href="#4">Fourth</a></li>

    <li><a href="#5">Fifth</a></li>

  </ul>

</nav>

Window height issue / Sidebar fixed

$('#home-content').height($(window).height());
$('.bottom_section').css({
    top:$(window).height()
});
$(window).scroll(function(){
    if($(window).height() < $(this).scrollTop()){
        $('.site-header').css({
            position:'fixed',
            top:0
        });
    }else{
        $('.site-header').css({
            position:'inherit'
        });
    }
});

Sidebar fixed

jQuery(window).scroll(function(){
    
    var scroll_top = jQuery(this).scrollTop();
    var sidebar_top = jQuery('.right-side-part').offset().top;
    var bottom_position = jQuery(document).height() - jQuery(".site-footer").height() - jQuery("#secondary").height();

    if ( scroll_top > sidebar_top && scroll_top < bottom_position ) {
        $('#secondary').addClass('fixed')
    }else{
        $('#secondary').removeClass('fixed');
     }
});

Colorbox / color box

var set_height = jQuery(window).height() + 21;
jQuery(document).ready(function($) {
    jQuery(".youtube").colorbox({
        iframe:true,
        width:'100%',
        //height:'100%',        height:set_height,
        rel: 'yougroup',
        fixed:true,
        current: "<span class='playing-of'>"+"Video {current} of {total}"+"</span>",
        title: function() {
            return this.title;
        }
    });
});

Make your Colorbox images responsive

<script type="text/javascript">
 // Make ColorBox responsive
 jQuery.colorbox.settings.maxWidth  = '95%';
 jQuery.colorbox.settings.maxHeight = '95%';

 // ColorBox resize function
 var resizeTimer;
 function resizeColorBox()
 {
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    if (jQuery('#cboxOverlay').is(':visible')) {
      jQuery.colorbox.load(true);
    }
  }, 300);
 }

 // Resize ColorBox when resizing window or changing mobile device orientation
 jQuery(window).resize(resizeColorBox);
 window.addEventListener("orientationchange", resizeColorBox, false);
</script>

Remove all classsess except

jQuery.fn.removeClassExcept = function (val) {
    return this.each(function () {
        jQuery(this).removeClass().addClass(val);
    });
};

jQuery(".google-map-container").removeClassExcept("google-map-container");

How do I detect a click outside an element?

<div id="searchLink" style="border: 1px solid red; display: inline">Search Icon</div>

<div class="searchContainer" style="background: #ccc;display: none">
    <p>
        Search Key: <input>
    </p>
</div>

<script>
    jQuery(document).ready(function ($) {

        $(document).click(function(e) {
            if($(e.target).closest('#searchLink').length){
                $('.searchContainer').show();
            }else{
                $('.searchContainer').hide();
            }
        });
    });
</script>

jQuery debuging

console.log( arguments.callee.caller.toString());

jQuery validation

Download from http://jqueryvalidation.org/

Include
<script src="jquery.validate.js"></script>

<script>

$("#step_1_form").validate({
    rules: {
        email: {
            required: true,
            email: true        }
    },
    messages: {
        email: "Please enter a valid email address",
    },
    submitHandler: function(form) {
        form.submit();    }
});

</script>

When using the equalTo you have to use the form name and ID. E.g:

<input type="password" name="password" id="password" value="" />
<input type="password" name="password_mirror" value="" />

$("#register_user").validate({
        rules: {
            'password_mirror': {
                minlength: 5,
                equalTo: "#password"
            }
        },
        messages: {
            'password_mirror': {
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            }
        }
    });

jquery validation form with ajax loaded form

$(document.body).on('click', '.submitBtn', function(){
    $("#form").validate({
        submitHandler: function() {
            // do anything        }
    });
});

WOW animation / jQuery WOW

Download from
https://github.com/matthieua/WOW
How to use?
http://mynameismatthieu.com/WOW/docs.html

Add css

<link rel="stylesheet" href="css/animate.css">

Link and activate WOW.js
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

HTML

<h1 class="wow fadeInUp">I took a deep breath and listened to the old brag of my heart</h1>

Parallax

Parallax ImageScroll
https://plugins.jquery.com/parallax-imageScroll/ Demo

https://github.com/IanLunn/jQuery-Parallax

jQuery get url

window.location.assign(home_url+"/downloads/setup.exe")

Get parameter value

var download_auto = getParameterByName('download_auto');

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Developers

Pages