| H2 tags : tags */ margin-top:0px; } #mainContainer{ width:610px; margin:0 auto; text-align:left; padding:5px; margin-top:20px; border:2px solid #000; background-color: #FFFFFF; } #contentContainer{ float:right; border:1px solid #000; background-color: #E2EBED; overflow:auto; margin-right:5px; padding:10px; /* CSS HACK */ width: 415px; /* IE 5.x */ width/* */:/**/400px; /* Other browsers */ width: /**/400px; /* CSS HACK */ height: 328px; /* IE 5.x */ height/* */:/**/328px; /* Other browsers */ height: /**/328px; } #contentContainer .openingText{ color:red; } #articleListContainer{ /* container for article list */ float:left; height:348px; overflow:auto; width:175px; border:1px double #000; background-color:#FFFFFF; } .articleList{ margin:0px; padding:2px; font-family: "Arial"; font-size: 13pt; font-style: normal; font-weight: bold; color: #FF0000; text-align: center; background-color: #FFCCFF; line-height: normal; vertical-align: middle; list-style-type: none; } .articleList li{ /* General layout article in list */ list-style-type:none; border:thin solid #999; background-color:#EEE; height:20px; margin:1px; padding:10px; color:#333; cursor:pointer; } .articleList li.articleMouseOver{ /* Mouse over article in list - layout */ border:1px solid #000; color:#000; } .articleList li.articleClick{ /* Active article in list - layout */ border:1px solid #000; color:#000; background-color:#317082; color:#FFF; } .keyText{ /* Just a column I use for key text inside articles - the one with the light blue bg and dotted border */ background-color:#FFF; border:1px dotted #000; float:right; margin-top:5px; margin-left:5px; margin-bottom:5px; width:150px; padding:3px } .clear{ clear:both; } .style1 {color: #FF3300} body,td,th { font-size: 12pt; } body { background-color: #E2EBED; } .menuelem { font-family: Arial, Helvetica, sans-serif; font-size: 1em; color: #000000; background-color: #FFFFCC; cursor: auto; text-align: center; vertical-align: middle; font-weight: normal; padding: 12px; border: none; display: block; width: auto; } A {COLOR: #0000ff; text-decoration:none;} A:link {COLOR: #0000ff} A:visited {COLOR: #0000ff} A:hover {COLOR: #ff0000; text-decoration:underline;} A:active {COLOR: #FF3399} /************************************************************************************************************ Ajax dynamic articles Copyright (C) 2006 DTHMLGoodies.com, Alf Magne Kalleland This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA Dhtmlgoodies.com., hereby disclaims all copyright interest in this script written by Alf Magne Kalleland. Alf Magne Kalleland, 2006 Owner of DHTMLgoodies.com ************************************************************************************************************/ var ajax = new sack(); var articleListObj; var activeArticle = false; var clickedArticle = false; var contentObj // Reference to article content function mouseoverArticle() // Highlight article { if(this==clickedArticle)return; if(activeArticle && activeArticle!=this){ if(activeArticle==clickedArticle) activeArticle.className='articleClick'; else activeArticle.className=''; } this.className='articleMouseOver'; activeArticle = this; // Storing reference to this article } function showContent() // Displaying content in the content { contentObj.innerHTML = ajax.response; // ajax.response is a variable that contains the content of the external file } function showWaitMessage() { contentObj.innerHTML = 'Finding article.....Please wait'; } function getAjaxFile(fileName) { ajax.requestFile = fileName; // Specifying which file to get ajax.onCompletion = showContent; // Specify function that will be executed after file has been found ajax.onLoading = showWaitMessage; // Action when AJAX is loading the file ajax.runAJAX(); // Execute AJAX function } function selectArticle() // User have clicked on an article { getAjaxFile("fomenu/"+this.id + '.html'); // Calling the getAjasFile function. argument to the function is id of this + '.html', example "article1.html" if(clickedArticle && clickedArticle!=this)clickedArticle.className='articleMouseOver'; this.className='articleClick'; clickedArticle = this; } function initAjaxDemo() { articleListObj = document.getElementById('articleList'); var articles = articleListObj.getElementsByTagName('LI'); for(var no=0;no |
| Last Update : | 01/January/2012 |
| Google PR : | N/A |
| Archive : | Check how did the site look in the past? |