Multiple Checkbox using jQuery easy example

Multiple #Checkbox using #jQuery Tutorial http://t.co/0wAhn9ZLC1 #php #randomposts #gettingcheckboxvaluesinjquery

— Latest Tutorials (@latesttutorials) August 28, 2014

JQuery Image Puzzle Game

In this Tutorial, we are going to create an image puzzle, which Almost everyone, at one point during childhood, has played jigsaw puzzles. Today I am going to show you how to create a jigsaw image puzzle using jQuery and HTML5. I know that you must be waiting to see the puzzle in action. I am not going to keep you guessing. Here is the sample demo of the puzzle and download of tutorial files.

Read more: http://latest-tutorial.com/2014/04/12/image-puzzle-game-jquery/#ixzz31lBzEFxi

Jquery and Java List example

There is no direct way to iterate over a Java List with jQuery, see the following case study : Spring controller @RequestMapping(value = “/”, method = RequestMethod.GET) public ModelAndView getPages() { List list = new ArrayList(); list.add(“List A”); list.add(“List B”); list.add(“List C”); list.add(“List D”); list.add(“List E”); ModelAndView model = new ModelAndView(“somepage”); model.addObject(“list”, list); return model; } JSP page, you can…

Read More »

 

Upload Multiple Images with Jquery

In this post of Upload Multiple Images with Jquery code allows to user can select and upload multiple images in single shot, Quick look this live demo. Download Script     Live Demo Sample database design for Users. Users Contains user details username, password, email, profile_image and profile_image_small etc. CREATE TABLE `users` ( `user_id` int(11) AUTO_INCREMENT PRIMARY KEY, `username` varchar(255) UNIQUE KEY, `password` varchar(100), `email`…

Read More »

 

Customize Google Maps

Overview The Maps API allows you to Customize Google Maps look and feel of the map. Custom markers will help the user differentiate between different features of the campus (such as classrooms, bathrooms and studentfacilities). A custom legend will communicate these different types of map features, and a custom map style will help make the map overlays stand out….

Read More »

 

Resizing images with PHP

Are you looking for image upload and Resize PHP script. I had implemented a simple PHP script to re-sizing image into different dimensions. It’s very useful to your web projects to save hosting space and bandwidth to reduce the original image to compressed size.

PHP Code
This script resize an Image into two 60px and 25px. Take a look at $newwidth you have to modify size values.

Read More »

Auto Load More Data On Page Scroll using Jquery and PHP

This tutorial about my favorite place Dzone like data loading while page scrolling down with jQuery and PHP. We have lots of data but can not display all. This script helps you to display little data and make faster your website.

Read More »

Live Preview of Html Changes

In this post I want to explain How To Implement Live Content Preview with jQuery. This is very basic jquery tutorial using keyup() element. It’s useful just five lines of javascript code to show live content preview. Best examples Google Adwords Campaign piece preview. Take a look at live demo

Download Script

javascript
Contains javascipt code. $(“.word”).keyup(function(){} – word is the class name of anchor input field. Using $(this).val() calling input field value.

// <![CDATA[
javascript” src=”http://ajax.googleapis.com/ajax/
// ]]>
libs/jquery/1.3.0/jquery.min.js”>
<script type=”text/javascript”>
$(function()

{

$(“.word”).keyup(function()

{

var word=$(this).val();
$(“.word_preview”).html(word);

return false;

});

});

</script>

HTML code

<input type=”text” name=”word”color: blue;”>word” />

http://9lessons.info/<spancolor: blue;”>word_preview“></span>

CSS

body

{
font-family:Arial, Helvetica, sans-serif;
background:#FFFFFF;
}

.word_preview

{
color:#cc0000
}

.word

{
width:150px; height:26px; font-size:18px;
}

 

Create Short URLs Using Jquery and Ajax.

How to create Bit.ly short URLs using Jquery and Ajax. Many tutorials available on web about short URLs using server sidescript, this script works on client side. It is easy just 5 lines of code calling Bit.ly API.You have to modify the username and API key. Use it and make URLs shorts and neat.

Live Demo

Javascript Code
You have to create an account on bit.ly and modify the username and API key.

// <![CDATA[
javascript” src=”http://ajax.googleapis.com/
// ]]>
ajax/libs/jquery/1.4.2/jquery.min.js”>
<script type=”text/javascript”>
$(document).ready(function()
{//bit_url function
function bit_url(url)
{
var url=url;
var username=”username”; // bit.ly username
var key=”bit.ly API key”;
$.ajax({
url:”http://api.bit.ly/v3/shorten&#8221;,
data:{longUrl:url,apiKey:key,login:username},
dataType:”jsonp”,
success:function(v)
{
var bit_url=v.data.url;
$(“#result”).html(‘<a href=”‘+bit_url+'” target=”_blank”>’+bit_url+'</a>’);
}
});
}$(“#short”).click(function()
{
var url=$(“#url”).val();
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
var urltest=urlRegex.test(url);
if(urltest)
{
bit_url(url);
}
else
{
alert(“Bad URL”);
}
});});
</script>//HTML Code
<input type=”text” name=”url” id=”url“/>
<input type=”submit” id=”short” value=”Submit”/>
<div id=”result”></div>

This javascript code $(“#short”).click(function(){}– short is the id name of the submit button. Using $(“#url”).val() calling input box value.

source taken from 9lessons

Hide and Seek with jQuery.

This tutorial about Hide and Seek with jQuery and PHP. This script helps you to present all modules in single page. Take a look at live demo click buttons

 

Download Script     Live Demo

Javascript Code

// <![CDATA[
javascript” src=”http://ajax.googleapis.com/ajax/
// ]]>
libs/jquery/1.3.0/jquery.min.js”>
<script type=”text/javascript”>
$(function()
{

$(“.button”).click(function()
{
var button_id = $(this).attr(“id”);

//Add Record button

if(button_id==”add”)
{
$(“#results”).slideUp(“slow”);
$(“#save_form”).slideDown(“slow”);
}

//Cancel button

else if(button_id==”cancel”)
{
$(“#save_form”).slideUp(“slow”);
$(“#results”).slideDown(“slow”);
}

// save button

else

{

// insert record
// more details Submit form with jQuery

}

return false;

});
});
</script>

HTML Code
Contains javascipt code. $(“.button”).click(function(){}- button is the class name of buttons(Add, Save and Cancel). Using $(this).attr(“id”) calling button id value.

<div id=”results” >

<a href=”#”color: blue;”>button” id=”add” >Add Record </a>

</div>

<div id=”save_form” style=”display:none” >

<a href=”#”color: blue;”>button” id=”save” >Save </a>

<a href=”#”color: blue;”>button” id=”cancel” >Cancel </a>

</div>

<div id=”update” >

</div>