thank you, this is the extensibility, i wanted, exactly. I need pracitce writing functions. i appreciate you time on this.
On Jan 8, 7:48 pm, Karl Swedberg <k...@englishrules.com> wrote: > 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 Swedbergwww.englishrules.comwww.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?