Sunday, 29 July 2012

GMAP3 – A jQuery Google Maps Plugin For The Developers


GMAP3 is one of the finest Google Maps jQuery Plugin which uses Google Map API version 3 to create maps with the advanced features available in it. Google themselves has simplified the efforts in adding the maps in any website, but still applying some advance features are tricky sometimes. Unlike the other Google Maps plugin, GMAP3 aims to allows many manipulation of the google map API version 3.
GMAP3 - Google Maps jQuery Plugin
Let me take a look on the integration part.
As I said, integration Google Maps with GMAP3 is simple and all you need is adding few things to get start with it
Step 1: Add the Google Maps script before closing </head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Step 2: Download the GMAP3 jQuery Plugin and upload it to your server
<script type="text/javascript" src="gmap3.min.js"></script>
Now in order to embed the Google Maps, do the following
$(function(){ // or $(document).ready(function(){

  $("#examplediv").gmap3();
});
According to Google Maps you need to define height and width with the div which can be achieved either by using CSS or by inline HTML
CSS based:
#examplediv {
  height: 350px;
  width: 600px;
  margin: 20px auto; //optional
}
Inline HTML
<div style="height:350px; width:600px"></div>
If you have any issue with this plugin, let us know.

PHP File Upload


With PHP, it is possible to upload files to the server.

Create an Upload-File Form

To allow users to upload files from a form can be very useful.
Look at the following HTML form for uploading files:
<html>
<body>

<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
</form>

</body>
</html>
Notice the following about the HTML form above:
  • The enctype attribute of the <form> tag specifies which content-type to use when submitting the form. "multipart/form-data" is used when a form requires binary data, like the contents of a file, to be uploaded
  • The type="file" attribute of the <input> tag specifies that the input should be processed as a file. For example, when viewed in a browser, there will be a browse-button next to the input field
Note: Allowing users to upload files is a big security risk. Only permit trusted users to perform file uploads.

Create The Upload Script

The "upload_file.php" file contains the code for uploading a file:
<?php
if ($_FILES["file"]["error"] > 0)
  {
  echo "Error: " . $_FILES["file"]["error"] . "<br />";
  }
else
  {
  echo "Upload: " . $_FILES["file"]["name"] . "<br />";
  echo "Type: " . $_FILES["file"]["type"] . "<br />";
  echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
  echo "Stored in: " . $_FILES["file"]["tmp_name"];
  }
?>
By using the global PHP $_FILES array you can upload files from a client computer to the remote server.
The first parameter is the form's input name and the second index can be either "name", "type", "size", "tmp_name" or "error". Like this:
  • $_FILES["file"]["name"] - the name of the uploaded file
  • $_FILES["file"]["type"] - the type of the uploaded file
  • $_FILES["file"]["size"] - the size in bytes of the uploaded file
  • $_FILES["file"]["tmp_name"] - the name of the temporary copy of the file stored on the server
  • $_FILES["file"]["error"] - the error code resulting from the file upload
This is a very simple way of uploading files. For security reasons, you should add restrictions on what the user is allowed to upload.

Restrictions on Upload

In this script we add some restrictions to the file upload. The user may only upload .gif or .jpeg files and the file size must be under 20 kb:
<?php
$allowedExts = array("jpg", "jpeg", "gif", "png");
$extension = end(explode(".", $_FILES["file"]["name"]));
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 20000))
&& in_array($extension, $allowedExts))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Error: " . $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br />";
    echo "Type: " . $_FILES["file"]["type"] . "<br />";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
    echo "Stored in: " . $_FILES["file"]["tmp_name"];
    }
  }
else
  {
  echo "Invalid file";
  }
?>
Note: For IE to recognize jpg files the type must be pjpeg, for FireFox it must be jpeg.

Saving the Uploaded File

The examples above create a temporary copy of the uploaded files in the PHP temp folder on the server.
The temporary copied files disappears when the script ends. To store the uploaded file we need to copy it to a different location:
<?php
$allowedExts = array("jpg", "jpeg", "gif", "png");
$extension = end(explode(".", $_FILES["file"]["name"]));
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 20000))
&& in_array($extension, $allowedExts))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br />";
    echo "Type: " . $_FILES["file"]["type"] . "<br />";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";

    if (file_exists("upload/" . $_FILES["file"]["name"]))
      {
      echo $_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
      }
    }
  }
else
  {
  echo "Invalid file";
  }
?>
The script above checks if the file already exists, if it does not, it copies the file to the specified folder.
Note: This example saves the file to a new folder called "upload"

Email validation snippet in PHP



