jquery - DIV layout in two column format -
i need show list of categories in 2 column format first column show 1-7 & second column show 7-15 categories
i using asp.net repeater control display categories & comes show in jsfiddle example
asp.net code
<asp:repeater id="rptcategorylist" runat="server" enableviewstate="false" > <itemtemplate> <div class="footer-menu-item"> <asp:hyperlink id="hylnkarticle" cssclass="footer-menu-links" tooltip ='<%# getcategoryname(eval("name"))%>' navigateurl='<%#getcategoryurl(eval("url") %>' runat="server" borderwidth="0"> <asp:label id="lbltitle" text='<%# getcategoryname(eval("name"))%>' runat="server" ></asp:label> </asp:hyperlink> </div> </itemtemplate> </asp:repeater> <!-- categories --> my desired output should show as
1 8 2 9 3 10 4 11 5 12 6 13 7 14 is format possible using css or 1 has use jquery, dont want in code-behind using literal control & our design requirement might in near future. iso want achieve using css or jquery.
i tried different css properties didn't work
html code sample
<div class="footer-content-column-one"> <!-- categories --> <div class="footer-mt">categories</div> <div class="footer-menu-item">1</div> <div class="footer-menu-item">2</div> <div class="footer-menu-item">3</div> <div class="footer-menu-item">4</div> <div class="footer-menu-item">5</div> <div class="footer-menu-item">6</div> <div class="footer-menu-item">7</div> <div class="footer-menu-item">8</div> <div class="footer-menu-item">9</div> <div class="footer-menu-item">10</div> <div class="footer-menu-item">11</div> <div class="footer-menu-item">12</div> <div class="footer-menu-item">13</div> <div class="footer-menu-item">14</div> <!-- categories --> </div>
see if fiddle suffices : http://jsfiddle.net/g7uk2/5/ used typical jquery manipulation (and added border visual hint):
var fi = $(".footer-menu-item"); fi.remove(); for(var i=0;i<7;i++){ fi.eq(i).css("clear","both").appendto(".footer-content-column-one"); fi.eq(i+7).appendto(".footer-content-column-one"); }
Comments
Post a Comment