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 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
>
> ...
>
> read more »
