Shorter SQL statements by abbreviating table prefixes
Programming Language For Web Development video (video from youtube)
Animate a Contact Us Slide-Out Area using jQuery
Animated Call to Action Button - Animate Button
Scriptaculous ProtoFlow - Prototype
Prototype Prototip
Sum HTML Textbox Values using jQuery
Twitter-style alert with jQuery, CSS, and PHP<style type="text/css">
body
{
background-color: #ccc;
color: #000;
padding: 30px;
}
#alert
{
overflow: hidden;
width: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
height: 0;
color: #000;
font: 20px/40px arial, sans-serif;
opacity: .9;
}
</style>
<?php
if(!empty($_SESSION['display']))
{
echo '<div id="alert">' . $_SESSION['display'] . '</div>';
unset($_SESSION['display']);
}
?>
<form method="post" action="submit.php">
<label for="message">Message</label> <input type="text" name="message"> <input type="submit" value="Alert me!">
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var $alert = $('#alert');
if($alert.length)
{
var alerttimer = window.setTimeout(function () {
$alert.trigger('click');
}, 3000);
$alert.animate({height: $alert.css('line-height') || '50px'}, 200)
.click(function () {
window.clearTimeout(alerttimer);
$alert.animate({height: '0'}, 200);
});
}
});
</script>
<?php
ini_set('session.save_handler', 'files');
session_start();
$themessage = get_magic_quotes_gpc() ?
stripslashes(trim($_POST['message'])) :
trim($_POST['message']);
$_SESSION['display'] = $themessage;
header('Location: ' . $_SERVER['HTTP_REFERER']);
exit;
?>
Useful CSS Stylesheet Tips & Tricks<style type="text/css">
#post_view img { max-width: 146px; height: 112px; width: expression(this.width > 146 ? 146: true); }
</style>
<div id="post_view"></div>
</div>#png_bg {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/path/to/image.png');
}
div {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
div {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
{.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}
.header {
background: #fff url(image.gif) no-repeat top left
}
Display a loading image until the page completes loading
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
jQuery(window).load(function() {
jQuery('#loading-image').hide();
});
});
</script>
<style>
#loading-image {
width: 55px;
height: 55px;
position: fixed;
top: 20px;
right: 40px;
z-index: 1;
}
</style>
Loading...
CSS Image hover link
<style>
.rightColGetStarted a{background:url(homepage.png) no-repeat 0 -30px;height:48px;width:203px;display:block;position:relative;top:15px;left:12px;line-height:48px;text-align:center;color:white;font-size:17px;font-weight:bold;text-decoration:none;}
.rightColGetStarted a:hover{background-position:0 -78px;color:white;text-decoration:none;}
</style>
History PHP - MYSQL - JQUERY
Basic web effect with jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#page_effect').fadeIn(2000);
});
</script>
Rounded corner CSS3 without images
<style>
body {
font-family: tahoma;
}
div {
width:400px;
height:25px;
background-color:#DCECCC;
border: 2px solid #89B45A;
padding: 5px;
}
#div1 {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#div2 {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
#div3 {
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
</style>
DIV with all corners rounded
DIV with top left corner rounded
DIV with bottom right corner rounded
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('input[type="text"]').focus(function() {
$(this).addClass("focus");
});
$('input[type="text"]').blur(function() {
$(this).removeClass("focus");
});
});
</script>
<style>
.focus {
border: 2px solid #AA88FF;
background-color: #FFEEAA;
}
</style>
css rounded corners with 3 images top, mid, bottom
<style>
.box {margin-bottom:10px;width: 250px;}
.box .top{background:url(bg_yctop.png) no-repeat;height:10px;}
.box .mid{background:url(bg_ycmid.png) repeat-y;padding:0px 10px}
.box .bom{background:url(bg_ycbom.png) no-repeat;height:10px;}
.box .mid .title{padding:3px 0px;font-weight:bold;font-size:14px;}
.box p {margin: 0 10px;}
</style>
Check out the location
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
