3

I'd like to know if there's an elegant way to accomplish this.

My question: I need to change a few CSS properties of some div elements that have already been created and have those changes be applied to newly created elements of the same class as well.

For example:

CSS:

.myDiv{left:100px}

HTML:

<div id="decode_me">
    <div id="div1" class="myDiv">Drink</div>
    <div id="div2" class="myDiv">More</div>
</div>

JS:

$('.myDiv').css('left','50px');
$('#decode_me').append('<div id="div3" class="myDiv">Ovaltine</div>');

The first two divs will have left set to 50, while the third will fall back to the css specific 100px. I'm setting left and width based on some window resize events, so it seems creating another class where left is set to 50 wouldn't work as the number will change.

I've looked in to .live and .on and I believe they require some sort of event to trigger them. Short of calling a function to resize everything each time a new element is appended, is there a neat way to do this? My work around seems a bit sledgehammer-ey.

Actual use: Working inside a CMS like framework (phpFox) with jQuery 1.7.1, I've created what is basically a table. It's a bunch of rows that scroll as new rows are added. In each row, I've got 7 "columns", two of which will always be 50px wide. The rest will need to be resized as the "table" is able to be set to full screen without a page load.

If there is another solution, I'd be happy to give it a shot. I started by creating a table, but the amount of styling going on in addition to the scrolling up as new rows are added effect made it a real pain. I've tried using relatively positioned divs, but have run in to trouble with text overflowing. I've now got the "row" set relative, and all of the "column" divs set absolute, but as you can see, that comes with it's own load of problems.

Each solution I come up with like a bit of a mess, I'm thinking there must be a simple way to accomplish this that I'm just missing. PHP guy by trade. Thanks for reading!

Transistor Bass
  • 91
  • 1
  • 6
  • do you want the css to change as the window size changes? – Scott Selby Jul 13 '12 at 04:10
  • 2
    you know you can use .addclass , and have multiple classes for each element, I'm not too sure exactly what you are trying to do , you can also do
    - assign css like that , it will override the class
     – Scott Selby Jul 13 '12 at 04:11
  • I'm with scott... Having a hard time visualizing what you are trying to do. Can u do a jsfiddle perhaps? – brains911 Jul 13 '12 at 04:24
  • Just shooting in the dark, but can you use css % widths on the columns so they automatically resize with window? – brains911 Jul 13 '12 at 04:30

4 Answers4

2

I think you may want to use liveQuery: https://github.com/brandonaaron/livequery

$('div').livequery(function() { 
    $(this).css({left: 100px})
})
Christopher
  • 2,005
  • 3
  • 24
  • 50
JREAM
  • 5,741
  • 11
  • 46
  • 84
0

You don't need to resize everything each time - you could pass a jQuery selector into a resize function. You'd still need to call resize() yourself, but it wouldn't be too bad:

function resize($obj) {
    $obj.css('left','50px');
}

// What you had originally
resize($('.myDiv'));

// Create the new element, resize it individually
var $newElem = $('<div id="div3" class="myDiv">Ovaltine</div>');
$('#decode_me').append($newElem);
resize($newElem);
Scotty
  • 2,480
  • 2
  • 16
  • 20
0

What I would do is define a function to add the CSS, immediately call that function, then trigger that function at the end of the append. Although I'd mention here that adding a new class here is much more performance-friendly than changing the CSS on the fly.

var myfunction = function() {
    $('.myDiv').css('left','50px');
};

myfunction();

$('#decode_me')
  .append('<div id="div3" class="myDiv">Ovaltine</div>')
  .trigger(myfunction());
Richard Dillman
  • 334
  • 1
  • 9
0

As above livequery would be an option or just add it in the block which loads the elements.

arnoapp
  • 2,416
  • 4
  • 38
  • 70