Home»Howto»HTML/CSS/JS»Dynamic Content

Show dynamic content in a box area with jquery.


Add following code between <HEAD></HEAD> tags:

< script src="/path/to/jquery.js" type="text/javascript"></script> <script type="text/javascript"> function loadContent(id) { $("#contentArea").load("Content.php?o="+id+""); } </script>

Add following code between <BODY></BODY> tags:

<ul> <li><a href="javascript:loadContent(1);">Show dynamic content in box area with jquery.</a></li> <li><a href="javascript:loadContent(999);">This content doesn't exist</a></li> </ul> < div id="contentArea" style="overflow: scroll; width: 550px; height: 300px; font-family: cursive; border:solid 12px lightblue; " > < /div >

Create new file: Content.php

<?php $cOption = $_GET['o']; switch($cOption) { case 1: echo ' Your text. '; break; case 2: echo 'This content doesn't exist'; break; default: echo 'Whoops, didn't understand that option: <i<i> '.$cOption.' </i> '; } ?>
Latest News: