Tooltipster - The jQuery Tooltip Plugin Styling your tooltips with a custom look ⇑ Tooltipster makes it very easy to go from one of the packaged themes and customize a few properties of your choice. To do so, we recommend that you create a so-called "secondary theme" which will override some properties of a packaged theme. Create a new css file and include it in your page. For your secondary theme to be applied, provide an array of themes instead of just one. Changing the size of the arrow might be the only challenging customization but it's doable! Updating a tooltip's content ⇑ It's easy as pie to update a tooltip's content - whether it's open or closed. $('#myelement').tooltipster('content', 'My new content'); // or when you have the instance of the tooltip: instance.content('My new content'); Tooltipster plays a subtle animation when the content changes. Using AJAX to generate your tooltip content ⇑ One great use for this is to grab dynamic content for your tooltips via AJAX. Forcing or disabling sides ⇑ Predefined behaviors
High speed Coding with Zen & SASS - Web Design & Frontend Developement The Power of Awesome Frontend Development is experiencing golden times these days. With the hype on HTML5, CSS3, a brighter focus on JavaScript and sophisticated workflows, the process of creating great stuff on the web has never been more rewarding. In this series I'd like to give you a little taste of what it's like to save time and get even more efficient at coding HTML and CSS. We're gonna use two amazing quick-to-learn and easy-to-use tools that will help us to ease the development of great Websites and WebApps. In this first part we will learn about these two plugins, how they work and what they're capable of. Ladie's and Gents: Introducing Zen-Coding and Sass. Let me tell you up first: What you're about to learn will most likely become a part of your daily base equipment. Zen-Coding Zen is a way of creating whole blocks of HTML Markup Structure with just one simple line of code. So for example, lets say you want to create a <div> with the ID of "container". Fairly easy right? Sass ul {
Projects 1.5.0 Buzz, a Javascript HTML5 Audio library 11 Tools to Instantly Code Faster Twice a month, we revisit or update some of our readers’ favorite posts and sessions from throughout the history of Nettuts+. This tutorial was first published last September. Doesn't the title say it all? There are a wide variety of tools and techniques which can drastically improve the speed at which we code. Particularly during time-sensitive settings, even a savings of a few seconds per iteration can add up substantially over the course of the month. I'll show you eleven of my favorite tools in this article. 1. Combine the power and specificity of CSS selectors with HTML mark-up, and you get Zen Coding. ...convert to: In this last year, the Zen Coding project has gained considerable attention, and has been expanded to support a wide variety of code editors, including Espresso, Vim, Netbeans, TextMate, and Komodo Edit. "Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. Alternatives Sparkup 2. Alternatives 3. 4. Pro Tip 5.
JavaScript Cookbook Sass vs. LESS "Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing. Really short answer: Sass Slightly longer answer: Sass is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing. Much longer answer: Read on. The Much Longer Answer The Learning Curve with Ruby and Command Line and Whatever The only learning curve is the syntax. Winner: Nobody Helping with CSS3 With either language, you can write your own mixins to help with vendor prefixes. In Sass, you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. In LESS, there are also some mixin libraries battling to be the best. See that?
Nivo Slider - The World's Most Popular jQuery & WordPress Image Slider Beautiful transition effects Nivo Slider offers 16 transition effects ranging from slicing and sliding, to fading and folding, making your galleries interactive and fun. No coding skills needed Create a beautiful experience when playing your gallery of images without any advanced coding. Automatic image cropping Nivo Slider crops and resizes images to a specified size, so you don’t have to do it manually for each image. Responsive and mobile ready The generated image sliders are completely responsive. Everyone loves Nivo! Time to make the best of your website’s’ image galleries. Pre-built slider themes You can choose the style of your sliders from the awesome pre-built themes. Create sliders from categories or galleries Besides the classic image sliders, Nivo allows you to choose between Category and Gallery sliders. Post types support Image sliders created with the Nivo Slider plugin are compatible with WordPress post types. Create carousels Testimonials 30 day money back guarantee
5 Mac Apps That Make CSS Preprocessors Easier to Use This post is part of a series that revisits some of our readers’ favorite articles from the past that still contain awesome and relevant information that you might find useful. This post was originally published on December 20th, 2011. If you’re a fan of CSS preprocessors, then you know that despite their usefulness, they can be a bit of a pain to work with at times. Most of them require some sort of Terminal voodoo to compile, which immediately scares off a good portion of potential users. As always, the Mac development community has come to the rescue with some amazing tools that completely take the effort out of the process. What Is a CSS Preprocessor? A CSS preprocessor is a tool that makes writing CSS easier, more flexible and arguably even more fun. Typically, a CSS preprocessor adds some interesting functionality to CSS such as variables, mixins, functions, nesting, etc. Five Apps to Process Your Files LESS.app Price: Free Supported Languages: LESS LESS.app Crunch! Crunch! LiveReload