PHP Xajax Sliding Draw
We have all seen the slide out draws that conceal content and slide out when clicked. This is a good method for saving space on a website or only presenting that information that the viewer wishes. Now all the goodness of this can be yours with some very simple xajax. In this example, we provide the basics, you could add effects to the slide feature if you like d with your favourite javascript library.
<?php
/*** include the xajax libs ***/
include 'xajax/xajax_core/xajax.inc.php';
/**
*
* @show draw contents
*
* @return object
*
*/
function SlideoutDrawer($show)
{
$objResponse=new xajaxResponse();
if($show=="true")
{
/*** assign the content display style to block ***/
$objResponse->assign("content", "style.display", "block");
/*** set the string to a hide message ***/
$str="<div onClick=\"xajax_SlideoutDrawer('false');\">Click to collapse.</div>";
}
else
{
/*** assign the content display style to none ***/
$objResponse->assign("content", "style.display", "none");
/*** set the string to a show message ***/
$str="<div onClick=\"xajax_SlideoutDrawer('true');\">Click to expand.</div>";
}
/*** assign the string to the inner HTML of the showhide div ***/
$objResponse->assign("showhide", "innerHTML", $str);
/*** return the response object ***/
return $objResponse;
}
/*** a new xajax object ***/
$xajax=new xajax();
/*** register the show function ***/
$xajax->registerFunction("SlideoutDrawer");
/*** stuff the xajax javascript into a variable ***/
$xajax_js = $xajax->getJavascript('/xajax');
$xajax->processRequest();
?>
<html>
<head>
<title>PHPRO Xajax Draw</title>
<?php echo $xajax_js; ?>
<style type="text/css">
<!--
.content
{
display: none;
border: solid 1px black;
background-color: #c0c0c0;
width: 300px;
}
.control {
background-color: #fff6d7;
display: block;
border: solid 1px black;
width: 300px;
}
-->
</style>
<body>
<hr />
<div class="control" id="showhide" onClick="xajax_SlideoutDrawer('true');">Click here to expand.</div>
<div class="content" id="content">
<h3>Draw Content</h3>
<p>Lots of content here</p>
<p>Lots of content here</p>
<p>Lots of content here</p>
<p>Lots of content here</p>
<p>Lots of content here</p>
<p>Lots of content here</p>
</div>
</body>
</html>