Tech: Javascript and CSS question

Factual Questions
1

I’ve never seen a web design code specific question here, so if it isn’t allowed - my apologies, but I don’t know why it wouldn’t be.

So here’s what I’ve got. I use margin-left and margin-right in the CSS to center content on my site, but I want to add flexibility so that users can make the content wider or slimmer. I figure it must be possible to modify the id’s margins via javascript but I can’t figure out how.

Anyone got ideas or helpful links?

2

Yeah that’s basically what you call DHTML.

Do you want the user to be able to drag the columns to make them wider, or just click a button or link to make it happen?

I am going to do this off the top of my head so please check the syntax if it doesn’t work for you:



<script language=JavaScript>
function ChangeMargins() {

     if (document.getElementById('yourmarginid').style.marginRight = '100px') {
         document.getElementById('yourmarginid').style.marginRight = '200px';
         document.getElementById('yourmarginid').style.marginLeft = '200px';
    }else{
          document.getElementById('yourmarginid').style.marginRight = '100px';
          document.getElementById('yourmarginid').style.marginLeft = '100px';
    }
}
</script>

<a href=# onClick='ChangeMargins();'>Click here to change the margin size</a>

Note that in JavaScript it’s “marginRight” and “marginLeft” while in CSS it’s “margin-right” and “margin-left”.

Hopefully that helps a little.

3

That’s exactly what I’m trying to do, I’m fiddling with it now but it looks like it works! Thanks!

4

Worked like a charm - thanks so much!

5

Sweet. I think after years of toiling I have finally learned enough JS/CSS/DHTML to be able to add it to my resume and not be lying :slight_smile: