Jquery plugin called Columnizer does not work properly in IE

Question

I use a jQuery plugin called Columnizer to compose my text and it works fine on firefox, but it probably doesn't work on IE without creating a new column and setting it statically.

http://welcome.totheinter.net/columnizer-jquery-plugin/

With Firefox, it automatically arranges an item in a column

How can we make it work in IE too? I try very hard and just don't work

My html

<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type = "text/javascript" src ="https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js"></script> <script type="text/javascript"> $(function(){ $('h1').addClass('dontend'); $('.wide').columnize({ width : 120, height : 400 }); }); </script> <script style="display:none" type="text/javascript">var Mint=new Object();Mint.save=function() {var now=new Date();var debug=false;if(window.location.hash=='#Mint:Debug'){debug=true;};var path='http://welcome.totheinter.net/mint/?record&key=6a56784248357a3735323031363633316663796c526d';path=path.replace(/^https?:/,window.location.protocol);for(var developer in this) {for(var plugin in this[developer]) {if(this[developer][plugin]&&this[developer][plugin].onsave) {path+=this[developer][plugin].onsave();};};};path+='&'+now.getTime();if(debug){window.open(path+'&debug&errors','MintLiveDebug'+now.getTime());return;};var ie=/*@ cc_on!@ */0;if(!ie&&document.getElementsByTagName&&(document.createElementNS||document.createElement)) {var tag=(document.createElementNS)?document.createElementNS('http://www.w3.org/1999/xhtml','script'):document.createElement('script');tag.type='text/javascript';tag.src=path+'&serve_js';document.getElementsByTagName('head')[0].appendChild(tag);} else if(document.write) {document.write('<'+'script type="text/javascript" src="'+path+'&amp;serve_js"><'+'/script>');};};if(!Mint.SI){Mint.SI=new Object();} Mint.SI.Referrer={onsave:function() {var encoded=0;if(typeof Mint_SI_DocumentTitle=='undefined'){Mint_SI_DocumentTitle=document.title;} else{encoded=1;};var referer=(window.decodeURI)?window.decodeURI(document.referrer):document.referrer;var resource=(window.decodeURI)?window.decodeURI(document.URL):document.URL;return '&referer='+escape(referer)+'&resource='+escape(resource)+'&resource_title='+escape(Mint_SI_DocumentTitle)+'&resource_title_encoded='+encoded;}};Mint.save();</script> <meta charset="utf-8" /> <link rel="stylesheet" href="f.css"> <div class="container"> <div class="wide"> <div class="block"> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello </div><br> <div class="block"> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello </div><br> <div class="block"> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello </div><br> <div class="block"> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello </div><br> <div class="block"> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello </div><br> <div class="block"> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello </div><br> </div></div> 

My css

  .container { background-color: #; height: 300px; width: 700px; } .block { width: 100px; height:150px; background-color: #; margin: 10px; margin-top: 5px; } 

Answer 1

Remove the <div class="block"> and just save the text inside the wide class. This should work, the columnizer plugin will automatically add classes for each block.

For example:

 <div class="container"> <div class="wide"> <p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p> <p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p> </div> </div> 

Columnnizer will automatically split the text into different columns. As below

 <div class="wide" style="width: 2700px;"> <div class="first column" style="width: 300px; float: left;"> <div class="column" style="width: 300px; float: left;"> <div class="column" style="width: 300px; float: left;"> </div> 

New code (paste this code into a text editor and save it as an HTML page and check the HTML page on IE8 and IE7)

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <head> <style> .column *{ padding: 5px; } </style> <script type = "text/javascript" src ="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type = "text/javascript" src ="https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js"></script> <script type="text/javascript"> $(function(){ $('h1').addClass('dontend'); $('.wide').columnize({ width : 300, height : 200 }); }); </script> </head> <body> <div id="wrapper"> <div class="wide"> <h1>Lorem ipsum ne justo</h1> <p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello HelloHello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p> <p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p> <p>Hello hello HellHello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello o hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p> <p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello heHello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello llo Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p> <p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p> <p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p> </div> </div> </body> </html> 

Answer 2

I don’t understand why this works, but it works for me in IE8: open the browser console and it will work.

To do this, load the page, press F12 (open Developer Tools), go to the script tab and then on the Console tab.

Reload the page: it works. Now you can close the developer tool window, and all subsequent downloads will also work.