Solution for displaying table cells in IE 7 and lower using Javascript

Question

Solution for displaying table cells in IE 7 and lower using Javascript

Lately, the community has come up with some amazing tools to push early versions of IE beyond their intended capabilities. For example, using multi-column CSS selectors. However, I've been struggling to find a JavaScript that can be loaded conditionally in IE lte 7 to convert multi-column layouts that utilize display: table-cell.

Does anyone have knowledge of such a script?

<div id="sidebar">
   <ul id="main_nav">
      <li><a href="about_us.php">ABOUT US</a></li>
   </ul>
</div> <!--end of sidebar-->

<div id="content">
   <div id="main_content">
     <h1>Header</h1>
     <p>Page Content</p>
   </div> <!--end of main_content-->

   <div class="aside_info">
      <h2>Side Info</h2>         
   </div>
</div> <!--end of content-->

We have 3 columns - #side_bar and #content serve as columns, while within #content there is #main_content and #aside_info. This setup allows for a 3 column layout on pages with an #aside_info div, but defaults to two columns on other pages.

If you happen to know of a script that could convert this layout to tables for outdated browsers, please do share!

Thank you,

Daniel

javascript jquery css

Answer 1

Answer №1

Transforming this task into a simple process with the power of jQuery:

$('<table><tr><td></td><td></td><td></td></tr></table>')
    .find('td')
        .eq(0)
            .append( $('#sidebar') )
            .end()
        .eq(1)
            .append( $('#main_content') )
            .end()
        .eq(2)
            .append( $('.aside_info') )
            .end()
        .end()
    .appendTo( $('#content') );

I trust this guidance proves useful!

Answer 2

Transforming this task into a simple process with the power of jQuery:

$('<table><tr><td></td><td></td><td></td></tr></table>')
    .find('td')
        .eq(0)
            .append( $('#sidebar') )
            .end()
        .eq(1)
            .append( $('#main_content') )
            .end()
        .eq(2)
            .append( $('.aside_info') )
            .end()
        .end()
    .appendTo( $('#content') );

I trust this guidance proves useful!

Answer 3

Answer №2

After working on a solution for this issue, I returned to find that jimbojw had devised a much more elegant and refined solution. I'm giving him credit because the simplicity of his approach is truly appealing (note to self: brush up on jQuery skills!). Nonetheless, I'm sharing my solution here in case jQuery isn't an option, testing for IE7 is unfamiliar territory, or if an alternative approach is needed:

<div id="sidebar">
   <ul id="main_nav">
      <li><a href="about_us.php">ABOUT US</a></li>
   </ul>
</div> <!--end of sidebar-->

<div id="content">
   <div id="main_content">
     <h1>Header</h1>
     <p>Page Content</p>
   </div> <!--end of main_content-->

   <div class="aside_info">
      <h2>Side Info</h2>         
   </div>
</div> <!--end of content-->

<script type="text/javascript">
    // Check for IE version
    var ieversion = 0;
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ 
        ieversion = new Number(RegExp.$1)
    }   

    if(ieversion > 0 && ieversion < 8)
    {
        // Locate existing DIV elements
        var sidebarDiv = document.getElementById("sidebar");
        var mainContentDiv = document.getElementById("main_content");
        var contentDiv = document.getElementById("content");

        // Create table structure to replace them
        var tableElement = document.createElement("table");
        var tbodyElement = document.createElement("tbody");
        var trElement = document.createElement("tr");
        var sidebarTd = document.createElement("td");
        sidebarTd.id = "sidebar";
        var mainContentTd = document.createElement("td");
        mainContentTd.id = "main_content";
        var asideInfoTd = document.createElement("td");

        // Clone child nodes from DIVs and add them to appropriate TDs, then include TDs in TR.
        for(var i=0;i<sidebarDiv.childNodes.length;i++)
        {
            sidebarTd.appendChild(sidebarDiv.childNodes[i].cloneNode(true));
        }
        trElement.appendChild(sidebarTd);

        for(var i=0;i<mainContentDiv.childNodes.length;i++)
        {
            mainContentTd.appendChild(mainContentDiv.childNodes[i].cloneNode(true));
        }
        trElement.appendChild(mainContentTd);
        mainContentDiv.parentNode.removeChild(mainContentDiv);

        var contentChildDivs = contentDiv.getElementsByTagName("div");
        for(var i=0;i<contentChildDivs.length;i++)
        {
            if(contentChildDivs[i].className.indexOf("aside_info") > -1)
            {
                asideInfoTd.appendChild(contentChildDivs[i].cloneNode(true));
            }
        }
        // Only add aside info if available
        if(asideInfoTd.childNodes.length > 0)
        {
            trElement.appendChild(asideInfoTd);
        }

        // Finalize table assembly
        tbodyElement.appendChild(trElement);
        tableElement.appendChild(tbodyElement);

        // Remove current content div and replace sidebar with new table containing 2-3 columns.
        contentDiv.parentNode.removeChild(contentDiv);
        sidebarDiv.parentNode.replaceChild(tableElement, sidebarDiv);
    }
