December 28, 2009

Magic of Jquery and PHP

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='#'>&bull; Production </a>  <a href='#'>&bull; Research & Feasibility </a>  <a href='#'>&bull; Location Scouting & Casting </a><br><a href='#'>&bull; Premits </a><a href='#'>&bull; 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 & 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 & 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

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

7 comments

December 28, 2009 - 3:59 pm kelincidungu

thx dude… another awesome tuts
January 1, 2010 - 12:47 pm bluejavax

Thanx kelincidungu, sorry it took me long to approve your comment. i will be keep on posting more as people like you will appreciate it.
January 6, 2010 - 8:49 am SHILP

Seems Good.
March 17, 2010 - 1:07 pm ed7991

Good but clean up your code please
March 17, 2010 - 7:43 pm Download Movies

Goodday
awesome post – i’m creating video about it and i will post it to youtube !
if you wana to help or just need a link send me email !
March 18, 2010 - 6:12 am bluejavax

Sure i will thank you. actully i wrote this code with a frmaework. it went through loads of changes.
Thats Y it isn’t much clean. Sorry
March 18, 2010 - 6:14 am bluejavax

k great you too send me the link of the video
I will use it here

View Demo

7 comments

Post a comment Cancel reply