Disable Browser Back Button Using Javascript<HTML>
<HEAD>
<TITLE>Disable Back Button in Browser </TITLE>
<script type="text/javascript">
function disableBackButton()
{
window.history.forward();
}
setTimeout("disableBackButton()", 0);
</script>
</HEAD>
<body onload="disableBackButton()">
<p>This page contains the code to avoid Back button.
</p>
<p>Click here to Goto <a href="noback.html">NoBack Page</a>
</p>
</BODY>
</HTML>
Hover Fading button with jQuery<style>
a img {
border: 0;
}
ul#img_hover {
list-style: none;
margin: 0 auto; padding: 0;
}
ul#img_hover li {
float: left;
text-align: center;
display: inline;
}
ul#img_hover li a.thumb {
width: 305px;
height: 71px;
cursor: pointer;
}
ul#img_hover li span {
width: 305px;
height: 71px;
overflow: hidden;
display: block;
}
ul#img_hover li a {
text-decoration: none;
display: block;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("ul#img_hover li").hover(function() { //On hover...
var thumbOver = jQuery(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
//Set a background image(thumbOver) on the <a> tag
jQuery(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
//Fade the image to 0
jQuery(this).find("span").stop().fadeTo('normal', 0 , function() {
jQuery(this).hide() //Hide the image after fade
});
} , function() { //on hover out...
//Fade the image to 1
jQuery(this).find("span").stop().fadeTo('normal', 1).show();
});
});
</script>
<ul id="img_hover">
<li>
<a href="http://r-ednalan.blogspot.com/" class="thumb">
<span class="slide1"><img src="images/button.png"/></span>
</a>
</li>
</ul>
jquery/Ajax php - loading image once file submit<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".save").live("click", function () {
$("#loading").fadeIn('slow');
var edit = $(".edit").val();
var id = $("#idrec").val();
var data = '?id=' + id + '&text=' + edit;
$.post("update.php", data, function (response) {
$("#loading").fadeOut('slow');
$("#status").html(data);
});
});
});
</script>
<style>
form {
width: 100%;
}
.save{
margin:0px 0px 0 5px;
}
#loading {
display:none;
}
</style>
<h2>jquery/Ajax php - loading image once file submit = <img id="loading" src="images/loading.gif"/></h2>
Click the text below to edit it. <span id="status"></span>
<form ><input type="hidden" id="idrec" value="2"/></span><textarea class="edit">jquery/Ajax php - loading image once file submit</textarea> </form>
<a href="#" class="save"><img src="images/save.png" border="0" width="48" height="15"/></a>
<?php
$text = $_POST['text'];
$id = mysql_escape_string($_POST['id']);
echo stripslashes($text);
?>
jQuery Ajax PHP Delete Records Confirmation
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".delbutton").click(function(){
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("id");
//Built a url to send
var info = 'id=' + del_id;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function(){
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>
<style>
#rounded-corner
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#rounded-corner thead th.rounded-company
{
background: #b9c9fe url('table-images/left.png') left -1px no-repeat;
}
#rounded-corner thead th.rounded-q4
{
background: #b9c9fe url('table-images/right.png') right -1px no-repeat;
}
#rounded-corner th
{
padding: 8px;
font-weight: normal;
font-size: 13px;
color: #039;
background: #b9c9fe;
}
#rounded-corner td
{
padding: 8px;
background: #e8edff;
border-top: 1px solid #fff;
color: #669;
}
#rounded-corner tfoot td.rounded-foot-left
{
background: #e8edff url('table-images/botleft.png') left bottom no-repeat;
}
#rounded-corner tfoot td.rounded-foot-right
{
background: #e8edff url('table-images/botright.png') right bottom no-repeat;
}
#rounded-corner tbody tr:hover td
{
background: #d0dafd;
}
</style>
<table id="rounded-corner" border="0">
<thead>
<tr>
<th scope="col" class="rounded-company">Company</th>
<th scope="col" class="rounded-q1">Q1</th>
<th scope="col" class="rounded-q2">Q2</th>
<th scope="col" class="rounded-q3">Q3</th>
<th scope="col" class="rounded-q3">Q4</th>
<th scope="col" class="rounded-q4" width="15px;"></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" class="rounded-foot-left"><em></em></td>
<td class="rounded-foot-right"> </td>
</tr>
</tfoot>
<tbody>
<?php
include("dbconfig.php");
$query4="select * from table order by id desc";
$result4 = mysql_query($query4);
while($row=mysql_fetch_array($result4))
{
$message=stripslashes($row["company"]);
?>
<tr class="record">
<td><?php echo $message; ?></td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
<td>40.3</td>
<td><a href="#" id="<?php echo $row["id"]; ?>" class="delbutton"><img src="publish_x.png"/></a></td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
include("dbconfig.php");
if($_GET['id'])
{
$id=$_GET['id'];
$sql = "delete from messages where id='$id'";
mysql_query( $sql);
}
?>
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "ednalan";
$mysql_database = "test";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>
Create a Sliding tab contents tab jquery
<style>
*{
margin:0px;
padding:0px;
}
body{
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:"Century Gothic", Helvetica, sans-serif;
}
#content{
text-align:center;
height:100%;
margin-left:20px;
margin-top:20px;
}
#wrapper{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:2px solid #fff;
background-color:#FFFFFF;
width:520px;
overflow:hidden;
}
#slides{
width:600px;
/*height:320px;*/
overflow:hidden;
}
.slides_contents{
float:left;
width:600px;
/*height:320px;*/
}
#navigation{
height:45px;
background-color:#EBEBEB;
border-top:1px solid #fff;
-moz-border-radius:0px 0px 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
#navigation ul{
list-style:none;
float:left;
margin-left:22px;
}
#navigation ul li{
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
position:relative;
margin:0px 2px;
}
#navigation ul li a{
display:block;
height:45px;
background-color:#444;
color:#777;
outline:none;
font-weight:bold;
text-decoration:none;
line-height:45px;
padding:0px 20px;
border-right:1px solid #fff;
border-left:1px solid #fff;
background:#FBFBFB;
background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(240,240,240)),
color-stop(0.55, rgb(227,227,227)),
color-stop(0.78, rgb(240,240,240))
);
background:
-moz-linear-gradient(
center bottom,
rgb(240,240,240) 9%,
rgb(227,227,227) 55%,
rgb(240,240,240) 78%
)
}
#navigation ul li a:hover,
#navigation ul li.selected a{
background:#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
}
#slides form fieldset{
border:none;
padding-bottom:20px;
}
#slides form legend{
text-align:left;
background-color:#EBEBEB;
color:#2D3B40;
font-size:24px;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
float:left;
width:100%;
padding:5px 0px 5px 10px;
margin:10px 0px;
border-bottom:1px solid #949494;
border-top:1px solid #828282;
}
#slides form p{
float:left;
clear:both;
margin:5px 0px;
border:0px solid #fff;
width:100%;
}
#slides form p label{
width:160px;
float:left;
text-align:right;
margin-right:15px;
line-height:26px;
color:#666;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
}
#slides form input{
background: #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 200px;
float:left;
}
#slides form input:focus{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background-color:#FFFEEF;
}
#slides form button {
border:none;
outline:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor:pointer;
margin: 0px auto;
clear:both;
padding: 5px 20px;
text-shadow: 0 1px 1px #777;
font-weight:bold;
font-family:"Century Gothic", Helvetica, sans-serif;
font-size:18px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background:#969B9F;
}
#slides form button:hover {
background:#7F9DB9;
color:#666;
text-shadow:1px 1px 1px #fff;
}
#slides form .submitbutton {
width:650px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var fieldsetCount = $('#formElem').children().length; //number of fieldsets
var current = 1; //current position of fieldset
var slidesWidth = 0; //widths of each one of the fieldsets
var widths = new Array();
$('#slides .slides_contents').each(function(i){
var $slides_contents = $(this);
widths[i] = slidesWidth;
slidesWidth += $slides_contents.width();
});
$('#slides').width(slidesWidth);
$('#formElem').children(':first').find(':input:first').focus(); //to avoid problems in IE, focus the first input of the form
$('#navigation a').bind('click',function(e){
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
current = $this.parent().index() + 1;
$('#slides').stop().animate({
marginLeft: '-' + widths[current-1] + 'px'
});
e.preventDefault();
});
});
</script>
<div id="content">
<div id="wrapper">
<div id="slides">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="slides_contents">
<legend>Account</legend>
<p>
<label for="username">User name</label>
<input id="username" name="username" />
</p>
<p>
<label for="name">Name</label>
<input id="name" name="name" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" placeholder="ednalan@yahoo.com" type="email" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" AUTOCOMPLETE=OFF />
</p>
<p class="submitbutton">
<button type="submit">Submit</button>
</p>
</fieldset>
<fieldset class="slides_contents">
<legend>Profile</legend>
<div style="text-align:left;width:500px;margin:10px 10px 10px 10px;">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum.
Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, <br/><br/>
Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, <br/><br/>
Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, <br/><br/>
orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.
</div>
</fieldset>
</form>
</div>
<div id="navigation" >
<ul>
<li class="selected">
<a href="#">Account</a>
</li>
<li>
<a href="#">Profile</a>
</li>
</ul>
</div>
</div>
</div>
Sample JavaScript Onload Functions Sample using google map code
<html>
<head>
<title>Google Maps API Sample</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
window.onload=initialize; //JavaScript Onload Functions
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
}
var address = '1600 Amphitheatre Pky, Mountain View, CA';
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
</script>
</head>
<body>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
Placeholder Text using HTML5<style>
body {
font: 90%/150% Arial, Helvetica, sans-serif;
color: #666;
width: 700px;
margin: 30px auto;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #F60;
}
p {
margin: 0 0 2em;
}
h1, h2, h3 {
line-height: 110%;
}
h1 {
font: bold 80% Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: 0 0 2px;
color: #999;
}
h2 {
margin: 0 0 8px;
}
h3 {
border-top: solid 2px #ccc;
margin: 40px 0 15px;
padding-top: 10px;
}
form p {
margin: 0 0 15px;
}
input,
textarea,
input[type=search] {
background: #f4f4f4;
border: solid 1px #a3a3a3;
padding: 5px 10px;
font: 15px "Times New Roman", Times, serif;
-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-appearance: none; /* reset webkit search style */
}
/* input:focus */
input[type=text]:focus,
textarea:focus,
input[type=search]:focus {
background: #fff;
border-color: #333;
outline: none; /* remove outline */
}
/* field width */
input[type=text], input[type="search"] {
width: 200px;
}
textarea {
width: 400px;
height: 250px;
}
/* placeholder */
.placeholder {
color: #bbb;
}
/* webkit placeholder */
::-webkit-input-placeholder {
color: #bbb;
}
/* moz placeholder */
:-moz-placeholder {
color: #bbb;
}
</style>
</head>
<form class="form" method="post">
<p><input type="text" placeholder="Your name please"></p>
<p><input type="text" placeholder="Enter your email"></p>
<p><textarea placeholder="Write your comments here"></textarea></p>
<p><input type="submit" name="submit" value="Submit"></p>
</form>
Simple jquery Demonstration show hide Toggle slide fade<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
function showSlidingDiv(){
$("#slidingDiv").animate({"height": "toggle"}, { duration: 1000 });
}
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
// shows the slickbox on clicking the noted link
$('#slick-show').click(function() {
$('#slickbox').show('slow');
return false;
});
// hides the slickbox on clicking the noted link
$('#slick-hide').click(function() {
$('#slickbox').hide('fast');
return false;
});
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});
$('#slick-down').click(function() {
$('#slickbox').slideDown('slow');
return false;
});
$('#slick-up').click(function() {
$('#slickbox').slideUp('slow');
return false;
});
$('#slick-slidetoggle').click(function() {
$('#slickbox').slideToggle('slow');
return false;
});
$('#slick-fadeIn').click(function() {
$('#slickbox').fadeIn('slow');
return false;
});
$('#slick-fadeOut').click(function() {
$('#slickbox').fadeOut('slow');
return false;
});
});
</script>
<style>
#slidingDiv {
display: none;
height:300px;
background-color: #99CCFF;
padding:20px;
width:20%;
}
#slickbox {
display: none;
height:100px;
background-color: #99CCFF;
padding:20px;
width:20%;
}
</style>
<a href="#" onClick="showSlidingDiv(); return false;">Show/hide - Sliding Div</a><br />
<div id="slidingDiv">
Fill this space with really interesting content that you can <a href="#" onClick="showSlidingDiv(); return false;">hide</a>
</div>
<p>
<a href="#" id="slick-show">Show the box</a>
<a href="#" id="slick-hide">Hide the box</a>
<a href="#" id="slick-toggle">Toggle the box</a>
</p>
<div id="slickbox">This is the box that will be shown and hidden and toggled at your whim. :)</div>
<p>
<a href="#" id="slick-down">Slide the box down</a>
<a href="#" id="slick-up">Slide the box up</a>
<a href="#" id="slick-slidetoggle">Slide toggle the box</a>
</p>
<p>
<a href="#" id="slick-fadeIn">Fade In</a>
<a href="#" id="slick-fadeOut">Fade Out</a>
</p>
Create a modal box jquery ajax php mysql<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/3-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
//jquery ajax
$("#login_form").submit(function() {
var unameval = $("#username").val();
var pwordval = $("#password").val();
$("#flash").show();
$("#flash").fadeIn("slow",0.25).html('<img src="ajax-loading.gif" align="absmiddle"> <span class="loading">Loading...</span>');
$.post("login.php", { username: unameval,
password: pwordval }, function(data) {
$("#status").html(data);
});
$("#flash").hide();
return false;
});
});
</script>
<style>
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#969393;
display:none;
}
.window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
.note-box {
width:300px;
height:260px;
color:#818181;
background: #FFFFFF;
border: 2px solid #ccc;
padding:10px;
font-family: Georgia;
font-size: 14px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
h1{font-weight:normal;font-size:20px;color:#aaaaaa;margin:0 0 4px 0;}
p{font-size: 20px;color: #000000;}
a {color:#729e01;text-decoration:none;}
a:hover{color:#dedede;}
input.text{ border:#ccc 1px solid;-moz-border-radius:7px; -webkit-border-radius:7px;font-size: 20px;width:300px;padding-left:5px;}
.highlight-1, .highlight-2, .highlight-3 { font-size: 14px;color: #000000; -moz-border-radius : 4px; -webkit-border-radius : 4px; padding : 5px 10px;}
.highlight-1 { background : #fce9e9;border : 1px #eac7c7 solid; }
.highlight-2 {background : #fcfae9;border : 1px #e9e6c7 solid; }
.highlight-3 {background : #edfce9;border : 1px #cceac4 solid;}
.ptour_crtbtn{border:1px outset #ccc;padding:5px 2px 4px;color:#fff;min-width: 100px;text-align: center;cursor:pointer;background:#729e01;background:-webkit-gradient(linear, left top, left bottom,from(#a3d030),to(#729e01));background:-moz-linear-gradient(top,#a3d030,#729e01);background:-o-linear-gradient(top,#a3d030,#729e01);background:linear-gradient(top,#a3d030,#729e01);-moz-border-radius:7px; -webkit-border-radius:7px;
}
.fail {
background-color: #FFECE6;
border: 1px solid #FF936F;
color: #842100;
background-image: url(delete00.png);
background-repeat: no-repeat;
padding:5px;
padding-left:30px;
}
</style>
<div style="text-align:center"><a href="#modalboxlogin" name="modal"><h1>Click here to open modal login form</h1></a></div>
<div id="modalboxlogin" class="window note-box">
<div id="flash" align="left" ></div>
<div id="status"></div>
<form id="login_form" action="" method="POST">
<p><label style="display: block;">Email:</label><input class="text" type="text" id="username" name="username" /></p>
<p><label style="display: block;">Password:</label><input class="text" type="password" id="password" name="password" /></p>
<p style="text-align:right"><button class="ptour_crtbtn" name="login" type="submit">Login</button></p>
</form>
<p style="text-align:right"><a href="#" class="close"><img src="closelabel.gif"/></a></p>
</div>
<!-- Mask to cover the whole screen -->
<div id="mask"></div>
<?php
$mysql_host = 'localhost';
$mysql_username = 'root';
$mysql_password = 'ednalan';
#connect to the database
mysql_connect("$mysql_host","$mysql_username","$mysql_password");
mysql_select_db("dbednalan");
#A function to secure SQL queries in the script.
function sql_secure($string) {
if (get_magic_quotes_gpc()) {
$string = stripslashes($string);
}
$string = mysql_real_escape_string($string);
return $string;
}
$username = sql_secure($_POST['username']);
$password = sql_secure($_POST['password']);
#check details are of required lenght.
if (strlen($password) <= 3 || strlen($username) <= 3)
{
//echo "Username or Password Must Be Over 3 Characters";
}
$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$query = mysql_query($sql);
$num_rows = mysql_num_rows($query);
#if user exists set some cookies.
if ($num_rows == '1'){
page_redirect("http://r-ednalan.blogspot.com/");
}else {
echo "<div class=\"fail\">Login failed, Please try again</div>";
}
?>
Create a jquery tab<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
</script>
<style type="text/css">
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(images/blockdefault.gif) center center repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.solidblockmenu li a:visited{
color: white;
}
#tabs ul li.active a {
color: white;
background: transparent url(images/blockactive.gif) center center repeat-x;
}
#container {
width:40%;
background: #494949;
color:#FFFFFF;
}
#container p{
padding:15px;
}
#container h3{
padding:15px;
}
</style>
<div id="container">
<div id="tabs">
<ul class="solidblockmenu">
<li><a href="#tab-1">This is Tab 1</a></li>
<li><a href="#tab-2">Tab Two</a></li>
<li><a href="#tab-3">Tab Three</a></li>
<li><a href="#tab-4">Tab Four</a></li>
</ul>
<div id="tab-1">
<h3>This is a really simple tabbed interface</h3>
<p>Lorem ipsum dolor vitae quam. Vivamus ut odio.
Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
</p>
</div>
<div id="tab-2">
<h3>Tab 2</h3>
<p>Lorem ipsum dolor vitae quam. Vivamus ut odio.
Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
</p>
</div>
<div id="tab-3">
<h3>Tab 3</h3>
<p>Lorem ipsum dolor vitae quam. Vivamus ut odio.
Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
</p>
</div>
<div id="tab-4">
<h3>Tab 4</h3>
<p>Lorem ipsum dolor vitae quam. Vivamus ut odio.
Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
</p>
</div>
</div>
</div>
Create a Confirmation Message Effect Delay Message like twitter//index.html
<style>
body {
font: normal 85% arial,verdana,tahoma,sans-serif;
color: #000;
margin: 10;
padding: 10;
background: #d3f3f5;
}
#errorMessage, #confirmationMessage {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
font: normal 1.4em arial;
line-height: 70px;
text-align: center;
color: #000;
background: #fff;
border-bottom: 1px solid #ddd;
filter:alpha(opacity=92);
-moz-opacity: 0.92;
opacity: 0.92;
display: none; /* LEAVE THIS IN*/
}
fieldset {
width: 490px;
margin: 0;
padding: 20px;
background: #f4f4f4;
border: 1px solid #ddd;
}
label {
display: block;
font: bold 1.0em arial,verdana,tahoma,sans-serif;
color: #000;
margin: 0 20px 10px 0;
padding: 0;
clear: left;
}
.textfield, .textarea {
width: 200px;
font: normal 1.0em arial,verdana,tahoma,sans-serif;
color: #000;
margin: 0 0 20px 0;
padding: 5px 6px;
background: #fff;
border: 1px solid #ddd;
}
.textarea {
width: 470px;
height: 110px;
}
.textfield:focus, .textarea:focus {
border: 1px solid #ccc;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function()
{
$(".jquerySubmit").click(function(){
$('#confirmationMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
});
});
</script>
<div id="confirmationMessage">
Thank you. Your message has been sent
</div>
<form method="post" action="">
<fieldset>
<label>Name:</label>
<input type="text" name="Name" class="textfield" />
<label>Comments:</label>
<textarea name="Comments" class="textarea"></textarea>
<a href="#" class="jquerySubmit">SUBMIT </a>
</fieldset>
</form>
Create a jquery slideToggle<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow"); //The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
width:30%;
}
div.panel
{
height:120px;
display:none;
width:30%;
}
</style>
<div class="panel">
<p>lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel,</p>
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut Donec ipsum</p>
</div>
<p class="flip">Show/Hide Panel</p>
Create Javascript Popup page<script language="JavaScript" type="text/JavaScript">
function popup(url,w,h,name,resizable,toolbar,left,top)
{
var features ="location=no,menubars=no,"+"width=550," +"height=550,"+"resizable=yes," +"scrollbars=yes," + "status=yes," + "titlebar=no," +"toolbar="+toolbar+"," +"left="+left+"," +"top="+top;
var win = window.open(url,name,features);
}
</script>
<div>
By clicking Next, you are indicating that you have read and agree to the
<a href="javascript:popup('popuppage.html')" title="Privacy Policy" rel="bookmark">Privacy Policy</a>
</div>
Create a Javascript show hide contents//css
<style>
.bigbold {
font-weight: bold;
font-size: 25px;
}
.heading
{
background-color: #8FAFBF;
text-align: center;
font-weight: bold;
height: 30px;
}
</style>
//javascript
<script>
function showhideit(id,hid)
{
curstatus = document.getElementById(id).style.display;
if(curstatus == "none")
{
document.getElementById(id).style.display = 'inline';
document.getElementById(hid + '1').innerHTML = ' -';
document.getElementById(hid + '2').innerHTML = '- ';
}
else
{
document.getElementById(id).style.display = 'none';
document.getElementById(hid + '1').innerHTML = ' +';
document.getElementById(hid + '2').innerHTML = '+ ';
}
}
</script>
//HTML
<table align="center" cellpadding="0" cellspacing="0" border="1">
<tr class="heading" style="cursor: pointer;" onclick="showhideit('information','info')">
<td width="100" align="left" class="bigbold" id="info1"> +</td>
<td align="center"><b>CLICK TO SHOW INFORMATION</b></td>
<td width="100" align="right" class="bigbold" id="info2">+ </td>
</tr>
<tr>
<td colspan="3" width="100">
<div style="display:none;" id="information">
PHP Loops
Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this.
In PHP, we have the following looping statements:
while - loops through a block of code while a specified condition is true
do...while - loops through a block of code once, and then repeats the loop as long as a specified condition is true
for - loops through a block of code a specified number of times
foreach - loops through a block of code for each element in an array
</div>
</td>
</tr>
</table>
Javascript show hide toggle<script type="text/javascript">
function toggle(obj){
var el = document.getElementById(obj);
if (el.style.display != 'none') {
el.style.display = 'none';
}
else {
el.style.display = 'inline';
}
}
</script>
<a href="#test1" onclick="toggle('table1');">Toggle 01 </a><br />
<table id="table1" style="display:none;" border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="#CCCCCC">
<td width="100" align="center"><font>PROGRAMME</font></td>
<td width="150" align="center"><font>OBJECTIVES</font></td>
<td width="210" align="center"><font>MODULES</font></td>
</tr>
</table>
<br/>
<a href="#test2" onclick="toggle('table2');">Toggle 02</a><br />
<table id="table2" style="display:none;" border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="#CCCCCC">
<td width="100" align="center"><font>PROGRAMME</font></td>
<td width="150" align="center"><font>OBJECTIVES</font></td>
<td width="210" align="center"><font>MODULES</font></td>
</tr>
</table>
Javascript One Function to Count and Limit Multiple Form Text Areas<SCRIPT LANGUAGE="JavaScript">
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
// End -->
</script>
<form name="myForm"
action=""
method="post">
<b>One Function to Count and Limit Multiple Form Text Areas</b><br>
<textarea name="message1" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message1,document.myForm.remLen1,125)"
onKeyUp="textCounter(document.myForm.message1,document.myForm.remLen1,125)"></textarea>
<br>
<input readonly type="text" name="remLen1" size="3" maxlength="3" value="125">
characters left
<br>
<textarea name="message2" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message2,document.myForm.remLen2,125)"
onKeyUp="textCounter(document.myForm.message2,document.myForm.remLen2,125)"></textarea>
<br>
<input readonly type="text" name="remLen2" size="3" maxlength="3" value="125">
characters left
<br>
<input type="Submit" name="Submit" value="Submit">
<br>
</form>
Create a bubble tooltip using javascript<style>
a{
color: #D60808;
text-decoration:none;
}
a:hover{
border-bottom:1px dotted #317082;
color: #307082;
}
#bubble_tooltip{
width:147px;
position:absolute;
display:none;
}
#bubble_tooltip .bubble_top{
background-image: url('images/bubble_top.gif');
background-repeat:no-repeat;
height:16px;
}
#bubble_tooltip .bubble_middle{
background-image: url('images/bubble_middle.gif');
background-repeat:repeat-y;
background-position:bottom left;
padding-left:7px;
padding-right:7px;
}
#bubble_tooltip .bubble_middle span{
position:relative;
top:-8px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:11px;
}
#bubble_tooltip .bubble_bottom{
background-image: url('images/bubble_bottom.gif');
background-repeat:no-repeat;
background-repeat:no-repeat;
height:44px;
position:relative;
top:-6px;
}
</style>
<script>
function showToolTip(e,text){
if(document.all)e = event;
var obj = document.getElementById('bubble_tooltip');
var obj2 = document.getElementById('bubble_tooltip_content');
obj2.innerHTML = text;
obj.style.display = 'block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX - 100;
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';
obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';
}
function hideToolTip()
{
document.getElementById('bubble_tooltip').style.display = 'none';
}
</script>
<div id="bubble_tooltip">
<div class="bubble_top"><span></span></div>
<div class="bubble_middle"><span id="bubble_tooltip_content"></span></div>
<div class="bubble_bottom"></div>
</div>
<a href="#" onmouseover="showToolTip(event,'This is the content of the tooltip. This is the content of the tooltip.');return false" onmouseout="hideToolTip()"><h2>Roll over me</h2></a> </p>
CSS3 Transition//CSS
<style>
.my_class {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.my_class:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
</style>
//HTML
<p><a class="my_class" href="#">Mouse over this example paragraph to <br/>see it rotate 7degrees using a transform transition.</a></p>
Create Image Rotate Slider<style>
body{
background:#1f1f1f;
margin:0;
}
#intro .slide, #intro .slide li{
width:366px;
height:196px;
overflow:hidden;
margin:0;
padding:0;
}
#intro{
border:5px solid #FFFFFF;
width:366px;
height:196px;
margin:20px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function(){
rotate();
});
this.rotate = function(){
$(".rotate").each(function(){
var obj = this;
var pause = 5000;
var length = $("li",obj).length;
var temp = 0;
var randomize = false;
function getRan(){
var ran = Math.floor(Math.random()*length) + 1;
return ran;
};
function show(){
if (randomize){
var ran = getRan();
while (ran == temp){
ran = getRan();
};
temp = ran;
} else {
temp = (temp == length) ? 1 : temp+1 ;
};
$("li",obj).hide();
$("li:nth-child(" + temp + ")",obj).fadeIn("slow");
};
show(); setInterval(show,pause);
});
};
</script>
<div id="intro">
<ul class="slide rotate">
<li><img src="images/img_slide1.jpg" alt="" /></li>
<li><img src="images/img_slide2.jpg" alt="" /></li>
<li><img src="images/img_slide3.jpg" alt="" /></li>
</ul>
</div>
Create CSS Post Comment Design Form<style>
#main{
float:left;
display:inline;
width:567px;
margin-left:50px;
position:relative;
}
form{
margin:1em 0;
border:none;
background:#dfeced;
border:5px solid #c9dfe1;
padding:1em 15px;
}
label{
float:left;
clear:both;
width:105px;
margin-right:20px;
margin-top:5px;
text-align:right;
}
input, textarea{
width:350px;
border:1px solid #ccc;
padding:5px;
vertical-align:middle;
margin:0;
}
textarea{
height:180px;
overflow:auto;
}
form p{
clear:both;
margin:0;
padding:.25em 0;
}
button{
border:none;
width:123px;
height:43px;
line-height:43px;
text-align:center;
padding:0;
margin:0;
background:url(images/bg_button.gif) no-repeat 0 0;
color:#fff;
font-weight:bold;
font-size:14px;
cursor:pointer;
vertical-align:middle;
}
.submit{
height:52px;
margin-left:125px;
}
</style>
<div id="main">
<h3>Post your comment</h3>
<form id="commentForm" action="/" method="post">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</p>
<p>
<label for="web">Website</label>
<input type="text" name="web" id="web" size="30" />
</p>
<p>
<label for="comment">Comment</label>
<textarea name="comment" id="comment" rows="10" cols="30"></textarea>
</p>
<p class="submit">
<button type="submit">Send</button>
</p>
</form>
</div>