$email = $_POST['email'];
if(preg_match("~([a-zA-Z0-9!#$%&amp;'*+-/=?^_`{|}~])@
([a-zA-Z0-9-]).([a-zA-Z0-9]{2,4})~",$email)) {
echo 'This is a valid email.';
} else{
echo 'This is an invalid email.';
}

Get Remote IP Address in PHP

 function getRemoteIPAddress() { $ip = $_SERVER['REMOTE_ADDR'];return $ip; }

Base64 Encode and Decode String in PHP


function base64url_encode($plainText) {
$base64 = base64_encode($plainText);
$base64url = strtr($base64, '+/=', '-_,');
return $base64url;
 }

function base64url_decode($plainText) {
$base64url = strtr($plainText, '-_,', '+/=');
$base64 = base64_decode($base64url);
return $base64;
}

Send Mail using mail function in PHP

$to = "admin@user.vn";$subject = "User.vn";$body = "Body of your message here you can use HTML too. e.g. <br> <b> Bold </b>";$headers = "From: Peter";$headers .= "Reply-To: info@yoursite.com";$headers .= "Return-Path: mailto:info@yoursite.com";$headers .= "X-Mailer:PHP5";$headers .= 'MIME-Version: 1.0";$headers .= 'Content-type: text/html; charset=iso-8859-1";mail($to,$subject,$body,$headers);

JQuery Plugin : edit Image FaceBook Style


After reading for 1 day about this, I've just finished making my first jquery plugin. it’s not so hard after all.
this will add a link when hover on image. like if you hover on your profile image on facebook. This Plugin meanwhile works on Div Only
changepicture

   1:  $.fn.editFaceBook = function(options) {
   2:      var opts = jQuery.extend({}, jQuery.fn.editFaceBook.defaults, options);
   3:      return this.each(function() {
   4:          //here is the div/image as 1 element
   5:          $currentdivorimage = jQuery(this);
   6:          $currentdivorimage.width(opts.width);
   7:          $currentdivorimage.css('position', 'relative');
   8:          $divouter = $('<div></div>').appendTo($currentdivorimage);
   9:          $divouter.bind('mouseout', opts.hideedit);
  10:          $divouter.bind('mouseover', opts.showedit);
  11:          var $link = $('<a></a>').appendTo($divouter)
  12:          .attr('href', opts.linkurl);
  13:          $('<img/>').addClass('profileimage')
  14:          .width(opts.width)
  15:          .height(opts.height)
  16:          .attr('src', opts.imgurl)
  17:          .appendTo($link);
  18:   
  19:          var $secondlink = $('<a class="edit_profilepicture hidden" title="Change Picture" href="#">Change Picture</a>')
  20:          .insertAfter($link)
  21:          .bind('mouseover', opts.showeditpencil)
  22:          .bind('mouseout', opts.hideeditpencil)
  23:          .attr('href', opts.linkediturl)
  24:          .bind('click', opts.editlinkclick)
  25:          ;
  26:         
  27:          
  28:   
  29:          $('<span></span').appendTo($secondlink)
  30:          .addClass('edit_profilepicture_icon')
  31:          .html('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
  32:          
  33:          //<span class="edit_profilepicture_icon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  34:      });
  35:  };
  36:   
  37:  jQuery.fn.editFaceBook.defaults = {
  38:      linkurl: 'www.dummy.com',
  39:      linkediturl : '/edit.aspx',
  40:      width: 250,
  41:      height: 327,
  42:      imgurl: 'images/upload/noAvatarPicL.jpg',
  43:      editlinkclick:function(){
  44:      },
  45:      showedit: function() {
  46:          $currentelement = jQuery(this);
  47:          $currentelement.find('.edit_profilepicture').removeClass('hidden');
  48:      },
  49:      hideedit: function() {
  50:          $currentelement = jQuery(this);
  51:          $currentelement.find('.edit_profilepicture').addClass('hidden');
  52:      },
  53:      showeditpencil: function() {
  54:      $currentelement = jQuery(this);
  55:          $currentelement.find('.edit_profilepicture_icon').css('background-position', 'right bottom').css('border', '0px')
  56:          },
  57:      hideeditpencil: function() {
  58:          $currentelement = jQuery(this);
  59:          $currentelement.find('.edit_profilepicture_icon').css('background-position', 'right top');
  60:      }
  61:  };
Include this CSS on your Page
.edit_profilepicture {
background:#FFFFFF none repeat scroll 0 0;
height:20px;
padding:5px 27px 0 6px;
position:absolute;
right:0;
top:0px;
}
.edit_profilepicture_icon {
background:transparent url(../images/penciledit.gif) no-repeat scroll right top;
height:18px;
position:relative;
position:absolute !important;
width:18px;
right:4px;
top:4px;
margin-top:0px;
text-decoration:none;
}
.whitepencil
{
 background-position:right bottom;
}
.hidden
{
    display:none; 
}
Include this Pencil Image on your folder
penciledit 
Let me brief the API:
$(‘selectors’).editFaceBook(option);
The option usage is {prop:value,prop:value,n:n}
The availabe options are:
  • linkurl    'the link of our image click url
  • linkediturl  'url for our changemypicture click'
  • width 'width of our image'
  • height ''height of our image'
  • imgurl "imageurl"
  • editlinkclick "function of when changemypicture clicked'
  • showedit 'function of displaying edit section'
  • hideedit 'function of hiding edit section’
  • showeditpencil 'function of showing white pencil'
  • hideeditpencil 'function of hiding white pencil' 

Facybox


A jQuery-based, Facebook/Fancybox-style lightbox which can display images, divs, or entire remote pages.

Facybox

CREATE A SIMPLE CSS DROPDOWN MENU

Learn to create a very simple CSS dropdown menu with solely HTML and CSS. This is a very useful and small dropdown menu without the use of javascript!

Let me start with the CSS code, edit the colors and sizes to suit your websites needs:

ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}




Next is the HTML code. It is structured as nested lists so that even displaying the HTML source code without any CSS style will render it with a useful structure.

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">The Team</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Vision</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Cozy Couch</a></li>
<li><a href="#">Great Table</a></li>
<li><a href="#">Small Chair</a></li>
<li><a href="#">Shiny Shelf</a></li>
<li><a href="#">Invisible Nothing</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Online</a></li>
<li><a href="#">Right Here</a></li>
<li><a href="#">Somewhere Else</a></li>
</ul>
</li>
</ul>


That is it, very simple and easy to customize! Click below for a live demo…
You can see a LIVE PREVIEW here

22 Best jQuery Dropdown Menus


Dropdown menus are used since the evolution of graphical user interfaces, and jQuery Menus are most wanted. Although a must in almost all websites, but still they are high on demand. There are numerous options in dropdown menus, but finding the one matching to your needs yet trendy can be tricky.
Keeping this in mind, we have collected a whamming collection of jQuery dropdown menus to give a new inspiration for your designs. Check out the post and let us know which one appeals you the most. Enjoy!
If you like this article, you might be interested in some of our articles on jQuery Sliding Tutorials,jQuery Animate, jQuery Slideshow, and jQuery Tooltip Plugins.

Create The Fanciest Dropdown Menu You Ever Saw

Brian Cray teaches you how to create this stunning website dropdown navigation menu. The dropdown menu uses HTML, CSS and Javascript. You can also include the hoverIntent JQuery plugin for extra juicy effects.
Create The Fanciest Dropdown Menu You Ever Saw

Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.
Sexy Drop Down Menu w/ jQuery & CSS

Sliding Jquery Menu

This tutorial will show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.
Sliding Jquery Menu

Perfect Signin Dropdown Box Like Twitter

In this tutorial author will make an entry to show you how to create a login drop down with Twitter style using jQuery.
Twitter with jQuery

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

CSS3 Dropdown Menu

The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.
CSS3 Dropdown Menu

Create Vimeo-like top navigation

What I like the most is the menu that drops down when you hover search box. It offers you different search options that you can choose and narrow your search.
Create Vimeo-like top navigation

“Outside the Box” Navigation with jQuery

This tutorial fill in all your creativity needs by mimicking the OS X dock and stacks.
Outside the Box Navigation with jQuery

Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.
Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms

Some of these common functions are logging in, registering or even resetting a password, yet quite often in many cases we still provide users the same old experience – a separate page for logging in, another for signing-up and yet again another if you’ve forgotten what your login details were.
FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms

jQuery Drop Line Tabs

This menu turns a nested UL list into a horizontal drop line tabs menu. The top level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI. The menu also manages to sneak in a little CSS3, making use of the “border-radius” property to give each link within the sub ULs rounded edges when the mouse hovers over them.
jQuery Drop Line Tabs

Create a jQuery category drop down

Create ‘Browse Community’ button found on 9Rules.com
Create a jQuery category drop down

Fancy Drop Down Menus Using CSS and JQuery

Author created a fancy drop down menus with CSS and JQuery. He have another tutorial on 99points in which he used some animated navigation. He used jQuery animate function and CSS to put some stylish effects. Also he used a background for navigation.
Fancy Drop Down Menus Using CSS and JQuery

Create Simple Dropdown Menu Using jQuery

In this post, we are going to create a simple dropdown menu with the help of jQuery, take a look at the demo of it first.
Create Simple Dropdown Menu Using jQuery

Simple jQuery Dropdowns

Very stripped down code and minimal styling, yet still dropdown menu has all the functionality typically needed.
Simple jQuery Dropdowns

A Different Top Navigation

They will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.
A Different Top Navigation

jdMenu Hierarchical Menu Plugin for jQuery

The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications.
jdMenu Hierarchical Menu Plugin for jQuery

Professional dropdown #2

his menu also styles the path taken through the menu so that it works in IE5.x and IE6 as well as IE7 and all other browsers. This is a little long winded but necessary as IE5.5 and IE6 do not understand the child selector.
Professional dropdown #2

Animated Drop Down Menu with jQuery

Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.
Animated Drop Down Menu with jQuery

Reinventing a Drop Down with CSS and jQuery

For me, standard HTML Select element is pretty much annoying. It’s ugly. It can’t be styled properly in Internet Explorer. And it can’t contain nothing but simple text. That is the reason why I needed to reinvent Drop Down element. This tutorial shows how to do that (easily, believe it or not).
Reinventing a Drop Down with CSS and jQuery

Creating an Outlook Navigation Bar using the ListView and Accordion Controls

The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls.
Creating an Outlook Navigation Bar using the ListView and Accordion Controls

jQuery (mb)Menu 2.7 (New!)

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!
jQuery (mb)Menu 2.7 (New!)

 

Followers

Powered by Blogger.