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

Having issues with passing data correctly in a jQuery AJAX PHP login system

Is there a way to print an HTML page in Landscape mode within my Vue.js project?

Guide to incorporating JSON data into HTML through JavaScript

Extracting data from websites: How to gather information from dynamic HTML elements

What is the best way to eliminate specific elements from an array of objects in MongoDB aggregate based on a condition?

How can we format a number to match the Brazilian number system while still maintaining its ability to be used in calculations?

How to use CSS to insert a line break after the fourth child in a

The function '.save' is not recognized by Mongoose

Encountering a discord bot malfunction while on my Ubuntu server

Creating a ToggleButton in C#Is a Togglebutton the

The surprising margins that Bootstrap sneaks into columns

Analyzing and swapping objects within two arrays

Encountering a parse error when parsing JSON using getJSON

Looking for an alternative to document.querySelectorAll?

Send a string to the controller through an AJAX request

Issue with Express/Node.js route unable to access key values within an object

Troubleshooting CSS issues in a Docker container running a VueJs project

Can an ID and a "<?php echo ''.$variable.'' ?>" be included in the same input or video tag?

Utilizing References in React Components

The website does not display properly on larger screens, while showing a scrollbar on smaller screens