Archive

Archive for the ‘HTML’ Category

Mini AJAX File Upload Form – Multiple Files Uploader by Drag and Drop

September 30th, 2014 2 comments

I was looking for a easy-to-use jQuery file uploader and I came to Mini AJAX File Upload Form, which is built on top of the jQuery File Upload plugin and can be easily handled by PHP. It allows visitors upload files from their browsers with drag/drop or by selecting them individually. A demo here.

Mini AJAX File Upload Form

Usage

Using the plugin is easy, import all the js and css scripts, then put a id=”upload” in <form> and <div id=”drop”> inside it. That’s it!

  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
  <link rel="stylesheet" href="includes/mini-upload-form.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
  <script src="includes/javascript/mini-upload-form/jquery.knob.js"></script>
  <script src="includes/javascript/mini-upload-form/jquery.ui.widget.js"></script>
  <script src="includes/javascript/mini-upload-form/jquery.iframe-transport.js"></script>
  <script src="includes/javascript/mini-upload-form/jquery.fileupload.js"></script>
  <script src="includes/javascript/mini-upload-form/script.js"></script>
...
  <form id="upload" method="post" action="my_page.php?action=upload" enctype="multipart/form-data">
    <div id="drop">
      Drop Here
      <a>Browse</a>
      <input type="file" name="file" multiple />
    </div>

Then, you can handle it in a separated PHP, or in the same PHP like I do:

switch ($_GET['action']) {
  case 'upload':
    $allowed = array('pdf', 'txt'); // A list of permitted file extensions
    if(isset($_FILES['file']) && $_FILES['file']['error'] == 0){
      $extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
      if(!in_array(strtolower($extension), $allowed)){
        echo '{"status":"error"}';
        exit ();
      }
      if(move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name'])){
 
        // Handle the upload here
 
        @unlink('uploads/' . $_FILES['file']['name']); // Optional: delete the file after handled
        echo '{"status":"success"}';
        exit ();
      }
    }
    echo '{"status":"error"}';
    exit ();
    break;
}

Why modify?

The script is great, fancy and easy to use. However, it only show if the files are uploaded successfully but not if the files are handled (e.g. filter the file-type, record them in database, etc). Especially when uploading 100+ files you will entered a dilemma without knowing which file have been successfully handled. Therefore this modification has been made.

Modification

The mod includes addiction functions:

  • Success/fail count note
  • JavaScipt popup alert listing failed files, when clicking the error file count
  • Re-upload all failed files

The mod only change js/script.jx and added few lines in css/style.css.

Mod Usage

Just add a empty <div id=”note”></div> in the <form>, and output {“status”:”error”} and {“status”:”success”} in upload handle:

  <form id="upload" method="post" action="my_page.php?action=upload" enctype="multipart/form-data">
    <div id="note"></div>
    <div id="drop">
      Drop Here
      <a>Browse</a>
      <input type="file" name="file" multiple />
    </div>

Mod Screenshots

Mini AJAX File Upload Form Screenshot Feedback Note
Mini AJAX File Upload Form Screenshot Listing of Failed Files
Mini AJAX File Upload Form Screenshot Rety All Failed

GitHub Download

Selecting input boxes and using wildcard in JQuery

January 14th, 2013 No comments

This post is going to show you how to select input boxes using their name attribute and give example on using wildcard in JQuery.

simple name attribute:

selecting input boxes in JQuery can be easy for simply input name:

<input name="product">
$('input[name="product"]')

name having square bracket:

sometime (when using PHP) we may put square brackets and a id inside the name such as:

<input name="product[6]">

in this case we need to escape the bracket by using \\

id = 6; // get this id from some function
$('input[name="product\\[' + id + '\\]"]')

list of inputs boxes in same name:

in PHP, we always use list of inputs boxes in same name as:

<input name="product[]">
<input name="product[]">

to get all these input, we can apply the same rule above as:

$('input[name="product\\[\\]"]')

Or, more simpler, we can use the starting wildcard(^) in name property:

$('input[name^="product"]')

This mean every inputs having name attribute starting with ‘product’. Also you can use the ending wildcard($) as:

$('input[name$="\\[\\]"]')

Please note that this is unlike the first two example, this would return an array of JQuery objects, .each() may be use after to alter the input boxes…

More on JQuery documentation

Categories:
Tags:

Simple JavaScript ‘Select All’ and ‘Deselect All’ checkbox

November 9th, 2012 No comments

To build a simple JavaScript ‘Select All’ checkbox to check all checkboxes is easy and can be done in few lines.

Javascript ‘Select All’ checkbox

Javascript 'Select All ' checkbox

Checkbox Inputs

You may create a load of checkboxes by HTML hard-code or PHP for loop as:

foreach($inputs as $index => $input){
  echo '<input type="checkbox" name="add_this[]" value="' . $index . '" />' . $input . '<br />';
}
echo '<input type="checkbox" name="select_all" onchange="selectALL(this);" /> Select All ';

note all checkboxes are in name add_this and have the value of incrementing index from 0.

JavaScript selectAll function

function selectALL(checkbox){
  addThisBoxes = checkbox.form.elements['add_this[]'];
  for(i = 0, x = addThisBoxes .length; i < x; i++)
    addThisBoxes [i].checked = checkbox.checked; 
}

