But now that I think about it... The image wouldn't appear if the element
hadn't been loaded either... So my previous suggestions probably won't fix
the problem... :/ I'll take another look this afternoon and see if I can
find out whats going wrong...
On Fri, Nov 21, 2008 at 2:10 AM, Lee McMullen <[EMAIL PROTECTED]>wrote:
> Thanks, I'll try your suggestions and let you know.
>
> Just out of curiosity, why would binding the field setup to the window load
> have an effect? I thought that was the whole point of using $(function(){}),
> so you didn't have to wait for the window to load?
>
>
> On 21 Nov 2008, at 04:01, "Isaiah Fischer" <[EMAIL PROTECTED]> wrote:
>
> 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]>
> [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 ยป
>>
>>
>
>
> ~--~----~
> This message is part of the topic "$('#id').width()" in the Google Group
> "jQuery (English)"
> for which you requested email updates.
> To stop receiving email updates for this topic, please visit the topic
> at <http://groups.google.com/group/jquery-en/t/44e5c86af2982bc7>
> http://groups.google.com/group/jquery-en/t/44e5c86af2982bc7
> -~----------~----~----~----~------~----~------~--~---
>
>
>
> >
>
