background preloader

Orbit: jQuery Image Slider Plugin from ZURB - ZURB Playground - ZURB.com

Orbit: jQuery Image Slider Plugin from ZURB - ZURB Playground - ZURB.com
1.3.0 (1/25/2012): Add custom events to allow control via custom JavaScript. Fixed intermittent loading issue on Chrome. Fixed IE issues. Refactored code to be more readable. Final version outside Foundation. 1.2.3 (3/17/2011): Fixed a number of issues including: Fixed issue of false parameters failingCan now have just 1 slide without it failingReorganized kit download to isolate "demo" pieces and core codeIncluded jQuery 1.5.1We've edited some of the docs here around "Content" slides 1.2.1 (2/3/2011): Changed caption styles to not break on different sized sliders and added documentation in here about positioning other than relative. 1.2 (1/20/2011): Content compatible, new loading animation, thumbnail navigation for bullets, animated captions, no more overflow hidden on the container, restructured the markup & js, changed the base UI, added callback, mouseover pause, better timer interactions and re-browser tested.

Blueberry - A simple, fluid, responsive jQuery image slider. What is Blueberry? Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts. A brief history With the popularity of smart phones and tablet devices responsive/fluid web layouts have become an important part of modern web design. Working on a new project I decided to use the 1140px grid from cssgrid.net. So, I decided to start writing a basic plugin with the aim of making it suitable for responsive web design. The goal The hope is that I can at least nudge developers of more popular slider plugins to think about responsive web design, and make their plugins compatible. In the mean time, I aim to continue to develop this plugin (time permitting), squashing some of the bugs and implementing more advanced features. Check out the contribute section to find out how you can help. Frequently Asked Questions Why is it called Blueberry? Help make Blueberry better Known issues Wishlist Buy me a beer

Exactly How to Create a Custom jQuery Accordion Accordions can be very useful for showing lots of different sections of data in a small amount of space. jQuery UI has a built in Accordion function, but according to the jQuery UI Build your Download, the size of the Core jQuery UI and Accordion scripts are 25kb and 16.6kb, respectively. Today, I'll show you how to build a custom accordion that is more "bandwidth efficient". That seems like a lot for just one simple accordion. I also think that writing things from scratch really gives you a much better understand of how to use jQuery effectively, without always turning to use someone else’s code. So the plan for this tutorial is to show create an accordion using the jQuery UI function, then create one using some custom coding. The Markup The markup is very simple, just a list item for each section in the accordion: The CSS We are going to add some very basic styling so that the accordion looks more presentable. Let’s take a look at where we are so far. The jQuery UI Accordion Additional CSS

Automatic jQuery Slider - jQuery Auto Slider Demo Squares Effect & Noir Style Automatic jquery slider At first glance this slideshow demo is modest and conservative. However, upon further inspection users will notice the details that take this demo from basic to distinctive, including its unique transitions and hidden thumbnail gallery. Websites with a traditional design approach will appreciate the professional-with-a-twist style used to showcase this slider. The borderless frame around the slideshow ensures that any picture used will gain full attention. The bottom of the slider features a subtle 3D shadow, which makes the WOWSlider appear to pop out at viewers. To the right and left of the frame there are two arrows which only appear when the mouse hovers over the slide. The highlight of this slideshow is the transition from one slide to the next. Many traditional businesses have a classic style and design, and they want a slider that conveys a buttoned-up image while showcasing creative details that allow them to stand out.

JavaScript Trie Performance Analysis After my last post discussing dictionary lookups in JavaScript the unanimous consensus seemed to be that utilizing Trie would result in additional space savings and yield performance benefits. A Trie is a relatively simple data structure. At its simplest form you’re building a tree-like structure where each final leaf results in a complete word. This allows for some very efficient use of file size – reducing common prefixes in words quite easily. I looked through a number of JavaScript Trie solutions and yet was not terribly pleased with them. I’ve dumped my work-in-progress JavaScript Trie Generator up on Github (note that it requires Node.js to run). Generating a Trie The basic Trie generation functionality is as follows (note that I use ’0′ or ‘$:0′ to indicate a complete word): Optimizing the Structure While this is fine I wanted to go a step further. Code posted by Dave Ward Possible Optimization The code for optimization: There’s still room for some additional improvement, though.