we use .elements[] to get the list of elements named add_this[], then run though the list and copy the ‘Select All’ box checked value to them

more on Javascript checkbox object

Categories:
Tags:

Creating a CSS3 heading fadeout underline

October 31st, 2012 No comments

Most of the time, we want to put a underline on the bottom of headings (eg <h1> tag). A mono-colored underline is definitely too boring, so we may wanna put a heading fadeout underline. This can be done by hard-coding a gradient image underneath the headings, or a better and most common way, using CSS background attribute in the <h1> tag. Now with CSS3, we can get rid of the image and simply put code the the fadeout underlines.

CSS3 heading fadeout underline

Pure CSS3 heading fadeout underline

A pure CSS3 heading fadeout underline without using image

Hard-code underline image

<h1 style="margin-bottom: 0px">My Heading</h1>
<div><img width="100%" height="1" src="images/underline.gif"></div>

Note that margin-bottom need to be set to 0px to override the default margin. This may be the simplest way away from coding and compatible for all browsers, but the largest disadvantage is that you need to hard code for every headings and enlarge the content.

Using CSS3 background

h1{
  background-image: url('images/underline.gif');
  background-position: left bottom;
  background-size: 100% 1px;
}

This will create 1px underline on the bottom. The image can be a very small image having only two colors on left and right:
small image for CSS3 fade out underline
background-size is a CSS3 attribute that stretch the small image to a underline. For other previous CSS versions, a full-sized underline image should be used instead.

Using pure CSS codes

h1{
  position:relative;
}
h1:after{
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height:1px;
  background: -moz-linear-gradient(left, #555, transparent);
  background: -webkit-linear-gradient(left, #555, transparent);
}

This would create a empty content with gradient background after the heading.
-moz-linear-gradient and -webkit-linear-gradient are the CSS3 attributes to create a gradient color. This has the advantage on bypassing the image editing and speed up page loading a little bit. Also it gives ability to quick change on the color, width, etc. However, IE and very old version of Firefox and Safari do not support them. For the stupid IE, we need to use filter attribute and… I won’t never ever bother for things making simple to complicated!

more on CSS3 gradient: CSS3 Gradients
another great example on How to create a CSS3 border fadeout

Rich snippet with author photo in Google results for WordPress blog

October 25th, 2012 No comments

[Updated@02/10/2014]
Google has taken away image rich snippet, but still it’s worth to the this to increase the search engine ranking.
More on here

It is said that the rich snippet can give 30% boost to the clicks from the Google search results page. That’s true while people would more likely to click a link with photo instead of the boring text link. Google has provided some easy ways for blogger to link their Google+ account and display profile pictures in the search page. There are also a lot articles mentioning more complete and compact ways to do it. Here I would show how I do it in WordPress as single author blog.

Rich snippets of RichardFu.net

Rich snippet of abtfuR.com in Google search page

isn’t that cool when your image appear in Google page?

Rich snippet of abtfuR.com post in Google search page

Verify Domain Email

First, if you have the domain e-mail, verify it as told by Google. For example, mine would be fur@richardfu.net

Make a linkages loop

Then, make a loop of linkages as:
post → author about page → Google+ → author about page
and use rel=author or rel=me attribute on each link

Link from posts to About page

In each single post, make a link to the About page in your site, this can be done by putting following lines in single.php of your theme in WordPress:

<div class="author">Copyright by <a title="About Richard Fu" href="<?php echo get_bloginfo('url'); ?>/about-richard-fu/" rel="author">Richard Fu</a></div>

Note we use rel=”author” here to let Google know it’s the author’s bio page.

Link from About page to Google+ profile

Then, in the about page, put link to your Google+ profile in such format:

<div class="googleplus">Follow me in <a title="About Richard Fu" href="https://plus.google.com/106308894898264343019?rel=author" rel="me">Google+</a></div>

The number is simply the Google+ ID you have. ?rel=author is most important here telling the author page is linking to his Google+ acount.
For me, I use the fancy Social Media Widget to show my social network profile, so my Google+ profile is shown (in every page). By default Social Widget put rel=”nofollow” to the links. To complete the linkage loop, I hard code a bit on social-widget.php around line 148 as:

if ($nofollow == 'on') {
// $nofollow = "rel=\"nofollow\"";
$nofollow = "rel=\"me\"";
} else {
$nofollow = '';
}

Link from Google+ back to About page

Finally, go edit Google+ profile, put your website in Contributor to. Also put About page to the Links and Other profiles.

Rich snippet setting in Google+ profile

Testing and waiting time

That’s it. Go test it in Google Rich Snippet Testing Tool, but it may take a while for Google to re-crawl the pages. Mine take about 10 days but it can be longer. You may fasten the process by using ‘Fetch as Google’ in Google’s Webmaster Tools to force re-crawl.

More information

Rich snippet is a fun thing to play around and it definitely influence the visit counts for the site. There is a interesting infography by BlueGlass about it.

And these are my source from other great bloggers:
The Trick to Getting Your Rich Snippet Author Photos to Show in Google Results
Adding the Rel=Author to WordPress