Run jQuery function on font size change

Posted by BWPanda on November 13, 2008 at 5:55am

I've got some jQuery code that sets the height of some elements on my page. I'd like to run this code whenever the user changes the font size.

Is this possible?
If so, how?
If not, what would you recommend for getting this function to run often enough to be of use?

The page in question is: http://drupal.brat.info/
The elements that have their height set are the children of the .wrapper class (the 6 holiday thumbnail boxes).

Any and all help would be much appreciated!

Comments

Read this article

Posted by ainigma32 on November 13, 2008 at 12:51pm

It should provide the answer: http://www.alistapart.com/articles/fontresizing

HTH

Arie

Thanks Arie

Posted by BWPanda on November 13, 2008 at 11:24pm

Thanks Arie. Using a combination of ideas from that site and some research I did, I came up with some code that seems to do what I want:

$(document).ready(function() {
  initialSize = $(myElement).height(); // Get initial font size
  checkSize(); // Watch for font size changes
});

function checkSize() {
  var currentSize = $(myElement).height(); // Get current font size
  
  // Compare sizes & run jQueryFunction() if different
  if (currentSize != initialSize) {
    jQueryFunction();
    initialSize = currentSize;
  }
  
  timer(); // Check size again after 1 second
}

function timer() {
  var myTimer = setTimeout('checkSize()', 1000); // Check size every 1 second
}

function jQueryFunction() {
  // Code here to run on font size change...
}

I still have a problem within the jQueryFunction, but at least it runs on font size changes.

Text Resize Module

Posted by attheshow on February 17, 2009 at 12:45am

There's a Drupal 6 module that I built for this a few months ago, called Text Resize. It's pretty similar to what you're talking about.
http://drupal.org/project/text_resize
Let me know how it goes!

Mark W. Jarrell
Manager of Web Services
Jones Knowledge Integration Group, Inc.
http://www.jones.com
http://www.jonesknowledge.com
http://www.jonesdifference.com
http://www.jiu.edu
Twitter: attheshow

Mark W. Jarrell
Web Services Specialist
Austin Peay State University
http://www.apsu.edu
http://fleetthought.com
Twitter: attheshow

Text Size Module

Posted by Christian Zwahlen on February 28, 2009 at 8:37am

Text Size is a jQuery Module and you can set a class (.wrapper) for the resize prozess, and it works well [1].

[1] http://drupal.org/project/textsize