|
|
|
Question : Displaying SPANS to simulate tb-lr rather than the normal lr-tb way of displaying things.
|
|
|
|
Hello.
I'm building a generic widget which will display a set of checkboxes and labels in a fluid grid.
The end user will be able to control the size of the container, add any styling to the elements, etc.
The widget accepts a set of id=label pairings and displays them as ... 1:
2:
3:
4:
| <span id="S_{$a_Data['UniqueID']}">
<input type="checkbox" name="cbGrid[]" value="{$a_Data['UniqueID']}" id="C_{$a_Data['UniqueID']}" />
<label for="C_{$a_Data['UniqueID']}">{$a_Data['Label']}</label>
</span>
|
Nothing too complicated.
I've got all the auto sizing done, so no matter what size the labels are (within reason - short labels sub 50 chars), the checkboxes all line up.
In the code snippet attached, I've got a static example. The fully dynamic version is not yet optimized, but fully works in IE8Standards, Firefox and Chrome. It is just a little slow in IE and FF.
What I'd like to do is to reorganize the SPANs so that instead of reading left-to-right, top-to-bottom, they read top-to-bottom, left-to-right.
The 2 main problems I have are:
1 - The number of elements is unknown until runtime
The widget includes an AJAX element to retrieve the list of ids and labels from a database. The list can be any data to which there is a suitable server side responder.
2 - The number of columns is unknown until runtime
The number of columns is determined, at runtime, by the width of the container and the maximum width of the text, taking into account border, margin and padding.
So, I'm really looking for 2 things.
1 - What algorithm can I use to allow me to sort 1-n items into 1-m columns such that the last row contains any left overs and that columns are filled first.
2 - Can I do this in JS by just applying positioning?
OOI, the experimental CSS3 column-count (and associated rules) would seem to offer some hope here. If they worked.
-moz-column-count & -webkit-column-count both seem to be imperfect at the moment. And it excludes anything in IE.
For the example data, the output should look like ...
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
| AJDDQVIRXB GCVCSZUAXVSSFDOXF LYMWLFUHDCSOGTDIVU QEDFDVCSRLPM WMNVUPCDXEM
AJRWJTWTIPBGUBQ GFGCXSWYEQJKRE MBHTO QJMCOFZBGET WNJSVVICXUSXL
AMIXMKEZGM GITDBCVTAHVVFTLAMZG MNORWCWC QXCIVWCGXPKTY WNSXUJLQUSLLFMF
APYYSBXVPPWVIRDSQSYI GJAMXBZKSO MOYM QYFJJMXMTCPDQD WQF
AQN GONTINDHSIEMBS MWPZ RLZOOGHJNVZDEFKHT WUGBNXILWXOKM
AVAXA GYVSKFC MWTCCMNWCNSZJEZSJ RQXFJCZGYEWPDRTXZH WYDDXRWDQPH
AVGQHKAIAYUGXEWQ HABDVNDI MZTBJSURMAPNP RSMKDDWUOSYAWEHEGC XEW
BJKJFJYFETPXVDFMHH HKZ NDPRBCDU SDFJXJDOXTXTBIBCO XLUAQ
BKTYJGMNQXXAAA HNDHYSZBYZFGT NEYAGJHGVACZ SLNUYAL XQABOUIJPWRZDTZEXI
BKUIQXHFJ HOBINLMPWRWIDVBIOGR NGVIWTZSLVWN SWOHQPGQNDLLEBAZ XUGSSAUBZZI
BMEHSWZISSBZ HRWETYNHFGXJN NMZRZXDFDJU TOE XYKAWQEQMYDU
BVPMKLOFBGLJSIB IFHNXGDGXXRDTEVIIJ NOWPKIXJHS TROXMCROFXKZ XZOCDZFIVHTGNPAA
CRQMMXAVSIYWKSLPB JOVFCFHUQBSRV PAPDJLVIVGBESBK TVGIMKBYRW YGWZCLJQFPI
CVEXAVCYQWY JPO PBPQHIBFMIBNJY UANFZTVBBZCB YJBSJEJX
EAWAYLHZ JQSZDG POAOXFGNZBW UJKACYFKSBSPIA YLRJAFKTAQYZRJIJXXQ
EBIOVEMTA JYWXVQMLMVTWZIBSE PQGSIPWFDMHOVY UOEPPBAZMRXUY YPGXRXKDVFZYAUZYH
ENGRPJGWDYCW KEL PREOINTJWV UZZOTOXRFPXEHFMQ YRBDXVWHEQUIT
ENXUDZWUF LFKXNDOL PTKKXCUEFGFAB VETKKOWMZLAP YRLXQVQCWEKIAYG
FJJMQKRMSVIHNAQXXW LLCNKIYRLPSYAOJM PUQYWOXUUZZMZ VUNNYXLNZUYLV YXYYDTZYGURC
FSKNGNNKQ LSFXIDXYLHBW PZQKHHVCBF VXBICHZ YZALVXZFKPKFZE
FVCXPZLXYPE LXGVRMAP QCFZRB WKOTS ZMDLCZBLCWZKD
FWG LXVTZEBPY QDKSFUMJQTPK WLQYOETGJ ZMFDWTXAJPMFBO
GAEUPSNZQRGWLYIF
|
Any ideas, known examples of this, etc.
Really. Anything considered.
Regards,
Richard Quadling.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Test : Static Label Grid</title>
<style type="text/css">
body,
html
{
background-color : rgb( 23, 23, 23);
border : 0;
color : rgb(255, 255, 255);
font : 100% / 1.25 Verdana, "Century Gothic", Calibri, "Lucida Grande", Arial, Helvetica, sans-serif;
margin : 0;
padding : 0;
}
body
{
margin : 10px;
}
#cbGrid
{
background-color : rgb(216, 229, 241);
border : 3px solid rgb( 55, 96, 145);
color : rgb(0, 0, 0);
float : right;
padding : 0;
margin : 5px;
width : 85%;
}
#cbGrid h1
{
border-bottom : 1px solid black;
border-radius : 0;
font-size : 2em;
font-weight : normal;
letter-spacing : 01px;
margin : 0 0 5px;
padding : 0;
text-align : center;
text-shadow : none;
white-space : normal;
}
#cbGrid input[type=checkbox]
{
border : 0;
margin : 0 5px;
padding : 0;
}
#cbGrid label
{
font-size : 8pt;
padding-bottom : 0px;
padding-right : 5px;
position : relative;
text-shadow : none;
top : -2px;
}
#cbGrid span
{
float : left;
margin-left : 1px;
margin-right : 1px;
min-width : 201px;
padding : 0 4.1px;
white-space : nowrap;
}
#cbGrid span:hover
{
background-color : rgb(184, 197, 209);
cursor : pointer;
}
</style>
</head>
<body>
<div>
<h1>Test : Static Label Grid</h1>
<p>
I am trying to create a pseudo grid such that the checkboxes all line up based upon the widths of the labels.<br />
These need to be dynamic as the new labels are added every other month or so.
</p>
</div>
<div id="cbGrid">
<h1>Select labels</h1>
<span id="S_37"><input type="checkbox" name="cbGrid[]" value="37" id="C_37" /><label id="L_37" for="C_37">AJDDQVIRXB</label></span>
<span id="S_725"><input type="checkbox" name="cbGrid[]" value="725" id="C_725" /><label id="L_725" for="C_725">AJRWJTWTIPBGUBQ</label></span>
<span id="S_48"><input type="checkbox" name="cbGrid[]" value="48" id="C_48" /><label id="L_48" for="C_48">AMIXMKEZGM</label></span>
<span id="S_759"><input type="checkbox" name="cbGrid[]" value="759" id="C_759" /><label id="L_759" for="C_759">APYYSBXVPPWVIRDSQSYI</label></span>
<span id="S_771"><input type="checkbox" name="cbGrid[]" value="771" id="C_771" /><label id="L_771" for="C_771">AQN</label></span>
<span id="S_90"><input type="checkbox" name="cbGrid[]" value="90" id="C_90" /><label id="L_90" for="C_90">AVAXA</label></span>
<span id="S_75"><input type="checkbox" name="cbGrid[]" value="75" id="C_75" /><label id="L_75" for="C_75">AVGQHKAIAYUGXEWQ</label></span>
<span id="S_737"><input type="checkbox" name="cbGrid[]" value="737" id="C_737" /><label id="L_737" for="C_737">BJKJFJYFETPXVDFMHH</label></span>
<span id="S_765"><input type="checkbox" name="cbGrid[]" value="765" id="C_765" /><label id="L_765" for="C_765">BKTYJGMNQXXAAA</label></span>
<span id="S_79"><input type="checkbox" name="cbGrid[]" value="79" id="C_79" /><label id="L_79" for="C_79">BKUIQXHFJ</label></span>
<span id="S_13"><input type="checkbox" name="cbGrid[]" value="13" id="C_13" /><label id="L_13" for="C_13">BMEHSWZISSBZ</label></span>
<span id="S_30"><input type="checkbox" name="cbGrid[]" value="30" id="C_30" /><label id="L_30" for="C_30">BVPMKLOFBGLJSIB</label></span>
<span id="S_745"><input type="checkbox" name="cbGrid[]" value="745" id="C_745" /><label id="L_745" for="C_745">CRQMMXAVSIYWKSLPB</label></span>
<span id="S_752"><input type="checkbox" name="cbGrid[]" value="752" id="C_752" /><label id="L_752" for="C_752">CVEXAVCYQWY</label></span>
<span id="S_726"><input type="checkbox" name="cbGrid[]" value="726" id="C_726" /><label id="L_726" for="C_726">EAWAYLHZ</label></span>
<span id="S_758"><input type="checkbox" name="cbGrid[]" value="758" id="C_758" /><label id="L_758" for="C_758">EBIOVEMTA</label></span>
<span id="S_756"><input type="checkbox" name="cbGrid[]" value="756" id="C_756" /><label id="L_756" for="C_756">ENGRPJGWDYCW</label></span>
<span id="S_63"><input type="checkbox" name="cbGrid[]" value="63" id="C_63" /><label id="L_63" for="C_63">ENXUDZWUF</label></span>
<span id="S_62"><input type="checkbox" name="cbGrid[]" value="62" id="C_62" /><label id="L_62" for="C_62">FJJMQKRMSVIHNAQXXW</label></span>
<span id="S_1"><input type="checkbox" name="cbGrid[]" value="1" id="C_1" /><label id="L_1" for="C_1">FSKNGNNKQ</label></span>
<span id="S_82"><input type="checkbox" name="cbGrid[]" value="82" id="C_82" /><label id="L_82" for="C_82">FVCXPZLXYPE</label></span>
<span id="S_772"><input type="checkbox" name="cbGrid[]" value="772" id="C_772" /><label id="L_772" for="C_772">FWG</label></span>
<span id="S_738"><input type="checkbox" name="cbGrid[]" value="738" id="C_738" /><label id="L_738" for="C_738">GAEUPSNZQRGWLYIF</label></span>
<span id="S_67"><input type="checkbox" name="cbGrid[]" value="67" id="C_67" /><label id="L_67" for="C_67">GCVCSZUAXVSSFDOXF</label></span>
<span id="S_60"><input type="checkbox" name="cbGrid[]" value="60" id="C_60" /><label id="L_60" for="C_60">GFGCXSWYEQJKRE</label></span>
<span id="S_71"><input type="checkbox" name="cbGrid[]" value="71" id="C_71" /><label id="L_71" for="C_71">GITDBCVTAHVVFTLAMZG</label></span>
<span id="S_18"><input type="checkbox" name="cbGrid[]" value="18" id="C_18" /><label id="L_18" for="C_18">GJAMXBZKSO</label></span>
<span id="S_88"><input type="checkbox" name="cbGrid[]" value="88" id="C_88" /><label id="L_88" for="C_88">GONTINDHSIEMBS</label></span>
<span id="S_77"><input type="checkbox" name="cbGrid[]" value="77" id="C_77" /><label id="L_77" for="C_77">GYVSKFC</label></span>
<span id="S_76"><input type="checkbox" name="cbGrid[]" value="76" id="C_76" /><label id="L_76" for="C_76">HABDVNDI</label></span>
<span id="S_730"><input type="checkbox" name="cbGrid[]" value="730" id="C_730" /><label id="L_730" for="C_730">HKZ</label></span>
<span id="S_747"><input type="checkbox" name="cbGrid[]" value="747" id="C_747" /><label id="L_747" for="C_747">HNDHYSZBYZFGT</label></span>
<span id="S_68"><input type="checkbox" name="cbGrid[]" value="68" id="C_68" /><label id="L_68" for="C_68">HOBINLMPWRWIDVBIOGR</label></span>
<span id="S_41"><input type="checkbox" name="cbGrid[]" value="41" id="C_41" /><label id="L_41" for="C_41">HRWETYNHFGXJN</label></span>
<span id="S_44"><input type="checkbox" name="cbGrid[]" value="44" id="C_44" /><label id="L_44" for="C_44">IFHNXGDGXXRDTEVIIJ</label></span>
<span id="S_81"><input type="checkbox" name="cbGrid[]" value="81" id="C_81" /><label id="L_81" for="C_81">JOVFCFHUQBSRV</label></span>
<span id="S_43"><input type="checkbox" name="cbGrid[]" value="43" id="C_43" /><label id="L_43" for="C_43">JPO</label></span>
<span id="S_39"><input type="checkbox" name="cbGrid[]" value="39" id="C_39" /><label id="L_39" for="C_39">JQSZDG</label></span>
<span id="S_56"><input type="checkbox" name="cbGrid[]" value="56" id="C_56" /><label id="L_56" for="C_56">JYWXVQMLMVTWZIBSE</label></span>
<span id="S_74"><input type="checkbox" name="cbGrid[]" value="74" id="C_74" /><label id="L_74" for="C_74">KEL</label></span>
<span id="S_721"><input type="checkbox" name="cbGrid[]" value="721" id="C_721" /><label id="L_721" for="C_721">LFKXNDOL</label></span>
<span id="S_28"><input type="checkbox" name="cbGrid[]" value="28" id="C_28" /><label id="L_28" for="C_28">LLCNKIYRLPSYAOJM</label></span>
<span id="S_72"><input type="checkbox" name="cbGrid[]" value="72" id="C_72" /><label id="L_72" for="C_72">LSFXIDXYLHBW</label></span>
<span id="S_12"><input type="checkbox" name="cbGrid[]" value="12" id="C_12" /><label id="L_12" for="C_12">LXGVRMAP</label></span>
<span id="S_23"><input type="checkbox" name="cbGrid[]" value="23" id="C_23" /><label id="L_23" for="C_23">LXVTZEBPY</label></span>
<span id="S_742"><input type="checkbox" name="cbGrid[]" value="742" id="C_742" /><label id="L_742" for="C_742">LYMWLFUHDCSOGTDIVU</label></span>
<span id="S_739"><input type="checkbox" name="cbGrid[]" value="739" id="C_739" /><label id="L_739" for="C_739">MBHTO</label></span>
<span id="S_58"><input type="checkbox" name="cbGrid[]" value="58" id="C_58" /><label id="L_58" for="C_58">MNORWCWC</label></span>
<span id="S_766"><input type="checkbox" name="cbGrid[]" value="766" id="C_766" /><label id="L_766" for="C_766">MOYM</label></span>
<span id="S_15"><input type="checkbox" name="cbGrid[]" value="15" id="C_15" /><label id="L_15" for="C_15">MWPZ</label></span>
<span id="S_769"><input type="checkbox" name="cbGrid[]" value="769" id="C_769" /><label id="L_769" for="C_769">MWTCCMNWCNSZJEZSJ</label></span>
<span id="S_760"><input type="checkbox" name="cbGrid[]" value="760" id="C_760" /><label id="L_760" for="C_760">MZTBJSURMAPNP</label></span>
<span id="S_748"><input type="checkbox" name="cbGrid[]" value="748" id="C_748" /><label id="L_748" for="C_748">NDPRBCDU</label></span>
<span id="S_26"><input type="checkbox" name="cbGrid[]" value="26" id="C_26" /><label id="L_26" for="C_26">NEYAGJHGVACZ</label></span>
<span id="S_749"><input type="checkbox" name="cbGrid[]" value="749" id="C_749" /><label id="L_749" for="C_749">NGVIWTZSLVWN</label></span>
<span id="S_712"><input type="checkbox" name="cbGrid[]" value="712" id="C_712" /><label id="L_712" for="C_712">NMZRZXDFDJU</label></span>
<span id="S_753"><input type="checkbox" name="cbGrid[]" value="753" id="C_753" /><label id="L_753" for="C_753">NOWPKIXJHS</label></span>
<span id="S_69"><input type="checkbox" name="cbGrid[]" value="69" id="C_69" /><label id="L_69" for="C_69">PAPDJLVIVGBESBK</label></span>
<span id="S_85"><input type="checkbox" name="cbGrid[]" value="85" id="C_85" /><label id="L_85" for="C_85">PBPQHIBFMIBNJY</label></span>
<span id="S_761"><input type="checkbox" name="cbGrid[]" value="761" id="C_761" /><label id="L_761" for="C_761">POAOXFGNZBW</label></span>
<span id="S_750"><input type="checkbox" name="cbGrid[]" value="750" id="C_750" /><label id="L_750" for="C_750">PQGSIPWFDMHOVY</label></span>
<span id="S_770"><input type="checkbox" name="cbGrid[]" value="770" id="C_770" /><label id="L_770" for="C_770">PREOINTJWV</label></span>
<span id="S_736"><input type="checkbox" name="cbGrid[]" value="736" id="C_736" /><label id="L_736" for="C_736">PTKKXCUEFGFAB</label></span>
<span id="S_720"><input type="checkbox" name="cbGrid[]" value="720" id="C_720" /><label id="L_720" for="C_720">PUQYWOXUUZZMZ</label></span>
<span id="S_767"><input type="checkbox" name="cbGrid[]" value="767" id="C_767" /><label id="L_767" for="C_767">PZQKHHVCBF</label></span>
<span id="S_38"><input type="checkbox" name="cbGrid[]" value="38" id="C_38" /><label id="L_38" for="C_38">QCFZRB</label></span>
<span id="S_55"><input type="checkbox" name="cbGrid[]" value="55" id="C_55" /><label id="L_55" for="C_55">QDKSFUMJQTPK</label></span>
<span id="S_33"><input type="checkbox" name="cbGrid[]" value="33" id="C_33" /><label id="L_33" for="C_33">QEDFDVCSRLPM</label></span>
<span id="S_42"><input type="checkbox" name="cbGrid[]" value="42" id="C_42" /><label id="L_42" for="C_42">QJMCOFZBGET</label></span>
<span id="S_66"><input type="checkbox" name="cbGrid[]" value="66" id="C_66" /><label id="L_66" for="C_66">QXCIVWCGXPKTY</label></span>
<span id="S_86"><input type="checkbox" name="cbGrid[]" value="86" id="C_86" /><label id="L_86" for="C_86">QYFJJMXMTCPDQD</label></span>
<span id="S_762"><input type="checkbox" name="cbGrid[]" value="762" id="C_762" /><label id="L_762" for="C_762">RLZOOGHJNVZDEFKHT</label></span>
<span id="S_751"><input type="checkbox" name="cbGrid[]" value="751" id="C_751" /><label id="L_751" for="C_751">RQXFJCZGYEWPDRTXZH</label></span>
<span id="S_24"><input type="checkbox" name="cbGrid[]" value="24" id="C_24" /><label id="L_24" for="C_24">RSMKDDWUOSYAWEHEGC</label></span>
<span id="S_723"><input type="checkbox" name="cbGrid[]" value="723" id="C_723" /><label id="L_723" for="C_723">SDFJXJDOXTXTBIBCO</label></span>
<span id="S_734"><input type="checkbox" name="cbGrid[]" value="734" id="C_734" /><label id="L_734" for="C_734">SLNUYAL</label></span>
<span id="S_729"><input type="checkbox" name="cbGrid[]" value="729" id="C_729" /><label id="L_729" for="C_729">SWOHQPGQNDLLEBAZ</label></span>
<span id="S_78"><input type="checkbox" name="cbGrid[]" value="78" id="C_78" /><label id="L_78" for="C_78">TOE</label></span>
<span id="S_34"><input type="checkbox" name="cbGrid[]" value="34" id="C_34" /><label id="L_34" for="C_34">TROXMCROFXKZ</label></span>
<span id="S_727"><input type="checkbox" name="cbGrid[]" value="727" id="C_727" /><label id="L_727" for="C_727">TVGIMKBYRW</label></span>
<span id="S_73"><input type="checkbox" name="cbGrid[]" value="73" id="C_73" /><label id="L_73" for="C_73">UANFZTVBBZCB</label></span>
<span id="S_65"><input type="checkbox" name="cbGrid[]" value="65" id="C_65" /><label id="L_65" for="C_65">UJKACYFKSBSPIA</label></span>
<span id="S_735"><input type="checkbox" name="cbGrid[]" value="735" id="C_735" /><label id="L_735" for="C_735">UOEPPBAZMRXUY</label></span>
<span id="S_70"><input type="checkbox" name="cbGrid[]" value="70" id="C_70" /><label id="L_70" for="C_70">UZZOTOXRFPXEHFMQ</label></span>
<span id="S_11"><input type="checkbox" name="cbGrid[]" value="11" id="C_11" /><label id="L_11" for="C_11">VETKKOWMZLAP</label></span>
<span id="S_614"><input type="checkbox" name="cbGrid[]" value="614" id="C_614" /><label id="L_614" for="C_614">VUNNYXLNZUYLV</label></span>
<span id="S_29"><input type="checkbox" name="cbGrid[]" value="29" id="C_29" /><label id="L_29" for="C_29">VXBICHZ</label></span>
<span id="S_20"><input type="checkbox" name="cbGrid[]" value="20" id="C_20" /><label id="L_20" for="C_20">WKOTS</label></span>
<span id="S_35"><input type="checkbox" name="cbGrid[]" value="35" id="C_35" /><label id="L_35" for="C_35">WLQYOETGJ</label></span>
<span id="S_755"><input type="checkbox" name="cbGrid[]" value="755" id="C_755" /><label id="L_755" for="C_755">WMNVUPCDXEM</label></span>
<span id="S_54"><input type="checkbox" name="cbGrid[]" value="54" id="C_54" /><label id="L_54" for="C_54">WNJSVVICXUSXL</label></span>
<span id="S_84"><input type="checkbox" name="cbGrid[]" value="84" id="C_84" /><label id="L_84" for="C_84">WNSXUJLQUSLLFMF</label></span>
<span id="S_724"><input type="checkbox" name="cbGrid[]" value="724" id="C_724" /><label id="L_724" for="C_724">WQF</label></span>
<span id="S_757"><input type="checkbox" name="cbGrid[]" value="757" id="C_757" /><label id="L_757" for="C_757">WUGBNXILWXOKM</label></span>
<span id="S_19"><input type="checkbox" name="cbGrid[]" value="19" id="C_19" /><label id="L_19" for="C_19">WYDDXRWDQPH</label></span>
<span id="S_80"><input type="checkbox" name="cbGrid[]" value="80" id="C_80" /><label id="L_80" for="C_80">XEW</label></span>
<span id="S_14"><input type="checkbox" name="cbGrid[]" value="14" id="C_14" /><label id="L_14" for="C_14">XLUAQ</label></span>
<span id="S_746"><input type="checkbox" name="cbGrid[]" value="746" id="C_746" /><label id="L_746" for="C_746">XQABOUIJPWRZDTZEXI</label></span>
<span id="S_718"><input type="checkbox" name="cbGrid[]" value="718" id="C_718" /><label id="L_718" for="C_718">XUGSSAUBZZI</label></span>
<span id="S_713"><input type="checkbox" name="cbGrid[]" value="713" id="C_713" /><label id="L_713" for="C_713">XYKAWQEQMYDU</label></span>
<span id="S_17"><input type="checkbox" name="cbGrid[]" value="17" id="C_17" /><label id="L_17" for="C_17">XZOCDZFIVHTGNPAA</label></span>
<span id="S_45"><input type="checkbox" name="cbGrid[]" value="45" id="C_45" /><label id="L_45" for="C_45">YGWZCLJQFPI</label></span>
<span id="S_719"><input type="checkbox" name="cbGrid[]" value="719" id="C_719" /><label id="L_719" for="C_719">YJBSJEJX</label></span>
<span id="S_92"><input type="checkbox" name="cbGrid[]" value="92" id="C_92" /><label id="L_92" for="C_92">YLRJAFKTAQYZRJIJXXQ</label></span>
<span id="S_659"><input type="checkbox" name="cbGrid[]" value="659" id="C_659" /><label id="L_659" for="C_659">YPGXRXKDVFZYAUZYH</label></span>
<span id="S_768"><input type="checkbox" name="cbGrid[]" value="768" id="C_768" /><label id="L_768" for="C_768">YRBDXVWHEQUIT</label></span>
<span id="S_40"><input type="checkbox" name="cbGrid[]" value="40" id="C_40" /><label id="L_40" for="C_40">YRLXQVQCWEKIAYG</label></span>
<span id="S_64"><input type="checkbox" name="cbGrid[]" value="64" id="C_64" /><label id="L_64" for="C_64">YXYYDTZYGURC</label></span>
<span id="S_754"><input type="checkbox" name="cbGrid[]" value="754" id="C_754" /><label id="L_754" for="C_754">YZALVXZFKPKFZE</label></span>
<span id="S_59"><input type="checkbox" name="cbGrid[]" value="59" id="C_59" /><label id="L_59" for="C_59">ZMDLCZBLCWZKD</label></span>
<span id="S_714"><input type="checkbox" name="cbGrid[]" value="714" id="C_714" /><label id="L_714" for="C_714">ZMFDWTXAJPMFBO</label></span></div>
</body>
</html>
|
|
|
|
|
Answer : Displaying SPANS to simulate tb-lr rather than the normal lr-tb way of displaying things.
|
|
|
|
|
The following (inelegant) code is untested, but it should get you started.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
|
Given the number of words and columns:
var word_count = 111;
var cols = 5;
var extra = 0;
var spillage = [0,0,0,0,0]; // Same # of elements as # of columns
var rows = parseInt(word_count / cols, 10); // Words per column
var i = 0;
if (rows * cols) !== word_count) {
extra = word_count - (rows * cols); // Leftovers ?
if (extra !== 0) {
rows += 1; // Need another row for leftovers
}
}
/*
You know the # of entries per column and you can split the "word_list" on spaces
(or tab or whatever) and loop through the words, building your <SPAN/> elements
*/
var words = wordlist.split(' '); // Create array of words
var span = [];
for (var i = 0; i < cols; i++) {
for (var j = 0; j < rows; j++) {
// Create <SPAN/>
span[(i + (j * cols)] = "<span>" + (i + (j * cols);
}
}
/*
"span" now holds the <SPAN/> elements in columnar order:
[
0, 24, 46, 68, 90,
1, 25, 47, 69, 91,
2, 26, 48, 70, 92,
...
22, 45, 67, 89,111
23 -- -- -- --
]
and you can add them to the DOM with a simple loop
*/
for (i = 0; i < span.length; i += 1) {
document.write(span[i]);
}
|
|
|
|
|
|
|
