Question

I’m writing a web page that has a from field that allows a user to select a gallery to associate an image with. there are tabs that you can highlight, and the available gallery are being loaded from a php script on another page, but the problem I’m running into is that, first the buttons only toggle after the second click, which is strange and the second problem I’m running into is that I don’t know how to make only one button toggle at once, so basically I only want one gallery to be associated at a time, so i don’t want multiple ones to be highlighted at the same time. I’m pretty stuck so any help would be greatly appreciated. I’m using jquery as the JavaScript framework. the functions near the bottom are not completely relevant, but i thought i would include them.

   var from_post = false; 
   var addOrRemove = true;

     $(document).ready(function() {

          $("#gallery").load('http://localhost/index.php/site/gallerys_avalible/ #gallerys_avalible', function() {
          $('li').click(function(e) {

            //  console.log($('li').index((this)));


             //  e.preventDefault();

                $(this).toggle(
                function(){
                    $(this).css('background-color', '#CC0000');
                     console.log('backgroudn red');
                },
                function(){
                    $(this).css('background-color', '#00A8F0'); 
                           console.log('backgroudn blue');
                });


                return false;
              });  

            });

           /* $('li').live('click', function(e) {  

            });
        */
            $('#addNew').click(function () {
                console.log('i got called');
                $('#new_form').fadeIn(1000); 
            });

            $('form').submit(function() {

                if(from_post) {
                    //submit form

                    return true; 

                } else {

                    //dont submit form. 
                    return false; 

                }
            });

        });

Thank you to any one who spends the time to help me out with this.

Answer 1

You’ve got waay too many functions going on.

For the second question:

document.onLoad(function(){
    $("#gallery").load('http://…');
    $("#gallery > li").toggle(function(){
        function(){$(this).css('background-color', '#CC0000');},
        function(){$(this).css('background-color', 'ORIGINAL_COLOUR');}
    });
});

it might be better to add/remove a class instead of applying css. to do this:

document.onLoad(function(){
    $("#gallery").load('http://…');
    $("#gallery > li").click(function(){
        $("#gallery > li").toggleClass("active");
        //this will add .active if it's not there, or remove it if it's already there
    });
});

This will take care of any click issues as well.

Also, there’s the jQuery :not() selector if you want to select everything else.