Developer Snippets » ThickBox

Latest online tech videos right on your desktop – TechVideoBytes.com

admin — Sun, 23 Aug 2009 10:03:14 +0000

Hi readers, I glad to inform you that DeveloperSnippets is coming up with new features right on your desktop. Now! you can view your best and favorite technology videos online right on your screens streaming from various channels online like for example, videos streaming from YouTube, Howcast, Daily Motion, RuTube, Yahoo! Video, Veoh, MySpace and many more. Just few days back TechVideoBytes sites has been launched new with new domain, earlier URL for TechVideoBytes was http://www.developersnippets.com/techvideobytes and it has got its own domain, which is named and addressed as http://www.techvideobytes.com. If you would like to know more about TechVideoBytes,then you can view this article, which will take you to the New Look of TechVideoBytes.

You can either directly browse to TechVideoBytes (or) the option is available from this website as well. I have included an option, where you can easily navigate to various options and can view your favorite video through the “Video” option provided at the most menu in this website. For more information you can view the screen-shot below:

TechVideoBytes

Below are the screen shots of the same:

New Look of TechVideoBytes home page

TechVideoBytes - Video Page

Please do Bookmark this as your favorite, and please do let me know your feedback on the same through the comment option provided.

jQuery AJAX Tabs with ThickBox enabled

admin — Thu, 04 Jun 2009 15:34:39 +0000

Introduction:

This is one of the good example on how we can load a ThickBox (Example: ThickBox related image galleries etc.,) in our jQuery AJAX Tabs. Usually, if you try to load a ThickBox directly into jQuery AJAX Tabs, the functionality will not work properly, in order to make this work we have to re-initiate tb_init() function accordingly after the request is success. Just have a glance below on how we going to solve this one.

Solution:

Re-Initiate tb_init() once the request is success.

1	tb_init('a.thickbox, area.thickbox, input.thickbox');

Live Preview / Download:

If you want to have a look at the jQuery AJAX Tabs, please click here to view the same.

To download the snippet, click here

Example:

Below is an example on how we can do this in practice. I have few Tab Panels, in one of the Tab Panel there are few images for which I need ThickBox functionality, that is when I click on the respective thumbnail image it should open up a popup with actual image.

jQuery Code:

<script type="text/javascript">
var reqPageUrl = new Array();			
reqPageUrl[1] = "contentpage1.html";
reqPageUrl[2] = "contentpage2.html";
reqPageUrl[3] = "contentpage3.html";
reqPageUrl[4] = "contentpage4.html";		
 
function loadTab(id)
{
	if (reqPageUrl[id].length > 0)
	{
		$("#preloader").show();
		$.ajax(
		{
			url: reqPageUrl[id], 
			cache: false,
			error: function(XMLHttpRequest, textStatus, errorThrown)
			{
				$('#tabmenu a').removeClass('active'); //remove all class='active' for all anchors
				$("#content_tab"+id).toggleClass('active'); //add class to the current one
				$("#content").empty().append('\"images/error_caution.gif\" /> Error in Loading page, please do check with the path');//if there is any error in the request
				$("#preloader").hide();//hide the preloader
			},
			success: function(message) 
			{
				$('#tabmenu a').removeClass('active'); //remove all class='active' for all anchors
				$("#content_tab"+id).toggleClass('active'); //add class to the current one
				$("#content").empty().append(message);//first empty the content, then append content
				$("#preloader").hide();//hide the preloader
				tb_init('a.thickbox, area.thickbox, input.thickbox'); //call tb_init function to initiate ThichBox into your respective tab panels
			}
 
		});			        
	}
}
 
$(document).ready(function()
{
	loadTab(2); //After page loading, active tab 1
	$("#preloader").hide();
	$("#content_tab1").click(function(e){e.preventDefault(); loadTab(1);}); //Here e.preventDefault(); is to prevent the respective href from going the user off the link, that is the href url '#' which is appending to the URL will going off 
	$("#content_tab2").click(function(e){e.preventDefault(); loadTab(2);});
	$("#content_tab3").click(function(e){e.preventDefault(); loadTab(3);});
	$("#content_tab4").click(function(e){e.preventDefault(); loadTab(4);});
});
script>

Full Code with HTML:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Ajax Tabs with ThichBox enabled - By www.developersnippets.com</title>
<link rel="stylesheet" type="text/css" href="style/tabs.css" media="screen">
<script language="javascript" src="thickbox/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="thickbox/thickbox.js"></script>
<link rel="stylesheet" href="thickbox/thickbox.css" type="text/css" media="screen" />
 
<script type="text/javascript">
var reqPageUrl = new Array();			
reqPageUrl[1] = "contentpage1.html";
reqPageUrl[2] = "contentpage2.html";
reqPageUrl[3] = "contentpage3.html";
reqPageUrl[4] = "contentpage4.html";		
 
