Screen Shot 2013-03-14 at 08.49.29

Build a Single-Page Sliding Navigation Bar with jQuery

Many web design studios and freelance portfolios will incorporate the popular single page navigation technique. The benefits of such a layout allows visitors to go through all your main content without needing to reload the website. Additionally this helps to keep the interface very simple and easy to maneuver.

In this tutorial I want to demonstrate how we can build a demo single-page layout with sliding navigation effects. I will be using the jQuery One Page Nav plugin which offers more control onto each of the page elements. Additionally the layout is standards compliant with HTML5 and CSS3 specs and the nav will still load properly in browsers where JavaScript is disabled. If you want to catch a glimpse of the final product we are building check out my demo page below.

Giveaway: 5 Premium Licenses of jQuery SliderShock

jQuery SliderShock is the most complete jQuery and WordPress slider ever. Some of its features: 31+ effects, 31+ skins, external data sources (Instagram, Flickr, Youtube, RSS, and more), responsive or fixed width (mobile and tablet ready), resizable, several slideshows in same page, several thumbs positions, change any design aspect, colors fonts, placements, html captions, and much much more. SliderShock has been launched by the team behind WP Theme Generator.

And today you can have yourself a 1 premium license out of the five licenses of the most complete jQuery and WordPress slider ever. Continue reading to find out on how to win.

Vector Maps for Free

JQVMap is a jQuery plugin that renders Vector Maps.  It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9.  Legacy support for older versions of Internet Explorer 6-8 is provided via VML.

Download

Web Technologies and Trends to Watch in 2011

In 2010 we saw the rise of HTML5, the maturation of CSS3, the release of Rails 3.0, and the widespread adoption of the @font-face selector(part of CSS3) — among other things. In short: it was a busy year for advancing web development technologies.
What will 2011 hold?

1. jQuery Mobile
2. Hardware-Accelerated Web Browsers
3. Node.js and Server Side JavaScript
4. Real-Time Clickstream Sharing
5. NoSQL Databases

Read More…

Rounded edges with CSS 3

With the new style rules included in CSS3 creating rounded edges is easy now. All without using some kind of complex JavaScript library.

This is the code that must be included in your CSS file to work properly:

#example 
{ 
border-top-right-radius:10px;
border-top-left-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}

It is certainly one of the most interesting characteristics when designing and well accepted by the W3C.

Using Sliders in JQuery

Sliders JQuery

Sliders JQuery

Content sliders are extremely versatile forms of navigation that can be used to display all sorts of information, such as images, popular posts, social information and product features.

Some have automatic slideshow capabilities or buttons to scroll sideways or up and down, and most of them feature a transition effect, usually a slide motion.

We compiled several content slider examples that you can use for inspiration on your own websites.

Source: Webdesignerdepot

Visit the Site