Hide columns if browser width too small

I am trying to create a 3 column table (or something with the same effect) which contains the main content in the middle (2nd) column.  The 1st and 3rd columns are thin to use for advertising.

I need the middle (2nd) column to always have a width of 980px and show in the centre of the screen regardless of browser resolution.

Also, if a browser's width is smaller than 1280px then I want to hide the 1st and 3rd columns.
chinatrumpetAsked:
Who is Participating?
 
Ravi KallaTechnology LeadCommented:
Try below code

<center>
<table id='id_of_table' border="1" width ="100%" style='table-layout:fixed'>
<tr>
	<td>
		one111111111111111111111111111111111111111111
	</td>
	<td width="980">
		two222222222222222222222222222222222222222222
	</td>
	<td>
		three333333333333333333333333333333333333333
	</td>
</tr>
</table>
<script>
	  function show_hide_column(col_no, do_show) {
	    var stl;
	    if (do_show) stl = 'block'
	    else         stl = 'none';

	    var tbl  = document.getElementById('id_of_table');
	    var rows = tbl.getElementsByTagName('tr');

	    for (var row=0; row<rows.length;row++) {
	      var cels = rows[row].getElementsByTagName('td')
	      cels[col_no].style.display=stl;
	    }
	  }

	if (screen.width < 1280)
	{
		show_hide_column(0, false);
		show_hide_column(2, false);
	}

</script>
</center>

Open in new window

0
 
chinatrumpetAuthor Commented:
Thanks, I have just seen your post and have been working on another solution using floating... can you have a look?

Basically the body is like this:
[code]<body>      

<div id="gk_wrapper">

<div id="adsleft"><jdoc:include type="modules" name="adsleft1" /></div>

            <?php $this->loadBlock("gk_header"); ?>
            <?php $this->loadBlock("gk_footer"); ?>

<div id="adsright"><jdoc:include type="modules" name="adsright1" /></div>
            
</div>

</body>[/code]

And the css is like this:
[code]div#gk_wrapper{
      margin: 0 auto;
}
div#adsleft{
      float:left;
      position:relative;
      left:-150px;
      width:128px;
}
div#adsright{
      float:left;
      position:relative;
      left:22px;
}[/code]

It works to some degree but the "gk_header" is loading a step down from the "adsleft", not in-line as I want it to do (I want it in one row).  I think the <div></div> is somehow causing a pagebreak that I don't know how to cancel.  I think the "adsright" also has the same problem.  as it is showing at the footer of the "gk_footer" part.
0
 
chinatrumpetAuthor Commented:
Ravi_Kalla,

I tried your code and it seems to be working to some extent.  However the 3rd column doesn't display when it should and I find problems within the workings of the middle column.

The website is a Joomla one, so the middle column is calling the bulk of the relevant structure etc. and I find that part of it (some of the modules on the left side) doesn't load properly.  I suspect that the function you gave is somehow counting columns within the Joomla section of the table or something and interacting there (even though I am browsing on a 1280px+ browser).

Any ideas?
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
lutrovCommented:
It is impossible to know the ACTUAL browser's width. I take it you mean the highest possible width a user could set their browser to, like when they maximise their window?

But think about it, how do you know your users use maximised windows? I think it's fair to suggest that a fair portion of beginners do that but lots of other people don't.
0
 
chinatrumpetAuthor Commented:
Hmmm, that is a very good comment and a bit worrying as our entire assumption is based on maximised windows.  I am currently going for a width of 1240px (80% of our users have 1280px or more resolutions) as I counted 40px for browser borders.

The main reason I went this way is I am not too worried if users don't see the ads, and don't want the main content to be riddled with ads throughout.  This way I figure if a user has a wider screen (and maximises the window) they will see it and others won't be disadvantaged.

Any idea what % of users maximise for browsing?
0
 
chinatrumpetAuthor Commented:
Anyway, getting back to the topic.  I am now successfully using nested <div> statements to achieve the columns effect.

Can I use the same sort of script above to make <div> statements disappear according to browser resolutions?  Can anyone suggest how to do this?
0
 
lutrovCommented:
> Any idea  what % of users maximise for browsing?                      

While there's been a number of studies, it's difficult to say. This poll, conduced a couple of years back, shows that on average, it's around only %50:

http://www.456bereastreet.com/archive/200704/poll_results_504_of_respondents_maximise_windows/

Over the last twenty years that I've observed computer users, in business and personal usage, I'd say the figure above is about right. What tends to happen is that users start of with maximised windows, but as they get more confident in using their computer, they realise the benefits of not doing so.
0
 
chinatrumpetAuthor Commented:
The tabling solution seemed to work but wasn't fully tested.  I had no solution for the  or CSS question.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.