3D Plane for jQuery 3D Engine
3D Plane for jQuery 3D Engine In the last post we created a 3D Engine with jQuery. This time around we’re going to make a new shape and make it interact with the mouse. What We’re Making I decided not to tackle too tough a shape as I wanted to show how to interact with the mouse. Getting Started If you haven’t seen how the 3D engine works I recommend visiting Making a 3D Engine in jQuery and getting caught up. Lets look at the code. It’s pretty much the same as the Cube in the previous post. Mouse Interaction Now that we have our plane made, we’ll just import it into our html file. Here is the new jQuery: Anytime the mouse moved we would figure out how far the mouse is from the center of the object. Here is the code all together: Next Step Now that the mouse Interaction is taken care of. Related 3D Engine
jQuery replaceText: String replace for your jQueries
jQuery replaceText will replace text in specified elements. Note that only text content will be modified, leaving all tags and attributes untouched. Recently, Paul Irish asked me how I would go about “wrappifying” text on a page with span tags, presumably for some CSS styling.. and he knows that if he mentions something enough, there’s a pretty good chance I’ll make a jQuery plugin for it. Of course, he’s right, so.. here’s the plugin. And Paul, you’d better use this thing! So, why not just set .html( new_text ) ? While using the jQuery .html() method is one of the fastest ways to replace text in a huge HTML structure, when you do this, all event handlers and references bound to any child elements are lost. Now, if you have no event handlers or references to these elements, just update the .html() using a standard string replace, and everything will be super-fast! So, are there any caveats? Not really. So, how do I use this thing? It’s easy! 02. 06.function embolden( str ){ 10. 15. 21. 22. 32.
Showcase of Interesting Navigation Designs - Smashing Magazine
Advertisement Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues. If page is long and provides different levels of navigation, will users be able to find their way through the site and use proper navigation quickly? Made by Water A JavaScript-Powered Vertical Fun The large bold headings and modern color palette on Made by Water1 feel fresh and fun. 2Vertical navigation buttons with icons. The other problem with the navigation is the yellow “up” arrow that is displayed in the footer of the page. Finally, while the text at the top is fun and exciting, finding the “Who am I” section is a bit hard. Made in Haus Horizontal Slideshow as Navigation 4Bold horizontal navigation. Foundation Six Animated Text Scrolls Down With the User Word Refuge Relogik Drexler
webdev.stephband.info
Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events
HeatColor, a jQuery plugin
What is it? HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a "heat" color based on its derived value's position within the range. You bind a collection of elements such as table rows, divs or list members to heatcolor and let it do the work. It can find the min and max values of the desired elements, or you can pass them in manually. Examples Each example is followed by the code used in the example. Example 1: Passing in table rows, used in conjunction with the tablesorter plugin. Example 2: 10-point rating system Example 3: Using list elements - using value attribute of list elements, green to red color style How much do you love cotton candy? Not at all: 60%A little: 30%Some: 8%A lot: 2% Download Download jquery.heatcolor.0.0.1.js (6K) Download jquery.heatcolor.0.0.1.pack.js (2K) Usage History Contact
Beautiful Photo Stack Gallery with jQuery and CSS3
In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the […] View demoDownload source In this tutorial we are going to create a nice and fresh image gallery. We will use jQuery and CSS3 properties for the rotated image effect. We will also use a bit of PHP for getting the images from each album. So, let’s start! The Markup In our HTML structure we will have several elements. <div id="ps_slider" class="ps_slider"><a class="prev disabled"></a><a class="next disabled"></a><div id="ps_albums"><div class="ps_album" style="opacity:0;"><img src="albums/album1/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>Album title</h2><span>Description text</span></div></div><div class="ps_album" style="opacity:0;"> ... We will dynamically insert the pictures of each album into the ps_container div. The PHP P.S.
Creating a jQuery Slide-In Contact Form
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sodales, dolor ut tempor sollicitudin, nulla lacus sodales ipsum, vitae commodo dui nisi et sapien. Phasellus ac nisl. Vivamus dignissim justo iaculis mauris. Suspendisse adipiscing, arcu sit amet tincidunt pretium, lorem mauris ullamcorper erat, blandit auctor erat massa sit amet neque. Etiam vulputate, justo nec venenatis pharetra, erat erat bibendum neque, eget tempor sapien tellus nec dolor. Ut porta, ante sed volutpat blandit, tellus justo interdum odio, vitae molestie arcu nisl et turpis. Nam semper mi pulvinar tellus. Nunc euismod. Aliquam aliquet.
ThreeDots: The jQuery Ellipsis Plugin « The Product Guy
Sometimes the text … … is too long … … won’t fit within the number of rows you have available. Sometimes all you need is … ThreeDots! For example — … and most any other permutation you desire. To Ellipsize There are many scenarios in the display of online text where shortened, truncated representations are best used. el·lip·sis (ĭ-lĭp‘sĭs) n., pl., -ses (-sēz). The omission of a word or phrase necessary for a complete syntactical construction but not necessary for understanding.An example of such omission. [Latin ellīpsis, from Greek elleipsis, from elleipein, to fall short. Many online products employ ellipses within their products to improve various aspects of the User Experience, such as: allowing for easy summary scanning of page content, and fitting more diversity of content into a smaller space. Most often people truncate the text by character count, on both the client- and server-sides, which does not take into account the variable dimensions of the text being truncated. Usage Sample 1:
