Jquery Navigation Menu For Your Web Projects

A navigation menu helps visitors to interact with other pages and let them navigate through navigation menus to different pages of a particular website. A simple, neat minimalistic design always gain the attention of visitors, navigation menu plays a vital role in over all look and feel of a website that’s why designers should not ignore the navigation needs of a website. Designers use different types of navigation menus for different purposes such as image sliders menus, text effect menus, photo galleries and many more.Check Out these 12 jQuery Navigation Menu

1 Animated Content Menu With jQuery

Demo | Tutorial

2 Expanding Image Menu With jQuery

Demo | Tutorial

3 Portfolio Image Navigation With jQuery

Demo | Tutorial

4 Jquery One Page Navigation

Demo | Tutorial

5 Wander wall

Demo | Tutorial

6 Elastic Thumbnail Menu

Demo | Tutorial

7 Halftone Navigation Menu

Demo | Tutorial

8 Overlay Effect Menu

Demo | Tutorial

9 Sliding Boxes and Caption With jQuery

Demo | Tutorial

10 Rocking and Rolling Round Menu

Demo | Tutorial

11 How to Create A Cool Navigation Menu

Demo | Tutorial

12 Animated Text and Icon Menu With Jquery

Demo | Tutorial

Advertisements

Grey Box:New Javascript Popup Box

GreyBox logo
A pop-up window that doesn’t suck.

Introduction

GreyBox can be used to display websites, images and other content in a beautiful way.

Why use GreyBox:

  • It does not conflict with pop-up blockers
  • It’s only 22 KB!
  • It’s super easy to setup
  • It’s super easy to use
  • You can easily alter the style as it is controlled through CSS

Where could it be used?

  • Showing external pages
  • AJAX uploading of files
  • Showing internal pages (login, user preference, properties, contact formulas etc.)
  • Showing a video or a flash animation
  • Showing images
  • Showing product information
  • Admin sections

What browsers are supported?

  • Safari
  • Firefox 1.5+
  • Internet Explorer 5.5+
  • Opera 8.5+

Other browsers may also be supported.

Download

Send Email Using PHPMailer and GMail

Here is the script :

include "phpMailer2/class.phpmailer.php";
 $mailer = new PHPMailer();
 $mailer->IsSMTP();
 $mailer->Host = 'ssl://smtp.gmail.com';
 $mailer->Port = 465;
 $mailer->SMTPAuth = TRUE;
 $mailer->Username = 'sample@gmail.com';  // Change this to your gmail adress
 $mailer->Password = 'samplexxx';  // Change this to your gmail password
 $mailer->From = 'sample@gmail.com';  // This HAVE TO be your gmail adress
 $mailer->FromName = 'Your Website'; // This is the from name in the email, you can put anything you like here
 $mailer->IsHTML( true );
 $mailer->Subject = 'Your Website: ' . $subject;
 $mailer->Body = 'Name: 
‘ . $name . ‘
';
 $mailer->Body .= 'Email: 
‘ . $email . ‘
';
 $mailer->Body .= 'Message: 
‘ . $message . ‘
';
 $mailer->AddAddress( myfriendsemail@yahoo.com );  // This is where you put the email address of the person you want to mail
 if(!$mailer->Send())
 {
echo "
“;
echo ”

Message was not sent

“;
echo “Mailer Error: ” . $mailer->ErrorInfo;
echo ”

";
 }
 else
 {
echo "
“;
echo “Your message has been sent.”;
echo “
";
  $action = 'something';
 }

ITPConnect: Facebook Connect For Joomla

ITPConnect is a Free extension that integrates Facebook’s connection with sites based on Joomla. it’s work on Joomla 1.5 and Joomla 1.6. ITPConnect allows users to use their Facebook accounts to access your Joomla website. The component make registrations of the new users automatically. Providing connection of Facebook’s profiles with existing ones on the website.

The extension is based on official Facebook PHP SDK and JavaScript SDK. It is a good for all web developers which want to develop Facebook applications.

Demo: http://americandreampage.com/
Download: http://itprism.com/free-joomla-extensions/social-connection-authentication

10 Frameworks Help You To Build Mobile Web Application

1. Sencha Touch

Sencha Touch is one of the product of SenchaInc, the first HTML5 mobile JavaScript framework that allows developer to develop mobile web apps that look and feel native on iPhone and Android touchscreen devices. Sencha Touch built like the ExtJS component, if have some experience with ExtJS I believe it will bring the advantage for easier learning.

Download Page | View Demo

2. jQuery Mobile

I think this is the most awaited in mobile web application framework, because the popularity of jQuery, this framework is not the first but getting a lot of attention, jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets. A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

Download Page | View Demo

3. WebApp.Net

WebApp.Net is a light weight, powerful javascript framework taking advantage of AJAX technology. It provides a full set of ready to use components to help you develop, quickly and easily, advanced mobile web applications.

Download Page | View Demo

4. DTHMLX Touch

DHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications. It’s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, cross-platform web applications for mobile and touch-screen devices.

Download Page | View Demo

5. jQTouch

This is not a framework but just a jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices. Now this project a part of Sencha Labs, the company who developing Sencha Touch. I love the default theme that have black, dark look and feel.

