BlueJavax http://www.bluejavax.com Coding Is Fun Thu, 26 Aug 2010 19:09:08 +0000 en hourly 1 http://wordpress.org/?v=3.0 Dynamic Thumbnail on the fly. http://www.bluejavax.com/archives/388 http://www.bluejavax.com/archives/388#comments Thu, 26 Aug 2010 19:07:05 +0000 bluepicaso http://www.bluejavax.com/?p=388 Hello there people, Its been a long time I have not posted anything.

Did you ever thought of why to create thumbnail and saving them to server, or even you databases. keeping you mind throuh the complete script that uploads and then generates a thumbnail, Then you save the path to database.. aaaah… Well i was tired. after searching internet i got a script.. Thank god.

Ok here is the script that i have been using for a while now. The best part is, that it created an image in buffer only. I mean it does not save an image to a folder. its just resizes your image temporarily where as you actual image remains same.

here is a

demo.

The code goes here

<?php
set_time_limit(10000); //--- need to do this for larger images in case the server stops..

error_reporting(E_ALL ^ E_NOTICE);

include 'resize.image.class.php'; //---- include the class file

$resize_image = new Resize_Image; //---- class instance

// Folder where the (original) images are located with trailing slash at the end
$images_dir = ''; // you can leave it empty. Only if you are providing the original image with its path (see next syntax). Its good to use when you have images from different locations and you are using this file only.

// Image to resize
$image = $_GET['image']; // This is the image name... You can provide path with it.
//echo $image;
list($width, $height, $type, $attr) = getimagesize($image); //--- get dimensions of the oirginal image
/* Some validation */

if(!@file_exists($images_dir.$image))
{
exit('The requested image does not exist.');
}
// Get the new with &amp; height --[The parameter given in html with image name... will be covered below]
//echo $width ." | ". $height;
$new_width = (int)$_GET['new_width'];
$new_height = (int)$_GET['new_height'];
// --------the code below makes a decision on the basis of priority.


if($width>$height) //--if width is greater than the image you be reduced first, by with specified (with aspect ratio).
{
$resize_image->new_width = $new_width;
}

else //--any other contition like height is greater or both are of same ratio will be resized (with aspect ratio).
{
$resize_image->new_height = $new_height;
}
//--the above conditions can be changed as per user need....

$resize_image->image_to_resize = $images_dir.$image; // Full Path to the file

$resize_image->ratio = true; // Keep aspect ratio
//$image->save_folder = "thumbs/";
$process = $resize_image->resize(); // Output image
?>

In the above code you will see that we have not saved thumbnail to any folder. So its just gives output to browser.

Here is how you will you use it

<img src="resize_image.php?image=products/my_image.jpg&amp;new_width=150&amp;new_height=100" >
<!--------------------
in the above code you can see that we have passed 3 parameters
1) the image with relative path....
2) New desired width
3) New desired height
-->

Thats all, you are done.

Demo | Files

Enjoy

]]> http://www.bluejavax.com/archives/388/feed 0 Gmail/Facebook like Chat With CodeIgniter http://www.bluejavax.com/archives/379 http://www.bluejavax.com/archives/379#comments Mon, 05 Jul 2010 17:23:30 +0000 bluepicaso http://www.bluejavax.com/?p=379 Hey to all my CodeIgniter friends. SO you all have been waiting for a Gmail and Facebook like chat  to be implemented in Codeigniter. Well this is an extended version of

this chat.

Download the files from the link above and do the following things.

Before doing the setup below. Please configure your database settings first.

The fact is that you need to to change the chat.js file


var baseUrl = "http://yourURl.com/chatfolder";

// or your ip address incase you are using over intranet.

Change all your URls in th script from

url: "chat.php?action=chatheartbeat",

to

url: baseUrl+"chat.php?action=chatheartbeat",

open samplea.php

