Best Responsive WordPress Themes This is a collection of the best responsive WordPress themes. These responsive, fluid, or adaptive WordPress themes, automatically adapt to the screen size, resolution and device on which they are being viewed for on. This means your website will look great whatever the screen size or device your visitors uses to visit your site, from desktop computers to tablets to mobile phones. Responsive designs solve the problem of making a website work for the endless number of new mobile devices and resolutions being used to access the web. Responsive WordPress themes are becoming more and more popular, and there is a growing number of responsive themes becoming available to cater for all types of websites including: magazine, portfolio, gallery, personal blog, business, ecommerce, music and even real estate websites. Collections Pretty much every new WordPress themes these days is mobile friendly with a responsive design. The Best Responsive WordPress Themes Divi WordPress Theme Responsive Design
Create a jQuery Plugin For Social Networking So I was thinking about making a jQuery plugin for a while now, and then the opportunity to guest write here showed up, and I thought I would combine the two and write a tutorial on making a jQuery plugin! This is a plugin I actually just made, it will take a few input options that are, for the most part, your usernames to various social networking sites. The plugin handles the rest; creating all the links and building a nice list, complete with matching icons to everywhere you are on the web. I thought this would be helpful to people just starting out with plugins, and make it easy for those who do not want to make sprites and pretty social lists. Feel Free To Jump Around From Here Here is a demo of what we will be making. jSocial Demo Look cool? The first thing I am going to do is create the canvas where I want the icon list to appear. And finally, we need to include the jQuery library of course. That is it for the HTML part, for now. Sweet, now it is time to make some jQuery magic.
jQuery 1.4 Released: The 15 New Features you Must Know | Nettuts+ jQuery 1.4 was recently released. This wasn't simply a maintenance release as some had speculated; there are many new features, enhancements and performance improvements included in 1.4! This post covers the new features and enhancements that you may find beneficial. You can download jQuery 1.4 right now, here: 1. Passing Attributes to jQuery(…) Pre 1.4, jQuery supported adding attributes to an element collection via the useful "attr" method, which can be passed both an attribute name and value, or an object specifying several attributes. jQuery 1.4 adds support for passing an attributes object as the second argument to the jQuery function itself, upon element creation. Let's say you need to create an anchor element with several attributes. You may have noticed the "text" attribute— you'll probably be wondering what that's doing there, after all there's no "text" attribute for anchors! A better example of this in action: Read more about jQuery(…) 2. 3.
jquery responsive web | @stildv what is it? it is a simple jquery plugin helping design more responsive and adaptive websites and web applications with almost no setup. what does it do? it adds dynamic classes to the <body> depending on the operating system, browser and resolution. why? because for ideal responsive web design css is just not enough. it chokes at some point, or has cross-browser and cross-platform issues much more than the wonderful jquery framework. and also mobile websites don’t have to be ugly, or boring with bulky iphone buttons and very trimmed content, a similar mobile version of the website can be done with this plugin easily. check out the New York Times Global Edition example in the zip or after the jump. compatibility I have tried it with microsoft internet explorer v7 and v8, firefox, google chrome, safari, opera on windows, and also with an android device. works perfectly on all of them. on the android device (samsung galaxy s) handles the orientation change nicely too. examples how to use?
Essential jQuery Plugin Patterns - Smashing Coding Advertisement I occasionally write about implementing design patterns1 in JavaScript. They’re an excellent way of building upon proven approaches to solving common development problems, and I think there’s a lot of benefit to using them. But while well-known JavaScript patterns are useful, another side of development could benefit from its own set of design patterns: jQuery plugins. The official jQuery plugin authoring guide2 offers a great starting point for getting into writing plugins and widgets, but let’s take it further. Plugin development has evolved over the past few years. Some developers may wish to use the jQuery UI widget factory3; it’s great for complex, flexible UI components. I began to think about plugin patterns after noticing a number of efforts to create a one-size-fits-all jQuery plugin boilerplate. Let’s assume that you’ve tried your hand at writing your own jQuery plugins at some point and you’re comfortable putting together something that works. Patterns And so on.
jQuery Easing Plugin Description A jQuery plugin from GSGD to give advanced easing options. Please note, the easing function names changed in version 1.2. Please also note, you shouldn't really be hotlinking the script from this site, if you're after a CDN version you could do worse than try cdnjs.com Download Download the following: Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). Select easing types for the demo first one for down, second one for up. The Clicker Updates 12/11/07 1.3 jQuery easing now supports a default easing mode. 04/10/07 1.2 Updated to include all methods from Robert Penners easing equations. 28/06/07 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3. 22/06/07 Rewritten the above to include callback syntax, nothing else has changed. Advertisements Need reliable hosting for your blog? Credits Donate Usage Default Custom
Responsive Web Design Toolbox: 50 Handy Tools and Services inShare53 Earlier we’ve posted some materials on Responsive web design – How to Make a Website for All Devices (Responsive Web Design) and Responsive Web Design: Helpful Articles, Techniques & Tutorials, and some examples of really cool designs in 70 Examples Of Modern Responsive Web Design. And now, we would like to present to your attention some fresh data on this topic that is about grids, frameworks, JavaScript Libraries and jQuery Plugins, online services and testing tools. Hope you’ll find it useful! Responsive Design Templates and Frameworks BluCSS Framework BluCSS is a CSS framework designed with ease of use and simplicity in mind. Demo | Download Tiny Fluid Grid Seamless Responsive Photo Grid Demo | Download Less Framework 4 Less Framework is a CSS grid system for designing adaptive websites. Download Adapt.js Adapt.js is a lightweight (826 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. Download Gridless Demo | Download Download
QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler jQuery QuickFlip 2 jQuery QuickFlip takes any piece of HTML markup and flips it over like a card. The effect is similar to the UI animation on the iPhone Click to flip panel I’m happy to announce the release of QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. Download QuickFlip 2 for jQuery Read the QuickFlip documentation QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). It provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. What’s new in QuickFlip 2? QuickFlip 2 is now even easier to implement. Additionally, QuickFlip’s new version makes triggering the flip effect much simpler due to a new flip function that can be attached to any jQuery selector. Download QuickFlip 2 QuickFlip Examples Basic QuickFlip example A ton of QuickFlips with a hover effect How to use QuickFlip 2 First let’s set up our markup.
Smooth Animated Menu with jQuery | Build Internet! (How to) Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu and animate it with some smooth effects. The Goal – One Smooth Menu Here’s a demo of what we’ll end up with by the end. Introduction – An explanation of easing The menu has such a smooth animation because of a thing called “easing”. “The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Thanks to the magic of the jQuery Easing plugin, we can now use easing outside of Flash and Actionscript environments. Step 1 – Set up the Structure Before starting with any jQuery, we’ve got to build a quick menu structure with XHTML and load in the required project files. Nothing out of the ordinary here. Then copy in this menu structure into the body: Menu items have a class assigned to it that will designate the color of the block. Step 3 – Style with CSS Step 4 – Animate with jQuery
Responsive Web Design: Tailored Layouts For All Screen Sizes | DT Blog Until a few years back, mobile phones were not in vogue and therefore the need to customize screen layouts for mobile phones was not a priority item for web designers. When mobile phones came into being, they were used as calling devices and their functions extended to internet access only in the past seven or eight years. This has changed the scenario in web designing completely. This the feature that is able to add flexibility to web page and screen layouts, so as to conform them to the right size to improve legibility. Anybody interested in reading up about this creative add-on feature can read Ethan Marcotte’s book called ‘responsive Web design’ which is a comprehensive book on this subject. Main sides to Responsive web design There are three main faces to responsive web design: The flexible grid, flexible images and the media queries option. Horizontal gradients do not work well with such images as they reduce quality of border texture and do not scale down well. Thumbnail
11 Javascript Plugins Optimized for Mobile Devices (With QRCode for Quick View!) The popularity of mobile devices has increased dramatically within these few years. We have responsive website that transform itself to different screen size and now we have a bunch of javascript plugins built and optimized for mobile as well. When I was searching for resources, I was having this issue that, whenever I want to view it in my mobile, I need to type the URL manually! I got this inspiration from Cubiq (one of the cool mobile optimized plugin developers), they use QRCode for the demo link, and I just have to scan it with my mobile phone! RECOMMENDED: To see the demo on your mobile device, you can installe QR Reader, so you don't have to type in URL manually (if you're viewing this page with desktop/laptop). In case you're wondering how I generate QRCode, I use - Kaywa QRCode Generator Flexslider Flexislider is the new breed of slider which adapt itself with the width/size of the webpage. Diapo slideshow is an open source project.
8 Sites with Excellent jQuery Navigation | Build Internet! This is a gallery of sites that use jQuery to make the navigation clean, sharp, and elegant. These sites use the framework to do more than just add gratuitous effects. Even though I’m a huge fan of Actionscript, Flex, and Flash in general, I love when navigations can keep usability while achieving fluid animation. A couple of these are so fluid you may forget it’s not Flash. 1. Carrot Creative 2. 3. 4. 5. 6. 7. 8. This one is actually mooTools, and snuck into the wrong post. This list was the quick result of bookmarks I’ve had for sometime. Google+