<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>
article
Saturday, August 13, 2011
Sample JavaScript Onload Functions Sample using google map code
Sample JavaScript Onload Functions Sample using google map code
Saturday, August 6, 2011
Placeholder Text using HTML5
Placeholder Text using HTML5
Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused
Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused
<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>
Monday, July 25, 2011
Simple jquery Demonstration show hide Toggle slide fade
Simple jquery Demonstration show hide Toggle slide fade
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/jquery-show-hide.html
<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>
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/jquery-show-hide.html
Thursday, July 21, 2011
Create a modal box jquery ajax php mysql
Create a modal box jquery ajax php mysql
This is a code tutorial how to create a modal box using jquery and jquery ajax and php mysql login form
Javascript code
CSS Code
HTML Code
login.php code
Download
http://dl.dropbox.com/u/7106563/r-ednalan/modalboxlogin_jquery-php-mysql.zip
This is a code tutorial how to create a modal box using jquery and jquery ajax and php mysql login form
Javascript code
<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>
CSS Code
<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>
HTML Code
<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>
login.php code
<?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>";
}
?>
Download
http://dl.dropbox.com/u/7106563/r-ednalan/modalboxlogin_jquery-php-mysql.zip
Posted by
ednalan
at
8:36 AM
.
Under
web-development (CSS),
web-development (jquery),
web-development (PHP-MYSQL)
.
Tuesday, July 19, 2011
Create a jquery tab
Create a jquery tab
A tutorial how to create a tab manipulated using jQuery
The Code
Download
http://dl.dropbox.com/u/7106563/r-ednalan/jquerytab.zip
A tutorial how to create a tab manipulated using jQuery
The Code
<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>
Download
http://dl.dropbox.com/u/7106563/r-ednalan/jquerytab.zip
Monday, July 18, 2011
Create a Confirmation Message Effect Delay Message like twitter
Create a Confirmation Message Effect Delay Message like twitter
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/create-effect-delay-message-like.html
//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>
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/create-effect-delay-message-like.html
Create a jquery slideToggle
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>
Wednesday, July 13, 2011
Create Javascript Popup page
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
Create a Javascript show hide contents
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/Show_hide.html
//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>
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/Show_hide.html
Javascript show hide toggle
Javascript show hide toggle
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/show_hide_toggle.html
<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>
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/show_hide_toggle.html
Javascript One Function to Count and Limit Multiple Form Text Areas
Javascript One Function to Count and Limit Multiple Form Text Areas
Javascript
HTML Form
Javascript
<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>
HTML Form
<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>
Friday, July 1, 2011
Create a bubble tooltip using javascript
Create a bubble tooltip using javascript
This demo demonstrates how the balloon tooltip works. Roll your mouse over the links.
CSS Code
Javascript code
HTML Code
Demo
http://dl.dropbox.com/u/3293191/r-ednalan/bubble_tooltip/index.html
Download
http://dl.dropbox.com/u/3293191/r-ednalan/bubble_tooltip/bubble_tooltip.zip
This demo demonstrates how the balloon tooltip works. Roll your mouse over the links.
CSS Code
<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>
Javascript code
<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>
HTML Code
<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>
Demo
http://dl.dropbox.com/u/3293191/r-ednalan/bubble_tooltip/index.html
Download
http://dl.dropbox.com/u/3293191/r-ednalan/bubble_tooltip/bubble_tooltip.zip
Thursday, June 30, 2011
CSS3 Transition
CSS3 Transition
Use CSS 3 transition to give action to elements in your website, such as change in colour, motion and more!
Use CSS 3 transition to give action to elements in your website, such as change in colour, motion and more!
//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
Create Image Rotate Slider
CSS Code
Javascript Code
HTML Code
Download
http://dl.dropbox.com/u/3293191/r-ednalan/randomize_slider.zip
CSS Code
<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>
Javascript Code
<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>
HTML Code
<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>
Download
http://dl.dropbox.com/u/3293191/r-ednalan/randomize_slider.zip
Wednesday, June 29, 2011
Create CSS Post Comment Design Form
Create CSS Post Comment Design Form
CSS
HTML Form
Demo
http://dl.dropbox.com/u/3293191/r-ednalan/css_post_comment_form.html
CSS
<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>
HTML Form
<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>
Demo
http://dl.dropbox.com/u/3293191/r-ednalan/css_post_comment_form.html
Tuesday, June 28, 2011
IE 5 and 6 png transparent using javascript
IE 5 and 6 png transparent using javascript
<script type="text/javascript" src="js/jquery.js"></script>
this.pngfix = function() {
var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);
if (jQuery.browser.msie && (ie55 || ie6)) {
$("*").each(function(){
var bgIMG = $(this).css('background-image');
if(bgIMG.indexOf(".png")!=-1){
var iebg = bgIMG.split('url("')[1].split('")')[0];
$(this).css('background-image', 'none');
$(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='crop')";
};
});
};
};
this.init = function() {
pngfix();
};
$(document).ready(function(){
init();
});
Tuesday, June 21, 2011
CSS Image Round Corners
CSS Image Round Corners
<style>
.thumbnails img
{
width: 100px;
height: 75px;
border: solid 5px #00A5D0;
cursor: pointer;
/* Round select corners */
-webkit-border-radius: 15px 0;
-khtml-border-radius: 15px 0;
-moz-border-radius: 15px 0;
border-radius: 15px 0;
}
</style>
<div>
<p>Normal</p>
<img src="images/1_thumb.jpg" title="" alt="" width="100" height="75" />
<img src="images/2_thumb.jpg" title="" alt="" width="100" height="75" />
</div>
<div class="thumbnails">
<p>Round corner</p>
<img src="images/1_thumb.jpg" title="" alt="" width="100" height="75" />
<img src="images/2_thumb.jpg" title="" alt="" width="100" height="75" />
</div>
Saturday, June 18, 2011
CSS Image button
CSS Image button
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/css_image_button.html
<style>
.downloadButton {
margin-top: 1em;
display: block;
background: url(download.gif);
width: 180px;
height: 51px;
cursor: default;
text-indent: -2000px;
}
.downloadButton:hover {
background-position: 0 -51px;
}
.downloadButton:active {
background-position: 0 51px;
}
</style>
<p><a href="#" class="downloadButton">Download</a></p>
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/css_image_button.html
Credit Card Validation
Credit Card Validation
Here’s an improved credit card validation extension for the jQuery Validation plugin. This lets you pass the credit card type into the validation routine, which allows it to do card type specific checks for prefix of the card number and number of digits. This extension includes the mod-10 check (based on the Luhn Algorithm) that is used in the core creditcard validation routine. As an extra bonus, it will ignore spaces and dashes in the card number. This code was ported from this credit card validation routine by John Gardner, with some minor tweaks and additions.
Visit Site
http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx
Here’s an improved credit card validation extension for the jQuery Validation plugin. This lets you pass the credit card type into the validation routine, which allows it to do card type specific checks for prefix of the card number and number of digits. This extension includes the mod-10 check (based on the Luhn Algorithm) that is used in the core creditcard validation routine. As an extra bonus, it will ignore spaces and dashes in the card number. This code was ported from this credit card validation routine by John Gardner, with some minor tweaks and additions.
Visit Site
http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx
Friday, June 3, 2011
CakePHP GROUP BY
Subscribe to:
Posts (Atom)