<?php
session_start();
$me = $_GET['me'];
$you= $_GET['u'];
$_SESSION['username'] = $me; // Must be already set
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<title>Sample Chat Application</title>
<style>
body {
background-color: #eeeeee;
padding:0;
margin:0 auto;
font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
font-size:11px;
}
</style>
<link type="text/css" rel="stylesheet" media="all" href="css/chat.css" />
<link type="text/css" rel="stylesheet" media="all" href="css/screen.css" />
<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" media="all" href="css/screen_ie.css" />
<![endif]-->
</head>
<body>
<div id="main_container">
<a href="javascript:void(0)" onclick="javascript:chatWith('<?=$you?>')">Chat With <?=$you?></a>
<a href="javascript:void(0)" onclick="javascript:chatWith('babydoe')">Chat With Baby Doe</a>
<!-- YOUR BODY HERE -->
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
</body>
</html>

Copy the code to your CodeIgniter View and make necessary changes like <?=base_url()?> inclusion and other stuff.

At the top of the file you see the following code

<?php
session_start();
$me = $_GET['me'];
$you= $_GET['u'];
$_SESSION['username'] = $me; // Must be already set
?>

To change that code to Codeigniter do the following steps.

In your controller (the one that calls your view), either use session or pass names as parameters.

<?php
function chat($me, $you)
{
$data['me'] = $me;
$data['you'] = $you;
$this->load->view('chat', $data);
}
?>

I use two parameters because one is for your name and other is the name for the person you want to chat with.

Make sure names should not have any spaces or dotz. It should be just words or underscores.

ok so.

change the following code

<a href="javascript:void(0)" onclick="javascript:chatWith('babydoe')">Chat With Baby Doe</a>

to this

<a href="javascript:void(0)"  onclick="javascript:chatWith('<?=$you?>')">Chat With  <?=$you?></a>
//---make it dynamic.

Open two of your browser  and open the link. be sure either using localhost or the ip address. depending on what you have used in your chat.js

In Firefox open this link http://localhost/gchat/welcome/chat/misha/rahul and in the other browser open this

http://localhost/gchat/welcome/chat/rahul/chat. Click the first link.

Then you should have your chat working fine.

]]> http://www.bluejavax.com/archives/379/feed 9 Facebook Like Link Sharing http://www.bluejavax.com/archives/361 http://www.bluejavax.com/archives/361#comments Fri, 02 Jul 2010 17:43:33 +0000 bluepicaso http://www.bluejavax.com/?p=361

View Demo

Its been so long, after switching from windows to Ubuntu.Things are more easy, attractive ans secure.
This Tutorial is for creating a FACEBOOK LINK LINK SHARING INTERFACE.
The script used php, javascript expressions, jquery and some css too.
Ok, lets start

Lets us create an Interface First
call the file index.php… Why.. well you can have Index.html also. Incase you are not loading any data from database…
Since I’m loading the previously shared links so its index.php

Facebook Like Links Sharing
<!--Loading Jquery Below-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Next you need a Textbox and a publish button. Here we go 

 <textarea id="contentbox"></textarea>
 <input id="submit" onclick="saveLink()" name="Publish" type="Submit" value="Publish" />

