Then I have two possible solutions to what I think the problem may be...
One, have the field_setup() function bound to the window load as such:
$(window).bind(load,function(){field_setup()});
or define the width in the css of that field by its ID
If that doesn't work then I'll need to find a different problem to solve :P
On Thu, Nov 20, 2008 at 4:23 PM, Lee Mc <[EMAIL PROTECTED]> wrote:
>
> The width is defined by a class the field has rather than it's ID.
>
>
>
>
> On Nov 20, 8:06 pm, "CodingCyb.org" <[EMAIL PROTECTED]> wrote:
> > And in the css the width is defined for "#test_field" or w/e its
> > named? Or is it defined by a class that it has?
> >
> > On Nov 20, 9:37 am, Lee Mc <[EMAIL PROTECTED]> wrote:
> >
> > > The width of the field gets set by a stylesheet which is pulled
> > > through.
> >
> > > On Nov 20, 3:22 pm, "CodingCyb.org" <[EMAIL PROTECTED]> wrote:
> >
> > > > 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
> >
> > ...
> >
> > read more ยป
> >
>
