Posts Tagged ‘jQuery’

We are pleased to present below all posts tagged with ‘jQuery’.

Introducing Responsive Web Typography With FlowType.JS

It's our great pleasure to support active members of the Web design and development community. Today, we're proud to present FlowType.JS that allows a perfect character count per line at any screen width. This article is yet another special of our series of various tools, libraries and techniques that we've published here on Smashing Magazine: LiveStyle, PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin, CSSComb and Jelly Navigation Menu. — Ed.

While working on an image-heavy site for Simple Focus, a couple of our designers, John Wilson and Casey Zumwalt, noticed how images always scaled perfectly. Pull the corner of the browser window and the images expand to fill the space. Push back the corner, they shrink and fall into place. The line length of hypertext, on the other hand, changes based on its parent element's width, which has a negative effect on readability.

Introducing Responsive Web Typography With FlowType.JS

"Wouldn't it be nice," John asked, "if text worked more like images?" Casey assured him that it could, with a jQuery plugin, if only they could figure out the math.

Read more...

Designing For Emotion With Hover Effects

Of the many factors that must be considered in Web design, emotional interaction is an important, but frequently neglected, component. In the real world, we experience the sensual interaction of design all the time.

Designing For Emotion With Hover Effects

Reflect for a moment on the emotional engagement of slipping behind the wheel of a powerful luxury car: the welcoming embrace of the driving seat, the tactile experience of running your hands over the leather on the steering wheel, the subtle gleam reflected in the controls.

Read more...

Choosing A Responsive Image Solution

If you code websites, it’s a good bet that at least one of your clients has asked about or requested a mobile-friendly website. If you go the responsive design route (whereby your website is flexible enough to adjust visually from mobile to desktop widths), then you’ll need a strategy to make images flexible, too — a responsive image solution.

Choosing A Responsive Image Solution

The basics are fairly simple to learn, but once you’ve mastered them, you’ll find that scaling images is only the beginning — you might also have performance and art direction conundrums to solve.

Read more...

Getting Started With jQuery Mobile

There is no longer any debate about whether we need to address the design needs of mobile website users. While mobile browsers and platforms are creating new challenges for us, jQuery Mobile, an open-source multiplatform UI framework, can help us succeed with our mobile apps.

jQuery UI

jQuery Mobile was released to help designers and developers create mobile Web experiences that are easy to build, multiplatform, customizable and unobtrusive in code. In this article, we’ll discuss what we need in order to use jQuery Mobile, as well as its basic architecture, and how to deal with a typical app’s features, such as theme, fixed toolbar, page navigation, buttons, lists and forms. You’ll get a practical idea of how to create a jQuery Mobile app and how to extend it with advanced features.

Read more...

Useful JavaScript Libraries and jQuery Plugins

If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem. Such libraries are always great to have in your bookmarks or in your local folders, especially if you aren't a big fan of cross-browser debugging.

JavaScript Library
Image credit: Yeoman

A JavaScript library isn't always the best solution: it should never be a single point of failure for any website, and neither should a website rely on JavaScript making the content potentially inaccessible. Progressive enhancement is our friend; sometimes JavaScript won't load properly, or won't be supported — e.g. users of mobile devices might run into latency issues or performance issues with some JavaScript-libraries. Often large all-around JavaScript libraries such as jQuery might be an overkill, while tiny JavaScript micro-libraries could serve as good, "light" alternatives for a particular problem. We'll present some of them today.

In this two-part overview (part 1 and part 2), we feature some of the most useful JavaScript and jQuery libraries which could be just the right solutions for your common problems. You might know some of these libraries, but you probably don't know all of them. In either case, we hope that this overview will help you find or rediscover some tools that you could use in your next projects.

Read more...

Useful jQuery Function Demos For Your Projects

Every aspiring web developer should know about the power of JavaScript and how it can be used effectively to enhance the ways in which see and interact with web pages. Fortunately, to help us be more productive we can use the power of JavaScript Libraries and this article we will take a good look at jQuery in action.

50 jQuery Function Demos for Aspiring Web Developers

In a nutshell, jQuery is a leading JavaScript Library that can perform wonders with your web pages and makes your web development life much easier and more enjoyable. The rise in popularity of jQuery since its arrival in 2006 has seen an estimated over 24 million websites (50% of the 10,000 most visited websites) currently reaping the benefits and as Google Trends suggests it's the popular JavaScript Library of choice.

Read more...

Progressive And Responsive Navigation

Developing for the Web can be a difficult yet rewarding job. Given the number of browsers across the number of platforms, it can sometimes be a bit overwhelming. But if we start coding with a little forethought and apply the principles of progressive enhancement from the beginning and apply some responsive practices at the end, we can easily accommodate for less-capable browsers and reward those with modern browsers in both desktop and mobile environments.

Progressive And Responsive Navigation

Resetting our CSS styles is where we’ll start. Browsers have different default styles for the elements we’ll be using, so understanding this and getting all of the elements to look the same is important. In this example, since we’re using an unordered list, there will be default left padding, top and bottom margins, and a list-style.

Read more...

↑ Back to top