Jquery Ajax Using fancybox jquery plugins

Jquery Ajax Using fancybox jquery plugins

Download


 

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script>
$(document).ready(function(){
 $("#addButton").fancybox({
  'zoomSpeedIn'  : 600,
  'zoomSpeedOut'  : 500,
  'easingIn'   : 'easeOutBack',
  'easingOut'   : 'easeInBack',
  'hideOnContentClick': false,
  'padding'   : 15
 });
 /* The submit button: */
 $('#note-submit').live('click',function(e){
  if($('.pr-body').val().length<4)
  {
   alert("The note text is too short!")
   return false;
  }
  if($('.pr-author').val().length<1)
  {
   alert("You haven't entered your name!")
   return false;
  }
  $(this).replaceWith('<img src="img/ajax_load.gif" style="margin:30px auto;display:block" />');
  var data = {
   'body'  : $('.pr-body').val(),
   'author' : $('.pr-author').val()
  };
  /* Sending an AJAX POST request: */
  $.post('post.php',data,function(msg){
   $("#addButton").fancybox.close();
  });
  e.preventDefault();
 })
 $('.note-form').live('submit',function(e){e.preventDefault();});
});
</script>
<a id="addButton" class="green-button" href="add_note.html">Add a note</a>

//add_note.html
<h3 class="popupTitle">Add a new note</h3>
<div id="noteData"> 
<form action="" method="post" class="note-form">
<label for="note-body">Text of the note</label>
<textarea name="note-body" id="note-body" class="pr-body" cols="30" rows="6"></textarea>
<label for="note-name">Your name</label>
<input type="text" name="note-name" id="note-name" class="pr-author" value="" />
<a id="note-submit" href="" class="green-button">Submit</a>
</form>
</div>

//post.php
<?php
error_reporting(E_ALL^E_NOTICE);
require "connect.php";
$author = mysql_real_escape_string(strip_tags($_POST['author']));
$body = mysql_real_escape_string(strip_tags($_POST['body']));
/* Inserting a new record in the notes DB: */
mysql_query(' INSERT INTO notes (text,name)
    VALUES ("'.$body.'","'.$author.'")');

?>

Jquery, Ajax and php mysql tabs navigation

Jquery, Ajax and php mysql tabs navigation

Download 

//dbcon.php
<?php
$link = mysql_connect('localhost', 'root', 'ednalan');
@mysql_select_db('dbname',$link);
?>

//index.php
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
 $("#first-tab").addClass('button2');
});
function navigate_tabs(page, tab)
{ 
 showLoader();
 /// load new page
 $.post("record.php?page="+page,{
 }, function(response){
  hideLoader();
  
  $('#place').html(unescape(response)); 
 });
 /// hover on navigation
 $("#first-tab").removeClass('button2');
 $("#second-tab").removeClass('button2');
 $("#third-tab").removeClass('button2');
 $("#fourth-tab").removeClass('button2');
 $("#"+tab).addClass('button2');
}
//show loading bar
function showLoader(){
 $('.search-background').fadeIn(200);
}
//hide loading bar
function hideLoader(){
 $('.search-background').fadeOut(200);
};
</script>
<style>
#place{ background:#FFFFFF;height:370px; border:solid #000000 px;width:570px; padding:14px}
#wrap{
 text-align:left;
 overflow:hidden;
 width:650px;
 height:500px;
}
.search-background {
 display: none;
 font-size: 13px;
 background:#999999;
 color:#FFFFFF;
 font-weight: bold;
 height:250px;
 width:600px;
 position: absolute;
 padding-top:150px;
 text-align: center;
 opacity:0.5;filter: alpha(opacity=50) ;
 text-decoration: none;
}
a.button{   padding:5px 15px 5px 15px;
                text-decoration: none;
                display: inline-block;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                border-bottom: 1px solid rgba(0,0,0,0.25);
                font-family: "Lucida Grande",Lucida,Verdana,sans-serif;
                outline:none;
                position:relative;
                font-size: 22px;
                margin:10px;
                white-space:nowrap;}
</style>
<div id="wrap" >
<a href="javascript:navigate_tabs('home','first-tab');" class="button" id="first-tab">Home</a>  
   <a href="javascript:navigate_tabs('services','second-tab');" class="button" id="second-tab">Services</a>
   <a href="javascript:navigate_tabs('about','fourth-tab');" class="button" id="fourth-tab">About</a>
   <a href="javascript:navigate_tabs('contact','third-tab');" class="button" id="third-tab">Contact</a>
   <br clear="all" />
   <div id="body" align="center">
    <div class="search-background">
     <label><img src="loading.gif" alt="" /></label>
    </div>
    <div id="place">
    </div>
   </div> 
  </div>

<?php
//records.php
include("dbcon.php");
$userip = $_SERVER['REMOTE_ADDR'];
if(@$_REQUEST['page'])
{
 $page = mysql_escape_string($_REQUEST['page']);
 $page = strip_tags($page);
 
 $result = mysql_query("select * from ajax_tabs where page='$page'");
 $num    = mysql_num_rows($result);
echo $page;
} 
else
{
 $result = mysql_query("select * from ajax_tabs where page='$page'");
 $num    = mysql_num_rows($result);
 $row=mysql_fetch_array($result);
 echo $row['text'];
}
?>

Auto iframe’s height using javascript

Auto iframe’s height using javascript

<script type="text/javascript">

function iFrameHeight() { 
var f = document.getElementById('blockrandom'); 
f.style.height = '100px' ; 
var d = (f.contentWindow.document || f.contentDocument) ;

var height = Math.max(d.documentElement.scrollHeight, d.body.scrollHeight) ;

height += 20; 
f.style.height = height + 'px' ; 
f.setAttribute("height", height) ;

}
</script>

<iframe onload="iFrameHeight()" id="blockrandom"
 name=""
 src="test.htm" 
 width="100%"
 height="200"
 scrolling="no"
 align="top"
 frameborder="0"
 class="wrapper">
 No Iframes</iframe>