Ok Now we need a Script that Fetches whatever you write and then process it, to show you. Guess what… It uses jquery. 

   $(document).ready(function() {      $("#contentbox").keyup(function()//--the script catches all your written text as you type     {         var content=$(this).val();         var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&amp;@#\/%?=~_|!:,.;]*[-A-Z0-9+&amp;@#\/%=~_|])/ig;         var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&amp;%@!\-\/]))?/;         var url= content.match(urlRegex); //---Filtering URL from the content using regular expressions------          if(url.length>0)//--check for length-----         {              $("#linkbox").slideDown('show');             $("#linkbox").html("<img src="link_loader.gif" alt="" /> Loading Data.....");             $.get("urlget.php?url="+url,function(response)//---sending your url as parameter to "urlget.php" and fetching the response----             {                  var title=(/(.*?)<\/title>/m).exec(response)[1]; // Loading <title>data                 var logo=(/<img src="(.*?)" alt="" /><img class="img" src=""+logo+"" alt="" />

<div><strong>"+title+"</strong> "+url)             });          }         return >false;     });  });

So that one will do nothing.. You need thet urlget.php so here we go

Using the Above code will show the logo or any first image and the url details. Next would be saving the data in database.. when you click on PUBLISH. here is the table 

 CREATE TABLE `links` (    `link_id` int(11) NOT NULL AUTO_INCREMENT,    `link` varchar(250) NOT NULL,    PRIMARY KEY (`link_id`)  )

Now the script to insert the data. 

 function saveLink()     {         var content=$('#contentbox').val();         var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&amp;@#\/%?=~_|!:,.;]*[-A-Z0-9+&amp;@#\/%=~_|])/ig;         var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&amp;%@!\-\/]))?/          var url= content.match(urlRegex);         if(url.length>0)         {             $.get("saveurl.php?url="+url,function(response)             {                 var title=(/(.*?)<\/title>/m).exec(response)[1];                 var logo=(/<img src="(.*?)" alt="" />
 
	<li id="updates">
<div id="lft"><img class="img" src=""+logo+"" alt="" /></div>
<div id="rt"><strong>"+title+"</strong> "+url+"</div></li>
");                  $("#linkbox").fadeOut();             });         }         return >false;     }

The Script seems similar the difference is that it calls another php Script saveurl.php . That captures and saves data. Here is the code

The Above Script Uses a config file config.php 

 $mysql_hostname = "localhost"; $mysql_user = "root"; $mysql_password = "root"; $mysql_database = "fb";  $cn = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong"); mysql_select_db($mysql_database, $cn) or die("Opps some thing went wrong");

Thats it now Now If you want to load the the previous shared links use this in you index.php file. Just paste this code below your publish button 

   <script type="text/javascript">// <![CDATA[
             function lods()             {             window.onload = loadHistory("");/****javascript method that takes a parameter ans uses it to extract and load data ****/         //              }             window.onload = lods();
// ]]></script>

</div>

Thats All.Below are the links to Download and Demo

View Demo

Download the Script

Comments will be appreciated.

Thank you

Creative Commons License
By bluejavax is licensed under a Creative Commons Attribution-Share Alike 2.5 India License.

]]> http://www.bluejavax.com/archives/361/feed 4 Journals United http://www.bluejavax.com/archives/344 http://www.bluejavax.com/archives/344#comments Wed, 26 May 2010 17:14:24 +0000 bluepicaso http://www.bluejavax.com/?p=344

A content sharing website, where users can register and write journals, news, hacks, poery etc.

Specifications:

  • User can register and can search and write content.
  • User can follow there friends.
  • User gets comment updates.
  • The admin section allows to edit user profiles and complete archives
  • Site uses ajax and jquery, for quick updates and editing.

THE SITE HAS BEEN REMOVED BY ME DUE TO PAYMENT ISSUES.

THE SCRIPT WILL BE SOON AVAILABLE FOR SELLING.

]]> http://www.bluejavax.com/archives/344/feed 0 Lightbox To Ajax Images http://www.bluejavax.com/archives/336 http://www.bluejavax.com/archives/336#comments Sat, 01 May 2010 19:52:12 +0000 bluepicaso http://www.bluejavax.com/?p=336 Hey all, This tutorial is for the problem that occurs, when lightbox doesn’t work with images called with ajax.

The problem usually occurs when you are using many javascript frameworks together. Since i faced one, so felt it to share with you all.

The tutorial is simple and easy to implement. The trick is to load lighbox.js with jQuery when you want it.

Here is the simple code.

code for index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Using lightbox with ajax</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<style type="text/css">
body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif;    }
#update
{
margin-top: 10px;
}
#update a img
{
border: #202020 3px solid;
}
</style>
</head>
<body>
<h1>Using <a href="http://www.lokeshdhakar.com/projects/lightbox2/">Lightbox JS <em>with ajax</em></a></h1>
<p><a href="http://www.lokeshdhakar.com">by Harpreet BHatia</a></p>
<h2>Example</h2>
<select name="imageOption" id="imgOptn">
<option value="xxx">----Select Image Type-----</option>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
</select>
<script type="text/javascript">
jQuery("[name=imageOption]").change(function()
{
//------loading lightbox script using jquery-----
jQuery.getScript("js/lightbox.js", function()
{
cat = jQuery('[name=imageOption]').val();
if(cat != "xxx")
{
var dataString = 'cat=' + cat;
{
jQuery("#flash").show();
jQuery("#flash").fadeIn(400).html('<span>Loading Image, Please wait...</span>');
//----calling the php file to get images ------
jQuery.ajax(
{
type: "POST",
url: "getImages.php",
data: dataString,
cache: false,
success: function(html)
{
{
jQuery("#update").empty();
jQuery("#update"). append(html);
jQuery("#update").fadeIn("slow");
jQuery("#flash").hide();
//jQuery("#update").fadeOut(7000);
}
}
});
return false;
}
}
else
{
jQuery("#update").fadeOut();
}
});
});
</script>
<div id="flash"></div>
<div id="update">
</div>
</body>
</html>

