Any JQuery Experts Out There

I'm trying to dynamically determine the width of SELECT tags on my page (as they vary in width depending on the longest piece of data in the OPTION tags), and set corresponding SELECT tags (they are part of swap box pairs) to the same width as their parent SELECT tag.

I've got code that does work (it changes all the child SELECT widths to the size of the initial parent SELECT:

 
$(document).ready(function(){
	parentWidth = $(".parent").width();
	$(".child").width(parentWidth);
			 });

And I know the each() function would serve to loop over all the parent and child SELECT tags, but I can't seem to get the syntax right - any help is appreciated.

Fuck, I'm tired. Too late on a Friday afternoon to be bending your brain around this stuff... especially since I know the solution is probably simple and I'll smack my forehead when I see it.

I tried to simulate your situation and it worked for me. Maybe give some more information on the issue?

  On 10/10/2009 at 12:42 AM, Ivan Lennovitz said:

I tried to simulate your situation and it worked for me. Maybe give some more information on the issue?

Set up a page with multiple SELECT tags, and assign the classes "parent" and "child" to each set (say, make 5 pairs of SELECTs), and put content in the SELECTs with the parent class, and leave the SELECTs with the child class empty (just put empty OPTION pairs in them) - you'll see that the first SELECT on the page will set it's corresponding SELECT with the child class applied to match the parent's width, but all the other SELECTs with the child class will have the same width as the initially set child SELECT, regardless of it's parent SELECTs width.

Essentially, I want each child SELECT's width to match it's corresponding parent SELECT's width, based on the width (which is set dynamically by the longest OPTION tag in the parent SELECT) to match.

I may have confused the issue more, but that's the best I can explain short of showing a visual example. The code sample I provided DOES run, but does not contain the each() function to loop through each instance of the parent SELECT and set each instance of the child SELECT to the same width.

In thinking about it, I'm wondering if the opposite would happen - the very last SELECT it encounters would set the width of all the child SELECTs to it's width...

I'm trying to avoid applying a unique class to each SELECT pair, but I may have to - then again, wouldn't the DOM number each select 0-x, and thus applying the unique width to each?

And you lot thought I was all poop and fart jokes.

can you post the html you're working with?

There's some ColdFusion in there, so ignore any of the CF-specific tags and variables in # signs:

<label for="candidateID5">Case Type<br />
             <!---|  <input type="button" name="btnCasetype" id="btncasetype" value="Add Case Type" class="buttonsmall" onclick="addCasetype(this);" /> --->
             <select name="candidateID5" size="3" onclick="unselectAllowedID5()" class="parent">
               <cfoutput query="GetCT">
                 <option value="#CaseTypeID#">#CaseTypeDesc#</option>
               </cfoutput>
             </select>
             <div style="text-align: center;">
               <input name="btn_Remove" type="button" value="Add" onClick="checkAllowedID5()" class="button" style="width: 70px;" />
               <input name="btn_Add" type="button" value="Remove" onClick="checkCandidateID5()" class="button" style="width: 70px;" />
               <input type="hidden" name="Go" value="">
             </div>
             <select name="allowedID5" size="3" onclick="unselectCandidateID5()" class="child">
               <cfoutput query="GetMatterCT">
                 <option value="#CaseTypeID#">#CaseTypeDesc#</option>
               </cfoutput>
             </select>
           </label>

Note each SELECT has a unique class of "parent" and "child" - these are swap boxes (that's what the JS and the add/remove buttons are for; to pass a value from the parent box to the child box - the problem is that the child box, if it contains no items, then it's width is 0, and it looks unsightly compared to the parent box, which will dynamically be as wide as the widest piece of data that's being populated. There are multiple pairs of boxes on my page, and what I want is for each SELECT with the "child" class to have it's width match the SELECT with the "parent" class width, which dynamically gets set based on the longest piece of data. The JQuery I posted above works for the initial SELECT pair on the page, but all the subsequent SELECTs with the "child" class get set to the same width as the initial SELECT with the "parent" class - I want to try and use the each() function to loop over each SELECT pair in the DOM, and set the corresponding SELECTs with the "child" classes to the respective widths of their SELECTs with the "parent" class.

Does that make things a bit clearer? I should have posted the code to begin with, but I wanted to keep it as simple as possible to avoid confusion, lol

Anyone?

$(document).ready(function(){
 var parents = $('select.parent');
 $('select.child').each(function (i) {
   $(this).width($(parents[i]).width());
 });
});

see file for working example.

blah.htmlFetching info...

  On 10/9/2009 at 11:09 PM, Joyrex said:

	$(".child").width

yeah, i meant to bitch about that.

child and parent are not great class names, because those terms have their own meaning with regards to the dom and jquery.

  On 10/13/2009 at 6:14 AM, chaosmachine said:

$(document).ready(function(){
 var parents = $('select.parent');
 $('select.child').each(function (i) {
   $(this).width($(parents[i]).width());
 });
});

 

see file for working example.

YES! Thanks - I knew it was the each() function, but I'm still learning JQuery and couldn't figure out the syntax. Works like a charm!

  On 10/13/2009 at 3:40 PM, chaosmachine said:

yeah, i meant to bitch about that.

 

child and parent are not great class names, because those terms have their own meaning with regards to the dom and jquery.

 

Yeah, and it probably confused most who were reading my initial explanation of the problem as well...

UPDATE: Ah, damn - doesn't work in IE6 (which unfortunately we still have to support), and in other browsers, when the page initially loads, the effect doesn't apply until I refresh the page. Going to have to go another route with this.

Thanks for your help, Chaosmachine!