[jQuery] Re: Strange problem with ui.datepicker.js
Does anyone have any ideas atall on this? Is it a ui.datepicker bug? Any thoughts/pointers/things to check would be greatly appreciated. Regards, Lee On Aug 28, 4:02 pm, Lee Mc lee.mcmul...@gmail.com wrote: Hi all, Getting a very strange issue with the datepicker component. It seems that whatever the first date on the bottom line of the displayed picker is, is being duplicated. Take a look at what I mean here: http://i773.photobucket.com/albums/yy12/lmcmullen8/datepicker_prob.jpg There are lots of individual datepickers being created on this form and I'm getting this behaviour with all of them Has anybody come across this before? Cheers, Lee
[jQuery] Strange problem with ui.datepicker.js
Hi all, Getting a very strange issue with the datepicker component. It seems that whatever the first date on the bottom line of the displayed picker is, is being duplicated. Take a look at what I mean here: http://i773.photobucket.com/albums/yy12/lmcmullen8/datepicker_prob.jpg There are lots of individual datepickers being created on this form and I'm getting this behaviour with all of them Has anybody come across this before? Cheers, Lee
[jQuery] Autocomplete form submit on enter problem?
Hi I've implemented the ui.autocomplete to a number of inputs and textareas on a form, they all work fine and as expected. All except one, for some reason on one of the autocomplete fields, when I've scrolled to a value in the list and press enter to select the value, the form is being submitted. I'm completely puzzled because this doesn't happen on any of the other autcomplete fields. Here is the code which initialises the autocomplete: $(function(){ // Set up the requestor field requestor_tab.setup(); }); var requestor_tab = { setup: function(){ // Set up the requestor field this.requestor_setup(); }, requestor_setup: function(){ // setup the request_for autocomplete $('#requested_for').addClass('autocomplete').autocomplete (settings.users, { matchContains: true, mustMatch: true, minChars: 0 }).result(function(event, data, formatted){ if ($(this).val() == settings.cur_requested_for) { alert(user is the same); } else { alert(user is different); } }); } } I've looked a little deeper and it appears to be something to do with the alert - when I remove the alert calls, the form doesn't submit. In the live environment the alerts aren't going to be there so therefore the problem will disappear but I'd still like to try and understand why this is happening if possible. Does anyone have any ideas? Cheers, Lee
[jQuery] ui.jquery.com - down?
Anyone know what the deal is with ui.jquery.com being down? I'm just getting a default Apache page. Any ideas when it will be available again?
[jQuery] Lightbox/ThickBox/ui.dialog etc
Hi there, Does anyone have an opinion on what they think is the best lightbox implementation to use? It's not going to be used to display images, it's mainly form interaction. My only caveat's are: - Must be draggable - Must (unfortunately) work in IE6 - Must be modal I've been playing with ui.dialog and really like it. However I seem to be having some issues in IE6 - using the same theme as displayed on this page: http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.dialog The close image on the title bar is causing some layout issues and also select elements from the underlying content are appearing through into the content of the dialog. A quick search brought back this: http://jquery.com/demo/thickbox/. Appears to do everything required except be draggable. Can anyone point me in the right direction? Cheers, Lee
[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()
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
[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()
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()
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] $('#id').width()
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] $('#id').width()
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()
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