Libby learns some jquery

[jquerybits]

Only want a function to fire one time?

```    $('.content-wrapper').on('scroll', throttle(function () {        if (someCondition) {           // do something, then            // stop function firing once class has been added            $contentWrapper.off('scroll');        }    }, throttleInterval));

[jquerybits]

Box Sizing | CSS-Tricks

The box-sizing property can make building CSS layouts easier and a lot more intuitive. It's such a boon for developers that here at CSS-Tricks we observe I

Not jquery, but damn useful for fluid width designs.

[jquerybits]

Using background-image to fit an image proportionately & responsively to parent container

Take the first image in a container, set it as the container’s background img, then use css to make sure that the image is centered and will always cover the background area:

$(’.container’).each(function() {            var containerBk= ‘url("’ + $(this).find('img:first-child’).attr('src’) + ’")’;           $(this).css('background-image’, boxBk).css('background-size’, 'cover’).css('background-position’, 'center’);           $(this).find('img:first-child’).hide();        });

[jquerybits]

Making a dropdown menu...

There are probably better ways of doing this, but just for my own record...

When you hover over a nav item, hide any dropdowns already showing and show the new dropdown

$('.mainNav>a').mouseenter(function() { $('.subNav').hide(); $(this).next('.subNav').slideDown(); });

Then, so you don't get "stuck" dropdowns, set them to go away when the mouse leaves either that item or the parent container

$('.mainNav, .subNav').mouseleave(function(){ $('.subNav').hide(); });

[jquerybits]

Lazy copy paste for "each"

$('.selector').each(function() { // do the thing });

[jquerybits]

Try .prev() instead of .closest()

Because the documentation on the official site is a bit shonky: .closest() doesn't behave the way I would expect: it looks for the closest ancestor, not sibling. .prev() finds the closest previous sibling (doesn't have to be a matched type, as you might expect from some descriptions)

[jquerybits]

Do some magic when a field is updated with 'Blur':

$('body').on('blur', '.fieldSelector', function(event){ /* do stuff */ });

[jquerybits]

Hooking on to elements that were created after the DOM was created:

Use something that you know existed, eg body. Use 'on' to attach the event (eg 'click') to your element. They used to use 'bind' but that has been deprecated.

$('body').on('click', '.elementName', function(event){ /* do some things */ event.preventDefault(); });

[jquerybits]

Get all items not equal to index

.not(':eq(' + index + ')')

eg

$('.modalContent>li').not(':eq(' + index + ')').hide();

[jquerybits]

Scroll to the top of...

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

[jquerybits]

Snip some text out of a div (or wherever)

Cut out the text, join the rest of it back together:

$('.selector').text($(.selector).text().split('cut this out').join(''));

[jquerybits]

Not jquery, but useful: hiding text in ie7

Text-indent doesn't always do the trick. Know what does? Adding text-transform: capitalise

http://css-tricks.com/snippets/css/remove-button-text-in-ie7/

[jquerybits]

Select everything except the first instance

You could use "not", eg

$("ul li").not(":eq(0)").css("background-color", "pink");

Or you could use the greater than selector, eg

$('section p:gt(0)').css('display', 'none');

[jquerybits]

"In general you want to use mouseenter and mouseleave instead of mouseover and mouseout"

http://www.quirksmode.org/dom/events/mouseover.html

"The mouseover event fires when the user moves the mouse onto an element. The mouseout event fires when the user moves the mouse out of an element. Unfortunately these events bubble up.

mouseover fires when the user moves the mouse over the element you registered the event on or one of its descendants. mouseout fires when the user moves the mouse out of the element you registered the event on or one of its descendants.

mouseenter and mouseleave are similar to mouseover and mouseout, but these events do not bubble.

In general you want to use mouseenter and mouseleave instead of mouseover and mouseout."

eg:

$('#panels li a').mouseenter(function() { $(this).find('span').animate({'top': '0'}, 'fast'); }).mouseleave(function() { $(this).find('span').animate({'top': '100%'}, 'medium'); });

[jquerybits]

Need to work with a range of values (eg everything less than x?) Slice it.

Say, for example, you want to add a class to every list item with an index position less than x. You could make a counter and loop through the possible values, or you could just slice that baby:

$('.yourSelector li').slice(0, yourVariable).addClass('yourClassName');

if you don't specify an end point it will go all the way to the last item

if you use negative numbers (eg

$('.yourSelector li').slice(-2, -1).addClass('yourClassName');

then you work from the end of your items, in this case between two from the end (-2) and one from the end (-1).

[jquerybits]

Turn it into a function

Set up your function before (document).ready, then call it as required - (document).ready or window resize.

<script type="text/javascript"> function functionName() { // Jquery stuff goes in here } $(document).ready( function() { functionName(); }); window.onresize = function(event) { functionName(); } </script>

[jquerybits]

Not jquery, but because I never remember how to do a horizontally centered navigation bar with CSS

Set up your navigation list:

<ul class="nav"> <li><a href="#">item 1</a> <li><a href="#">item 2</a> <li><a href="#">item 3</a> </ul>

Then work your magic with the CSS:

ul.nav { text-align: center; } .nav li { display: inline-block; vertical-align: top; /* for ie */ zoom: 1; *display: inline; } .nav a { display: inline-block; vertical-align: top; /* for ie */ zoom: 1; *display: inline; }

Add in whatever other delicious CSS stylings you need also, of course :)