ResponsiveSlides.js · Responsive jQuery Slider & Slideshow Quick Tip: Working with the Official jQuery Templating Plugin Just this week, the jQuery team announced that Microsoft's templating plugin (along with a couple others) is now being officially supported. What this means is that the plugin will now be maintained and updated directly by the core team. In this video tutorial, we'll review the essentials of the plugin, and why it's so awesome. As a quick example, we'll, again, refer to the Twitter search API example from Friday (think Bieber). The only difference is that, this time, we'll use an HTML template to attach the returned data, rather than muddying up our JavaScript! Months ago, Andrew Burgess introduced you to this plugin, still in beta. Crash Course Step 1 : Import jQuery and the Templating Plugin Step 2 : Create your Template Notice how this template is wrapped within script tags, and that a type of text/x-jquery-tmpl has been applied. Step 3 : Find Some Data to Render! In this case, we'll do a quick search of the Twitter search API. Step 4 : Where Should the Mark-up Be Rendered? Final Source

Animated Buttons with CSS3 Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states. View demo Download source The icons used in some of the examples are by webiconset.com and the symbol font is by Just Be Nice We’ll go through every example and see how the HTML structure looks and what the styles for the normal, the hover and the active states are. Please note that the animations/transitions will only work in browsers that support those CSS3 properties. In order not to bloat the tutorial, I will not be using any CSS vendor prefixes. Example 1 In this example we will create a big button with several details in it. Markup The structure is pretty straightforward: the icon will be an image and the other elements will be spans: In the style we will make sure that the right transitions are set on the element that we want to animate on hover. Example 2 Example 3 Example 4 Example 5

How to Create a jQuery Image Cropping Plugin from Scratch – Part II Web applications need to provide easy-to-use solutions for uploading and manipulating rich content. This process can create difficulties for some users who have minimal photo editing skills. Cropping is one of the most used photo manipulation techniques, and this step-by-step tutorial will cover the entire development process of an image cropping plug-in for the jQuery JavaScript library. A Quick Recap In the previous tutorial, we reviewed: how to extend jQuery how to make a plug-in more flexible by using custom options how to create basic image cropping application Today, we'll take things further and wrap up our plug-in: we'll define more custom option, add callbacks, make the selection draggable and resizable, build a preview pane and a size hint and write some server-side code to crop the image. Step 1: Adding More Options Open your jquery.imagecrop.js file located at /resources/js/imageCrop/and add the following code: We've added more options and two callbacks, onChange and onSelect.

Rhinoslider: The most flexible jQuery slider/slideshow Five Minute Upgrade | Build Internet! Add a Mobile Landing Page to Your Site Give mobile visitors a way to quickly access your company phone number, email, or just directions to the office. Five Minute Upgrade – Make Your Workstation (More) Ergonomic If you pile on hour after hour in front of a screen, maybe you should take the time to make sure you’re as comfortable as you could possibly be – which is where ergonomics comes in. Five Minute Upgrade – Writing Blog Post Titles That Grab Attention How are you going to make the perfect elevator pitch for your article? Five Minute Upgrade – Making Your Design Pop Don’t get hung up on a dull design, before jumping ship take a minute to get versed in how to add some extra flair. Five Minute Upgrade – Increase Scannability The average visitor is not going to take the time to read everything you have written, they will glance over it. Five Minute Upgrade – Variety in Title and Body Fonts Are you a one font wonder? Five Minute Upgrade – Header Hierarchy Headings can be tricky business.

Related: