javascript.md

JAVASCRIPT

Dynamic Widths

var P = $('.container div').length;

var W = 100/P+'%';

$('.container div').css({width: W;});

---

Make all your divs the same height

i.e. 3 column layout, one is super tall and the others are different heights as well

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

var divone = jQuery(".div-class").height();
var divtwo = jQuery(".div-class2").height();
//add as many divs as there are

var maxdiv = Math.max(divone, divtwo);

    jQuery(".div-class").height(maxdiv);
    jQuery(".div-class2").height(maxdiv); 

});

---

Multiple Class Slide Toggle

Hide the content

$('.target').hide();

Slide toggle the text

jQuery('.buttonToClick').click(function(){
  	jQuery('.targetParent:hover > .target').slideToggle();
		});
});

Keep the content hidden on page resize

This should be inserted right after jQuery('.targetParent:hover > .target').slideToggle(); }); and before the closing }); of the whole function.

var theWindow = jQuery(window),
	resize_ok = true,
	timer;
timer = setInterval(function () {
	resize_ok = true;
}, 250);
theWindow.resize(function() {
	if (resize_ok === true) {
	resize_ok = false;
	if(theWindow.width() >= 767) {
		jQuery('.product-details').hide();
	}
}

---

Simple Parallax

For this one, you will be using css background images.

jQuery(document).ready(function(){

            $.fn.parallax = function(options){
                var $$ = $(this);
                offset = $$.offset();
                var defaults = {
                    "start": 0,
                    "stop": offset.top + $$.height(),
                    "coeff": 0.95
                };
                var opts = $.extend(defaults, options);
                return this.each(function(){
                    $(window).bind('scroll', function() {
                        windowTop = $(window).scrollTop();
                        if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
                            newCoord = windowTop * opts.coeff;
                            $$.css({
                                "background-position": "0 "+ newCoord + "px"
                            });
                        }
                    });
                });
            };
            $('.parallaxedDiv').parallax({ "coeff": 0.5 });
            // Add additional segments to parallax multiple "items"
            // Use a different coeff to change the speed
            $('.parallaxedDiv2').parallax({ "coeff": 0.85 });
});

---

Another Simple Parallax

This is for html images.

function parallax(){
  	var scrolled = jQuery(window).scrollTop();
  	jQuery("#image-parallax").css("top", -(scrolled * 0.5) + "px");
  }
  jQuery(window).scroll(function(e) {
  	parallax();
  });

---

Hover Show and Hide

jQuery(document).ready(function() {
 
	jQuery('#parent).hover(
		function () {
			jQuery(this).find('.child1').hide();
			jQuery(this).find('.child2').show();
		},
		function () {
			jQuery(this).find('.child1').show();
			jQuery(this).find('.child2').hide();
		}
	);
});

---

Dropdown Toggle

$('.dropdown-menu').hide();
// Nav Dropdown
$('#navigation li').hover(function(){
	$(this).find('.dropdown-menu').toggle();
});

---

Mobile Nav Toggle

The markup: (I typically use Font Awesome for mobile navigation icons)

<a href="javascript:void(0)" class="mobile-nav"><i class="icon-align-justify></i></a>
<div id="navigation>
    <ul>
	<li><a href="#">Nav Item 1</a></li>
    </ul>
</div>

The jquery:

// Mobile Nav Toggle
jQuery('.mobile-nav').click(function(){
	jQuery('#navigation').slideToggle();

	var theWindow = jQuery(window),
		resize_ok = true,
		timer;
	timer = setInterval(function () {
		resize_ok = true;
	}, 250);
	theWindow.resize(function() {
		if (resize_ok === true) {
		resize_ok = false;
		if(theWindow.width() >= 767) {
			jQuery('#navigation').show();
		}
		else {
			jQuery('#navigation').hide();
		}
	}
});

---

Dynamic Differing Height DIVS

I used this on a recent Drupal site I was working on, in which there were 5 callouts on the homepage for services. The first and last were about 80% the height of the middle one and the 2nd and 4th were 90%. I wrote this to change those heights while maintaining the responsive nature of the site.

  Drupal.behaviors.serviceHeights = {
    attach: function (context, settings) {

      function srvHgts() {
        var maxHgt = $('.services .views-row-3').height();
        var evenHgt = $('.services .views-row-even');
        var firstHgt = $('.services .views-row-first');
        var lastHgt = $('.services .views-row-last');

        evenHgt.height(maxHgt * 0.9);
        firstHgt.height(maxHgt * 0.8);
        lastHgt.height(maxHgt * 0.8);
      }

      window.onresize = srvHgts;
    }
  };