Hi,

I've learned jQuery & javascript pretty recently. That being said, I'm
not entirely confident in my syntax. I've just recently completed some
jQuery and it works perfectly in all browsers except IE6. I'm guessing
because IE6 is more strict. Anyways, would anyone mind looking through
this piece of jQuery, and verify that I'm writing everything
correctly?

For a demo, you can go to http://cyberantix.org/demo/portfolio/index.html

Or my javascrip (I'm using the color and cookie plugin):

$(function() {

        /*Overwrites the CSS that is written incase JS is disabled*/
        $(".color-changer").show();
    $(".thick").css("margin-bottom", "0px");

        /*Sets cookie information */
        COOKIE_NAME = 'color';
        options = { path: '/', expires: 20 };

        /* If there is a cookie for the color, it assigns it to a variable
here */
        color = $.cookie(COOKIE_NAME);

        /*Here we change the color from the default of blue set in the CSS
file, to the color that was in the cookie
        If there was no color set, it will be null and revert back to the
default blue*/

  $(".title b").css("color", color);
  $(".thick").css("backgroundColor", color);
  $("a.link").css("color", color);
  $("h2.sub-title b").css("color", color);

  /*This is where we assign a certain color to each swatch on the page
*/
          $("span.white").click(function(){ color = '#e6f8f2';  });
          $("span.yellow").click(function(){ color = '#f8e226'; });
          $("span.orange").click(function(){ color = '#f88e39'; });
          $("span.pink").click(function(){ color = '#f859e3';   });
          $("span.red").click(function(){ color = '#f81631';    });
          $("span.green").click(function(){ color = '#43f831';  });
          $("span.blue").click(function(){ color = '#34a6d3';   });

        /*This is creating the fade in and fade out affect  of the top links
*/

  $(".top-links a").mouseover(function(){
                $(this).css("color", "#bdbcc0" );
                $(this).animate( { color: color }, 300);
    }).mouseout(function(){
                $(this).animate( { color: "#bdbcc0" }, 300);

    });

        /*This creates the animated transistion of color */


  $(".color-changer span").click(function(){
  $(".title b").animate( { color: color }, 1000);
  $(".thick").animate( { backgroundColor: color }, 1000);
  $("a.link").animate( { color: color }, 1000);
  $("h2.sub-title b").animate( { color: color }, 1000);
  $.cookie(COOKIE_NAME, color, options);

    });
        /*Color Changer Opacity Animation --IE ISSUE*/
        $(".color-changer span").mouseover(function(){
                $(this).animate({
                opacity: 1
        }, 500 );
    }).mouseout(function(){
                $(this).animate({
        opacity: .5
      }, 500 );

    });
        /*Project Image Direction Opacity Animation*/
         $(".project-image").mouseover(function(){
                $(this).siblings(".image-hover").animate({
        opacity: .5
      }, 500 );
    }).mouseout(function(){
                $(this).siblings(".image-hover").animate({
        opacity: 0
      }, 500 );

    });
         /* Expansion & Contraction of project slides */
         $(".project-image").click(function(){
                var stateTest = $(this).parent().css('width');
                var valueState = parseFloat(stateTest);
                        if (valueState < 300) {
                                $(".project").animate({
                                width: "250px"
                        }, 500 );
                                $(".project-specs").hide();
                                $(this).siblings(".project-specs").show();
                                $(this).parent().animate({
                                width: "510px"
                        }, 500 );
                        }
                        else{
                                $(this).parent().animate({
                                width: "250px"
                        }, 500 );
                                $(".project-specs").hide();
                        }

    });

         /*Gives the function to the right arrow*/
         $(".right-arrow").click(function(){
                var projectPositionPx = $(".project-list").css('left');
                var projectPosition = parseFloat(projectPositionPx);
                var projectNumber = $('.project').size();
                var projectWidth = 260*projectNumber;
                if ( !$(".project-list").is(':animated') ) {
                if (projectWidth + projectPosition > 300){
                        var desiredPosition = projectPosition - 260 +"px";
                        $(".project-list").animate({
                                left: desiredPosition
                        }, 1000);
                }
                }
        });
          /*Gives the function to the left arrow*/
         $(".left-arrow").click(function(){
                var projectPositionPx = $(".project-list").css('left');
                var projectPosition = parseFloat(projectPositionPx);
                var projectNumber = $('.project').size();
                var projectWidth = 260*projectNumber;
                if ( !$(".project-list").is(':animated') ) {
                if (projectPosition < -259){
                        var desiredPosition = projectPosition + 260 +"px";
                        $(".project-list").animate({
                                left: desiredPosition
                        }, 1000);
                }
                }



        });

         /*Lets the frame in the galery page activate the lightbox */
         $('a.thumb-frame').lightBox({fixedNavigation:true});







 });

Thanks a ton,


Connor

Reply via email to