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 »