</script>

Answer 4

After working on a solution for this issue, I returned to find that jimbojw had devised a much more elegant and refined solution. I'm giving him credit because the simplicity of his approach is truly appealing (note to self: brush up on jQuery skills!). Nonetheless, I'm sharing my solution here in case jQuery isn't an option, testing for IE7 is unfamiliar territory, or if an alternative approach is needed:

<div id="sidebar">
   <ul id="main_nav">
      <li><a href="about_us.php">ABOUT US</a></li>
   </ul>
</div> <!--end of sidebar-->

<div id="content">
   <div id="main_content">
     <h1>Header</h1>
     <p>Page Content</p>
   </div> <!--end of main_content-->

   <div class="aside_info">
      <h2>Side Info</h2>         
   </div>
</div> <!--end of content-->

<script type="text/javascript">
    // Check for IE version
    var ieversion = 0;
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ 
        ieversion = new Number(RegExp.$1)
    }   

    if(ieversion > 0 && ieversion < 8)
    {
        // Locate existing DIV elements
        var sidebarDiv = document.getElementById("sidebar");
        var mainContentDiv = document.getElementById("main_content");
        var contentDiv = document.getElementById("content");

        // Create table structure to replace them
        var tableElement = document.createElement("table");
        var tbodyElement = document.createElement("tbody");
        var trElement = document.createElement("tr");
        var sidebarTd = document.createElement("td");
        sidebarTd.id = "sidebar";
        var mainContentTd = document.createElement("td");
        mainContentTd.id = "main_content";
        var asideInfoTd = document.createElement("td");

        // Clone child nodes from DIVs and add them to appropriate TDs, then include TDs in TR.
        for(var i=0;i<sidebarDiv.childNodes.length;i++)
        {
            sidebarTd.appendChild(sidebarDiv.childNodes[i].cloneNode(true));
        }
        trElement.appendChild(sidebarTd);

        for(var i=0;i<mainContentDiv.childNodes.length;i++)
        {
            mainContentTd.appendChild(mainContentDiv.childNodes[i].cloneNode(true));
        }
        trElement.appendChild(mainContentTd);
        mainContentDiv.parentNode.removeChild(mainContentDiv);

        var contentChildDivs = contentDiv.getElementsByTagName("div");
        for(var i=0;i<contentChildDivs.length;i++)
        {
            if(contentChildDivs[i].className.indexOf("aside_info") > -1)
            {
                asideInfoTd.appendChild(contentChildDivs[i].cloneNode(true));
            }
        }
        // Only add aside info if available
        if(asideInfoTd.childNodes.length > 0)
        {
            trElement.appendChild(asideInfoTd);
        }

        // Finalize table assembly
        tbodyElement.appendChild(trElement);
        tableElement.appendChild(tbodyElement);

        // Remove current content div and replace sidebar with new table containing 2-3 columns.
        contentDiv.parentNode.removeChild(contentDiv);
        sidebarDiv.parentNode.replaceChild(tableElement, sidebarDiv);
    }
</script>

Solution for displaying table cells in IE 7 and lower using Javascript

Answer №1

Answer №2

Similar questions

Interpolating UV is not allowed: 'flat': Using a reserved word in an illegal manner

A method for enabling a stationary, fluctuating height object to occupy area

What is the process for opening and populating dialogs from dynamically mapped cards?

Having trouble with showing dynamic data in column2 of my HTML layout, and the alignment doesn't look quite right in HTML

The significance of the "$=" or "?=" symbols in lit-element illustrations

Take a sequence of multiple words and combine them into a single string with hyphens in between

Attempting to replicate the action of pressing a button using Greasemonkey

My media queries refuse to cooperate until I add the magical "!important" declaration

Asynchronous requests in Node.js within an Array.forEach loop not finishing execution prior to writing a JSON file

What is the most efficient way to retrieve key pair values of separate elements in an array with just one API request?

Whenever I implement JavaScript validation on my HTML page, it causes the page to become un

Using TypeScript, you can pass an object property name as a function argument while ensuring the type is

Tips for eliminating the pesky "ghost" line that appears in your coded HTML email

Accessing an array outside of an Ajax call that was initiated within a success callback

What causes my input field to lose focus in React.js after typing just one character?

Ways to swap webpack-dev-server for alternative servers such as express or apache

Retrieve the HTML code from a webpage on a different domain

Setting model value in Angular 2 and 4 from loop index

Accessing a distinct element of e.parameter

I'm struggling to make my div display inline