Coming Soon - Premium WordPress Theme Giveaway To All Our Email Subscribers

Top 10 Most Popular File Upload Scripts – Live Demo and Free Download(Part 2)

This is the second part of my article on Top 10 Most Popular File Upload Scripts. This post contains the bottom five of the top ten file upload scripts in the list, If you haven’t read the first part of this post then I recommend going through it first here.In my previous post I had listed file upload scripts which had multiple functionality which can be easily customized for your needs, But in this tutorial I have listed file upload scripts which are similar in features and look of those found in popular websites like Gmail, Google Plus, Flickr and Facebook.

So enjoy this Five upload scripts by having a look at the live demo or downloading the live demo and implementing the script in your own website:


6.jQuery File Upload


Review

Although this script has no similarity to those found on any website, still it has made to the list because it has some very great features without using flash.Features like multiple file select, automatic upload, thumbnail, upload cancel, file delete makes this upload script a very good script for all purposes

Description from official website

No description found

Features

Features
Multiple file upload:
Allows to select multiple files at once and upload them simultaneously.
Drag & Drop support:
Allows to upload files by dragging them from your desktop or file manager and dropping them on your browser window.
Upload progress bar:
Shows a progress bar indicating the upload progress for individual files and for all uploads combined.
Cancelable uploads:
Individual file uploads can be canceled to stop the upload progress.
Resumable uploads:
Aborted uploads can be resumed with browsers supporting the Blob API.
Chunked uploads:
Large files can be uploaded in smaller chunks with browsers supporting the Blob API.
Preview images:
A preview of image files can be displayed before uploading with browsers supporting the required HTML5 APIs.
No browser plugins (e.g. Adobe Flash) required:
The implementation is based on open standards like HTML5 and JavaScript and requires no additional browser plugins.
Graceful fallback for legacy browsers:
Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.
Standard HTML file upload form:
Shows a standard HTML file upload form if JavaScript is disabled.
Cross-site file uploads:
Supports uploading files to a different domain with Cross-site XMLHttpRequests.
Multiple plugin instances:
Allows to use multiple plugin instances on the same webpage.
Customizable and extensible:
Provides an API to set individual options and define callBack methods for various upload events.
Multipart and file contents stream uploads:
Files can be uploaded as standard “multipart/form-data” or file contents stream (HTTP PUT file upload).
Compatible with any server-side application platform:
Works with Google App Engine (Python, Java), Ruby on Rails, PHP and any other platform that supports HTTP file uploads.

Pros and Cons

ADVANTAGES DISADVANTAGES
No browser plugins (e.g. Adobe Flash) required: Requires JavaScript to be enabled or else shows a standard html4 upload element.
Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.
Supports uploading files to a different domain with Cross-site XMLHttpRequests.

Live Demo and Download

Click here to Download Source Code of jQuery File Upload

Download

Click to view Live Demo jQuery File Upload

Live Demo


7.Flickr File Upload


Review

This is the exact replica of the File uploader in Flickr

Description from official website

No description found

Features

Features
All the features similar to the file upload system on Flickr, Click here to check the actual Flickr file upload

Pros and Cons

ADVANTAGES DISADVANTAGES
Nice upload script for video or photo galleries Uses Flash
A well suited script for uploading photos or videos Uploading cannot be cancelled once upload button is pressed

Live Demo and Download

Important Note

After downloading the files Please do the following changes in order for the script to workModify the index_files/config.js file line no 49

var AdnanTotal = 0;
var _site_root = 'your script location';
var upload_Path = _site_root + '/upload.php'

Click here to Download Source Code of Flickr File Upload

Download

Click to view Live Demo Flickr File Upload

Live Demo


8.Uber-Uploader


Review

Although looks like an outdated script with no updates for newer features like html5, It is still a very good script with all those features without using flash.It is written in Perl, PHP and JavaScript.

Description from official website

Uber-Uploader is a group of programs written in Perl, PHP and JavaScript. It is intended to present a graphical representation of the status of a web-based file upload in the form of a progress bar.

Features

Features
Progress bar
Delete selected files
Different modes of progress bars
Does not use browser plugins like flash
Email support:
Emails whenever a file is uploaded

