Mozilla, the organization behind Firefox, has recently announced a concept series to discuss about the future directions for Firefox browser. This announcement has stimulated few discussions on blogosphere. Many people are already giving their views/ideas on what the coming versions of Firefox should have. Adaptive Path, a product experience strategy and design company, has [...]
I have been programming in Java for close to 1 year now. All this time I was a developer who does coding and testing. I used to get the design from some of my senior and my job would be converting the design to reality. But, I feel its the time that I should start [...]
As Onam festival is approaching fast in Kerala, here are the few snaps I took on last year’s Onam Athapookkalam competition at my work place.
I hope, this year also I wil be able to take some good athapookkalam photographs (we have a competition in this month!).
Horizontal based navigation websites are the ones in which the user has to scroll horizontally rather than scrolling vertically to see the contents. Basically the website flow is organized in a horizontal fashion. In this blog post, I am sharing a JQuery script to create a horizontal layout website with some interesting JQuery effects.
Steps to create the horizontal layout in the above demo page:
Below is the source code for each of the above point.
1. Defining a ‘page’ element in HTML page
2. CSS style definition for page element:
3. JQuery script to position all ‘page’ elements when the page loads:
//Get the number of page elements in current web page
var $numberOfPages = $(".page").size();
var $pageLeftDistance = "100";
var $currentPage = $(".page:first");
//Set Current page as active
$currentPage.addClass("activePage");
for(var i=1; i<=$numberOfPages; i++)
{
$currentPage.css("left",$pageLeftDistance+"px");
//Calculate the left distance for the next page
$pageLeftDistance = parseInt($currentPage.css("left"))
+ parseInt($currentPage.css("width"))+ $SPACER;
$currentPage = $currentPage.next(".page");
$currentPage.addClass("notActivePage");
}
4. JQuery script to handle ‘Previous’ page clicks:
if($(".activePage").prev().size() == 0)
{
$("#MessagePanel").html("Sorry! You can not go to previous" +
" page, as this is the first page! Click here to close this message.");
$("#MessagePanel").slideDown("medium");
return;
}
//This function will take care of moving to previous pages
var $currPage,$tmpLeft, $allPages;
var $numberOfPages = $(".page").size();
$allPages = $(".page");
for(var $i=0; $i<$numberOfPages;$i++)
{
if($i==0)
{
$tmpLeft = parseInt($(".page:last").css("left"));
$(".page:last").animate({
left: ($tmpLeft +
parseInt($(".page:first").css("width"))
+ $SPACER)+"px",
opacity:$NOTACTIVEOPACITY
},500);
$currPage = $(".page:last");
}else
{
$currPage = $currPage.prev(".page");
$currPage.animate({
left: $tmpLeft + "px",
opacity:$NOTACTIVEOPACITY
},500);
$tmpLeft = $tmpLeft -
parseInt($currPage.css("width")) - $SPACER;
}
}
$currPage = $(".activePage");
$currPage.removeClass("activePage");
$currPage.addClass("notActivePage");
$currPage.prev(".page").removeClass("notActivePage");
$currPage.prev(".page").addClass("activePage");
$(".activePage").animate({
opacity:1
},200);
});
5. JQuery script to handle ‘Next’ page clicks:
$currPage = $(".activePage");
$currPage.removeClass("activePage");
$currPage.addClass("notActivePage");
$currPage.next(".page").removeClass("notActivePage");
$currPage.next(".page").addClass("activePage");
$(".activePage").animate({
opacity:1
},200);
});
Note: All the above JQuery functions should be written inside “$(document).ready(function(){}” block. You can download the entire source code from http://www.veerasundar.com/sbox/hnav/
Currently I am working on to improve this script and to include more navigational options like menu based navigation. I will update the source code soon once it is done.
Dreamz is an technical blog run by Veerasundar. In this blog, he writes about the web technologies he is working on, his experience, tips and tricks and more. He is also running a photo blog and a blog in Tamil.