“Go Back” Button

Browsers already have “back” buttons, so you’d better have a darn good reason for needing to put one on your page!

Input button with inline JavaScript

<input type="button" value="Go Back From Whence You Came!" onclick="history.back(-1)" />

This is totally obtrusive, but you could fix that by only appending this button through JavaScript.


If JavaScript isn’t a possibility, you could use the HTTP_REFERER, sanitize it, and echo it out via PHP.

  $url = htmlspecialchars($_SERVER['HTTP_REFERER']);
  echo "<a href='$url'>back</a>"; 

Floating Header: Scroll Effect using HTML,CSS,JQuery

Ever scrolled halfway down the page – and then the navbar at the top appears? This can be very useful and looks professional. This tutorial will introduce a very basic approach how to get this happening.

1. Download the basic ‘Bootstrap’  Pre-Config from ( BootStrap ) .

Now update the index.html with the following:




<link rel="stylesheet" href="css/bootstrap.css">

<script type="text/javascript" src="js/vendor/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>

<style type="text/css">

body {

padding-top: 60px;
 Continue reading 

jQuery Ajax Tutorial and Example

Before we are going with example let’s read something about jQuery and AJAX.

In this example we are submitting a simple form using AJAX.

To create a form first we are creating a database with name “ajax”.

Create a config file with name config.php.

$dbhost = "localhost";   //replace it with your host name
$dbuser="root";               //replace it with your database username
$dbpassword="";             // replace it with your database password
$dbname="ajax";            // replace it with your database name

?> Continue reading 

What is jQuery and Ajax ?

What is jQuery ?

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. jQuery is free, open source software and it is a fast, small, and feature-rich JavaScript library. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.

What is AJAX ?

AJAX (means Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required (JSON is often used instead), and the requests do not need to be asynchronous.

Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and allow the user to interact with, the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

If you need to check the example on jQuery AJAX, you can check it out here

Rotating Arrow Using jQuery

Create a file navigation.html and write the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#arrow_box").html(" ");
$("#arrow_box").append("<img src='arrowimages/arrow1.jpg'>");
function arrow_navigation(x,y){
var i = x;
var j = y;
$("#arrow_box").html(" ");
$("#arrow_box").append("<img src='arrowimages/arrow"+j+".jpg'>");
<style type="text/css">
#arrow_box1, #arrow_box2, #arrow_box3, #arrow_box4, #arrow_box5, #arrow_box6, #arrow_box7, #arrow_box8, #arrow_box9, #arrow_box10, #arrow_box11, #arrow_box12 {
</style> Continue reading