Achari.in » jquery.js http://www.achari.in achari.in is a programmer's blog maintained by Anoop S Achari. Tutorials focus on Google Map API Integration, Twitter OAuth, Facebook Integration, Jquery, JSE, SCJP Materials and other technical articles. Thu, 26 Jan 2012 08:58:36 +0000 en hourly 1 http://wordpress.org/?v=3.0.5 Create Twitter alert style using Jquery.js and CSS http://www.achari.in/create-twitter-alert-style-using-jquery-js-and-css http://www.achari.in/create-twitter-alert-style-using-jquery-js-and-css#comments Thu, 27 May 2010 17:47:12 +0000 anoopsachari http://www.achari.in/?p=344

In this tutorial i would explain to you how to create twitter alert style using jquery.js and simple css . The alert drop downs from top of the screen to display what is in a PHP $_SESSION variable .

I have included a live demo also . Hope this would help you .

Here is the source code


<?php session_start(); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>Twitter-like alert message</title>
 <style type="text/css">

 #alert
 {
 overflow: hidden;
 width: 100%;
 text-align: center;
 position: absolute;
 top: 0;
 left: 0;
 background-color: #FF0000;
 height: 0;
 color: #FFFFFF;
 font: 20px/40px arial, sans-serif;
 opacity: .9;
 }
 </style>
 </head>
 <body>
 <?php
 if(isset($_POST['submit_message']))
 {
 $_SESSION['display'] = $_POST['message'];
 if(!empty($_SESSION['display']))
 {
 echo '<div id="alert">' . $_SESSION['display'] . '</div>';
 unset($_SESSION['display']);
 }
 }
 ?>
 <div style="margin-top:100px;">
 <form method="post" action="">
 <label for="message"><strong>Message : </strong></label> <input type="text" name="message">
 <input type="submit" value="Alert me!" name="submit_message" id="submit_message">
 </form>
 </div>
 <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>
 </body>
</html>

You are done !

]]> http://www.achari.in/create-twitter-alert-style-using-jquery-js-and-css/feed 4 Resolve Conflict between Jquery.js and Prototype.js http://www.achari.in/resolve-conflict-between-jquery-js-and-prototype-js http://www.achari.in/resolve-conflict-between-jquery-js-and-prototype-js#comments Wed, 07 Apr 2010 06:47:20 +0000 anoopsachari http://www.achari.in/?p=11

How to resolve conflict between jquery.js and prototype.js

This tutorial would teach you to resolve the coflict between jquery and prototype when used together in same file .

Its a simple tip to implement .

1. Create a noconflict.js file and include the following code in it .


jQuery.noConflict();
var $j = jQuery;

2. Include the js files in the same order as shown below

<script src=”js/prototype.js” type=”text/javascript”></script>
<script src=”js/jquery-1.3.2.min.js” type=”text/javascript”></script>
<script src=”js/noconflict.js” type=”text/javascript”></script>

You have fixed it !

]]> http://www.achari.in/resolve-conflict-between-jquery-js-and-prototype-js/feed 12