Hi Connor,

You posted quite a lot of code for us to comb through. You might try isolating the problem by commenting out various portions of your script and see if the uncommented portions still work. Also, see if IE is throwing an error. There's a setting that you can switch to have IE automatically open a dialog when there is a js error. Otherwise, it just puts a little warning icon in the bottom left of the status bar.

Since you're animating the color property, I'm guessing that you're using either a color plugin or jQuery UI effects. If it's the latter, you'll have more success getting an answer on the jquery-ui Google Group.


--Karl

____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Apr 18, 2009, at 10:40 AM, Connor wrote:


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