I want to create a effect similar to the following site link, where the text is displayed in a fix sized text box that is then scrollable, however I want to use similar graphical design style as in example as opposed to using standard HTML scroll bar for it.
I also want the page never to need be refreshed, e.g. when you click on a different menu heading it just changes the content displayed, and does not have to reload the page. I know this part can be done with Javascript, and have a fair idea of how to go about it, but have no idea where to start on first part.
The example site uses Flash for all it's animation. However I want to stick to sever/client side languages, e.g. HTML/HTML5, Javascript/jquery, PHP
Example site:
A good start for animations, Ajax and Javascript is to use a library like jQuery. You can still use the menu with real url's which go to the right url for SEO reasons. But when a user presses that button, Javascript will cancel the real request and use an Ajax call to get the content. Small example using jQuery:
$(function(){
$("#menu li a").click(function(e){
e.preventDefault(); // Cancel the page change
var _this = $(this);
$.ajax({
url : "/urltogetpagecontent.php",
success : function(result)
{
// Put result in #content div
$("#content").html(result);
// Change page selected, the new LI will have the class selected and it will be removed from the other LI's within #menu
_this.parent().addClass("selected").siblings().removeClass("selected")
}
});
});
});
This way you can still use the original Navigation but cancel the pagechange. This will be called on document ready and will be bound to the click event of the #menu li a. If you want to have content with a fixed height, you can put your CSS as the #content as follow:
#content
{
height: 600px;
overflow: auto; /* Makes scrollbar when needed */
}
If you want to slide in and slide out your content. You have to got a DIV surrounded which will be added to you #content. So the structure will be something like:
<div id="content">
<div class="page">
// Default page
</div>
<div class="page">
// Second page loaded
</div>
</div>
And the success function will look something like:
success : function(result)
{
// Put result in #content div
var result = $(result).hide();
$("#content").append(result);
$("#content page").slideUp(); // Slide old content up
result.stop(true, false).slideDown(); // Slide new content down
// Change page selected, the new LI will have the class selected and it will be removed from the other LI's within #menu
_this.parent().addClass("selected").siblings().removeClass("selected")
}
Above example uses (some read stuff):
Possible improvements:
This code does not use any caching, sow when you click a link a second time, it does another Ajax request. You can improve this by giving the .page classes an ID which is linked to a #menu li a.
you can use div to keep all your text content and give fixed height and overflow:auto in your style, you will get scroll automatically according to your text content height and use some script to apply / make fancy scroll bar.
Jquery is the best option to bring your content without loading/refresh the page. Each click of your header link use Jquery.load to load your other page content and load in main body/div content