Is the original width of the text field set in css? Or is it just the width it gets when page loads?
On Nov 20, 9:09 am, Lee Mc <[EMAIL PROTECTED]> wrote: > Yes that's exactly right. > > Any ideas would be greatly appreciated! > > On Nov 20, 1:18 pm, "CodingCyb.org" <[EMAIL PROTECTED]> wrote: > > > I'm still trying to picture the site in my mind. So it has three tabs > > that you can switch between, but the default can be different? And > > when the default isn't the first one, the image appears in tab one, > > but stays underneath the input box because the width isn't updated? > > > On Nov 20, 12:11 am, Lee Mc <[EMAIL PROTECTED]> wrote: > > > > The example HTML only has a single text input, it's this input I'm > > > having issues with. Apologies, the example HTML gave the field a > > > different ID than the JS contained. Im copying the code from an in > > > process project so it's stripped down for readability. > > > > Therefore the different ID in my HTML is just a typo. > > > > Cheers, Lee. > > > > On Nov 20, 4:14 am, "CodingCyb.org" <[EMAIL PROTECTED]> wrote: > > > > > Sorry it took so long for a reply... > > > > > Where in the html is "#test_field" ? That's what the field_img goes > > > > after, but I'm not sure where that is... > > > > > On Nov 19, 9:39 am, Lee Mc <[EMAIL PROTECTED]> wrote: > > > > > > Hi, yes I think you've misunderstood my problem. > > > > > > In a nutshell, there is an <input type="text"> on tab 1. On load of > > > > > the form, I'm trying to make this input less wide and place an image > > > > > next to it. When tab 1 is the default tab, it works fine. When any > > > > > other tab is the default, it inserts the image but doesn't update the > > > > > width of the field. > > > > > > This is an example of my markup: > > > > > > <div class="tab_container"> > > > > > > <!--insert tabs--> > > > > > <ul class="tabs"> > > > > > <li><a href="my_form#tab_1" class="tab" title="content_1">Tab 1</a></ > > > > > li> > > > > > <li><a href="my_form#tab_2" class="tab" title="content_2">Tab 2</a></ > > > > > li> > > > > > <li><a href="my_form#tab_3" class="tab" title="content_3">Tab 3</a></ > > > > > li> > > > > > </ul> > > > > > > <!--insert tab 1--> > > > > > <div id="content_1" class="tab_content"> > > > > > <a name="tab_1"></a> > > > > > <label for="field_id">My Test Field:</label><input type="text" > > > > > id="field_id" value=""> > > > > > </div><!--close content_1--> > > > > > > <!--insert tab 2--> > > > > > <div id="content_2" class="tab_content"> > > > > > <a name="tab_2"></a> > > > > > <!--tab 2 content--> > > > > > </div><!--close content 2--> > > > > > > <!--insert tab 3--> > > > > > <div id="content_3" class="tab_content"> > > > > > <a name="tab_3"></a> > > > > > <!--tab 3 content--> > > > > > </div><!--close content 3--> > > > > > > </div><!--close tab container--> > > > > > > Any thoughts would be much appreciated. > > > > > > Cheers, > > > > > Lee > > > > > > On Nov 18, 3:47 pm, CodingCyborg <[EMAIL PROTECTED]> wrote: > > > > > > > That all seems like it would work fine. I went back and re-read your > > > > > > original post. I found that I may have misunderstood the problem. > > > > > > > In your original post is "#field_id" within the content of the first > > > > > > tab, or is it the content warpper of the first tab? > > > > > > > If it is the wrapper, then you are putting the image outside of what > > > > > > is hidden, if not then changing that field width shouldn't affect > > > > > > any > > > > > > other tabs. > > > > > > > From what I now understand you don't want the image there unless you > > > > > > are on the first tab? So placing it within the content of that tab > > > > > > may > > > > > > be the solution? > > > > > > > On Nov 18, 9:30 am, Lee Mc <[EMAIL PROTECTED]> wrote: > > > > > > > > Here is the code which sets the tabs up: > > > > > > > > /* > > > > > > > * JS to handle the building of tabs within forms > > > > > > > * Pre-requisites: > > > > > > > * - jQuery > > > > > > > * - "tab" links i.e. "a" tags to have a class of 'tab' > > > > > > > * - the "title" attribute of the "a.tab" links and the "id" > > > > > > > attribute > > > > > > > of the div containing that tab's content to be called "content_n" > > > > > > > where n is the number representing the tab > > > > > > > */ > > > > > > > var form_tabs = { > > > > > > > build: function(){ > > > > > > > // Define what happens when a "tab" is clicked > > > > > > > $("a.tab").click(function(event){ > > > > > > > event.preventDefault(); > > > > > > > // switch all tabs off > > > > > > > $(".active").removeClass("active"); > > > > > > > > // switch this tab on > > > > > > > $(this).addClass("active").blur(); > > > > > > > > // hide all elements with the class 'content' up > > > > > > > $(".tab_content").hide(); > > > > > > > > // Now figure out what the 'title' attribute value is > > > > > > > and > > > > > > > find the element with that id. Then display that. > > > > > > > var content_show = $(this).attr("title"); > > > > > > > $("#" + content_show).show(); > > > > > > > }); > > > > > > > // Get the global settings object and figure out which tab > > > > > > > should be displaying, show it and hide the rest > > > > > > > var tab_display = ''; > > > > > > > if (settings) { > > > > > > > // We have found the settings object, get the > > > > > > > 'tab_display' property > > > > > > > tab_display = settings.tab_display; > > > > > > > } > > > > > > > else { > > > > > > > tab_display = '1'; > > > > > > > } > > > > > > > // tab_display has been set so set the class for the > > > > > > > active > > > > > > > tab > > > > > > > $('a.tab').each(function(){ > > > > > > > // 'this' now represents the tab > > > > > > > if ($(this).attr('title').substr(8) == tab_display) { > > > > > > > // we have the correct tab so apply the 'active' > > > > > > > class > > > > > > > $(this).addClass("active"); > > > > > > > } > > > > > > > }) > > > > > > > $('.tab_content').each(function(){ > > > > > > > // 'this' now represents the div container. Test for > > > > > > > the > > > > > > > id and see if we should hide this div > > > > > > > if (this.id.substr(8) != tab_display) { > > > > > > > // we have a tab whose content we don't want to > > > > > > > see so > > > > > > > hide it > > > > > > > $(this).hide(); > > > > > > > } > > > > > > > }) > > > > > > > } > > > > > > > > } > > > > > > > > I'm pretty new to jQuery so apologies if there are some silly or > > > > > > > obvious comments, just my way of remembering whats happening when > > > > > > > I > > > > > > > look back at it!! > > > > > > > > Cheers, > > > > > > > Lee > > > > > > > > On Nov 18, 2:49 pm, CodingCyborg <[EMAIL PROTECTED]> wrote: > > > > > > > > > I think the how the tabs are set up is whats affecting it. But > > > > > > > > I'm not > > > > > > > > sure how they function, or are set up. That code would be most > > > > > > > > helpful > > > > > > > > at this point in time. > > > > > > > > > On Nov 18, 8:36 am, Lee Mc <[EMAIL PROTECTED]> wrote: > > > > > > > > > > Hi, here is the JS. I haven't pasted the form_tabs.build() > > > > > > > > > function > > > > > > > > > but can do if you think that might help. > > > > > > > > > > $(function(){ > > > > > > > > > // Build the tabs on the form. "form_tabs" is contained > > > > > > > > > in the "js/ > > > > > > > > > tabs.js" lib > > > > > > > > > form_tabs.build(); > > > > > > > > > // Set up the field > > > > > > > > > field_setup();}); > > > > > > > > > > function field_setup(){ > > > > > > > > > // Create image which does something when clicked > > > > > > > > > var img = '<img src="images/icons/user.gif" > > > > > > > > > id="field_img" > > > > > > > > > alt="blah">'; > > > > > > > > > // Append image to the requested_for field > > > > > > > > > > > > > > > > > > $('#test_field').after(img).width($('#test_field').width() - > > > > > > > > > 23); > > > > > > > > > // catch the image being clicked > > > > > > > > > $('#field_img').click(function(){ > > > > > > > > > // code for image click here > > > > > > > > > }); > > > > > > > > > > } > > > > > > > > > > Cheers, > > > > > > > > > Lee > > > > > > > > > > On Nov 18, 1:17 pm, CodingCyborg <[EMAIL PROTECTED]> wrote: > > > > > > > > > > > Can you put up a test page or link to the main page? If I > > > > > > > > > > saw the > > > > > > > > > > source I may notice the problem. > > > > > > > > > > > On Nov 18, 5:18 am, Lee Mc <[EMAIL PROTECTED]> wrote: > > > > > > > > > > > > Hi, i'm having an issue with setting the width of a field > > > > > > > > > > > using $ > > > > > > > > > > > ('#field_id').width(). My setup is as follows: > > > > > > > > > > > > - I have a form with multiple divs, on load I run some > > > > > > > > > > > code to turn > > > > > > > > > > > these divs into tabbed content i.e. only one div showing > > > > > > > > > > > at any > > > > > > > > > > > point. When "&tab=x" appears in the URL, my code opens > > > > > > > > > > > that tab > > > > > > > > > > > instead of the default 1st tab > > > > > > > > > > > > - There is a field on the first (and default) tab which > > > > > > > > > > > I'm a) > > > > > > > > > > > reducing the width of and b) placing an image next to > > > > > > > > > > > using the > > > > > > > > > > > following: > > > > > > > > > > > > $('#field_id').width($('#field_id').width() - > > > > > > > > > > > 25)).after > > > > > > > > > > > ('img_html') > > > > > > > > > > > > - I then add a click event handler to the newly inserted > > > > > > > > > > > image using $ > > > > > > > > > > > ('#img_id').click(function(){js_to_run}); > > > > > > > > > > > > This works completely as expected when the form opens to > > > > > > > > > > > the default > > > > > > > > > > > tab. > > > > > > > > > > > > My problem is that when I open the form to a different > > > > > > > > > > > tab (e.g. using > > > > > > > > > > > &tab=3 in the URL), the width of the field is not being > > > > > > > > > > > updated. The > > ... > > read more »