开发者

Jquery only processing first function/block of code

I have a page with three different snippets of jquery code, all doing different things. The problem is that when they are all on the page, only the first one works. I've changed the order, and regardless of the snippet, only the first one works. Is there an internal jquery conflict I'm missing?

My code:

<script type="text/javascript"> 

jQuery(document).ready( function() {

    $("#main-menu li").mouseenter(function() {  
        $(this).find("ul").fadeIn();
    }).mouseleave(function(){
      $(this).parent().find("ul").fadeOut();
    });

    jQuery( ".text-resize a" ).textresizer({
         target: ".content",
         type: "fontSize",
         sizes: [ "12px", "16px" ],
         selectedIndex: 0
    });
    jQuery( ".text-resize a" ).textresizer({
         target: ".title",
         type: "fontSize",
         sizes: [ "11px", "16px" ],
         selectedIndex: 0
    });
    jQuery( ".text-resize a" ).textresizer({
         target: ".show-more",
         type: "fontSize",
         sizes: [ "12px", "16px" ],
         selectedIndex: 0
    });
    jQuery( ".text-resize a" ).textresizer({
         target: "#footer",
         type: "fontSize",
         sizes开发者_如何学JAVA: [ "12px", "16px" ],
         selectedIndex: 0
    }); 
    jQuery( ".text-resize a" ).textresizer({
         target: ".copyright",
         type: "fontSize",
         sizes: [ "11px", "16px" ],
         selectedIndex: 0
    }); 

        $(".slidetabs").tabs(".images > div", {

        // enable "cross-fading" effect
        effect: 'fade',
        fadeOutSpeed: "2000",
        // start from the beginning after the last tab   
        rotate: true          
    // use the slideshow plugin. It accepts its own configuration
    }).slideshow( {autoplay: true, interval:3000});

});     
</script> 

Thank you


I assume you are using this textResizer plugin. You really should be using type="cssClass" if you are going to target different sections of the page with different sizes.

jQuery( ".text-resize a" ).textresizer({
     target: "body",
     type: "cssClass",
     sizes: [ "size1", "size2" ],
     selectedIndex: 0
});

You CSS would look something like

body.size1 .content { font-size: 12px;}
body.size2 .content { font-size: 16px;}

body.size1 .title { font-size: 11px;}
body.size2 .title { font-size: 16px;}

body.size1 .show-more { font-size: 12px;}
body.size2 .show-more { font-size: 16px;}

body.size1 #footer { font-size: 12px;}
body.size2 #footer { font-size: 16px;}

body.size1 .copyright { font-size: 11px;}
body.size2 .copyright { font-size: 16px;}

It would be better to combine the CSS for the ones that are the same

body.size1 .title,
body.size1 .copyright { font-size: 11px;}

body.size1 .content,
body.size1 #footer,
body.size1 .show-more { font-size: 12px;}

body.size2 .content,
body.size2 .title,
body.size2 .show-more,
body.size2 #footer,
body.size2 .copyright { font-size: 16px;}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