Pros and Cons

ADVANTAGES DISADVANTAGES
No browser plugins (e.g. Adobe Flash) required: Uses perl and is a bit outdated.
Progress bar  Difficult to set up for newbies
Email support:
Emails whenever a file is uploaded
 lack of support

Live Demo and Download

Click here to Download Source Code of Uber-Uploader

Download

Click to view Live Demo Uber-Uploader

Live Demo

Click here to go to next page >>

VN:F [1.9.22_1171]
Rating: 5.0/5 (4 votes cast)

, , , , , , , , , , , , , , , , , , , , ,

4 Comments

Vote For The Best Tutorial in 2011

We would like to wish everyone a Happy New Year 2012, as we end the year 2011 and step in to 2012, we would like to have some feedback which would help us to provide you with better and useful web development tutorials in 2012.

So please take some time to vote for the best tuorial of 2011, and what tutorials you are expecting us to provide in 2012.

Survey has been closed, thanks for everyone who took the survey.

Thanks for taking the survey, we will be back in 2012 with some more great Web Development Tutorials, your feedback will definitely help us present the best tutorials for you.

Happy New Year 2012 and have a great year ahead.

VN:F [1.9.22_1171]
Rating: 5.0/5 (6 votes cast)

, , , ,

No Comments

3 Copies Of Standard WordPress Theme Giveaway From Themefuse

Themefuse who are known for their Stunning Original WordPress Themes have agreed to giveaway 3 copies of  their Standard WordPress Themes to three lucky readers of our blog.

Themefuse offers stunning WordPress themes which would suit everyone’s need and If lucky you could go away with a standard theme license and you will have the option to choose any of their theme from their theme shop.

Below are a some of our favorites from each category, visit themefuse to browse through all of their themes.

VIDEOGRID

Showcase your lifetime work or blog like you never blogged before with this insanely great multimedia WordPress theme.

VideoGrid

Sportedge

The versatile SportEdge Magazine is the best Sport WordPress theme we could have come up with, that’s a given! See for yourself.

SportEdge

Medica

Probably the best WordPress theme when it comes to Doctor’s websites, Health Clinics, Dentist’s Offices or anything medical related.

Medica

Writer

Writer has all it takes to be a really great option for bloggers that want a stylish and premium look for their personal WordPress blog.

Writer

Brand Crafters

The ultimate corporate WordPress theme that will guarantee to make your business website stand out from the crowd.

BrandCrafters

MobilityApp

A theme best suited for smartphone developers that need to promote their iPad, iPhone or Android mobile applications.

MobilityApp

Qlassik

Be it your corporate business website or your personal web design portfolio, Qlassik will definitely deliver in both situations and more.

Qlassik

Lifestyle

An online magazine oriented WP theme that also fits perfectly as a news, fashion or even a celebrity & gossip blog.

Lifestyle

Welcome Inn

If you need a hotel oriented wp theme, you have to try our latest project. It comes in 2 additional flavors: ski resort and spa. Enjoy!

Welcome Inn

Freshfolio

An original, awesome and efficient way for showcasing photography, design, illustration portfolios’ or even paintings and art.

Freshfolio

Envision

Try our most complex wp theme to date. It has shortcodes, 5 different sliders and a bunch of awesome features. You name it, we’ve got it!

Envision

WebStudio

This theme can be used to showcase photography, illustration, design, paintings or art, in a simple, awesome and efficient way.

WebStudio

Exquisite Works

WP theme designed for someone who needs a classy and stylish presence on the web for their corporate website.

Exquisite Works

Clean Classy Corporate

Be it web products, cloud computing or SaaS, C3 has a clean corporate feel to it which caters to the new breed of web entrepreneurs.

Clean Classy Corporate

Art Gallery

Showcase your art, photography, design work or even print. If you think of your work as art, this is the wp theme for you.

Art Gallery

Creative Juice

We’ve crafted this wp theme with a showcase portfolio in mind. It can be easily used by web agencies / studios or small design firms.

Creative Juice

SiliconApp

