Solved

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

Posted on 2009-04-10
15
839 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
  • 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
 

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now