Overflow Image with vertical centering for Responsive Web Design If you want to use an image in your responsive web design you can use fluid images. But there is another way. You can set a maximum height and crop the image. So how does this work? If you now change the width of the container, you will see that the image adapts the container's width but does not exceed the max-height. Now you have a cropped image that adapts the width of your container. To do this you can use JavaScript (jQuery). margin-top = (container height - image height) / 2 Then call a JavaScript function on the events load, resize and here comes the special: "transitionend". So just use a CSS transition to change the max-width and you can fire the callback function when the transition ends. You can use a CSS transition for the margin-top of the image to make it smooth. That's it. PS: It would be great to see a solution for this technique with CSS only.
Hoverizr - A responsive jQuery Image manipulation and overlay plugin | Grayscale, Blur, Color Inversion Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. Currently, it features three effects: grayscale, blur and color inversion. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one. hover mouse over the image to see the original version Hoverizr takes advantage of the <canvas> element to do all the image processing. Version 1.0 Minified Version - 2.5KB: jquery.hoverizr.min.js Developer Version - 6.3KB: jquery.hoverizr.js Or you can download it on GitHub 1. As said earlier, Hoverizr takes advantage of the <canvas> element's image proccessing capabilities. Then, depending on whether you wanted the manipulated image to be above or below the original, on mouse over the top element fades out to reveal the element below. That's not all though. 2. And you are done. 3. Here they are: 4. 5.
Apprise - The attractive alert alternative for jQuery The initial release of Apprise has been a major success and is often what this site is most commonly associated with. As far as I've been able to track, Apprise has been downloaded over 23,000 times and has been mentioned in over 46,000 blogs. Which is fantastic, especially for something that I've never been very proud of. I've wanted to update, and change the UI, of this for over a year now. Demos Let's get right down to business. Pretty slick, right? Let's take a peak at the default settings before we change the options around a bit. You'll notice that the buttons are completely customizable and can easily be altered using your own CSS rules. Let's try another demo, but changing the settings around a bit. We're going to use a custom CSS class on our confirm button. You'll see the custom blue button with it's custom text, as well as a goofy little callback function that populates the field below: Response: Using
ResponsiveSlides.js · Responsive jQuery slideshow Visual Event When working with events in Javascript, it is often easy to lose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. Javascript libraries also add another degree of complexity to listeners from a technical point of view, while from a developers point of view they of course can make life much easier! But when things go wrong it can be difficult to trace down why this might be. It is due to this I've put together a Javascript bookmarklet called Visual Event which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered. Using Visual Event on any web-page is extremely simple: You can see a demo of this in action showing the events attached by my own DataTables jQuery plugin. DOM 0 events jQuery 1.2.x + YUI 2.6.x (2.x might work!)
Doubletake - Lab - Graham Bird Doubletake dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary. I'm using a couple of tools to help me resize the images on this page - a local copy of SLIR and the src.sencha.io web service. Basic usage $('#container').doubletake(); Config You can configure the breakpoints, the regular expression pattern to match on the src attribute and whether to update just on $(document).ready() or on $(window).resize() as well. 'breakpoints': [320,480,640,960,1024], 'pattern': '/slir/w([0-9]+)', 'watchresize': true breakpoints An array representing the sizes of images you want to use. pattern A regular expression used to replace the value of the src attribute. watchresize Boolean that instructs Doubletake to update if the window is resized. Here is the syntax with just two breakpoints and a custom image path. Example (not responsive) Browser support
Useful JavaScript and jQuery Tools, Libraries, Plugins - Smashing Magazine Advertisement Recently we’ve been receiving more requests for carefully selected, useful round-ups. We try to avoid round-ups on Smashing Magazine, but sometimes the format is useful and — if the resources are relevant — can be extremely helpful. Besides, we are glad to drive traffic to some obscure, yet useful resources and thus support the developers of these resources. In this round-up, you’ll find some of the useful JavaScript and jQuery tools, libraries and plugins that we have stumbled upon recently. Hopefully, you’ll find them valuable for your upcoming projects. You might want to take a look at the following related posts: Useful JavaScript Libraries Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and More5The goal of this script is to provide a fast and lightweight script to enable responsive Web designs in browsers that don’t support CSS3 Media Queries. highlight.js10Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages.
Adaptive Images in HTML Sticky Sidebar jQuery plugin | Phil Parsons This jQuery plugin allows you to set a number of sidebar or floating boxes that follow the user down the page as they scroll. The plugin uses absolute positioning calculated from the original css and offset to either the closest positioned parent or to the document. The plugin has been tested in IE6-9 and all the other major browsers. The JavaScript (jQuery) Below is the code for the plugin, to download the code with examples use the link above. Usage The plugin can be used for single or multiple boxes as shown in the examples below A Single sticky sidebar For the above snippet of a HTML page we can use the following to enable the product basket as a sticky sidebar with the default options. Multiple sticky boxes For the above example we can use the below to set the navbox and basket boxes to both be sticky sidebars with the same options. Options The Sticky Sidebar plugin has four options: Methods The Sticky Sidebar plugin has two methods:
Convert a Menu to a Dropdown for Small Screens The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. When you're on a small screen (iPhone shown here) and click the dropdown, you get an interface to select an option where each option is nice and big and easy to choose. That sure makes it easier to pick a place to go than a tiny link. Yeah, it's two taps instead of one, but that's arguable since you'd probably have to zoom in to tap the right link otherwise. The HTML The HTML for these two menus is different. Let's go with that for now. The CSS By default we'll hide the select menu with display: none;. Then using media queries, we'll do the switcheroo at some specific width. But now you gotta maintain two menus? Well yeah, that's one concern. Using jQuery, we can do that with just a few lines of code: Then to make the dropdown menu actually work... But aren't dropdown menus kinda obtrusive? Kinda.
Making a Custom Facebook Wall with jQuery Templates Martin Angelov In this tutorial, we are going to create our own version of Facebook’s wall. We will be using Facebook’s Graph API with jQuery, and the template plugin. You can use today’s example to display a feed of the latest posts on your FB page or profile on your website. Before we begin, lets say a few words about the Facebook API. Update on June 19th, 2011: Recently Facebook introduced some changes to their API that broke this script. The Graph API The Graph is Facebook’s solution to providing an interface to every object that exists in the site, along with its connections to other objects. We will be using two API datapoints – one for selecting the latest posts, and the other for selecting the full name and avatar of the page. The JSON response above contains information on every one of the posts published by Smashing Magazine. The picture field above gives us what we need. Custom Facebook Wall with jQuery
Responsive Image Gallery with Thumbnail Carousel A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter's "user gallery" and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. View demo Download source Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. We’ll use the jQuery Touchwipe Plugin that will make it possible to navigate the images by “wiping” on the iPhone and iPad. The images in the demo are by über-talented Sherman Geronimo-Tan and you can find his Flickr photostream here: Sherman Geronimo-Tan’s Flickr Photostream The photos are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License. So, let’s do it! The Markup For the HTML structure we’ll have a main wrapper with the class “rg-gallery”. The CSS