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?
