Hi again,
This should work:
$(document).ready(function() {
var cellWidth = {
searchUser: [80, 110, 145, 70, 100, 100, 236],
searchAcct: [80, 130, 80, 80, 80, 190, 201]
};
$.each(cellWidth, function(key, val) {
for (var i=0, cl= val.length; i<cl; i++) {
$('.' + key + ' tbody td:nth-child(' + (i+1) + ')').width(val[i])
.children().css({overflow: 'hidden'}).width(val[i]);
};
});
});
Now if you add another table, (for example, one with
class="searchFoo") all you have to do is add another element to the
cellWidth object:
var cellWidth = {
searchUser: [80, 110, 145, 70, 100, 100, 236],
searchAcct: [80, 130, 80, 80, 80, 190, 201],
searchFoo: [80, 130, 190, 201, 80, 80, 80]
};
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 8, 2009, at 8:29 PM, roxstyle wrote:
i actually started with more than one table, and my clunky code was
working, but not clean. The following is the original for 2 tables.
$(document).ready(function() {
//usertool-search-user
$(".searchUser tbody td:first-child").css({"width":"80px"});
$(".searchUser tbody td:nth-child(2)").css({"width":"110px"});
$(".searchUser tbody td:nth-child(3)").css({"width":"145px"});
$(".searchUser tbody td:nth-child(4)").css({"width":"70px"});
$(".searchUser tbody td:nth-child(5)").css({"width":"100px"});
$(".searchUser tbody td:nth-child(6)").css({"width":"100px"});
$(".searchUser tbody td:nth-child(7)").css({"width":"236px"});
//usertool-search-account
$(".searchAcct tbody td:first-child").css({"width":"80px"});
$(".searchAcct tbody td:nth-child(2)").css({"width":"130px"});
$(".searchAcct tbody td:nth-child(3)").css({"width":"80px"});
$(".searchAcct tbody td:nth-child(4)").css({"width":"80px"});
$(".searchAcct tbody td:nth-child(5)").css({"width":"80px"});
$(".searchAcct tbody td:nth-child(6)").css({"width":"190px"});
$(".searchAcct tbody td:nth-child(7)").css({"width":"201px"});
$(".tbl tbody td").each(function(i){
var $tdWidth = $(this).css("width");
$(this).children().css({'overflow':'hidden','width':$tdWidth});
});
});
i tried to adjust the code (above) with the (cleaner) sample Karl
Swedburg suggested, but i have not been successful, yet. i am trying
to do this for about 10 tables altogether. any help or direction to
similar example would be appreciated. This worked when i used it for a
single table, i just don't understand how to set the same method up
for multiple tables (all with different cell arrays and widths).Thank
you.
$(document).ready(function() {
$('.searchUser tbody td') function() {
var cellWidth = [80, 110, 145, 70, 100, 100, 236];
for (var i=0, cl= cellWidth.length; i<cl; i++) {
$('td:nth-child(' + (i+1) + ')').width(cellWidth[i])
.children().css({overflow: 'hidden'}).width(cellWidth
[i]);
};
};
$('.searchAcct tbody td') function() {
var cellWidth = [80, 130, 80, 80, 80, 190, 201];
for (var i=0, cl= cellWidth.length; i<cl; i++) {
$('td:nth-child(' + (i+1) + ')').width(cellWidth[i])
.children().css({overflow: 'hidden'}).width(cellWidth
[i]);
};
};
});
On Jan 8, 11:22 am, roxstyle <resut...@gmail.com> wrote:
thank you, so much. I need to think less in css and more in jquery.
And also thank you for your great site, i just found it, and ordered
your book.
On Jan 8, 7:38 am, Karl Swedberg <k...@englishrules.com> wrote:
This might be a little cleaner:
$(document).ready(function(){
var cellWidth = [80, 110, 145, 70, 100, 100, 236];
for (var i=0, cl= cellWidth.length; i<cl; i++) {
$('td:nth-child(' + (i+1) + ')').width(cellWidth[i])
.children().css({overflow: 'hidden'}).width(cellWidth[i]);
};
});
(untested)
--Karl
____________
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jan 7, 2009, at 5:26 PM, roxstyle wrote:
$(document).ready(function(){
$(".searchUser tbody td:first-child").css({"width":"80px"});
$(".searchUser tbody td:nth-child(2)").css({"width":"110px"});
$(".searchUser tbody td:nth-child(3)").css({"width":"145px"});
$(".searchUser tbody td:nth-child(4)").css({"width":"70px"});
$(".searchUser tbody td:nth-child(5)").css({"width":"100px"});
$(".searchUser tbody td:nth-child(6)").css({"width":"100px"});
$(".searchUser tbody td:nth-child(7)").css({"width":"236px"});
$(".tbl tbody td").each(function(i){
var $tdWidth = $(this).css("width");
$(this).children().css({'overflow':'hidden','width':$tdWidth});
});
});
ok, i have this working for my sample. Along with some added
insight.
(1) the children need to inherit the "td" given width- not the
width
that the browser sees. (2)The only way i could get this to
inherit, is
to have the width declared inline (now generated from the js file
and
not the css file), then the children can inherit the style "width".
I do not like all these inline styles showing up in the code,
but...its working.
On Jan 7, 12:06 pm, amuhlou <amysch...@gmail.com> wrote:
you're quite welcome :)
On Jan 7, 3:02 pm, roxstyle <resut...@gmail.com> wrote:
thank you so much, that is going to work.
On Jan 7, 11:55 am, amuhlou <amysch...@gmail.com> wrote:
I accidentally replied directly to the author, so for anyone
curious
about the same thing, you could use the following code:
$(document).ready(function() {
$(".tbl tbody td").each(function(i) {
var $tdWidth = $(this).width();
$(this).children().width($tdWidth);
});
});
This code goes through the .tbl table, and for each td it
finds its
width and then applies that width to its children.
On Jan 7, 2:04 pm, roxstyle <resut...@gmail.com> wrote:
no, not exactly.
if the div contains a long email or url with no spaces-the div
will
expand beyond the intended width set for the "td" and
essentailly
break the table layout. What i am trying to achieve is to place
the
actual "td" content in a "div" and have the "div" (1) inherit
the
parent td width, with (2)overflow: hidden. I have already given
the
overflow property in the stylesheet. I am thinking I need to
have js
that will automatically give any nested "div" the width of its
parent.
in my samplehttp://www.roxstyle.com/projects/blssi/cms/user-tools-v1/user-search
....
if you click on the "search" for the user tab (default tab)-
there is
a result table with sample content like this.
in row one- the content for the third cell expands.
in row two- the content has an inline style for the width, and
in this
case the content "cuts off" at this width.
i hope this makes sense, i am more css/html experienced than js
experiened. i would appreciate any help, if i am not explaining
the
intended behavior
On Jan 7, 1:10 am, peet <peetkl...@gmail.com> wrote:
isn't that not the same as setting "width:100%" to all childs?
On Jan 7, 2:42 am, roxstyle <resut...@gmail.com> wrote:
I have a table where each td has its width declared in css
rules.
Inside some "td" i have either "p" or "div"
I want to have these elements inherit the width of the parent
td.
I have a sample here
-http://www.roxstyle.com/projects/blssi/cms/user-tools-v1/user-search
....
if you click on the "user" search, you will get a results
table and
several of the td have got purposely long (non-spaced text)
the tds have a width within css, but the div does not inherit
that. If
i give the div the pixel width, with overflow:hidden - i
get the
results i want -the table structure stays in place and the
extra text
is hidden
i would like to make a function that would globally give the
css width
of each td to its children
im trying things like:
$(document).ready(function(){
var d = (".tbl tbody td div");
var d_p = $("d").parent('td');
function inheritWidth() {
$("d").width(d_p.innerWidth());
}
});
i know my knowledge of js is basic. Is there any tutorial, or
a sample
on the jquery site that is similar to this functionality i am
looking
for?
