Note: This is an alternate planned approach to this question: Multiple column articles in Joomla
I've got a client who wants a multi column layout, which should be generated automatically from a non-column HTML block.
What is the feasibility of using JavaScript (and jQuery) to create a multi-column system from a single block of HTML? And if it is possible how would I go about doing it?
Thanks.
This is just an example how you can solve your problem. Of cause this solution can be refined.
function textSplitter(){
}
textSplitter.prototype.LENGTH_TO_SPLIT=5000 //max chars in single line
textSplitter.prototype.split=function(id){
var contentDiv=document.getElementById(id); // get an element
var text=contentDiv.innerHTML;
var length= text.length;
if(length){
var div1sbstr=text.substring(0,this.LENGTH_TO_SPLIT); //take a substring
var div1=document.createElement("div");
contentDiv.appendChild(div1); // append it
}
if(length>this.LENGTH_TO_SPLIT){
var div2sbstr=text.substring(this.LENGTH_TO_SPLIT,this.LENGTH_TO_SPLIT*2);
var div2=document.createElement("div");
contentDiv.appendChild(div2);
}
if(length>this.LENGTH_TO_SPLIT*2){
var div3sbstr=text.substring(this.LENGTH_TO_SPLIT*2,this.LENGTH_TO_SPLIT*3);
var div3=document.createElement("div");
contentDiv.appendChild(div3);
}
}
You could use an unordered list with negative margins.
<ul>
<li class="col1">Eggs</li>
<li class="col1">Ham<li>
<li class="col2 top">Bread<li>
<li class="col2">Butter<li>
<li class="col3 top">Flour<li>
<li class="col3">Cream</li>
</ul>
ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */
All code taken from Smashing Magazine - The Definitive Guide to Using Negative Margins.