We’ve built this wp theme with a software application wordpress template in mind, be it a mobile or a standard desktop product.

SiliconApp

Bon Apetit

This wp theme is destined for a restaurant or coffee shop website but it can be also used for a pastry, catering or recipes portal.

Bon Apetit

WINNERS

The Giveaway is now over and the winners are announced below in the widget.

Thanks for everyone who particiapted.

If you didn’t win , don’t worry we will be back very soon with some more awesome giveaways.

Do subscribe to your web development tutorials and more …

Read the rest of this entry »

VN:F [1.9.22_1171]
Rating: 5.0/5 (2 votes cast)

, , , , ,

15 Comments

Creating Top Fixed Menu Bar With CSS3 Buttons and Dropdown Found in Gmail

Our previous tutorial was on creating the top fixed black menu bar with CSS drop down menu found in Google products, and in this tutorial I would like to teach creating the fixed menu bar with CSS3 buttons found in Gmail along with the dropdown which contains buttons for common functions like Archive, Spam, Delete, Mark as Important, Mark as not Important, Move to, Labels, Refresh and many more functions which is displayed right above the message list.

If you haven’t observed the new CSS3 button designs on this menu bar then it is because you are still struck with an old theme which does not support the new buttons.

If you want to have a look at these new menu bar with the CSS3 buttons that we are going to design in this tutorial, please change your theme to Preview or Preview(Dense).

Or else the below image will give you a better idea what we are going to be left at the end of this tutorial.

Top fixed bar found in Gmail with CSS buttond and dropdown

Fixed bar with CSS buttons and dropdown found in Gmail

Gmail uses JavaScript for the dropdown which is displayed when the button is clicked but I am not using JavaScript instead CSS is used and the dropdown is displayed on hovering over the buttons, but if you want the actual JavaScript dropdown found in Gmail you can easily modify the source code.

Goals of this this tutorial:

  • Make the bar static so it remains fixed even when the page is scrolled
  • create the buttons exactly the way they look in Gmail
  • getting the same style of dropdown menu as in Gmail
This type of a bar can be used to design elegant navigational bars of your website, control buttons for an online music player, or whatever your imagination may be….

Go forward have a look at the live demo and download the source code and use it anyway you like it.

Download Source Code

DOWNLOAD

Live Demo

LIVE DEMO


Source Code

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>Live Demo Of Creating Top Fixed Menu Bar With CSS3 Buttons Found in Gmail | http://blog.geotitles.com</title>
</head>
<body>
<div class="container">
	<div id="content">
		<div class="menu">
			<ul>
				<li><a class="check dropdown" href="#"><input type="checkbox"/><span class="arrow"></span></a>
				<ul class="width-1">
					<li><a href="#">All</a></li>
					<li><a href="#">None</a></li>
					<li><a href="#">Read</a></li>
					<li><a href="#">Unread</a></li>
					<li><a href="#">Starred</a></li>
					<li><a href="#">Unstarred</a></li>
				</ul>
				</li>
				<li><a class="left" href="#">Archive</a>
				</li>
				<li><a class="middle" href="#">Spam</a></li>
				<li><a class="right" href="#">Delete</a>
				</li>
				<li><a class="left dropdown" href="#">Move to<span class="arrow"></span></a>
				<ul class="width-2">
					<li><a href="#">Personal</a></li>
					<li><a href="#">Work</a></li>
					<li><a href="#">Travel</a></li>
					<li><a href="#">Insurance</a></li>
					<li><a href="#">Insurance/Vehicle</a></li>
					<li><a href="#">Receipts</a></li>
					<li><a href="#">Educational</a></li>
					<li><a href="#">Spam</a></li>
				</ul>
				</li>
				<li><a class="right dropdown" href="#">Labels<span class="arrow"></span></a>
				<ul class="width-2">
					<li><a href="#">Personal</a></li>
					<li><a href="#">Work</a></li>
					<li><a href="#">Travel</a></li>
					<li><a href="#">Insurance</a></li>
					<li><a href="#">Insurance/Vehicle</a></li>
					<li><a href="#">Receipts</a></li>
					<li><a href="#">Educational</a></li>
				</ul>
				</li>
				<li><a class="dropdown" href="#">More<span class="arrow"></span></a>
				<ul class="width-3">
					<li><a href="#">Mark all as read</a></li>
					<li><a href="#">Mark as read</a></li>
					<li><a href="#">Mark as unread</a></li>
					<li><a href="#">Add to tasks</a></li>
					<li><a href="#">Add star</a></li>
					<li><a href="#">Remove star</a></li>
					<li><a href="#">Create event</a></li>
					<li><a href="#">Filter messages like these</a></li>
					<li><a href="#">Mute</a></li>
					<li><a href="#">Unmute</a></li>
				</ul>
				</li>
				<li><a class="refresh" href="#">&nbsp;</a></li>
				<li><a class="num"><b>1</b>–<b>50</b> of <b>52</b></a></li>
				<li><a class="previous" href="#">&nbsp;</a></li>
				<li><a class="next" href="#">&nbsp;</a></li>
			</ul>
		</div>
		<!--end  menu-->
	</div>
	<!--end content-->