Code for php file

<?php
$t = $_POST['cat'];

if($t == 1)
{
?>
<a href="images/hat_big.jpg" rel="lightbox[roadtrip]">
<img src="images/hat.jpg" width="200" height="200" alt="" />
</a>
<a href="images/glow_big.jpg" rel="lightbox[roadtrip]">
<img src="images/glow.jpg" width="200" height="200" alt="" />
</a>
<?
}
else
{
?>
<a href="images/roof_big.jpg" rel="lightbox">
<img src="images/roof.jpg" width="200" height="200" alt="" />
</a>
<?
}
?>

View Demo

Download source

Hope you like it…

]]> http://www.bluejavax.com/archives/336/feed 0 Jquery: Tips ‘n’ Tricks http://www.bluejavax.com/archives/322 http://www.bluejavax.com/archives/322#comments Tue, 23 Mar 2010 06:00:12 +0000 bluepicaso http://www.bluejavax.com/?p=322 Jquery and browser support. well both of them nearly  don’t work all together. I just got stuck somewhere i found a weird solution Just remove an @ symbol did that.

While working on a project i was stuck on a jquery code that wasn’t working on IE8(now free for Xp users).

I was working with two set if radio buttons. the problem was with the second radio button set.

The code that did not work was this below.

<tr>
<td>
Have you used any other names in the past eight years?
</td>
<td>
<input type="radio" name="ot" value="1">yes  <input type="radio" name="ot" value="2">No
</td>
<script type="text/javascript">
$j('[name=ot]').click(function()
{
var ot = $j("input[@name='ot']:checked").val();
if(ot == 1)
{
$j("#odrnames").fadeIn("slow");
}
else
{
$j("#odrnames").fadeOut("slow");
}
});
</script>
</td>
</tr>
<tr id="odrnames" style="display: none;">
<td>
Other Names
</td>
<td>
<input type="text" id="txt" name="otherNam"> *Seperate By commas
</td>
</tr>
<tr>
<td>
Filing Status:
</td>
<td>
<input type="radio" name="fs" value="1">Single  <input type="radio" name="fs" value="2">Joint
</td>
<script type="text/javascript">
$j('[name=fs]').click(function()
{
var person = $j("input[@name='fs']:checked").val();
//alert(person);
if(person == 2)
{
$j("#joint0").fadeIn("slow");
}
else
{
$j("#joint0").fadeOut("slow");
}
});
</script>
</tr>
<div>
<tr id="joint0" style="display: none;">
<td>
Full Name of Spouse:
</td>
<td>
<input type="text" id="txt" name="sname">
</td>
</tr>

I just changes the jquery codes from