Download Page | View Demo

6. iWebKit

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp. The kit is accessible to anyone even people without any html knowledge and is simple to understand thanks to the included tutorials.

Download Page | View Demo

7. Jo HTML5 Mobile App Framework

Joapp is a UI Widget Framework With a side of DOM, event and data stuff , Open Source Under a friendly OpenBSD License , Cross Platform webOS, iOS, Android, Symbian, Safari, Chrome, Dashboard Widgets. Light and Efficient Minified JavaScript is just over 8K with no dependancies, and compatible with PhoneGap Plus most other JavaScript frameworks

Download Page

8. iUI: iPhone User Interface Framework

iUI is a framework consisting of a JavaScript library, CSS, and images for developing advanced mobile webapps for iPhone and comparable/compatible devices. iUI has the following features: Create Navigational Menus and iPhone-style interfaces from standard HTML, use or knowledge of JavaScript is not required to create modern mobile web pages, ability to handle phone orientation changes, provide a more “iPhone-like” experience in your Web apps.

Download Page

9. Sproutcore

SproutCore is an HTML5 application framework for building responsive, desktop-caliber apps in any modern web browser, without plugins.

Download Page

10. Zepto.js

Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax. The goal: a 2-5k library that handles most basic drudge work with a nice API so you can concentrate on getting stuff done. Zepto.js is created by Thomas Fuchs the author of script.aculo.us, the javascript user interface framework.

Download Page

How can I use custom fonts on my website? A helpful resources

How can I use custom fonts on my website? What is Cufon and @font-face? Which should I use? These are often asked question and in this tutorial I’ll answer them and show you how to get custom fonts working in all major browsers.

Cufon or @font-face? Typography on the web

As you may already know, if you wanted to display a custom font with anti-aliasing, you had to design the words in Photoshop and insert them as images into your website. Another option was to use Javascript or Flash. These days the latest and best solutions are Cufón javascript and @font-face CSS declaration.

Cufón

Cufon is an implementation of javascript, SVG, and Canvas that places your font after the browser has loaded your website with an amazing amount of speed and efficiency.

You can set it up in a few minutes, let’s see how. Visit Cufón website and download Cufón’s javascript file.


In Security you can set a specific domain to increase security. This way you can protect your font from evil ninjas out there. You can leave the final two sections at their default values. Accept the terms, click on Let’s Do This button and save the generated script.

Now create an HTML document and import these two javascript files:


<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Merge_400.font.js"></script>

Add some H1 and H2 headings to the HTML and initialize Cufón:


<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h2');
</script>

In replace function we can define which elements we’d like to replace with Cufón. If you want to replace specific elements by ID or class, simply import jQuery library BEFORE Cufón and you can start using its selector engine:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Merge_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('#header h1');
Cufon.replace('.content h2');
</script>

That’s it! You can use any font you wish just make sure you have the proper privileges to use it.

Pros

  • * Fast
  • * Simple to install and use
  • * It works on every major browser on the market

Cons

  • * If javascript is disabled, default fonts will be used.
  • * Text isn’t selectable.
  • * You can’t define hover state

@font-face

@font-face CSS declaration also lets you use custom fonts in your web pages. Unfortunately older browsers support it differently.

The first step is get a free font because of licensing concerns, you cannot simply embed any font on your website. There are a lot of sites that lists free fonts that you can use with @font-face. My favorite is fontex.org.

Once you have your font, you need to create at least three font files in order to get support cross browser. Fortunately there’s an online tool which generates them for you and also includes sample pages! The @font-face Generator!

Finally create an HTML document, add some headings and paragraph and add the following CSS code:


@font-face {
font-family: 'MergeRegular';
src: url('merge-webfont.eot');
src: local('˘'), url('merge-webfont.woff') format('woff'), url('merge-webfont.ttf') format('truetype'), url('merge-webfont.svg#webfontC1PyeCOP') format('svg');
font-weight: normal;
font-style: normal;
}

h1, h2, p {
font-family: 'Merge', tahoma, verdana;
}

The code links to all of the different font formats that we have created, and will make the font work cross browser. When setting an element’s font fafmily, always provide a fallback web-safe font for people using really old browsers, otherwise they will end up with their browser’s default font.

Pros

  • * It works without Javascript
  • * Text is selectable

Cons

  • * Font rendering quality differs from browser to browsers
  • * While the font is downloading, the user see the default font during 1 or 2 seconds
  • * If the font is provided by your client, He may be concerned by the fact that the font will be downlodable from the website

How To Add Floating Social Media Buttons To WordPress Blog Without Any Plugin

One of the best ways to get more exposure and more traffic to your blog posts is via Social Networking Websites. Social Networking Websites can easily boost your traffic. Users will easily share your posts on Social sites like Facebook, Digg, Twitter and StumbleUpon if you add social media buttons to your blog posts.

These days most of the bloggers are adding floating social media buttons to their blog posts. Floating buttons stay on a fixed position even if you scroll down or up the page which gives your blog readers the more flexibility to easily share your posts.

In this tutorial you will learn How to add these floating icons to your WordPress blog.

Have a look at the screenshot below:

Full Article read here

%d bloggers like this: