wallacepolsom
izzy's playlists!
h
ojovivo
trying on a metaphor
oozey mess
Three Goblin Art
we're not kids anymore.
Today's Document
DEAR READER
Not today Justin
⁂
JVL
Sade Olutola
will byers stan first human second
Xuebing Du
Stranger Things
Lint Roller? I Barely Know Her
seen from Malaysia
seen from United States
seen from Türkiye
seen from United States
seen from Chile
seen from United Kingdom
seen from United States
seen from United States
seen from South Africa
seen from Germany
seen from United States
seen from Slovakia
seen from South Africa
seen from Norway
seen from Australia
seen from Malaysia
seen from Malaysia
seen from Vietnam
seen from Italy
seen from Türkiye
@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));
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
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.
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(); });
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(); });
Lazy copy paste for "each"
$('.selector').each(function() { // do the thing });
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
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)
Do some magic when a field is updated with 'Blur':
$('body').on('blur', '.fieldSelector', function(event){ /* do stuff */ });
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(); });
Get all items not equal to index
.not(':eq(' + index + ')')
eg
$('.modalContent>li').not(':eq(' + index + ')').hide();
Scroll to the top of...
$('html, body').animate({ scrollTop: $('.yourSelectorName').offset().top }, 'medium');
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
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(''));
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/
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');
"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'); });
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).
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
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>
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 :)