ansaurus

Question

Javascript for CSS style modification inside Google Chrome browser

Answer 1

A:

Here is another approach that might be more stable:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <style type="text/css">

   .MenuHidden #content { padding: 15px 15px 15px 15px; }
   .MenuHidden #out { display: none; }
   .MenuVisible #content { padding: 15px 15px 15px 215px; }
   .MenuVisible #in { display: none; }

   </style>

   <script type="text/javascript">

   function showSideBar(visible) {
      document.body.className = visible ? 'MenuVisible' : 'MenuHidden';
   }

   </script>

</head>

<body class="MenuHidden">

   <div id="header">     
      <div id="out"><a href="#" onclick="showSideBar(false);">Close menu</a></div>
      <div id="in"><a href="#" onclick="showSideBar(true);">Open menu</a></div>
   </div>

   <div id="content">
      <p>
         Donec sodales
         consectetuer nunc. Aenean nec augue. Curabitur commodo, felis at
         tristique venenatis, nunc pede luctus risus, quis eleifend tellus
         mauris eu nisl. Vivamus varius dictum tellus. Nam ornare sem ornare
         justo. Praesent eget magna ut erat ullamcorper adipiscing. Suspendisse
         potenti. Donec lorem. Sed in velit. Maecenas molestie pharetra lacus.
         Donec in velit. In metus tortor, elementum in, porta vitae, posuere eu,
         purus. Quisque quis est. Nunc odio nibh, aliquam eget, ultrices quis,
         dignissim sit amet, augue. Mauris vitae turpis eget ligula porttitor
         nonummy. Etiam pulvinar bibendum tellus. Nam nulla nisl, elementum nec,
         posuere eget, dignissim vel, dolor.
      </p>
   </div>

</body>
</html>

Guffa 2009-10-17 21:19:20

Thanks to you to Guffa ! UNfortunately I just tested it under Chrome 3.0.195.27 and it doesn't change anything ... :(

Clem 2009-10-17 21:26:02

Answer 2

+1 A:

Adding overflow: auto; in the content div CSS seems to fix the problem caused when setting the padding to 215px.

#content { padding: 15px 15px 15px 15px; overflow: auto; }

You have to use some JavaScript to fix the problem caused when removing the padding:

function hideSideBar(){
  var content = document.getElementById('content');
  content.style.padding="15px 15px 15px 15px";

  if (window.getComputedStyle) {
    var para = content.getElementsByTagName('p')[0];

    var paraWidth = window.getComputedStyle(para, null).getPropertyValue('width');
    para.style.width = paraWidth;

    setTimeout(function(){
      para.style.width = 'auto';
    }, 0);
  }

  document.getElementById('out').style.display="none";
  document.getElementById('in').style.display="block";
}

Working demo: http://jsbin.com/eqowu (Editable via http://jsbin.com/eqowu/edit)

brianpeiris 2009-10-17 21:59:37

I tried it, yes, it solves the problem of the expansion to the right ... but when you click a second time to make it come back, ... wait for it : the content block doesn't re-fit to the window's width and keep the width given by the first javascript snippet ... crap! ><

Clem 2009-10-17 22:21:29

I've edited my answer to fix the second problem.

brianpeiris 2009-10-18 00:54:10

A last, but not least THANK YOU for your time Brian ! I tested both of your solution and Robert's one above. They work fine, and I choosed the simplest one with margin property. Thx

Clem 2009-10-18 08:10:27

Too bad I can't mark both of your answers as the accepted answer ..

Clem 2009-10-18 08:12:45

Glad I could help. Remember that you can vote up answers that you find useful ;)

brianpeiris 2009-10-18 09:13:01

Answer 3

+1 A:

If you swap the padding for margin it works the same in both Firefox and Chrome (on my PC anyway):

div#content{
    padding: 0;
    margin: 15px 15px 15px 15px;
    background: #fff;
}

And then:

function hideSideBar(){
    document.getElementById('content' ).style.margin="15px 15px 15px 15px";
    document.getElementById('out' ).style.display="none";
    document.getElementById('in' ).style.display="block";
}

function showSideBar(){
    document.getElementById('content').style.margin="15px 15px 15px 215px";
    document.getElementById('out' ).style.display="block";
    document.getElementById('in' ).style.display="none";
}

You may have to muck around with some of the rest of your styles to make it look the same.

I think what Chrome is doing is justifiable (not that I've reviewed the specs to check), increasing the padding should naturally make the block wider.

robertc 2009-10-17 23:00:01

Pretty simple indeed ! But It works perfectly, thanks a lot Robert !

Clem 2009-10-18 08:03:07

ansaurus

tags:

views:

answers:

Javascript for CSS style modification inside Google Chrome browser

related questions