jQuery pageSlide - Halobrite Advertisement a jQuery plugin which slides a webpage over to reveal an additional interaction pane by Scott Robbin Download PageSlide Now If you've ever used the mobile version of Facebook, or Path,then you've probably seen something akin to PageSlide in action. Clicking on a button or link slides the page over to reveal a hidden pane,one that usually contains secondary navigation, a form, or additional information. There are several ways to use PageSlide, some of which are shown below.Additionally, there is a responsive demo which shows how PageSlide can be used as a mobile solution. Slide to the right, and load content from a secondary page Slide to the left, and display hidden content from this page in a modal pane Modal This slide uses "modal" option set to "true". Where can I get it? If you are interested in learning more about PageSlide, it's recommended that you view the project on GitHub. Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built.
Game Mechanics for Interaction Design: An Interview with Amy Jo Game design expert Amy Jo Kim shares her insights into applying game principles to the design of online communities. Amy Jo Kim is a game/social/web designer known for bridging the divide between game and web design. She has designed software UIs, games, online communities, and wrote the seminal book Community Building for the Web way back in 2000. You have a background in software interface design. I have an eclectic background in neuroscience, computer science, and psychology. In 1995, I left Viacom and launched a consulting business (Shufflebrain) focused on “social architecture for online environments.” What are game mechanics, and what is the primary value of thinking about game mechanics in interaction design? Game mechanics are a collection of tools and systems that an interactive designer can use to make an experience more fun and compelling. What are the primary principles in gaming that might be useful to interaction designers? Why is this happening in so many places?
jQuery Tutorials for Designers jQuery is a great library for animation and Ajax calls. As with any JavaScript library there are different objects and name spaces to learn. Well, over at Web Designer Wall they have put together a good tutorial about using jQuery. The tutorial is written from a designers stand point, but even an experienced hard-core web programmer can find this tutorial useful. Below is an excerpt from the post: How jQuery works? First you need to download a copy of jQuery and insert it in your html page (preferably within the <head> tag). How to get the element? Writing jQuery function is relatively easy (thanks to the wonderful documentation). $("#header") = get the element with id="header"$("h3") = get all <h3>element$("div#content .photo") = get all element with class="photo" nested in the <div id="content">$("ul li") = get all <li> element nested in all <ul>$("ul li:first") = get only the first <li> element of the <ul> 1. Let’s start by doing a simple slide panel. 2. 3 Chain-able transition effects
37 More Shocking jQuery Plugins Apr 09 2008 It’s really amazing to see what one can create using jQuery. Developers just don’t stop making incredibly interactive web applications every now and then. This post just demonstrates excellent examples of some of the best jQuery plugins out there. You can also take a look at the other jQuery Plugins in this series : So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post. jQuery Sliders 1) Slider Gallery- A similar effect used to showcase the products on the Apple web site. Live Demo: Here 2) Accessible slider- Illustrations and code samples showing how to make a slider UI control accessible to those who aren’t running JavaScript or CSS. Live Demo: Here jQuery Manipulating Images 3) crop, labelOver and pluck-Crop-Gives your visitors the power to crop any image on the fly using JavaScript only. Live Demo Of Crop: HereLive Demo of LabelOver: Here Live Demo Of Crop: Here Live Demo: Here jQuery Navigation Menus jQuery Accordions jQuery Image Viewer
The Best Kept Secret in the JDK: VisualVM It's amazing the things that are right in front of you that you don't realise. VisualVM is probably the best example of this in the Java community. Everytime you go and update your JDK, you go straight to your IDE and capitalise on the new features provided. I first read about VisualVM in an article Geertjan Wielenga wrote back in February of last year when the tool had it's third milestone release. VisualVM In A Nutshell VisualVM is a visual tool that integrates some of the commandline JDK tools and gives you powerful profiling capabilities. VisualVM will allow you to generate and analyze heap data, track down memory leaks, monitor the garbage collector and perform memory and CPU profiling, as well as being able to browse and operate on MBeans. For me, these features are critical. How To Get VisualVM The best part of VisualVM is that it's in your JDK bin directory already, if you've got any version of JDK1.6 since update 7. That unknown application (pid 5392) is Eclipse. Using VisualVM
20 Amazing jQuery Plugins and 65 Excellent jQuery Resources : Sp All released this year, the free JavaScript plugins and libraries on this page all offer a straightforward and specific function. There are no bloated all-in-one frameworks. Just useful, lightweight and problem-solving solutions to help make the web design and development process much easier and quicker for you. As you would expect, there are plugins below for creating sliders, image galleries, responsive menus, modal windows, and many other common components. The Designer & Developer ToolboxUnlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets You might also like to take a look at our top 50 JavaScript collection for 2016 or our top 50 free jQuery plugins. Choreographer-js Choreographer-js is a simple library to take care of complicated animations. Leaflet.js Leaflet.js is a JavaScript library for interactive maps. Lory Lory is a touch enabled minimalistic slider written in vanilla JavaScript. CurrencyFormatter.js ARc egjs Shave.js Next.js jQuery Linechart Blueprint Tabulator
The 20 Most Practical and Creative Uses of jQuery - NETTUTS There have been plenty of posts on the number of awesome jQuery plugins and where to find them. However, sometimes it is best not to rely on third party plugins and resources. Do it yourself the old fashioned way! Today, we will have a look at 20+ creative uses of jQuery in modern day websites and applications; sure to inspire you for your next project. One of our sporadic writers, James Padolsey, has a nice feature on his website. I've saved my absolute favorite site for last. Keep in mind that jQuery is simply a tool and is only limited by your creativity and skill level.
10 Transition Effects: The art of Showing/Hiding Content | DevSn Delivering informative structure is the primary task an interactive user interface should be able to cope with. The more intuitive layout structure is designed, the better users can understand the content. Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 smart javascript techniques for showing and hiding content using different JS libraries. 1. Simple Toggle with CSS & jQuery A simple toggle tutorial with an explanation of how to switch the “open” and “close” graphic state. <h2 class="trigger"><a href="#">Toggle Header</a></h2><div class="toggle_container"><div class="block"><h3>Content Header</h3><! 2. jquery-fade-infade-out A nice fade in fade out effect you can add to your website. $(document).ready(function(){ $("ELEMENT HERE").fadeTo("slow", 0.3); $("ELEMENT HERE").hover(function(){ $(this).fadeTo("slow", 1.0); },function(){ $(this).fadeTo("slow", 0.3); }); }); 3. 4. 5. jQuery pageSlide 6. 7.
Web-kreation - Sliding login/Signup panel using MooSlide (Mootools 1.2) In my latest articles Show/hide a nice Login Panel using Mootools 1.2 and Add a show/hide login panel to your WordPress theme using Mootools, I explained how to add a nice sliding login form to your site (using Mootools 1.2). Colin complained that the login panel was pushing the content down and asked if it would be possible to display it above all page elements. I replied that it would be possible to do so with MooSlide which uses Mootools 1.2. This will be the topic of our tutorial today. The end result: Clicking a link will slide-in a login/register form in the middle of the page with a nice bouncing effect. Preview / Download Grab a copy of this tutorial. Note: For this tutorial, I have slightly modified the original javascript file (mooSlide2-moo12.js) so the login and signup panel can slide in the middle of the page. Step 1: Creating the HTML structure Create a new HTML document and add the following code into it: (Click [+] to expand the code) <div id="loginPanel" class="mooSlide">...
Visual jQuery 1.2.6 Javascript in Modern Web Design In today's web design, Javascript is a must-have component. Aside from its functionality, Javascript can enhance user experience by creating transitional effects such as fading and sliding animation. Thanks to the open source Javascript frameworks, we don't need to write custom Javascript from scratch anymore. Here are 47 Javascript plugins that you can use to enhance the user experience and functionality of your website. Don't forget to check out the sample sites, which show how the plugins can be used. The Two Popular Javascript Frameworks Right now, the two commonly used Javascript frameworks are: jQuery and MooTools. Loading ... Image Zoom and Popup Lightbox You're probably very familiar with Lightbox — a light Javascript used to display overlay images on the current page. jQuery lightBox Plugin This is exactly the same as Lightbox JS, but written on top of jQuery library. Thickbox Thickbox is a jQuery plugin that is very similar to Lightbox, but comes with more features. Highslide JS Tabs