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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.