[jQuery] Re: $('#id').width()
Most browsers cannot determine the width of an element if it is not currently visible. That includes the case where one of the parent elements is hidden. That makes sense when you think about it; the layout engine doesn't know how the element would look unless it's visible and interacting layout-wise with its parent and sibling elements. If jQuery's .width() method detects that the element you are trying to measure has display:none, it will temporarily set the element to show so that it can be measured. However, it does not try to apply that rule recursively to all the parent elements up to the body. That would be pretty time consuming. You'll need to defer the width calculation until its parent div (tab) is visible, or temporarily show that tab long enough to do the calculation initially and then switch to the tab selected by the url. I've had a similar problem to this when trying to use my splitter plugin on one tab that isn't initially visible; the splitter needs to know the dimensions of the parent element to initialize.
[jQuery] Re: $('#id').width()
Hi,
I've just run another couple of tests and have discovered the following:
When the form opens and defaults to the tab where the input is located,
$('#field_id').width() returns the correct width (i.e. 175 in this case).
However when the form opens and defaults to a different tab,
$('#field_id').width() is returning 0.
I've also tried applying the width of the field using it's id but this had
no effect i.e. the same problem was occurring.
So, has anyone else come across this issue of .width() returning 0?
Thanks,
Lee
On Fri, Nov 21, 2008 at 1:09 PM, Isaiah Fischer [EMAIL PROTECTED]wrote:
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
lia href=my_form#tab_1 class=tab
title=content_1Tab 1/a/
li
lia href=my_form#tab_2 class=tab
title=content_2Tab 2/a/
li
lia href=my_form#tab_3 class=tab
title=content_3Tab 3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput
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
[jQuery] Re: $('#id').width()
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]
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
lia href=my_form#tab_1 class=tab
title=content_1Tab 1/a/
li
lia href=my_form#tab_2 class=tab
title=content_2Tab 2/a/
li
lia href=my_form#tab_3 class=tab
title=content_3Tab 3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput
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
[jQuery] Re: $('#id').width()
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
lia href=my_form#tab_1 class=tab
title=content_1Tab 1/a/
li
lia href=my_form#tab_2 class=tab
title=content_2Tab 2/a/
li
lia href=my_form#tab_3 class=tab
title=content_3Tab 3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput
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?
[jQuery] Re: $('#id').width()
With this though, since you are changing the width of an ID, if the element
with that ID hasn't loaded yet, then it cant change the width of it. Unless
the width is specifically set for that particular ID in the CSS. Which is
why the second option is viable.
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
lia href=my_form#tab_1 class=tab
title=content_1Tab 1/a/
li
lia href=my_form#tab_2 class=tab
title=content_2Tab 2/a/
li
lia href=my_form#tab_3 class=tab
title=content_3Tab 3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput
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
[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 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
lia href=my_form#tab_1 class=tab title=content_1Tab 1/a/
li
lia href=my_form#tab_2 class=tab title=content_2Tab 2/a/
li
lia href=my_form#tab_3 class=tab title=content_3Tab 3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput 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
[jQuery] Re: $('#id').width()
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
lia href=my_form#tab_1 class=tab title=content_1Tab 1/a/
li
lia href=my_form#tab_2 class=tab title=content_2Tab 2/a/
li
lia href=my_form#tab_3 class=tab title=content_3Tab 3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput 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
[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 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
lia href=my_form#tab_1 class=tab title=content_1Tab 1/a/
li
lia href=my_form#tab_2 class=tab title=content_2Tab 2/a/
li
lia href=my_form#tab_3 class=tab title=content_3Tab 3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput 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
[jQuery] Re: $('#id').width()
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
lia href=my_form#tab_1 class=tab title=content_1Tab
1/a/
li
lia href=my_form#tab_2 class=tab title=content_2Tab
2/a/
li
lia href=my_form#tab_3 class=tab title=content_3Tab
3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput 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
[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 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
lia href=my_form#tab_1 class=tab title=content_1Tab
1/a/
li
lia href=my_form#tab_2 class=tab title=content_2Tab
2/a/
li
lia href=my_form#tab_3 class=tab title=content_3Tab
3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput 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.
[jQuery] Re: $('#id').width()
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
lia href=my_form#tab_1 class=tab title=content_1Tab
1/a/
li
lia href=my_form#tab_2 class=tab title=content_2Tab
2/a/
li
lia href=my_form#tab_3 class=tab title=content_3Tab
3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput 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
[jQuery] Re: $('#id').width()
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
lia href=my_form#tab_1 class=tab
title=content_1Tab 1/a/
li
lia href=my_form#tab_2 class=tab
title=content_2Tab 2/a/
li
lia href=my_form#tab_3 class=tab
title=content_3Tab 3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput
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(){
[jQuery] Re: $('#id').width()
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
lia href=my_form#tab_1 class=tab title=content_1Tab 1/a/
li
lia href=my_form#tab_2 class=tab title=content_2Tab 2/a/
li
lia href=my_form#tab_3 class=tab title=content_3Tab 3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput 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
[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 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
lia href=my_form#tab_1 class=tab title=content_1Tab 1/a/
li
lia href=my_form#tab_2 class=tab title=content_2Tab 2/a/
li
lia href=my_form#tab_3 class=tab title=content_3Tab 3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput 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
[jQuery] Re: $('#id').width()
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
lia href=my_form#tab_1 class=tab title=content_1Tab 1/a/
li
lia href=my_form#tab_2 class=tab title=content_2Tab 2/a/
li
lia href=my_form#tab_3 class=tab title=content_3Tab 3/a/
li
/ul
!--insert tab 1--
div id=content_1 class=tab_content
a name=tab_1/a
label for=field_idMy Test Field:/labelinput 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
[jQuery] Re: $('#id').width()
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
image is still inserted and the image click is still handled. It
appears that the only thing not being updated is the field width.
Has anyone come across this before or have any ideas if (and where)
I'm going wrong?
Cheers,
Lee
[jQuery] Re: $('#id').width()
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
image is still inserted and the image click is still handled. It
appears that the only thing not being updated is the field width.
Has anyone come across this before or have any ideas if (and where)
I'm going wrong?
Cheers,
Lee
[jQuery] Re: $('#id').width()
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
image is still inserted and the image click is still handled. It
appears that the only thing not being updated is the field width.
Has anyone come across this before or have any ideas if (and where)
I'm going wrong?
Cheers,
Lee
[jQuery] Re: $('#id').width()
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
image is still inserted and the image click is still handled. It
appears that the only thing not being updated is the field width.
Has anyone come across this before or have any ideas if (and where)
I'm going wrong?
Cheers,
Lee
[jQuery] Re: $('#id').width()
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
