View Full Version : Change image size with DOM

07-09-2007, 01:37 PM

I have following image on my page, I use it as a spacer gif to get correct columns sizes.

<img id="leftcolumnspacer" src="images/spacer.gif" alt="">

I also enable the admin to preview the site in an iframe and change size of for exp. left column. Playing with td sizes do not give me exact pixel sizes, so I would like to make sure that a td is displayed correctly, by resizing the spacer gif.

var LeftColumnSpacerWidth = myForm.leftcolumnspacer_width.value; // comes from the form
var leftcolumnspacer = frames['testsite'].document.getElementById('leftcolumnspacer');
leftcolumspacer.style.width = LeftColumnSpacerWidth;

Why would this code not change the sizes of an image dynamically?

Bill Posters
07-09-2007, 01:42 PM
…spacer gif…

Wake up and smell the 21st Century.

07-09-2007, 03:39 PM
If you are using tables, than there is no other effective way than spacer gifs that guarantees exact table cell widths on several browsers.

Bill Posters
07-09-2007, 04:08 PM
Why would you need pixel perfect sizing for a table cell?


I suspect that LeftColumnSpacerWidth is a number and you're forgetting to add the unit.


leftcolumspacer.style.width = LeftColumnSpacerWidth+'px';


No offense meant, but from what I can tell, you seem to be going about things in a particularly sub-optimal way.

07-09-2007, 04:59 PM
I write a website-maker for people with absolutely no webmastering abilities. In their admin panel, I give them options (in this case left column width) and a preview of their actual site in an iframe. Depending on the options, I change the site in the iframe dynamically. If they like it, they save the style.

The site has a leftcolumn, a middle one and a right one. I give them options to disable the left one, the right one, or both. So, for me, that means: middle column td = 100%.

Left and right column tds are in pixels.

The problem is, the content in the middle column is dynamic and because its width is set to 100%, it forces one of the columns (mostly right one) that right column becomes narrower than it's should-have width. The only way that I know is to place spacer gifs inside the column and "lock" it at a certain size. That's why.

Bill Posters
07-09-2007, 05:39 PM
I'll put it another way - why use tables for layouts at all?

By offering an 'easy builder' which generates layouts using tables (incl. spacer gifs), imho, you're demonstrating that your own webmastering abilities aren't perhaps what they should be for such a venture.

There is plenty of info available online informing readers why using tables for layout is a bad idea (and how web development is trying to move out of that phase.
e.g. http://www.hotdesign.com/seybold/

It might be an idea for you to update your own skills to encompass creating layouts using semantic markup, css and a minimal number of divs before you empower users to start pumping out numerous more sites using potentially (read: quite probably) problematic and out-dated techniques.

As said, no offense meant, but I am concerned that your well-meant efforts will serve to contribute more to the problems of current web design, than to their solution.

07-09-2007, 07:53 PM
Hi, thanks for the answer. I am pretty aware of where the web design is moving. I know the disadvantages of using tables. But I also know that CSS is not there where it is expected to be. To me, CSS is a big mess because of the browser incompatibilities and believe me, I dived a long time ago into the world of table-less designs (A List Apart, Zen Garden etc...) and it wasn't a good experience for me.

I wouldn't have decided to go with tables if the alternative (CSS and Divs) would be standing rock solid in front of me. But unfortunately it does not and although I agree completely with what you are saying, I prefer the "good old tables" way.

Bill Posters
07-09-2007, 08:06 PM
There are plenty of CSS-based sites which perform solidly x-browser.
CSS is no longer the next generation technology waiting to break through. It's here and it works.
If there were teething troubles, knowledgable designers and developers wouldn't be using it.

If you're having substantial problems then it's down to one of two things: either you're trying to support very old browsers or, as mentioned, your CSS skills aren't perhaps up to what they should be.

I honestly don't say these things to offend, but I do think that it's time that you took another look around at the many resources available to guide and help in building solid, CSS-based layouts.

07-09-2007, 08:24 PM
Ok, ok no offense taken :)

What if I show you a demo of what I've done and maybe you can tell me if it can be done with CSS only?

Bill Posters
07-09-2007, 08:36 PM
That's a good idea.
However, it's probably best to open it up for comments and help in a new thread.

Remember to post a link.


On a side note, are you aware that the domain in your signature appears to have expired three weeks ago?

07-09-2007, 09:01 PM
Hmm, I can't decide which forum to post it on :) CSS, or JS?

Signature, yes, you are right, I transferred it to another registrar, forgot to set the new nameservers.

Bill Posters
07-09-2007, 09:52 PM
It's definately a markup and CSS question, a structure and layout question, so should go in the HTML & CSS section.
I'm not suggesting you post the same query again, but start a new thread asking for advice and help converting a tables-based layout to a CSS-based layout.

There may be some js questions later, as you reintroduce the user functionality for your service, but it's best to get the basics sorted first.