var person = $j("input[@name='fs']:checked").val();

To

var person =  $j("input[name='fs']:checked").val();

A small code for developers the IE8 users to be in compatible mode.

try this 

<meta http-equiv="X-UA-Compatible"  content="IE=EmulateIE7"  />

So this was the solution i found. Please do comment if you have better ideas or face any problem.

]]> http://www.bluejavax.com/archives/322/feed 0 Using custom Fonts On Website http://www.bluejavax.com/archives/265 http://www.bluejavax.com/archives/265#comments Tue, 02 Mar 2010 19:47:23 +0000 bluepicaso http://www.bluejavax.com/?p=265 Hey people here is the solution for using custom fonts on your website.
I always wanted to use something different. Using Arial, Calibri is so IE6, so i googled around and found that there are certain solutions available, but i found FONTJASS as one of the solution.

Convert your font to javascript here.

Then download the files generated. and BOOm

Use:

<pre><html>
 <head>
  <title>Neato!</title>
  <script type="text/javascript" src="fontjazz.js"></script>
  <script type="text/javascript" src="font.js"></script>
 </head>
 <body>
  <h1>Wow! Fancy headlines!</h1>
  <p>Gotta love it!</p>
  <script type="text/javascript">
   FontJazz.apply("h1", "font");
  </script>
 </body>
</html>
</pre>
]]> http://www.bluejavax.com/archives/265/feed 1 Project For Health Organisation http://www.bluejavax.com/archives/247 http://www.bluejavax.com/archives/247#comments Sun, 14 Feb 2010 15:28:14 +0000 bluepicaso http://www.bluejavax.com/?p=247

Developed a web application for a International Health Organization.  The web application contains a knowledge base for articles and videos.

The knowledge base is maintained by Administrator. The site has two different accounts for Doctors and Patients.

CONTAINS:

  • Knowledge Base (with Videos also)
  • SMS facility
  • Chating
  • Instant Messaging

Built Using:

  • Php
  • Jquery
  • Ajax
  • Mysql
]]> http://www.bluejavax.com/archives/247/feed 0 Magic of Jquery and PHP http://www.bluejavax.com/archives/181 http://www.bluejavax.com/archives/181#comments Mon, 28 Dec 2009 20:04:52 +0000 bluepicaso http://www.bluejavax.com/?p=181

Oh, Hello again people. This is another post that shows some magic of Jquery & php.
This is a demo i create for a client, well it wasn’t much liked by him but my friends did. well i loved it too. So, i thought of sharing it with you all.

I created this for fun. Well I have tested it on firefox, chrome and opera.

View Demo

below is the code given.

Code for Index.html

<style>
#sliderWrap
{
margin: 0 auto;
width: 385px;
}
#slider
{
position: fixed;
background-image:url(images/pane.png);
background-repeat:no-repeat;
background-position: bottom;
width: 385px;
height: 200px;
margin-top: -150px;
margin-left: 10px;
padding-right: 10px;
z-index: 3;
}
#slider img
{
border: 0;
}
#sliderContent /*-------------the sliding panel on top left----------------*/
{
color:#fff;
font-size: 14px;
font-family: arial;
text-decoration: none;
padding-bottom: 10px;
}
#sliderContent a /*-------------content----------------*/
{
color:#fff;
font-size: 14px;
font-family: arial;
text-decoration: none;
/*background-image: url(images/semi.png);*/
padding: 4px;
}
#sliderContent a:hover /*-------------content----------------*/
{
color:#fff;
font-size: 14px;
font-family: arial;
background-image: url(images/semi.png);
padding: 4px;
}
#header
{
margin: 0 auto;
width: 600px;
background-color: #F0F0F0;
height: 200px;
padding: 10px;
}
#openCloseWrap
{
position: relative;
padding-top: 20px;
padding-right: 20px;
text-align: right;
}
</style>

The jquery Goes like this

