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
