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;}
精彩评论