www.neurosoftware.ro – Web Development, php , ajax , symfony

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 11 smart javascript techniques you should always have handy when creating your next layout design.

“Page Sliders”, “Hiding Content”, “Image or Content Sliders”, “Animated Slideshows”, “Carousels”, “Tabbed content” as well as “resizable, draggable & slidable” & “lightboxes” modules that you can use for effective presentations of your content (text or images).

1. jQuery pageSlide

• The primary window is reserved for content; secondary interactions do not require additional space on the page — the area they need is created and removed on demand.
• Because the user can see the original window, they have a greater likelihood of retaining focus, and can easily return to the previous task.

Check OUt the Demo Here

2. Create a simple ul list with a nice slide-out effect for <li> elements

First we need to implement a simple list of products with ID=”myList” and some <li> elements with a progressive ID: l1, l2, l3, l5, l5 and add a link “Hide”:

<ul id="myList">
<li id="l1">Playstation | <a href="#">Hide</a></li>
<li id="l2">iPod Touch | <a href="#">Hide</a></li>
<li id="l3">XBOX 360 | <a href="#">Hide</a></li>
<li id="l4">Nokia N97| <a href="#">Hide</a></li>
<li id="l5">Dell Inspiron | <a href="#">Hide</a></li>
</ul>

Here is the javascript code to enable slideOut() effect:

<script>
window.addEvent('domready', function() {
/* From the list with ID myList, for each li element of the list...: */
$('myList').getElements('li').each(function(e){
/* ...get the ID of the selected item */
e.getElement('a').addEvent('click', function(listID){
/* Enable Fx.Slide effect for the selected item */
var list_element = new Fx.Slide(listID);
/* Enable slideOut() effect */
list_element.slideOut()
}.pass(e.id));
});
});
</script>

Check it out here

3. Portfolio Layout Idea Using jQuery

Check it out here

4. Creating a Slick Auto-Playing Featured Content Slider

• Different types of custom content in the panels. We can already put whatever we want in the panels, but to make it easier on ourselves, there will be a couple of different formats ready to go. The main one being an image the size of the entire panel, but featuring a text-overlay.
• Auto-play. You can still click the thumbnails to jump to any panel, but left onto itself, the slider will slowly cycle through the panels.
• Arrow indicator. To serve as a visual indication of which panel you are currently viewing, a small arrow will display above the thumbnail pointing into the panel.

In essence, to achieve the “auto-play” effect, Chris triggered a click event on the next thumbnail in line every 3 seconds and handled a manual click event for the thumbnails to be fired when the DOM is ready.

Check out the Demo Here

5. Easy Image or Content Slider

Content should be wrapped inside a div containing an ordered list where each list item represents one slide. You can add text content or an image inside each list item. Script automatically adds “previous” and “next” buttons just after the content element that calculates the current “position” and makes a one step in requested direction. So, the slider jumps from one slide to another.

Here are some blank, non styled demos. Check out the script in action:

• Default non-styled image slider
• Non-styled vertical image slider
• Non-styled vertical content slider

6. mooSlide

Check out the demo here

7. jQuery.SerialScroll

Features include:

• You can use horizontal or vertical scroll, also combined.
• You can decide how many to show at a time with CSS.
• The items don’t need to be aligned, you can spread them as much as you want, it will always find them.
• You can use it as text scroller, news ticker or slideshows.

Check out the demo here

8. Agile Carousel

It can be used with or without jQuery UI for more effects to provides full control.

Options include:

• transition_easing: enter easing type
• transition_duration: enter length in milliseconds for all slide transition
• slide_captions: enter list of slide captions
• number_slides_visible: enter the number of slides that should be visible on the stage
• water_mark: enter text that will appear in the carousel and not be affected by transitions.

Check out the demo here

9. Animated JavaScript Slideshow

<ul id="slideshow">
<li>
<h3>Image One</h3>
<span>photos/image-one.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/image-one.jpg" alt="Image One" /></a>
</li>
<li>
<h3>Image Two</h3>
<span>photos/image-two.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/image-two.jpg" alt="Image Two" />
</li>
</ul>

Each “li” above represents an image. The “h3” content becomes the title for the image and the “p” the description. The “span” content is the path to the fullsize image. You can set different parameters like image speed, opacity, required color for letterbox on portrait images, set slideshow to auto or not, etc…

Check out the demo here

10. Sexy Lightbox 2

Check out the demo here

11. UI.Layout

Features include:

• unlimited layout capabilities: up to 5 regions per layout – unlimited regions using nesting
• total CSS control: dozens of auto-generated classes let you recreate ANY UI look
• use any elements: use divs, iframes or any elements you want as ‘panes’
• collapsable: each pane can be closed, using any UI animation you want
• resizable, hidable & slidable

Check out the demos here