Does this <head> look ok to you?

**brainbuzzmedia** · 08-02-2010, 12:20 AM

Any sort of jquery slider like nivo or coin that I put into my template is causing IE8 to have a huge lag slowdown. To anyone who knows what they're doing with js / html better than me, could you glance over my <'head'> section and let me know if anything looks wrong or like it might cause a problem?

Or if you can think of any other reason why the effect on these sliders would be slowing down IE that would help me out a ton.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"><head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Blueprint by Brainbuzz Media</title>

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="colorbox.css" type="text/css" />

<!-- dropdown menu -->
<link href="dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="dropdown/themes/stylish/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<!-- jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- dropdown menu -->
<script type="text/javascript">
$(document).ready(function () {	

$('ul.dropdown ul').css('display', 'none');

	$('ul.dropdown li').hover(
		function () {
			//show its submenu
			$('ul', this).slideDown(250);
		}, 
		function () {
			//hide its submenu
			$('ul', this).slideUp(250);			
		}
	);
	
});
</script>

<!-- cufon -->
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="cufon/Museo_Sans_500.font.js" type="text/javascript"></script>
<script src="cufon/mplus-2p_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
			Cufon.replace('h1, h3, h4, h5, h6, th', { fontFamily: 'mplus-2p' });
			Cufon.replace('h2', { fontFamily: 'Museo Sans 500' });
</script>

<!-- sliders -->
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<!-- initialize sliders -->
<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider();
});
</script>

<!-- colorbox -->
<script src="js/jquery.colorbox.js" type="text/javascript"></script>

<script type="text/javascript">
			$(document).ready(function(){
				//Examples of how to assign the ColorBox event to elements
				$("a[rel='example1']").colorbox();
				$("a[rel='example2']").colorbox({transition:"fade"});
				$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
				$("a[rel='example4']").colorbox({slideshow:true});
				$(".example5").colorbox();
				$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
				$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
				$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
				$(".example9").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});
				
				//Example of preserving a JavaScript event for inline calls.
				$("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});	
		});
</script>

<!-- IE6 png fix -->
<script type="text/javascript" src="js/jquery.pngFix.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script> 


</head>

**jscheuer1** · 08-02-2010, 04:07 AM

Both cufon and jquery.pngFix.js can cause problems like that. The latter is not required for IE 7 and above, make sure it isn't used by those browsers by placing the call for it inside conditionals (additions highlighted):

Code:

<!-- IE6 png fix -->
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery.pngFix.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script> 
<![endif]-->

As for cufon, that would depend upon how large the font files are, how extensive your use of it is, if you've used it in certain ways inside of certain other code and/or markup, and whether you've followed the installations instructions properly. There are special considerations for IE as noted on the cufon site.

There could be other issues. To really diagnose a page, we need a link to it.

**brainbuzzmedia** · 08-02-2010, 04:43 AM

Its cufon. Just tested removing all of the cufon and it works just fine. I am going to have to go check the IE instructions to see how to apply it without ruining the site for IE.

Thanks a ton.

**brainbuzzmedia** · 08-02-2010, 05:42 AM

I looked around quite a bit and couldn't find any documentation of how cufon can slow down IE (especially to the point where it is unusable). The only thing I found on the website was the instructions to stop the font replacement from flickering when the page first loads, which I had implemented already.

Any idea what I can do to still use cufon but avoid reducing IE to a frozen page?

**jscheuer1** · 08-02-2010, 04:28 PM

Sorry, that's the extent of my knowledge on cufon. Perhaps there's a support forum on this list:

http://www.google.com/search?client=...utf-8&oe=utf-8

where you could get help.

I'm personally (mildly) opposed to cufon. It strikes me as a lot of additional overhead with little payback. Even in browsers where it appears to work seamlessly, get that page on a slower connection, without the fonts being cached, it would be a mess. But this falls into the same category as a page loaded up with images, scripts, and/or Flash. There's just so much you can reasonably do on a page before it begins to fall under its own weight, at least some of the time, often much of the time.

One possible alternative here would be (via IE conditional comments and a little creative coding) to use commonly available fonts that most closely match your cufon choices and skip cufon for IE.

Thread: Does this <head> look ok to you?

Thread Tools

Search Thread

Does this <head> look ok to you?

Bookmarks

Bookmarks

Posting Permissions