Solved

How to display data in two columns using <div> using javascript, html?

Posted on 2009-04-10
15
848 Views
Last Modified: 2012-06-22
Hi all,

I am getting the data dynamically. I want to display data in <div> tags in two columns equally. suppose i have 30 links.
I will display first 15 links in first column and last 15 in second column.
Below code is working fine if I use <table> tag.

CHANGE: Problem is that I dont want to use table tag. Would you please convert the below code using <div> tags so that it will display the data in two columns.

Its really urgent. Please convert the below code so that it will just use <div> tags , NO <table>.
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
</head>
 
<body>
 
      
 
 
                <div id="someId">
                  
                     <a href="" style="color:blue; font-size:11pt;"><u>test1 (Supervisor)</u></a>
                 
                 <a href="" style="color:blue; font-size:11pt;"><u>test1 (Supervisor)</u></a>
                    <a href="" style="color:blue; font-size:11pt;"><u>test2 (Supervisor)</u></a>
                    <a href="" style="color:blue; font-size:11pt;"><u>test3 (Supervisor)</u></a>
                    <a href="" style="color:blue; font-size:11pt;"><u>test4 (Supervisor)</u></a>
                   <a href="" style="color:blue; font-size:11pt;"><u>test5 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test6 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test7 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test8 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test9 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test10 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test11 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test12 (Supervisor)</u></a>
                </div>    
 
<script type="text/javascript">
var element=document.getElementById('someId');
var a=element.getElementsByTagName('a');
var table=element.appendChild(document.createElement('table')).insertRow(-1);
var column=[table.insertCell(-1),table.insertCell(-1)];
		
var styleData = 'border:1px solid #000000;font-weight:bold;width:400px;height:300px;';
column[0].style.setAttribute('cssText', styleData);
column[1].style.setAttribute('cssText', styleData);
column[0].style.verticalAlign="top";
column[1].style.verticalAlign="top";
for (var i=0;i<a.length;i++) 
{
column[(i<15)?0:1].appendChild(document.createElement('li')).appendChild(a[0]).appendChild(document.createElement('br'))
}
</script>
 
</body>
 
 
</html>

Open in new window

0
Comment
Question by:Saroj13
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 2
15 Comments
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 24118037
Hi,

have a look at this link. I think it should provide all information needed.

http://www.bombaycrow.com/blog/index.php/2008/02/using-the-tag-to-display-columns-rather-than-tables/
0
 

Author Comment

by:Saroj13
ID: 24118064
I dont know how to create <div> tags in javscript. Above code is using <tables>.

Above code is working fine, but i need all <div> tags. Would you please convert the above javacript code using <div> tags.
I need  to display data in two columns equally in tabular format.

Thanks
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24118352
Well, I would consider having:

A 1 row, 2 cell table, with each cell possibly containing a div.
then, your "cells" (divs) would be side by side...
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:Saroj13
ID: 24118602
Hi Honor,

Would you please make the changes in the belwo code.  Its working fine with < table>. I dont want to use table tag. I would like that to replace with <div> tags. each column contains 15 items. First 15 items are filled in column and next 15 items in second column, columns should fill from top to bottom.

Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
</head>
 
<body>
 
      
 
 
                <div id="someId">
                  
                     <a href="" style="color:blue; font-size:11pt;"><u>test1 (Supervisor)</u></a>
                 
                 <a href="" style="color:blue; font-size:11pt;"><u>test1 (Supervisor)</u></a>
                    <a href="" style="color:blue; font-size:11pt;"><u>test2 (Supervisor)</u></a>
                    <a href="" style="color:blue; font-size:11pt;"><u>test3 (Supervisor)</u></a>
                    <a href="" style="color:blue; font-size:11pt;"><u>test4 (Supervisor)</u></a>
                   <a href="" style="color:blue; font-size:11pt;"><u>test5 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test6 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test7 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test8 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test9 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test10 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test11 (Supervisor)</u></a>
<a href="" style="color:blue; font-size:11pt;"><u>test12 (Supervisor)</u></a>
                </div>    
 
<script type="text/javascript">
var element=document.getElementById('someId');
var a=element.getElementsByTagName('a');
var table=element.appendChild(document.createElement('table')).insertRow(-1);
var column=[table.insertCell(-1),table.insertCell(-1)];
		
var styleData = 'border:1px solid #000000;font-weight:bold;width:400px;height:300px;';
column[0].style.setAttribute('cssText', styleData);
column[1].style.setAttribute('cssText', styleData);
column[0].style.verticalAlign="top";
column[1].style.verticalAlign="top";
for (var i=0;i<a.length;i++) 
{
column[(i<15)?0:1].appendChild(document.createElement('li')).appendChild(a[0]).appendChild(document.createElement('br'))
}
</script>
 
</body>
 
 
</html>

Open in new window

0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 24118661
Well it seems to me that you don't have any problems creating the content, but you want someone to do it for you.
Please excuse me for not doint it for you.

If you can create a table element with: "document.createElement('table')"
Then you can imagine, that you can create a div with: "document.createElement('div')"