<script type="text/javascript">
$(document).ready(function()
{
$(".ser").click( function()//---called when you click on CLICK ME-----
{
document.getElementById('slider').style.visibility = "visible";
req = 'ser';
var dataString = 'req='+req;
{
$j(".flickr").show();
$j(".flickr").fadeIn(400).html('<img src="images/noise.gif" align="absmiddle" width="445" height=333">');
$j.ajax(
{
type: "POST",
url: "services.php",
data: dataString,
cache: false,
success: function(html)
{
html1 = '';
//$("#sliderContent").empty();
//$("#sliderContent"). append(html1);
//$j(".flickr").fadeOut(400);
$(".flickr").empty();
$(".flickr").hide();
$(".flickr"). append(html);
$(".flickr"). fadeIn(2000);
//alert('ser2');
if ($("#openCloseIdentifier").is(":hidden"))
{
$("#slider").animate(
{
marginTop: "-150px",//-------slides up the top-left menu-----
//marginLeft: "800px"
}, 500 );
//$("#topMenuImage").html('<img src="images/open.png" alt="open" />');
$("#openCloseIdentifier").show();
}
else
{
$("#slider").animate(
{
marginTop: "0px",//-------slides the top-left menu to the bottom-----
//marginLeft: "0px"
}, 500 );
//$("#topMenuImage").html('<img src="images/close.png" alt="close" />');
$("#openCloseIdentifier").hide();
}
}
});
}
return false;
});
$(".pro").click( function()//---runs when Production link is clicked on the sliding menu-----
{
req = 'pro';
var dataString = 'req='+req;//-----request string-----
{
$j(".flickr").show();
$j(".flickr").fadeIn(400).html('<img src="images/noise.gif" align="absmiddle" width="445" height=333">');
$j.ajax(
{
type: "POST",//----using the post method-----
url: "services.php",//----php page to handle request----
data: dataString,
cache: false,
success: function(html)
{
html1 = '';
$(".flickr").empty();
$(".flickr").hide();
$(".flickr"). append(html);
$(".flickr"). fadeIn(2000);
}
});
}
return false;
});
$(".rf").click( function()
{
req = 'rf';
var dataString = 'req='+req;
{
$j(".flickr").show();
$j(".flickr").fadeIn(400).html('<img src="images/noise.gif" align="absmiddle" width="445" height=333">');
$j.ajax(
{
type: "POST",
url: "services.php",
data: dataString,
cache: false,
success: function(html)
{
html1 = '';
//$("#sliderContent").empty();
//$("#sliderContent"). append(html1);
$(".flickr").empty();
$(".flickr").hide();
$(".flickr"). append(html);
$(".flickr"). fadeIn(2000);
}
});
}
return false;
});
$(".lsc").click( function()
{
req = 'lsc';
var dataString = 'req='+req;
{
$j(".flickr").show();
$j(".flickr").fadeIn(400).html('<img src="images/noise.gif" align="absmiddle" width="445" height=333">');
$j.ajax(
{
type: "POST",
url: "services.php",
data: dataString,
cache: false,
success: function(html)
{
html1 = '';
//$("#sliderContent").empty();
//$("#sliderContent"). append(html1);
$(".flickr").empty();
$(".flickr").hide();
$(".flickr"). append(html);
$(".flickr"). fadeIn(2000);
}
});
}
return false;
});
$(".per").click( function()
{
req = 'per';
var dataString = 'req='+req;
{
$j(".flickr").show();
$j(".flickr").fadeIn(400).html('<img src="images/noise.gif" align="absmiddle" width="445" height=333">');
$j.ajax(
{
type: "POST",
url: "services.php",
data: dataString,
cache: false,
success: function(html)
{
html1 = '';
//$("#sliderContent").empty();
//$("#sliderContent"). append(html1);
$(".flickr").empty();
$(".flickr").hide();
$(".flickr"). append(html);
$(".flickr"). fadeIn(2000);
}
});
}
return false;
});
$(".ppf").click( function()
{
req = 'ppf';
var dataString = 'req='+req;
{
$j(".flickr").show();
$j(".flickr").fadeIn(400).html('<img src="images/noise.gif" align="absmiddle" width="445" height=333">');
$j.ajax(
{
type: "POST",
url: "services.php",
data: dataString,
cache: false,
success: function(html)
{
html1 = '';
//$("#sliderContent").empty();
//$("#sliderContent"). append(html1);
$(".flickr").empty();
$(".flickr").hide();
$(".flickr"). append(html);
$(".flickr"). fadeIn(2000);
}
});
}
return false;
});
});
$(document).ready(function()
{
$(".topMenuAction").click( function()
{
//html = "<a href='#'>• Production </a>  <a href='#'>• Research &amp; Feasibility </a>  <a href='#'>• Location Scouting &amp; Casting </a><br><a href='#'>• Premits </a><a href='#'>• Post-Production Facilitation </a>";
//$("#sliderContent").empty();
$(".flickr").fadeOut();
//$("#sliderContent"). append(html);
if ($("#openCloseIdentifier").is(":hidden"))
{
$("#slider").animate(
{
marginLeft: "800px"
}, 500 );
//$("#topMenuImage").html('<img src="images/open.png" alt="open" />');
$("#openCloseIdentifier").show();
}
else
{
$("#slider").animate(
{
marginLeft: "0px"
}, 500 );
//$("#topMenuImage").html('<img src="images/close.png" alt="close" />');
$("#openCloseIdentifier").hide();
}
});
});
</script>

