Menu
Hi,
This is an example taken from the International Herald Tribune website. They show their articles also in a 3 colum format. The following code is the javascript that enables a piece of text to de distributed in 3 columns and adds additional pages if necessary.
They have the variable for the height of the columns which is not in pixels. They get the height of the browser and they adjust the height of the columns accordingly. The question i have is how could i use this example to write a code that just has a fixed height to the columns which does not change when the browser’s window is resized?
Here is the code:
[CODE]/*
This file contains all other user interaction functions:
switching to the 3 column layout, switching to the 1 column
layout, increasing and decreasing the font, setting the
window resize, etc.
*/
var classFix;
if (document.all){
classFix = “className”;
} else {
classFix = “class”;
}
// these values come from the cookie
var columnMode = 3;
// set some defaults values
var originalHeight;
var lineHeight = 13;
var currentPos = 0;
// use these values to manipulate the width of the text columns
// col3Width is used in the 3 column layout and col1Width is
// used in the 1 column layout.
var col3Width = 190;
// use this number to manipulate the height of the article text box
// it is counter intuitive: smaller is taller, bigger is shorter
var heightOfColumns = 420;
// returns the height of the current window
function getHeight(obj){
if (obj == “window”){
if (window.innerHeight){
return window.innerHeight;
} else {
return document.getElementById(“bodyNode”).offsetHeight;
}
} else {
obj = document.getElementById(obj);
if (obj.offsetHeight){
return obj.offsetHeight;
}
}
}
// makes the columns and copies the text node into the newly
// created columns ac is the div holding the cloned node – at
function articleSetup(){
var fontSize = 10;
var cv1 = 12;
var parentDiv = document.getElementById(“articleParent”);
var currentPos = 0;
for (var i = 0; i < 3; i++){
var col = document.createElement(“div”);
col.setAttribute(“id”, “ac” + i);
//col.setAttribute(“class”, “artCol”);
col.setAttribute(classFix, “artCol”);
parentDiv.appendChild(col);
var obj = document.getElementById(“articleBody”);
var artText = obj.cloneNode(true);
artText.setAttribute(“id”, “at” + i);
artText.style.display = “block”;
artText.style.top = “0px”;
artText.style.fontSize = fontSize + “px”;
artText.style.lineHeight = lineHeight + “px”;
col.appendChild(artText);
}
}
// moves the columns into position, but adjust the top
function layoutArticles(){
var parentHeight = getHeight(“articleParent”);
for (var i = 0; i < columnMode; i++){
var obj = document.getElementById(“at” + i);
//make sure at least 2 rows of article text are available
if (parentHeight > (2 * lineHeight)){
obj.style.top = -1 * (parentHeight * (i + currentPos));
}
}
articlePages();
}
// resets the article to the first “page”
function resetArticle(){
currentPos = 0;
layoutArticles();
}
// returns the snap to align article; this adjusts the height of the
// article window with a number divisible by line height. the minium
// number of rows is 10
function setSnap(mod){
if (mod == null){
mod = 0;
}
var snap = lineHeight * Math.round((getHeight(“window”) – mod) / lineHeight);
if (snap < (lineHeight * 10)){
snap = lineHeight * 10;
if (window.scrollTo){
window.scrollTo(0, 75);
}
} else if (window.scrollTo){
window.scrollTo(0, 0);
}
return snap;
}
// clips the parent layer to the defined visible area
// if space allows include bottom, otherwise clip out most of bottom
function setArticleHeight(){
if (columnMode > 1){
if (document.getElementById(“articleBody”) != null){
document.getElementById(“articleParent”).style.height = setSnap(heightOfColumns);
var tHeight = getHeight(“at1”);
parentHeight = getHeight(“articleParent”);
//check to make sure page is still visible
while ((parentHeight * (currentPos + (columnMode – 1))) > tHeight && currentPos > 0){
currentPos = currentPos – 1;
}
}
}
}
// returns the number of screens an article spans, ie the number of pages
function articlePages(){
var parentHeight = getHeight(“articleParent”);
var tHeight = getHeight(“at1”);
var totalColumns = tHeight / parentHeight;
var totalPages = Math.ceil(totalColumns);
var tPos = (currentPos + columnMode) / columnMode;
var pagesTotal = Math.ceil(totalPages / columnMode);
var pagesCurrent = Math.round(tPos);
var obj = document.getElementById(“tc_page_nav_middle”);
obj.innerHTML = “” + pagesCurrent + ” of ” + pagesTotal;
// button activation/deactivation
var prevButtonBG = document.getElementById(“tc_prev_button_bg”);
var prevButtonText = document.getElementById(“tc_prev_button_text”);
var nextButtonBG = document.getElementById(“tc_next_button_bg”);
var nextButtonText = document.getElementById(“tc_next_button_text”);
if (pagesTotal > 1) {
if (pagesCurrent == 1) {
// activate next button
nextButtonText.style.color = “#000”;
nextButtonBG.onmouseover = function () {
nextButtonBG.style.cursor = “pointer”;
}
nextButtonBG.onmouseout = function () {
}
nextButtonBG.onclick = function () { nextPage(); }
// deactivate prev button
prevButtonText.style.color = “#ccc”;
prevButtonBG.onmouseover = function () {
prevButtonBG.style.cursor = “”;
}
}
if (pagesCurrent > 1 && (pagesCurrent <= pagesTotal)) {
// activate prev button
prevButtonText.style.color = “#000”;
prevButtonBG.onmouseover = function () {
prevButtonBG.style.cursor = “pointer”;
}
prevButtonBG.onmouseout = function () {
}
prevButtonBG.onclick = function () { prevPage(); }
if (pagesCurrent == pagesTotal) {
// deactivate next button
nextButtonText.style.color = “#ccc”;
nextButtonBG.onmouseover = function () {
nextButtonBG.style.cursor = “”;
}
} else {
// activate next button
nextButtonText.style.color = “#000”;
nextButtonBG.onmouseover = function () {
nextButtonBG.style.cursor = “pointer”;
}
nextButtonBG.onmouseout = function () {
}
nextButtonBG.onclick = function () { nextPage(); }
}
}
}
}
// adjusts the article to display the next page
function nextPage(){
tHeight = getHeight(“at1”)
var parentHeight = getHeight(“articleParent”);
// check to make sure page is still visible
if ((parentHeight * (currentPos + columnMode)) < tHeight){
currentPos = currentPos + columnMode;
}
layoutArticles();
}
// adjusts the article to display the previous page
function prevPage(){
currentPos = currentPos – columnMode;
if (currentPos < 0){
currentPos = 0;
}
layoutArticles();
}
// switches to three Column mode
function threeColumn(){
var fontSize = 12;
var cv1 = 12;
currentPos = 0;
columnMode = 3;
colWidth = col3Width;
if (fontSize > 18){
fontSize = 18;
}
var obj1 = document.getElementById(“at0”);
obj1.style.zIndex = 5;
obj1.style.display = “block”;
obj1.style.width = colWidth;
obj1.style.left = 0;
var obj2 = document.getElementById(“at1”);
obj2.style.zIndex = 5;
obj2.style.display = “block”;
obj2.style.width = colWidth;
obj2.style.left = colWidth + 20;
var obj3 = document.getElementById(“at2”);
obj3.style.zIndex = 5;
obj3.style.display = “block”;
obj3.style.width = colWidth;
obj3.style.left = 2 * (colWidth + 20);
}
function initArticle(){
if (document.getElementById(“articleBody”) != null){
articleSetup();
setArticleHeight();
threeColumn();
layoutArticles();
} else {
alert(“Can not find articleBody node”);
}
}
// adjust article layout when the window is resized
function windowResize(){
setArticleHeight();
layoutArticles();
}
window.onresize = windowResize;