If you can add a new element to a parent one using: element.appendChild(newElement)"
Then you can do this with your div too.

If you then have a look at the link I posted ... youre ready to go.

But if you're lucky you're going to finde someone who does it for you.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24119055
Something like this perhaps
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> columns </title>
<script type='text/javascript'>
  function doit() {
    var element = document.getElementById( 'someId' )   // Source div element
    var a       = element.getElementsByTagName( 'a' )   // All anchors within div
    var div     = [ document.createElement( 'div' ), document.createElement( 'div' ) ]
 
    var styleData = 'border:1px solid #000000;font-weight:bold;width:400px;height:300px;'
//  div[ 0 ].style.setAttribute( 'cssText', styleData )
//  div[ 1 ].style.setAttribute( 'cssText', styleData )
 
    var i = 0;
    while ( a.length ) {
      div[ ( i++ < 15 ) ? 0 : 1 ].appendChild( a[ 0 ] ).appendChild( document.createElement( 'br' ) )
    }
    var body = document.getElementsByTagName( 'BODY' )[ 0 ]
    for ( i = 0; i < div.length; i++ ) {
      body.appendChild( document.createElement( 'hr' ) )
      body.appendChild( div[ i ] )
    }
  }
</script>
 
</head>
<body>
<div id='someId'>
  <a href='' style='color:blue; font-size:11pt;'><u>test1 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test2 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test3 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test4 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test5 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test6 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test7 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test8 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test9 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test10 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test11 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test12 (Supervisor)</u></a>
  <a href='' style='color:blue; font-size:11pt;'><u>test13 (Supervisor)</u></a>
</div>
<input type='button' value='Doit' onclick='doit()'>
 
</body>
</html>

Open in new window

0
 

Author Comment

by:Saroj13
ID: 24120865
Thanks, it creates two columns horizontally.

I want two equal columns side by side in one row using <div>
0
 

Author Comment

by:Saroj13
ID: 24120924
Would you please also put bullet points in front of every link using javscript. also align text on the left.

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24122296
Working on it...  It is more challenging than I thought... :-)
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24123056
For which browser(s) must it work?

Note: IE is evil.  :-)
0
 

Author Comment

by:Saroj13
ID: 24123057
only IE.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24123061
What, exactly, do you mean when you say "align text on the left"?

Is an unordered list acceptable?

i.e.,

<div>
  <ul>
    <li><a href='' style='color:blue; font-size:11pt;'><u>test1 (Supervisor)</u></a></li>
...
  </ul>
</div>
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24123064
Chrome, and Firefox are being cooperative, and IE isn't... that's why I asked. :-(
0
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 24123101
This seems to work.  Check it out.

Note: Since there were only 13 links I had 7 put in the first column, and the rest in the second.

To put 15 in the first, change the 7 in line 16, i.e.,

( i++ < 7 )

To 15...

( i++ < 15 )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> columns </title>
<script type='text/javascript'>
  function doit() {
    var element = document.getElementById( 'someId' )   // Source div element
    var a       = element.getElementsByTagName( 'a' )   // All anchors within div
    var div     = [ document.createElement( 'div' ), document.createElement( 'div' ) ]
 
    div[ 0 ].className = 'half'
    div[ 1 ].className = 'half'
 
    var i = 0;
    while ( a.length ) {
      div[ ( i++ < 7 ) ? 0 : 1 ].appendChild( document.createElement( 'li' ) ).appendChild( a[ 0 ] )
    }
 
    var body = document.getElementsByTagName( 'BODY' )[ 0 ]
    body.appendChild( div[ 0 ] )
    body.appendChild( document.createTextNode( '' ) )
    body.appendChild( div[ 1 ] )
  }
</script>
<style type='text/css'>
  .half {
    border:1px solid black;
    display: block;
    float: left;
    font-weight:bold;
    width:400px;
    height:300px;
  }
  .blue {
    color: blue;
    font-size:11pt;
  }
</style>
</head>
<body>
<div id='someId'>
  <a href='' class='blue'><u>test1 (Supervisor)</u></a>
  <a href='' class='blue'><u>test2 (Supervisor)</u></a>
  <a href='' class='blue'><u>test3 (Supervisor)</u></a>
  <a href='' class='blue'><u>test4 (Supervisor)</u></a>
  <a href='' class='blue'><u>test5 (Supervisor)</u></a>
  <a href='' class='blue'><u>test6 (Supervisor)</u></a>
  <a href='' class='blue'><u>test7 (Supervisor)</u></a>
  <a href='' class='blue'><u>test8 (Supervisor)</u></a>
  <a href='' class='blue'><u>test9 (Supervisor)</u></a>
  <a href='' class='blue'><u>test10 (Supervisor)</u></a>
  <a href='' class='blue'><u>test11 (Supervisor)</u></a>
  <a href='' class='blue'><u>test12 (Supervisor)</u></a>
  <a href='' class='blue'><u>test13 (Supervisor)</u></a>
</div>
<input type='button' value='Doit' onclick='doit()'><br>
</body>
</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24123263
Thanks for the grade & points.

Good luck & Happy Easter
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question