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?