The php code for SERVICES.PHP goes like this

<?php
$req = $_POST['req'];
//-------The code handles request on the basis of request made to the server.------------
>if(($req == 'ser') || ($req == 'pro'))
{
$resp = "<p>Production: <br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>";
}

elseif($req == 'rf')
{
$resp = "<p>Research &amp; Feasibility: <br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>";
}

elseif($req == 'lsc')
{
$resp = "<p>Location Scouting &amp; Casting: <br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>";
}

elseif($req == 'per')
{
$resp = "<p>Permits: <br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>";
}

elseif($req == 'ppf')
{
$resp = "<p>Post-Production Facilitation: <br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>";
}
echo $resp;
?>

View Demo

Download the Script

I’m aware that the script is not fully good enough  but still comments will be appreciated.

Thank you

Creative Commons License
Bby bluejavax is licensed under a Creative Commons Attribution-Share Alike 2.5 India License.

]]> http://www.bluejavax.com/archives/181/feed 7 Sliding Content http://www.bluejavax.com/archives/172 http://www.bluejavax.com/archives/172#comments Thu, 17 Dec 2009 19:04:48 +0000 bluepicaso http://www.bluejavax.com/?p=172 Well i don’t know about you but i like Sliding menus. Well here is a code for similar sliding menus.

The menus are smooth and easy to navigate. Though sometimes you might need to scroll page.

They are good where the content to show in each tab is little.

The tabs are easy to customize.

:)
 
 
 
 
 