function loadTab(id)
{
	if (reqPageUrl[id].length > 0)
	{
		$("#preloader").show();
		$.ajax(
		{
			url: reqPageUrl[id], 
			cache: false,
			error: function(XMLHttpRequest, textStatus, errorThrown)
			{
				$('#tabmenu a').removeClass('active'); //remove all class='active' for all anchors
				$("#content_tab"+id).toggleClass('active'); //add class to the current one
				$("#content").empty().append('<img src=\"images/error_caution.gif\" /> Error in Loading page, please do check with the path');//if there is any error in the request
				$("#preloader").hide();//hide the preloader
			},
			success: function(message) 
			{
				$('#tabmenu a').removeClass('active'); //remove all class='active' for all anchors
				$("#content_tab"+id).toggleClass('active'); //add class to the current one
				$("#content").empty().append(message);//first empty the content, then append content
				$("#preloader").hide();//hide the preloader
				tb_init('a.thickbox, area.thickbox, input.thickbox'); //call tb_init function to initiate ThichBox into your respective tab panels
			}
 
		});			        
	}
}
 
$(document).ready(function()
{
	loadTab(2); //After page loading, active tab 1
	$("#preloader").hide();
	$("#content_tab1").click(function(e){e.preventDefault(); loadTab(1);}); //Here e.preventDefault(); is to prevent the respective href from going the user off the link, that is the href url '#' which is appending to the URL will going off 
	$("#content_tab2").click(function(e){e.preventDefault(); loadTab(2);});
	$("#content_tab3").click(function(e){e.preventDefault(); loadTab(3);});
	$("#content_tab4").click(function(e){e.preventDefault(); loadTab(4);});
});
</script>
</head>
 
<body>
	
    <div class="container">
        <ul id="tabmenu">
            <li><a id="content_tab1" href="#">jQuery AJAX Tabs</a></li>
            <li><a id="content_tab2" href="#">Image Gallery</a></li>
            <li><a id="content_tab3" href="#">Solution</a></li>
            <li><a id="content_tab4" href="#">Error Message</a></li>
        </ul>
 
        <div id="preloader">
            <img src="images/loading.gif" align="absmiddle"> Loading Content Please Wait...				
        </div>
 
        <div id="content"></div>
    </div>    
    
</body>
</html>

Live Preview / Download:

If you want to have a look at the jQuery AJAX Tabs, please click here to view the same.

To download the snippet, click here

Bookmark: 50+ stunning jQuery applications

admin — Thu, 15 Jan 2009 19:26:55 +0000

This post has got a collection of stunning jQuery applications; I tried my best to gather most of the best applications / plug-ins which are developed using jQuery at one place. I hope below list might help developers in coming up with some good applications by using jQuery.

Jcrop » the jQuery Image Cropping Plugin – deepliquid.com

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

> the jQuery Image Cropping Plugin" src="http://www.developersnippets.com/wp-content/uploads/2009/01/deepliquid.jpg" alt="Jcrop >> the jQuery Image Cropping Plugin" width="460" height="188" />

Fancy Box – Simple and fancy jQuery plugin – fancy.klade.lv

Fancy Box has got many features like:
* Automatically scales large images to fit in window
* Adds a nice drop shadow under the zoomed item
* Groups related items and adds navigation through them (uses preloading)
* Can display images, inline and iframed content
* Customizable through settings and CSS

jQuery lightBox Plugging – leandrovieira.com

A lightBox Plug-in developed using jQuery, it is a nice application for your gallery page.

