Browsing articles in "JQuery"
Sep
4
2014

Animating Without jQuery


  

There’s a false belief in the web development community that CSS animation is the only performant way to animate on the web. This myth has coerced many developers to abandon JavaScript-based animation altogether, thereby (1) forcing themselves to manage complex UI interaction within style sheets, (2) locking themselves out of supporting Internet Explorer 8 and 9, and (3) forgoing the beautiful motion design physics that are possible only with JavaScript.

Animating Without jQuery

Reality check: JavaScript-based animation is often as fast as CSS-based animation — sometimes even faster. CSS animation only appears to have a leg up because it’s typically compared to jQuery’s $.animate(), which is, in fact, very slow. However, JavaScript animation libraries that bypass jQuery deliver incredible performance by avoiding DOM manipulation as much as possible. These libraries can be up to 20 times faster than jQuery.

The post Animating Without jQuery appeared first on Smashing Magazine.

Aug
25
2014

How I Built The One Page Scroll Plugin


  

Scrolling effects have been around in web design for years now, and while many plugins are available to choose from, only a few have the simplicity and light weight that most developers and designers are looking for. Most plugins I’ve seen try to do too many things, which makes it difficult for designers and developers to integrate them in their projects.

How I Built The One Page Scroll Plugin

Not long ago, Apple introduced the iPhone 5S, which was accompanied by a presentation website on which visitors were guided down sections of a page and whose messaging was reduced to one key function per section. I found this to be a great way to present a product, minimizing the risk of visitors accidentally scrolling past key information.

The post How I Built The One Page Scroll Plugin appeared first on Smashing Magazine.

Jul
17
2014

Scaling Down The BEM Methodology For Small Projects


  

Front-end development is no longer about individual frameworks. Tools are available — we merely have to choose. To make the right choices for your project, you need to start with a general approach, or methodology. But most methodologies have been created by big companies? Are they still useful for small companies, or do we need to reinvent them at a small scale?

Scaling Down The BEM Methodology For Small Projects

You probably already know of BEM, one of those methodologies developed by a big company — namely, Yandex. BEM posits that three basic entities (blocks, elements and modifiers) are enough to define how to author HTML and CSS, structure code and components, describe interfaces and scale a project up to an industry-leading service.

The post Scaling Down The BEM Methodology For Small Projects appeared first on Smashing Magazine.

May
29
2014

The Mystery Of The jQuery Object: A Basic Introduction


  

Have you ever come across a bit of JavaScript like $(".cta").click(function(){}) and thought, “What the $(‘#x’) is that” If it looks like gibberish to you, then please read on. If you think that snippet of code couldn’t possibly be real, then please browse some jQuery examples. They are full of such constructions.

Beginners' JavaScript And jQuery Syntax

This article covers the key concepts that underly such intimidating fragments of code, but we’ll start with a longer example, based on an example for animating a square.

The post The Mystery Of The jQuery Object: A Basic Introduction appeared first on Smashing Magazine.

Oct
11
2011

Essential jQuery Plugin Patterns





 



 


I occasionally write about implementing design patterns 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 guide offers a great starting point for getting into writing plugins and widgets, but let’s take it further.

Essential jQuery Plugin Patterns

Plugin development has evolved over the past few years. We no longer have just one way to write plugins, but many. In reality, certain patterns might work better for a particular problem or component than others. Some developers may wish to use the jQuery UI widget factory; it’s great for complex, flexible UI components. Some may not. Some might like to structure their plugins more like modules (similar to the module pattern) or use a more formal module format such as AMD. And so on.

Sep
23
2011

Create An Animated Bar Graph With HTML, CSS And jQuery





 



 


People in boardrooms across the world love a good graph. They go nuts for PowerPoint, bullet points and phrases like “run it up the flagpole,” “blue-sky thinking” and “low-hanging fruit,” and everything is always “moving forward.” Backwards is not an option for people who facilitate paradigm shifts in the zeitgeist. Graphs of financial projections, quarterly sales figures and market saturation are a middle-manager’s dream.

How can we as Web designers get in on all of this hot graph action? There are actually quite a few ways to display graphs on the Web. We could simply create an image and nail it to a Web page. But that’s not very accessible or interesting. We could use Flash, which is quite good for displaying graphs — but again, not very accessible. Besides, designers, developers and deities are falling out of love with Flash.

Aug
24
2011

Freebie: Responsive jQuery Slider Plugin Flexslider


  

When it comes to responsive design, it’s not just about fluid images or adaptive layouts. It’s also about the responsive methodology behind the entire design process. In responsive design, we are creating responsive experiences, meaning that all design components need to be able to adapt to the environment in which they are displayed and have to interact with.

This is why we create tables, navigation menus, videos and other design elements responsive as well (see Responsive Web Design Techniques and Design Strategies for more details). It just makes sense to consider each and every design component — including the image slider.

Apr
19
2011

Showcase of Creative Navigation Menus: Good and Bad Examples


  

Good navigation is the main cornerstone of an effective website. In practice, however, it’s often a tough challenge to come up with a meaningful, unambiguous way to organize, arrange, and display content to users; and it’s often not much easier to find a visually interesting solution either. The wide adaption of JavaScript libraries like jQuery is making it increasingly easy to add various kinds of sleek animations to navigation design.

Design Intellection

For instance, many recent promo websites are essentially single page websites with an array of animation effects used to make navigation a smoother and richer user experience. We need to be very careful and cautious when using these dynamic effects in our designs. A simple, calm navigation is usually much more user-friendly than an evolved, dynamic one. Users want to use the website, not be baffled by the weird and hardly usable navigation. But that’s not to say that a creative navigation should be avoided at all costs.

Apr
7
2011

Useful JavaScript and jQuery Tools, Libraries, Plugins


  

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.

jStat : a JavaScript statistical library

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. Among other things, you’ll find handy services and online utilities, recently released JavaScript libraries and jQuery plugins.

Apr
5
2011

Image Manipulation With jQuery and PHP GD


  

One of the numerous advantages brought about by the explosion of jQuery and other JavaScript libraries is the ease with which you can create interactive tools for your site. When combined with server-side technologies such as PHP, this puts a serious amount of power at your finger tips.

Image Manipulation With jQuery and PHP GD

In this article, I’ll be looking at how to combine JavaScript/jQuery with PHP and, particularly, PHP’s GD library to create an image manipulation tool to upload an image, then crop it and finally save the revised version to the server. Sure, there are plugins out there that you can use to do this; but this article aims to show you what’s behind the process. You can download the source files for reference.

Pages:12»

Categories