code for index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Motion</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/accordian.pack.js"></script>
</head>
<body onload="new Accordian('accordian',3,'header_highlight');">
<div id="header">
<h1><a href="#">motion</a></h1>
<h2>A free CSS Template by Six Shooter Media</h2>
</div>
<div id="accordian" ><!--Parent of the Accordion-->
<!--Start of each accordion item-->
<div id="test-header" >Welcome</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header &amp; foo-content-->
<div id="test-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div>
<img src="images/img_example.jpg" alt="image example" />
<p>Hello and welcome to Motion, a free template by <a href="http://www.sixshootermedia.com/free-templates">Six Shooter Media</a>. For this template I have gone in a completely different direction and created something quite specific in its design ideals. Motion is designed for someone wishing to display a fairly small amount of information, elegantly in a single page whilst still be able to wow the user. The accordion effect used in this template is based on <a href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/">this</a> fabulous piece of work which you should refer to for any help/discussion regarding the Javascript used within this template.</p>
<p>The design is simple, but should be elegant and innovative enough to engage the user and make them want to read more about your company/product. Orange was the colour chosen for the basis of the colour scheme but you could of course easily change that.</p>
</div>
</div>
<!--End of each accordion item-->
<!--Start of each accordion item-->
<div id="test1-header" >Examples</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header &amp; foo-content-->
<div id="test1-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div>
<h2>List Example</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla lacus ipsum, semper eget, faucibus a, porttitor non, ante. Etiam quam. Quisque condimentum enim eget mauris.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla lacus ipsum, semper eget, faucibus a, porttitor non, ante. Etiam quam. Quisque condimentum enim eget mauris.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla lacus ipsum, semper eget, faucibus a, porttitor non, ante. Etiam quam. Quisque condimentum enim eget mauris.</li>
</ul>
<h2>Blockquote Example</h2>
<blockquote>
<em>
But the Forest <em>is</em> queer. Everything in it is very much more alive, more aware of what is going on, so to speak, than things are in the Shire. And the trees do not like strangers. They watch you. They are usually content merely to watch you, as long as daylight lasts, and don't do much. Occasionally the most unfriendly ones may drop a branch, or stick a root out, or grasp at you with a long trailer. But at night things can be most alarming, or so I am told.
</em>
</blockquote>
<h2>Image Example</h2>
<p><img src="http://www.sixshootermedia.com/ssm2/wp-content/themes/Six%20Shooter%20Media/images/logo.jpg" alt="" /> </p>
<h2>Table Example</h2>
<table>
<tbody><tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>2</td>
<td>23</td>
<td>76</td>
</tr>
<tr>
<td>54</td>
<td>233</td>
<td>1233</td>
</tr>
</tbody></table>
</div>
</div>
<!--End of each accordion item-->
<!--Start of each accordion item-->
<div id="test2-header" >Contact</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header &amp; foo-content-->
<div id="test2-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div>
<p>Here's an example contact form. This is not an operation form, just an example!</p>
<form action="">
<input value="Name" /><br />
<input value="Email Address" /><br />
<textarea cols="5" rows="5">
</textarea><br />
<input type="submit" />
</form>
<p>Some additional text regarding contact information.</p>
</div>
</div>
<!--End of each accordion item-->
<!--Start of each accordion item-->
<div id="test3-header" >Links</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header &amp; foo-content-->
<div id="test3-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div>
<p>Some links for your viewing pleasure:</p>
<ul>
<li><a href="http://www.sixshootermedia.com">Six Shooter Media</a></li>
<li><a href="http://www.sixshootermedia.com/free-templates/">Free Templates</a></li>
<li><a href="http://www.opendesigns.org">More Free Templates</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/">Simple Accordions</a></li>
<li><a href="http://www.famfamfam.com/lab/icons/silk/">FamFamFam Silk Icons</a></li>
</ul>
</div>
</div>
<!--End of each accordion item-->
</div><!--End of accordion parent-->
<div id="footer">
<p><a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/">CSS</a><br /><a href="#content">Top</a></p>
<!-- Please leave this line intact -->
<p>Design: <a href="http://www.sixshootermedia.com">Six Shooter Media</a>. <br />
AJAX: <a href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/">Simple Accordions</a>. Iconography: <a href="http://www.famfamfam.com/lab/icons/silk/">FamFamFam</a>. Sponsor: <a href="http://www.yours4money.com" rel="nofollow">Casino</a><br />
<!-- you can delete below here -->
© All your copyright information here.</p>
</div>
</body>
</html>

The code uses Java scripts and css.

You can VIEW DEMO

Download Files [Expires in 4 weeks 2 days (05:37, 17 Jan 2010)]

Creative Commons License
BlueJavax by bluejavax is licensed under a Creative Commons Attribution-Share Alike 2.5 India License.

]]> http://www.bluejavax.com/archives/172/feed 0