</div>
<!--end container-->
</div>
</body>
</html>

CSS

* {
	margin:0;
	padding:0;
}
.menu {
	position:fixed;
	height:30px;
	font-size:14px;
	color:#FFF;
	margin:0 auto;
	margin-top:20px;
	margin-left:20px;
}
.menu ul {
	list-style:none;
	color:#FFF;
	width:auto;
}
.menu ul li {
	float:left;
	position: relative;
}
.menu ul li a {
	color:#666;
	font:bold 75% arial,sans-serif;
	text-decoration:none;
	padding:7px 12px;
	position:relative;
	display:inline-block;
	/*Background*/
	background:#f3f3f3;
	background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
	/*linear-gradient*/
	background:-webkit-gradient(linear,left top,left bottom,from(from(#F5F5F5)),to(to(#F1F1F1)));
	background:-webkit-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
	background:-moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
	background:-o-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
	background:linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
	border:solid 1px #dcdcdc;
	/*border-radius*/
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	margin-right:10px;
}
.menu ul li a:hover {
	color:#333;
	border-color:#999;
	/*box-shadow*/
	-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.2) -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow:0 2px 0 rgba(0,0,0,0.2) -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
	box-shadow:0 2px 0 rgba(0,0,0,0.2) box-shadow:0 2px 5px rgba(0,0,0,0.2);
}
/* styling for the left buttons(buttons which are joined)*/
.menu ul li a.left {
	-webkit-border-top-right-radius:0;
	-moz-border-radius-topright:0;
	border-top-right-radius:0;
	-webkit-border-bottom-right-radius:0;
	-moz-border-radius-bottomright:0;
	border-bottom-right-radius:0;
	margin: 0;
}
/* styling for the middle buttons(buttons which are joined)*/
.menu ul li a.middle {
	/*border-radius*/
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
	border-left:solid 1px #f3f3f3;
	margin:0;
	border-left:solid 1px rgba(255,255,255,0);
}
.menu ul li a.middle:hover,.menu ul li a.right:hover {
	border-left: solid 1px #999;
}
/* styling for the right buttons(buttons which are joined)*/
.menu ul li a.right {
	-webkit-border-top-left-radius:0;
	-moz-border-radius-topleft:0;
	border-top-left-radius:0;
	-webkit-border-bottom-left-radius:0;
	-moz-border-radius-bottomleft:0;
	border-bottom-left-radius:0;
	border-left:solid 1px #f3f3f3;
	border-left: solid 1px rgba(255,255,255,0);
}
/*style for the arrow pointing downward*/
.arrow {
	border:thick;
	border-color:#777777 transparent white;
	border-style:solid dashed dashed;
	margin-left:5px;
	position:relative;
	top: 10px;
}
/* button with checkbox*/
.menu ul li a.check {
	padding:6px 6px 7px 12px;
	position:relative;
	display:inline-block;
	margin-right: 10px;
}
/*refresh button*/
.menu ul li a.refresh {
	background:url(images/refresh.png) 10px 4px no-repeat #f3f3f3;
	width: 17px;
}
/* previous button*/
.menu ul li a.previous {
	background:url(images/previous.png) 10px 4px no-repeat #f3f3f3;
	width: 17px;
}
/*next button */
.menu ul li a.next {
	background:url(images/next.png) 10px 4px no-repeat #f3f3f3;
	width: 17px;
}
/*showing the number of emails in inbox(eg:1–50 of 52)*/
.menu ul li a.num {
	color:#000;
	font:normal 80% arial,sans-serif;
	text-decoration:none;
	padding:7px 12px;
	position:relative;
	display:inline-block;
	text-shadow:none;
	background:#FFF;
	margin-right:10px;
	border: none;
}
/* hide the dropdown*/
.menu ul li ul {
	display: none;
}
/*changing the background of the button(which has a dropdown) to creyish gradient when we hover the mouse over it*/
.menu ul li:hover a.dropdown {
	background:#888888;
	/* Old browsers */
	background:-moz-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
	/* FF3.6+*/
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#888888),color-stop(43%,#8e8e8e),color-stop(45%,#7a7a7a),color-stop(100%,#989898));
	/* Chrome,Safari4+*/
	background:-webkit-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
	/* Chrome10+,Safari5.1+*/
	background:-o-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
	/* Opera 11.10+*/
	background:-ms-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
	/* IE10+*/
	background:linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
	/* W3C */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888',endColorstr='#989898',GradientType=0 );
	/* IE6-9 */ border:1px solid #989898;
	color:#000;
}
.menu ul li:hover ul {
	display:block;
	position:absolute;
	margin-left:0px;
	margin-top:-1px;
	-webkit-box-shadow:0 4px 10px #8b8b8b;
	-moz-box-shadow:0 4px 10px #8b8b8b;
	box-shadow:0 4px 10px #8b8b8b;
	padding:1px;
}
.menu ul li:hover ul li a {
	display:block;
	color:#000000;
	background:#ffffff;
	border:none;
	margin-right:1px;
}
.menu ul li:hover ul li a:hover {
	background: #EEEEEE;
}
/*the first item in dropdown must not have a border on top */
.menu ul li ul li:first-child a {
	border-top: none;
}
/* now let us define the widths of various dropdown*/
.width-1 li a {
	width:55px;
}
.width-2 li a {
	width: 125px;
}
.width-3 li a {
	width: 165px;
}

Hope this tutorial was helpful for you and has helped you learning something new, next week I will be back with another interesting web design tutorial, until then please subscribe with our blog to remain updated with all the new tutorials and articles:

Want to request a new tutorial, then please Contact me right-away or leave a comment below.

 promise to respond to everyone who  asks for support or new tutorials.

VN:F [1.9.22_1171]
Rating: 4.4/5 (5 votes cast)

, , , , , , , , , , , , ,

10 Comments

Business Cards Giveaway from Print Runner

We are back with another giveaway, and this time it is 250 business cards giveaway from PrintRunner.

PrintRunner.com was established with little more than a small press and a dream. Ten years later the company became one of the foremost quality printers in Southern California. Their commitment to provide the best value and high quality full color printing at affordable price made the company grow. PrintRunner is a full service high quality printing company located in Chatsworth, California.

Business Cards Giveaway

Business Cards Giveaway

Details of the giveaway:

Business Card Size and Style Business Cards: 2×3.5 (Standard)

Quantity: 250 Colors: 4/4 Color Both Sides

Paper: 14 pt. UV Coating on Front, 14 pt. UV Coating on both sides,

Proof: NONE

Rounded Corners: NO

Ready To Ship In: 3 Business Days

*Giveaway is open Worldwide but free shipping is only available for US citizens and outside US winners must shoulder the shipping charges.

Ages: 18 years old and above.

PrintRunner is one of the best online printing companies and we definitely recommend to try their online business card printing through their online printing services.

The giveaway has ended and the winners are announced in the widget below.
If you were not the lucky one, don’t worry, since we will be back with more giveaways very soon :)
a Rafflecopter giveaway

Thank you to PrintRunner for providing us this giveaway, I will receive a set of business cards for hosting this.

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

, , ,

9 Comments