Photo Slider Tutorial – (http://opiefoto.com/articles/photoslider)

Awesome photo slide tutorial which has been developed in jQuery. In the respective tutorial the author “Jesse Janzer” has briefly explained about on how to embed this Photo Slider into your gallery thumbnails, it’s awesome enough.

jquery Hover Sub Tag Cloud – noupe.com

About Tag Cloud – Tag clouds When, used properly, they can provide visitors with an instant illustration of the main topics of the site’s content. And although we don’t have that much choice in designing them, we can still find our way to come up with new design approaches and solutions.

Color Picker – jQuery plugin – eyecon.ro

A simple component to select color in the same way you select color in Adobe Photoshop, features includes:
* Flat mode – as element in page
* Powerful controls for color selection
* Easy to customize the look by changing some images
* Fits into the viewport

Building a better web forms: Context highlighting using jQuery – jankoatwarpspeed.com

In very complex web forms this enables users to focus only on a current action. By using attractive color schema and jQuery animations, this can be even more interesting.

Creating accessible charts using canvas and jQuery – filamentgroup.com

Data visualization in HTML has long been tricky to achieve. Past solutions have involved non-standard plugins, proprietary behavior, and static images. But this has changed with the recent growth in support for the new HTML Canvas element, which provides a native drawing API that can be addressed with simple JavaScript. This article is a proof of concept for visualizing HTML table data with the canvas element.

FastFind Menu Script – (http://labs.activespotlight.net/jQuery/menu_demo.html)

This demonstrates the ActiveSpotLight FastFind Menu Script. ActiveSpotLight provides the javascript related to this project under the BSD License (See Below). This software is provided as-is and without any warranty. ActiveSpotLight assumes no responsibility for any loss or damage as a result of using this software, please do so at your own risk.

jQuery File Tree Demo – abeautifulsite.net

Nice tutorial and useful application for our web projects, since this show cases about hierarchical menu which has been developed using jQuery.

And more below

jQuery Plugin – Page Peel – smple.com
PHP & jQuery image upload and crop – webmotionuk.co.uk
Spacegallery – jQuery plugin – eyecon.ro
wSlide – jQuery Plugin – webinventif.fr
Accordion Content script (v1.6) – dynamicdrive.com
jQuery auto-tabbing and filter plugin – lousyllama.com
jQuery plugin: Autocomplete – bassistance.de
NyroModal :: jQuery Plugin – nyromodal.nyrodev.com
imgAreaSelect – odyniec.net
jWYSIWYG – WYSIWYG jQuery Plugin – projects.bundleweb.com.ar
Gradient jQuery plugin – davidwees.com
jQuery.ScrollTo – flesler.blogspot.com
jQuery.Preload – flesler.blogspot.com
jQuery.ScrollShow – demos.flesler.com
jQuery Lightbox Plugin (balupton edition) – balupton.com
JQZOOM updated to Evolution – mind-projects.it
jRails – jQuery on Rails – ennerchi.com
jQuery Helper for Komodo Media CSS Star Rater (Redux) – m3nt0r.de
jquery.biggerlink – ollicle.com
haccordion, a simple horizontal accordion plugin for jQuery – letmehaveblog.blogspot.com
LavaLamp for jQuery lovers! – gmarwaha.com
jQuery Image Strip – blog.joshuaeichorn.com
jQuery Thumbs – joanpiedra.com
jQuery.flickrGallery – ptflickrgallery.sourceforge.net
jQuery idTabs – sunsean.com
jQuery UI Datepicker Project – marcgrabanski.com
jQuery Flickr – projectatomic.com
Simple jQuery form validation – willjessup.com
Farbtastic: jQuery color picker plug-in – acko.net
What is jCarousel Lite? – gmarwaha.com
Effect Delay Trick – learningjquery.com
Interface Imagebox demo – intelliance.fr
Updated JQuery Nested Tab Set with Demo – blog.cutterscrossing.com
jCarousel Riding carousels with jQuery – sorgalla.com
AutoScroll for jQuery – jdsharp.us
jqUploader Demonstration – pixeline.be
InnerFade with JQuery – medienfreunde.com
jQuery Portlets – sonspring.com

We the Team won in Truveo Developer Challenge Contest – TechVideoBytes

admin — Fri, 01 Aug 2008 19:51:17 +0000

We are glad to announce that, we the Team (Developers Snippets – TechVideoBytes ) won a prize gift in Truveo Developer Challenge Contest and in this contest we stand in top 4th place. We would like to thank the Truveo Team for conducting this contest, this indeed helps us in developing good web applications and can show case the same to the entire Web World. We the Team is striving hard to showcase some useful stuff to the developer to develop their career in technology.

If you see, TechVideoBytes is completely a technology based website, which depicts the ease of highlighting video tutorials on various software tools and various programming languages. You can learn tools online without paying anything, yes! its absolutely free bucks. Just select your favorite keyword and on a click you can view the respective video playing on the other page, and on the page we are consolidating all the relative videos in respect to your keyword selected, if you would like know more about the TechVideoBytes just crawl into the website TechVideoBytes.

About the contest:
Here in this contest there are nine $10,000 first place winners, and the 20 $500 second place winners which are determined by the 5 categories of TopCoder Community Favorite. If you guys want to know more about this contest just jump into TopCoder

In the first place winners we stand in 4th place, and the categories includes Usage – 90, Innovation – 80, API – 80, AOL – 62, TC Rank – 94 and coming to over all Weighted Score is – 81.2

We are glad to bags this prize gift, and will strive hard to come up with other innovative web applications in coming future.

We had a crawl to all the websites which are listed in the prize winning list, we have many favorites websites which we liked the most is MapOfVideo , SVid , VideoBuzz the network of Wittysparks , VideoSearchBot . MapOfVideo has also got good features in the application which provided has got many other options by clicking on the respective spot and stands in 1st Position, SVid it has got featured all the categories in all aspects, which is awesome enough to see and stands in 2nd place, VideoBuzz has bagged in 14th position in the contest. This site has got good look and feel providing all the respective top videos, featured videos and upcoming videos related to Hollywood, Bollywood, Tollywood, Kollywood and more. It enjoys the same popularity and exposure of online bingo and other big-name websites, putting it on the verge of achieving an internet milestone. VideoSearchBot is an AIM bot for video search based on Truveo Video Search API. Just type the query and he will give you the video list with integrated links, which stands in 3rd position in $500 prize winner.

Finally! Kudos to all people who won prize gifts from Truveo.