blogfreakz.com » Tutorials

How to Create Thumbnails Navigation Gallery with jQuery

Mufti Ali — Thu, 29 Jul 2010 02:51:42 +0000

Tympanus is sharing tutorial we how to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. It’s use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.

When a thumbnail is clicked it will be loaded as a full image preview in the background of the page.It’s also have a text container for one of the menu items.

Requirements: jQuery Framework
Demo: http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/
License: License Free

Facebook and Twitter Style Pagination with jQuery

Mufti Ali — Mon, 26 Jul 2010 00:30:33 +0000

As your website grows, it is no longer practical to display all the data at once on the same page. Moreover, the end user will probably be interested with only part of the content. Also, loading all the content at once might increase the server load or simply a waste of bandwidth. Youhack is sharing tutorial how to create similar stuff to twitter and Facebook pagination with jQuery.

It’s explain the coding for the Facebook syle only . The codes are basically the same for both, only the css style is changed in the twitter style . The result is awesome facebook and twitter alike pagination. Demo page and source code is available both for twitter and facebook version pagination.

Requirements: jQuery framework
Twitter Demo: http://youhack.me/demo/pagination%20alternative/twitter..
Facebook Demo: http://youhack.me/demo/pagination%20alternative/facebook..

Incoming search terms for the article:

Software Behind Facebook

Mufti Ali — Sun, 04 Jul 2010 01:07:14 +0000

At the scale that Facebook operates, a lot of traditional approaches to serving web content break down or simply aren’t practical. The challenge for Facebook’s engineers has been to keep the site up and running smoothly in spite of handling close to half a billion active users. Pingdom has writen article “Exploring the software behind Facebook, the world’s largest site” which takes a look at some of the software and techniques they use to accomplish that.?

In some ways Facebook is still a LAMP site (kind of), but it has had to change and extend its operation to incorporate a lot of other elements and services, and modify the approach to existing ones.

Source: http://royal.pingdom.com/2010/06/18/the-software-behind-facebook/

Incoming search terms for the article:

cakephp job board software

How to Create a Photo Stack Gallery with jQuery & CSS3

Mufti Ali — Sat, 03 Jul 2010 04:48:49 +0000

Tympanus has writing tutorial how to create Photo Stack Gallery with jQuery & CSS3. The idea is to show the albums as a slider, and when an album is chosen, they show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.

They use jQuery and CSS3 properties for the rotated image effect. They also use the webkit-box-reflect property in order to mirror the boxes in the album view – check out the demo in Google Chrome or Apple Safari to see this wonderful effect. This Photo Stack Gallery also use a bit of PHP for getting the images from each album.

Requirements: PHP Framework, jQuery Framework
Demo: http://tympanus.net/Tutorials/PhotoStack/
License: License Free

Incoming search terms for the article:

How to Create Apple-like Retina Effect With jQuery

Mufti Ali — Thu, 17 Jun 2010 06:40:02 +0000

Apple has long applied a winning strategy in marketing – create well designed products, have a dedicated fan base, and let the hype build up before every product release. This is also the case with the latest version of their iPhone. One of the interesting stuf we can found on the latest iphone version is the term they coined – “Retina display” and the promo image accompanying it.

That’s why tutorialzine do litle experiment and writen tutorial “How to Create Apple-like Retina Effect” with only jQuery and CSS.

The screenshot is actually displayed at half its original size, as they are using the same image for both the small version (displayed in the iPhone) and big version, which is shown in the rounded tooltip. Lastly they have the retina div, which is rounded with CSS3 and displays the big version of the webpage screeshot as its background as it is moved around with the mouse.

Requirements: jQuery framework
Demo: http://demo.tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/demo.html
License: License Free

Incoming search terms for the article:

How to Create a Moveable Sticky Note With MooTools and CSS3

Mufti Ali — Wed, 09 Jun 2010 12:36:15 +0000

Designshack has writen tutorial about how to create a simple and fun sticky note that a user can play with and move anywhere on the page. The inspiration of this tutorial comes from tutorial at Woorkup pointing out a MooTools feature that allows you to turn any item on a web page into a positionable element.

The HTML for this tutorial is super simple and contains only a couple divs and elements. After you reading the tutorial, you can see, creating the sticky note was really the hardest part of the process. MooTools took care of the heavy lifting to make the element moveable and reduced our JavaScript work down to just a few lines.

Requirements: MooTools framework
Demo: http://designshack.co.uk/tutorialexamples/StickyNote/index.html
License: License free

Incoming search terms for the article:

How to Create HTML5 iPhone Applications

Mufti Ali — Tue, 08 Jun 2010 06:39:15 +0000

Sixrevision has writen tutorial about how to create offline HTML5 iPhone application, more specifically, the process of building a Tetris game. “offline”?, it means that they have a custom icon, a custom startup screen, a native look-and-feel, and you can use the app even when the phone isn’t connected to the Internet.

The app should be as functional as it can when it is offline, just like normal native mobile apps. This is a tutorial specifically for iPhones but most of these techniques apply to all phones that have HTML5-capable browsers.

Requirements : HTML5 support browser
Demo : http://tetris.alexkessinger.net/
License : License free

Incoming search terms for the article:

How to Create HTML5 Location Based Application

Mufti Ali — Thu, 03 Jun 2010 09:41:20 +0000

To detect the location of a client device in the past, one would typically have to inspect the client IP address and make a reasonable guess as to the where that device was located. However, as part of the HTML5 efforts, the W3C has developed a set of APIs to effectively allow the client-side device (i.e. your iPhone 3G+, Android 2.0+ phones, or even your conventinal desktop browsers) to retrieve geographic positioning information with JavaScript.

HTML5-geolocations

Nettuts has writen comprehensive tutorial how to create location-based application using HTML5 features and jQuery framework. In this tutorial you will learn the geolocation capabilities of HTML5 and the basic principles needed to take advantage of them in your next HTML5 applications.

Requirements: jQuery Framework, HTML Support Browser
Demo: http://mobile.tutsplus.com/tutorials/html5/html5-apps-positioning-with-geolocation/
License: Free License

Incoming search terms for the article:

How to Create Circular Motion Effect with jQuery

Mufti Ali — Tue, 11 May 2010 19:51:45 +0000

Codrops has writen tutorial about how to create a stunning circular motion effect with jQuery. They are using the jQuery.path plugin to animate a circular movement for a menu in a portfolio example.

The idea is to have a rounded content area with a main menu. When hovering over one of the menu items, a sub-menu element appears, circulating around the content area. The result is an awesome portofolio page with animate a circular movement menu.

Requirements: jQuery Framework
Demo:http://tympanus.net/Tutorials/CircularPortfolio/
License: License Free

Incoming search terms for the article:

How to Build a Flash-like game with scripty2

Mufti Ali — Tue, 04 May 2010 13:05:28 +0000

Flash games are facing stiff competition from JavaScript. We’ll see why when we follow along with tutorial by Thomas Fuchs. On this tutorial Thomas Fuchs from http://mir.aculo.us teach us how to create game of memory using javascript.

All we need is a little help from a few open source tools. For the visuals, we use Scripty2 animation framework, the successor to script.aculo.us. We’ll learn about easings, how to use and combine its built-in effects, and how to write your own.

We also use the Prototype JavaScript framework to write shorter, cleaner code, especially when managing the data structures and game logic.

Demo: http://mir.aculo.us/tutorials/scripty2-memory/