odd behaviour in IEs when using jQuery1.3.2 for a scrip

2,314 Posts

anonymized-26931 Reply #1, 16 years, 6 months ago

Hi everybody,

i use a jQuery script to resize text on a page ... this one, found here:
http://simplersolutions.biz/content/font-resizer

it was working great until i checked my site in IE7 ( and 6 ) ... clicking on either the decrease link, or the increase link, the font will increase what looks like 1000%.

when i checked their site with IE’s, i found out that it works and that they use jQuery1.1

so my question is now, does anyone know what could cause that behaviour with IEs when using jQuery 1.3.2 instead of 1.1?

my head section:

		<head>
		<script type="text/javascript" src="assets/js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="assets/templates/js/jquery.cookie.js"></script>
		<script type="text/javascript" src="assets/templates/js/jquery.fontResize.js"></script>

		<script type="text/javascript">
		$('document').ready(function() {$().fontResize();});
		</script> 
		</head>

the body part

		<body>
			<span>
			<img class="increaseFont fontresize" src="assets/templates/img/font+.gif" alt="font bigger" />
			<img class="decreaseFont fontresize" src="assets/templates/img/font-.gif" alt="font smaller"/>
			</span>
			....
			content
			....
		</body>

i tried to contact ( and write comments on that site ) them, but it looks like the script isn’t supported.

thanks, j

2,204 Posts

Dimmy Reply #2, 16 years, 6 months ago

one problem that I see is that the <head> tag is not closed in the code above.

Dimmy

follow me on twitter: @dimmy01

2,314 Posts

anonymized-26931 Reply #3, 16 years, 6 months ago

one problem that I see is that the <head> tag is not closed in the code above.

thanks for looking at it, just sloppy copy & pasting, fixed it in the post above

...problem persists

2,314 Posts

anonymized-26931 Reply #4, 16 years, 6 months ago

... this seems to be the most advanced font-resize script out there: http://www.frontendplace.nl/bb/?p=399

244 Posts

noahlearner Reply #5, 16 years, 6 months ago

@sharkbait,

I had a similar problem with font resizing / jQuery and then I set the base font size with a pixel value and not either a percentage value or em value and the problem went away. You can look below to see the pixel value.

<script type="text/javascript" language="javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
  // Reset Font Size
  var originalFontSize = 12;  // Here is the pixel value...
  jQuery(".resetFont").click(function(){
  jQuery('#main_body p,#main_body li').css('font-size', originalFontSize);
  });
  // Increase Font Size
  jQuery(".increaseFont").click(function(){
  	var currentFontSize = jQuery('#main_body p').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum+4;
	jQuery('#main_body p,#main_body li').css('font-size', newFontSize);
	return false;
  });
  // Decrease Font Size
  jQuery(".decreaseFont").click(function(){
  	var currentFontSize = jQuery('#main_body p').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum-4;
	jQuery('#main_body p,#main_body li').css('font-size', newFontSize);
	return false;
  });
});
</script>

I also hard coded the font size in the css file and declared

html{font-size:16px;}body{font-size:12px;}

which does the same thing as font-size: 100%; for html and 75% for body....Food for thought.

-Noah

http://www.learnerdesign.com/ | http://www.youngsbicycleshop.com/
twitter: @noahlearner