background preloader

Jquery

Facebook Twitter

Map

Easy Full Screen Background Images with jQuery by Scott Robbin. “There are many like it, but this one is mine.” A recent Weightshift project, Central, brought about a few development challenges, one of which was background imagery. Naz had designed the page to include photography set behind the content. This raised questions: How would we deal with the additional weight of the images (~150–250K) without dragging down the page’s load time? Everyone’s browser window will be a different size.

How do you determine what is the best/largest size to make the image, so that it fills the entire window? How do you account for images that are proportioned differently? I did some research and found a few good solutions, though each had its limitations. CSS-based solutions were straightforward, but didn’t address the requirement of triggering the download only after the page was ready. Backstretch is a simple plugin recreated from the code used on Central, derived from the ideas presented in existing CSS and JS solutions.

Download Backstretch. Raptorize: An awesome jQuery plugin that unleahes a Raptor - ZURB Playground - ZURB.com. You're sitting at your desk, coding up a 500 page site, knee-deep in Extreme Cheddar Doritos sipping on a liter of Code Red Mountain Dew when you realize...this page would be: You immediately scramble home to grab your Jurassic Park DVDs so can screencap a Velociraptor attack, but then you realize how hard it would be to make an awesome raptor run across the site you were coding. Plus, how are you going to get that trademark velociraptor screech? How about we let you in on a little secret? We already did it. The Raptorize Kit First things first, you need to download the Raptorize Kit. An awesome Raptor GraphicMP3 and OGG audio files for the HTML5 audio on Webkit and Firefox Our jQuery Plugin which makes the magic happen The jQuery Library to make all the pieces work together An example HTML file that has all the initial setup pieces Next, open the index.html file and click the button to activate a prehistoric beast.

The Code You Need The Options What's that? Credit Where Credit is Due. Working with Better Exposed Filters. NOTE: This handbook page, like all documentation on drupal.org, is a community effort. If you have any corrections please edit this page. If you have any suggestions, feature requests, or bug reports please post them in the Better Exposed Filters issue queue. The Better Exposed Filters (BEF) module replaces the default single- or multi-select boxes that normally appear in Views' exposed filters with radio buttons or checkboxes, respectively.

It can also replace date filter with a jQuery UI datepicker or yes/no filters with a single checkbox or (coming soon!) Numerical filters with jQuery UI sliders. Versions Drupal 7.x or Drupal 6.x? Better Exposed Filters was recently re-versioned to make things easier: Drupal 6.x with Views 2.x: Use BEF 6.x-2.xDrupal 6.x with Views 3.x: Use BEF 6.x-3.xDrupal 7.x with Views 3.x: Use BEF 7.x-3.x Note: Once a final 6.x-2.0 release is made, this will become a bug-fix-only branch. Background Why use this module? People understand checkboxes. Installation Usage. Building a Custom HTML5 Audio Player with jQuery « Neutron Creations. We recently built an HTML5 audio player for Tim Van Damme's The Box, a new podcast where he interviews people who make cool stuff. Tim wanted an HTML5 audio player on the site, and we put together some jQuery to hook up the player interface he designed. In this article we'll run through the code to explain how it works, covering a few caveats along the way.

Here's the player interface, and the markup for it. As you can see, we have a few span elements for each component of the interface: playtoggle is the play/pause toggle button. gutter is the timeline track loading is the bar indicating the loading or buffering progress handle is the circular element that serves as the playhead, indicating current position in the audio file, and also acting as a drag handle to move to a different point of the audio timeleft is the play time remaining, in minutes and seconds We won't cover the CSS for the player here, but if you want to see how it's styled you can inspect the styles on the live site. if(!!

MODx | Wayfinder - Nested jQuery Accordion. 13 Websites with Mind-Blowing jQuery Effects. This is a guest post from Sean – a multimedia addict with a specialty in Front-End Development. He is the creator of Freshen Up Design, a multimedia design blog dedicated to resources from all realms of digital media. Connect with him on Twitter, or visit the blog. The battle between HTML5 and Flash has been raging on for the past year or so, with Steve Jobs and his friends at Apple making a strong case for a Flash-less future. And while HTML5 can do some pretty awesome effects, it’s not up to standards yet. Flash has always been buggy, and a lot of users often have Flash disabled for various reasons. Enter jQuery. jQuery has gotten exponentially better over the years (and it was already awesome to begin with) and it is truly amazing to see people push it to it’s limits and beyond.

Here’s a list of 13 websites that are really taking advantage of jQuery’s easy to use API. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14 Helpful jQuery Tricks, Notes, and Best Practices. If there is one bad thing about jQuery, it's that the entry level is so amazingly low, that it tends to attract those who haven't an ounce of JavaScript knowledge. Now, on one hand, this is fantastic. However, on the flip side, it also results in a smattering of, quite frankly, disgustingly bad code (some of which I wrote myself!). But that's okay; frighteningly poor code that would even make your grandmother gasp is a rite of passage. The key is to climb over the hill, and that's what we'll discuss in today's tutorial. 1.

It's important to remember that most methods will return the jQuery object. Knowing that the jQuery object is always returned, we can use this to remove superfluous code at times. The reason why we "cache" the location of the someDiv element is to limit the number of times that we have to traverse the DOM for this element to once. The code above is perfectly fine; however, you could just as easily combine the two lines into one, while achieving the same outcome. 2.

Proof. Jacob O'Neal {Graphic/Web Design} Inline Expansion – Why And Where To Use It. When you hear the words “Inline Expansion” you probably think of a jQuery accordion. In essence that’s correct, but entirely dependant of its functionality. The act of expanding content vertically or horizontally allows us to show important data we’d like our users to pay attention to. Essentially focus is a critical factor as we only show the user what they want/need to see and the rest is hidden until the user calls upon it.

Inline expansion works with hierarchical elements that don’t always require its information to be revealed in specific order. Working with an inline expansion means you have a primary element followed by secondary elements that are put into play when the user calls upon them. Why Use It? Inline Expansion is a simple way to tidy up your content so that it can be delivered in an effective manner without having to compromise functionality. This is directly associated with enhancing the user experience and encouraging the flow of information towards the user. Muxtape. jQuery for Designers - Tutorials and screencasts.

Learning jQuery - Tips, Techniques, Tutorials.