[jQuery] Re: $('#id').width()
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 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:
>
>
>
>
>
> Tab 1 li>
> Tab 2 li>
> Tab 3 li>
>
>
>
>
>
> My Test Field: id="field_id" value="">
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> 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 im
[jQuery] Re: $('#id').width()
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 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:
>
> > >
>
> > >
> > >
> > > Tab 1 > > li>
> > > Tab 2 > > li>
> > > Tab 3 > > li>
> > >
>
> > >
> > >
> > >
> > > My Test Field: > > id="field_id" value="">
> > >
>
> > >
> > >
> > >
> > >
> > >
>
> > >
> > >
> > >
> > >
> > >
>
> > >
>
> > > 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");
> > > > >
[jQuery] Re: $('#id').width()
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 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: > > > > > > > > > > > > > > > > > > > > > > Tab 1 > > > > li> > > > > > Tab 2 > > > > li> > > > > > Tab 3 > > > > li> > > > > > > > > > > > > > > > > > > > > > > > > > > My Test Field: > > > > id="field_id" value=""> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > 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&qu
[jQuery] Re: $('#id').width()
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 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: > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > Tab > > > > > > > 1 > > > > > > li> > > > > > > > Tab > > > > > > > 2 > > > > > > li> > > > > > > > Tab > > > > > > > 3 > > > > > > li> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > My Test Field: > > > > > > id="field_id" value=""> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > 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? &
