Hi all. I'm working on a little design assistance script/plugin/not sure yet
in jQuery. The intent is to be able to have jQuery automatically draw
alignment grid lines over the page so that I can visually line up other
elements on the page. Code follows:
----------
jQuery.grid = function(settings) {
jQuery.extend(settings, {
color: '#000',
spacing: '20px',
orientation: 'horizontal',
thickness: '5px'
});
var wrapper = jQuery('<div>').addClass('wrapper').css({
zIndex: 999,
position: 'absolute',
top: 0,
left: 0,
height: '100%',
width: '100%'
});
jQuery('body').append(wrapper);
for (var i=0; i < 100; i ++) {
var div = jQuery('<div> </div>')
.css('border-bottom-width', settings.thickness)
.css('border-color', settings.color)
.height(settings.spacing)
.width('100%');
wrapper.append(div);
}
};
$(document).ready(function() {
$.grid({});
});
----------
When I run the above (using jQuery 1.2.1), all of my divs are created
properly. I can confirm in firebug that that I get 100 divs (later to be "as
many as needed", when I get there), and that all have a style tag with the
proper CSS rules in it. However, I get no border. I've tried changing the
border color, border thickness, spacing... the divs create, but no border
lines appear.
I don't know if this is technically a jQuery question or not, but does anyone
have an idea why it could be misbehaving? Alternatively, has someone already
done this and saved me a lot of trouble? :-)
--
Larry Garfield AIM: LOLG42
[EMAIL PROTECTED] ICQ: 6817012
"If nature has made any one thing less susceptible than all others of
exclusive property, it is the action of the thinking power called an idea,
which an individual may exclusively possess as long as he keeps it to
himself; but the moment it is divulged, it forces itself into the possession
of every one, and the receiver cannot dispossess himself of it." -- Thomas
Jefferson
