Saturday, February 27, 2010
Friday, January 22, 2010
Monday, January 11, 2010
Friday, January 1, 2010
JQUERY in Wordpress
jQuery is ideal because it can create impressive animations and interactions while being simple to understand and easy to use. WordPress awesomeness lies in its fact that it can be customized to power any type of site you like! But what happens when you combine the power of jQuery with WordPress, the possibilities are infinite.
This article will share some best practices, examples & Plugins for using the most popular Javascript framework to create unobtrusive, accessible DOM scripting effects for your WordPress site.
Let's take a look at 25 26 useful, yet rather unknown WordPress Plugins and tutorials using jQuery to its fullest potential.
Don't Forget to…
subscribe to our RSS-Feed and visit my twitter page : nourayehia get notified when our next post is here.
1. Infinite Scroll
Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user's current page. There is a little known feature in the .load() method that lets you specify the CSS selector of the html you want to include. jQuery will load in any local URL, then parse the html and grab only the elements you've defined with your selector.
2. jQuery Lightbox
This is the Wordpress's version of the jQuery Lightbox Plugin Used to overlay images on the current page, perfectly working with Wordpress 2.2 or up, and fully compatible with K2!
3. WordPress post information plugin
If real estate is a priority in your theme then this plugin can help by showing post meta information on demand by using a JavaScript toggle function.
4. Snazzy Archives
Snazzy Archives is a visualization plugin for your WordPress site featuring an unique way to display all your posts. You can select different layouts and special effects. Main features of Snazzy Archives are: Unique visual presentation of blog posts, Will work out of the box with all features, Posts are scanned for images and youtube videos and shown together with number of comments, Different editable layouts (HTML and CSS), Special effects using jQuery and more.
5. J Post Slider
Show your post in fancy jQuery box, rotating images, with show-up text box with post description. Mousover stop the animation, and user can click on post link anytime.
6. WP-Imagefit
Rather than relying on a CSS or HTML-driven approach to resize large or wide images, WP-Imagefit relies on Javascript to proportionately resize images based on the width of the containing column.
7. WP Wall
WP Wall is a "Wall" widget that appears in your blog's side bar. Readers can add a quick comment about the blog as a whole, and the comment will appear in the sidebar immediately, without reloading the page.
All comments are internally handled by WordPress so that means you have normal comment moderation, SPAM protection and new comment notification.
8. jQuery Comment Preview
Live comment preview without page reboot using a simple HTML-editor.
9. Insights
Insights brings a powerful new way to write your blog posts. It increases productivity and at the same time quality of your posts by using dynamic AJAX interface which loads the relevant information to your post in just a few seconds. Insights performs following functions in real-time: Interlink your posts, Insert Flickr images, Insert Youtube videos, Search Wikipedia, Search Google, Insert a Google Map and more.
10. µAudio Player
µAudio is a slim (450 Bytes!), fast plugin to create a flash mp3 player when mp3 links are clicked. In order to reduce clutter and file transfer, the links are unmodified until they are clicked, at which point a div with the player is faded in after the link. A second click on the link fades the player back out.
11. SimpleModal Contact Form
SimpleModal Contact Form (SMCF) is an Ajax powered modal contact form. It utilizes the jQuery JavaScript library and the SimpleModal jQuery plugin. SMCF has options to include certain contact form elements, like a Subject field and "Send me a copy" option for the sender.
12. Events Calendar
Events-Calendar is a diverse replacement for the original calendar included with WordPress adding many useful functions to keep track of your events.
13. µMint Plugin
µMint is a slim plugin to integrate statistics from Shaun Inman's Mint statistics package into Wordpress.
14. Shockingly Big IE6 Warning
The Shockingly Big IE6 Warning is a plugin that shows a warning message alerting the user why is bad to use IE6, the security risk and the bad compatibility of Web Standards.
15. WP-Slimbox2 Plugin
A WordPress implementation of the stellar Slimbox2 script by Christophe Beyls (an enhanced clone of the Lightbox script) which utilizes the jQuery library to create an impressive image overlay with slide-out effects. Almost all options are configurable from the administration panel.
16. Live Blogroll
Live Blogroll will make your blogroll livelier. It will show a number of 'recent posts' for each link in your Blogroll using Ajax. When the user hovers the mouse above the link, RSS feed from the site is automatically discovered and a number of recent posts is shown dynamically in a box.
17. PhotoXhibit
This plugin uses photos from your Flickr, Picasa, and/or SmugMug accounts as well as allows you to upload and build Albums to help you build inviting Photo Galleries on your site using the most popular JavaScript based gallery plugins. This plugin is not yet compatible with WordPress2.7
18. Wordpress Sidebar Turned Apple-Flashy Using jQuery UI
A tutorial to show you how to create Accordion plugin in jQuery UI to get the sidebar on the Apple Startpage and be able to show and hide it at your pleasure as well.
19. How To Create WordPress Tabs Using jQuery
Tabbed sidebar elements makes users simply click a tab to quickly access various parts of your site. This tutorial will teach you how to do this in your WordPress blog using jQuery.
- <div class="tabbed">
- <!-- The tabs -->
- <ul class="tabs">
- <li class="t1"><a class="t1 tab" title="<?php _e('Tab 1'); ?>"><?php _e('Tab 1'); ?></a></li>
- <li class="t2"><a class="t2 tab" title="<?php _e('Tab 2'); ?>"><?php _e('Tab 2'); ?></a></li>
- <li class="t3"><a class="t3 tab" title="<?php _e('Tab 3'); ?>"><?php _e('Tab 3'); ?></a></li>
- <li class="t4"><a class="t4 tab" title="<?php _e('Tab 4'); ?>"><?php _e('Tab 4'); ?></a></li>
- </ul>
- <!-- tab 1 -->
- <div class="t1">
- <!-- Put what you want in here. For the sake of this tutorial, we'll make a list. -->
- <ul>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
- </ul>
- </div>
- <!-- tab 2 -->
- <div class="t2">
- <!-- Or, we could put a paragraph -->
- <p>This is a paragraph about the jQuery tabs tutorial.</p>
- </div>
- <!-- tab 3 -->
- <div class="t3">
- <!-- Or, we could add a div -->
- <div>Something needs to go in here!</div>
- </div>
- <!-- tab 4 -->
- <div class="t4">
- <!-- Why not put a few images in here? -->
- <p>
- <img src="image.gif" alt="Sample" />
- <img src="image.gif" alt="Sample" />
- <img src="image.gif" alt="Sample" />
- </p>
- </div>
- </div><!-- tabbed -->
Another great tutorial by Nettuts teaching us how to Create A Tabbed Interface Using jQuery.
20. jQuery Reply to Comment
Add "reply" and "quote" features on each comment list. If you have jQuery installed on you blog, this Plugin add two link in each comments list (on single page). This plugin can auto include jQuery from Google Ajax API repository.
21. My Page Order
My Page Order allows you to set the order of pages through a drag and drop interface. The default method of setting the order page by page is extremely clumsy, especially with a large number of pages. jQuery is used a smooth for drag and drop effect.
22. Wordpress Featured Post Slideshow
Learn how to create an animated featured posts section in WordPress
23. GD Star Rating plugin
GD Star Rating plugin allows you to set up rating system for posts, pages and comments in your blog. You can set many options for displaying the rating stars, and also add widgets into the sidebars for displaying top ratings and other statistics generated by the plugin.
24. Create a featured posts slider in Wordpress using jFlow
Many premium themes feature cool featured content sliding areas, where the latest posts appear. There is one such plugin, built around the Mootools library, but in this tutorial you will learn how to do this using jFlow jQuery plugin. It will also automatically scroll. Of course, this can easily be modified to use the navigation buttons as well.
Demo of the jFlow plugin can be seen here
25. Adding Form Validation to WordPress Comments using jQuery
When it comes to simpler user experience, having your form validation happen instantly on the same page is a lot cleaner than reloading pages and possibly losing some form content. In this tutorial you will learn how to use jQuery to do some instant checking on an example comment form.
26. Using jQuery to liven up your WordPress login
A quick method of simplifying the clients login process using jQuery lightbox.
New Contact Form
Sunday, December 27, 2009
Fetch all the post related to a particular tag in a page of wordpress
// Declaration help in navigation in admin panel
/**
* @package WordPress
* @subpackage Default_Theme
*/
/*
Template Name: Tag Wordpress
*/
?>
// Fetch the header template
//Main content area
// query_post will fetch all the post having wordpress as tag. Change as per ur requirement
//this is same as of main index template where general post as usually shown
Not Found
Sorry, but you are looking for something that isn't here.
//Footer Area
Wordpress category/tag style
.tag-tagname{} (For example i made .tag-wordpress{color:#00FF00; background-color:#000000;})
The above changes in my blog put my all the post under 'wordpress' tag to a new color and background amongst all the post of the general post page
.category-categoryname{}
The same can be adopted for category also
Saturday, December 26, 2009
3 idiots
Friday, December 25, 2009
Merry Christmas
[caption id="attachment_120" align="aligncenter" width="150" caption="Enjoy Christmas"]
[/caption]
Monday, December 14, 2009
Inkscape Works
[/caption]
Friday, December 11, 2009
CAPTCHA
Thursday, December 10, 2009
Sunday, December 6, 2009
Header by Inkscape
The header you are seeing at my blog is done by Inkscape an open source illustration tool. Exploring more to add something more on this blog.
Friday, October 30, 2009
The Institution of Engineers(India)
Thursday, October 29, 2009
A new bubble added
Rounded Corners
http://www.spiffycorners.com/index.php
Really helpful
--
Wednesday, October 14, 2009
40+ Tooltips Scripts With AJAX, JavaScript & CSS
Web users love informative clues. Whatever questions and misunderstandings might occur – delivering precise answers immediately is the primary task a responsive user interface should be able to cope with. To do that, developers have to consider subtle and well-thought tooltips – used correctly, they can greatly improve user experience and help users to get things done. In Web such "responsive" hints can be provided by tooltips. E.g., unclear input fields in web forms are perfect examples of a situation you might be willing to use a tooltip for.
Most of solutions are JavaScript- and AJAX-based, however we've also managed to find some lightweight CSS-based solutions. To install and use the script, it's often enough to include the JavaScript library in the source code and provide the hint as plain text within the "title"-attribute. Sometimes you can also insert URLs, images, tables and further elements – basically, it can be almost everything you'd ever wanted it to be.
We'd like to thank Jurgen Koller for compiling an extensive list of tooltip scripts we've stumbled upon during our search. It gives many useful pointers, but we've managed to find some more. You might be willing to use Koller's post as a quick reference for your search.
Let's take a look at 43 handy tooltips scripts for intuitive and well-designed visual clues. It's nice to have them all in one place, once you need them. It's nice to be able to find them, once you don't have time to search for them.
Tooltips: AJAX & JavaScript Solutions
- Nice Titles Revised
An improved Nice Titles Tooltip Script with Accesskeys support.
- A lightweight prototype based JavaScript tooltip
- Nice Titles
A classic. The script uses a background image.
- AJAX-enabled Help-BalloonsHelp windows in baloon-design. AJAXified version is also available.
- jTip – A jQuery Tool Tip
Extensive AJAX-based tooltips with numerous functions and presentation possibilities.
- jQuery plugin: Tooltip
Enhances the jQuery Library.
- qTip
Works for all elements, not only for links in most browsers – IE 5.5+, Firefox, Safari and Opera.
- Form field hints with CSS Tooltips
t's a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this.
- JS Tooltip
Displays customizable tool tip message for each link element on a web page. A tool tip that can be added to the anchor element unobtrusively by adding a class value to it. This was done by having the tool tip message pull from the specific title attribute of the anchor element that the tool tip was added too.
- BoxOver
Flexible DHTML-Tooltipp in numerous formats. Appears (almost) immedately and fades in during loading.
- SuperNotes
Converts footnotes to tooltips. Appears immediately and can be assigned with a fixed position in the browser window.
- Tipster
Multifunctional tool tips with JavaScript.
- 5 Tooltips by DHTMLGoodies
First version is suppose to improve the usability of online forms:
- The second technique uses AJAX.
- Walter Zorns JavaScript, DHTML Tooltipps
These tooltips can be used for different purposes; the code is well-documented and can easily be improved and modified.
- clueTip
This is a demo page for the new clueTip — a jQuery-based, AJAX-powered tooltip. The clueTip plug-in was inspired by Cody Lindley's jTip script.
- Mootools Tooltip
Mootools Javascript example of using tooltips.
- Sweet Titles
JavaScript Fading Tooltips.
- Hover Tip
Tooltip with menu-like capabilities. The tooltip layer will remain visible while the viewer hovers over it. This allows you to place clickable links inside tooltip content.
- Multiline Tooltip with HTML, CSS and JavaScript
This document explains how to make nice multiline tooltip for HTML documents, using simple and standard CSS, HTML and JavaScript.
- overLIB
This JavaScript-library can be used in a variety of ways; many positioning and appearance features are available.
- Scriptaculous Effect.Tooltip
The tooltip script from the script.aculo.us library.
- Tooltip.js
Tooltipps with AJAX. The library uses the Prototype JavaScript Framework. The demo doesn't work any longer.
CSS-Based Solutions
- CSS Tooltips
A simple demonstration of using custom CSS tooltips as a drop-in replacement for the browser-based title attribute.
- CSS Technique for Tooltips
CSS can create "faux tooltips" much the same as the JavaScript ones, but without all the (possibly) undesirable scripting. There are a few in's and out's involved, but surprisingly, the methods are rather easy to accomplish.
- Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus
The scripts creates half-transparent tooltips with shadows.
- CSS Menu Descriptions
This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. And since it doesn't rely of JavaScript, it should be useful to everyone, even disabled users.
- Balloon Tooltip Demonstration
Balloon tooltip demonstration.
- CSS Tooltipps, lixlpixel Javascript Tooltips
Similar scripts from the same source:
- CSS Rollovers for Tooltips
- CSS Bubble Tooltips
This example will show you how well this tooltip stretches for long descriptions.
- Pure CSS Tooltips I
- Simple, accessible "more" links – v2
CSS-based solution for displaying tooltips.
- CSS Tooltips
Another solution, based only on CSS.
- Information Balloon PopUps
Stu Nicholls delivers another CSS-based solutions.
![Tooltips Scripts - Simple, accessible \](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_slo7_mlxhiQptTBH2mLBg6lJFBQgMMO_7NtN-aqnhCsFOOalqGs9IF37OxfckkLzEhgiVMQuO1b9FTHDlGuA2rPF2ig1gku8sqUwmR0DqO8JqS6imuzaNJ0gCFH_xhF6M4ifFE7z84J-dm8rrD29Pd5_CIUDutbLxME5WSR40=s0-d "Tooltips Scripts - Simple, accessible \")
Further Solutions
- Snap.com
Snap gives you a visual preview of each result before you click on it. And that improves your odds of picking the right search, without clicking back-and-forth several times.
- DHTML Tooltips
Popup a help tip or information layer onmouseover using this object-based DHTML tooltip code. The basic version, presented on this page, can contain plain text or rich html, images, or images and text. The tooltip can be displayed over a background image. It can move with mouse movement. And it is easy to customize and modify.
- Animated Tooltip Javascript
- DOM Tooltip
DOM Tooltip Script-Library - Yahoo! UI Library: Tooltip
The Yahoo! UI Library Toolbox provides among other functions also tooltips.
Tooltips: Wordpress-Plugins
- WP – Bubble Tooltips (Plugin)
A Wordpress-Plugin can change the appearance of links. Based on Bubble Tooltipps developed by Web-Graphics.
- FancyTooltips
Further Wordpress-Plugin with similar functionality.
- Fancy Tooltips
![Tooltips Scripts - WP - Bubble Tooltips (Plugin) | bueltge.de [by:ltge.de]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sa_FSY5HQDs_mfmamt_03iDnKT-4QgGraXVig_AgkH5vQ11VRUXR6xm9kd_tYQb39iYHQgp-WIysF8jIveZaSjCPHBxLH0UxlkVzrpGvEU3ZZ6e0II0kpvDI9POiTVqZm7Fbr_amNVvIIJY0bCsSSdKe2P2su5CYaFqMr4yw=s0-d "Tooltips Scripts - WP - Bubble Tooltips (Plugin) | bueltge.de [by:ltge.de]")
