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.

Javascript Debugging IDEs

JavaScript is very popular among people all over the world. It is basically defined .it is very dynamic .Also, it is very weakly typed and first class functions. Javascript is a multi paradigm language and supports object oriented, imperative and functional programming styles. Javascript is also used as a client side scripting.

JavaScript is therefore implemented as a part of the web browser. This is to provide enhanced user interfaces and dynamic websites. With the help of this programmatic access to computational objects can be obtained within the host environment. Along with that JavaScript has a lot of other advantages to offer that cannot be ignored for instance its use in applications such as PDF documents, site specific browsers and desktop widgets is an example of newer and faster javascript.

Its our pleasure to share best/useful resources for our readers and all. We thankful to our readers for appreciate our previous articles and share their valuable comment. Today we are going to share highly useful IDEs for javascript debuggings. Visit this list and share your thought in out comment section below.

1) Webstorm

This site provides some of the most exciting features that the WebStorm IDE provide. The editor understands your code, its structure and offers you code completion that you expect. Full coding assistance is offered even for language mixtures such as HTML inside JavaScript strings.

2) Coda

3) Komodo Edit

4) Aptana

Aptana Studio 3.2.2 is our code base and complete environment that includes extensive capabilities to build Ruby and Rails, PHP, and Python applications, along with complete HTML, CSS and JavaScript editing.

5) Visual Studio Express

6) Komodo IDE

Komodo IDE has award-winning tools for debugging, code intelligence and navigation, all wrapped around a sweet core editor.

7) Netbeans

AngularJS Service Example

Introduction to AngularJS Services In AngularJS world, the services are singleton objects or functions that carry out specific tasks. It holds some business logic. Separation of concern is at the heart while designing an AngularJS application. Your controller must be responsible for binding model data to views using $scope. It does not contain logic to fetch the data or…

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`…

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….

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.

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

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.

URL-sam.azgor.com

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”,
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

Create your own Search Engine(Interface) using Google Custom Search API

Google Custom Search API are wonderful tools to create some awesome search engine like tools. Also if you want to add a search option to your website and customize the look and feel of your search results, Google Custom Search API serve best to you.
Ring in Spring with Stunning Lingerie from Journelle and get $25 OFF purchases of $200 or more! Use promo code: SPRING200. Offer valid 2/22/13-4/30/13. Shop Now

I have created a Real Time Search engine (I call it real time as it search as you type). I am really impressed by the speed/response of Google Search API.

DEMO

The Code

I will show the code for one of the search api that I implemented in demo page. Let us see how to implement Web Search API.

Step 1: Generate Google Search API Key and Include JavaScript

In order to use Google Search API, you have to first generate a Key for you. Go to following page and signup your self for the Key.
Sign up for Google API Key

Next step is to include the Google Search API javascript. Don’t forget to mention your key in the below code.

<script src="http://www.google.com/jsapi?key=YOURKEY" type="text/javascript"></script>

<script type="text/javascript">

google.load('search', '1');

</script>

Primary

Step 2: Add HTML Container for Web Search

We will create a textbox and a button that will take input for search. And a DIV that will be populated by results:

<input type="text" title="Real Time Search" name="searchbox"/>

<input type="button" id="searchbtn" value="Search" onclick="search(searchbox.value)"/>

<div class="data" id="web-content"></div>

When user will write a query and push Search button, a request will be made to Google Search using Custom Search API and the results are fetched. These results are then copied into the DIV.

Step 3: JavaScript to call Google Search API

We will use following JavaScript to call the Google Search API and copy the results in our container DIV.
The code in plain english is:
1. Create an object to connect Google Web search using class google.search.WebSearch.
2. Set a callback function that will get call once the results for the search are fetched.
3. Call the execute() method with search query as argument.
4. In callback function, iterate through the results and copy it to container DIV.

var webSearch;

webSearch = new google.search.WebSearch();

webSearch.setSearchCompleteCallback(this, webSearchComplete, [webSearch]);

function webSearchComplete (searcher, searchNum) {

var contentDiv = document.getElementById('web-content');

contentDiv.innerHTML = '';

var results = searcher.results;

var newResultsDiv = document.createElement('div');

newResultsDiv.id = 'web-content';

for (var i = 0; i < results.length; i++) {

var result = results[i];

var resultHTML = '<div>';

resultHTML += '<a href="' + result.unescapedUrl + '" target="_blank"><b>' +

result.titleNoFormatting + '</b></a><br/>' +

result.content +

'<div/>';

newResultsDiv.innerHTML += resultHTML;

}

contentDiv.appendChild(newResultsDiv);

}

function search(query) {

webSearch.execute(query);

}

Click for Online Demo

Ajax – Print Date and Time

In this section we will create a simple Ajax Application for displaying the current date and time. Date and time information are retrieved asynchronously from the server side php script. Our HTML page calls serverside php script to retrieve the today’s date. Once the time data is retrieved from the server, it uses javascript and css to display the time on the HTML page.

The server side script is developed in PHP that displays the current time of the server. You modify the php to display your own message. This program can also be used to do some business processing.

These days Ajax is being used extensively for the development of interactive websites. There are many frameworks available these days to develop Ajax applications. But you should start learning the Ajax from scratch. This is the first example in Ajax that will give you quick start in the Ajax technologies.

Let’s get started with the Ajax technology and develop our fist Ajax Datetime example.

Here is the code of HTML File:

 <html>
        <head>

        <title>Ajax Example</title>

 // <![CDATA[
        function postRequest(strURL) {

	var xmlHttp;

        if (window.XMLHttpRequest) { // Mozilla, Safari, ...

         var xmlHttp = new XMLHttpRequest();

       } else if (window.ActiveXObject) { // IE

         var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

       }

    xmlHttp.open('POST', strURL, true);

    xmlHttp.setRequestHeader('Content-Type', 
         'application/x-www-form-urlencoded');

    xmlHttp.onreadystatechange = function() {

        if (xmlHttp.readyState == 4) {

            updatepage(xmlHttp.responseText);

        }

    }

    xmlHttp.send(strURL);

        }

        function updatepage(str){

    document.getElementById("result").innerHTML = 
// ]]>
"" + str + "";;

        }

        function showCurrentTime(){

	var rnd = Math.random();

	var url="time.php?id="+rnd;

	postRequest(url);

        }

        

        

        <h1 align="center">Ajax Example

This very simple
Ajax Example retrieves the

current date and time from server and shows on the form.
To view the current

date and time click on the following button.


    type="button" onclick='JavaScript:showCurrentTime()' 
name="showdate">

When use clicks on the “Show Time” button, the showCurrentTime() is called. The the function showCurrentTime() calls the time.php using Ajax and then updates the time values retrieved from server.

Here is the code of PHP (time.php) file:

<?
print date(“l M dS, Y, H:i:s”);
?>

The above PHP code prints current date and time.

Try the example Online

Category: Ajax

JQuery Image Puzzle Game

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