/* Usage example: I want some css classes that tracks the width on my

-element. I want these classes to appear on the -element. How to achieve: var myMainElement = 'main', theBodyElement = 'body', optionalArrayOfWidthsToTrack = [480, 640, 720, 1024]; sircon.objects.push( new sircon.plugins.mediaQueryElement(myMainElement, theBodyElement, optionalArrayOfWidthsToTrack) ); This results in a cool behaviour: Whenever the

element has 600px width: - the body gains the class "min-width-480" Whenever the

element has 640px width: - the body gains the class "min-width-480" - the body gains the class "min-width-640" Note: The example uses the body element as target for receiving media classes. You might just want the element itself to gain these classes, like this: var myMainElement = 'main', optionalArrayOfWidthsToTrack = [480, 640, 720, 1024]; sircon.objects.push( new sircon.plugins.mediaQueryElement($myMainElement) ); //You could also add in your own desired widths, like this: sircon.objects.push( new sircon.plugins.mediaQueryElement($myMainElement, false, optionalArrayOfWidthsToTrack) ); */ sircon.plugins.mediaQueryElement = function(desiredElementTag, classTrackerTag, overrideWidts, classPrefix){ var $ = window.jQuery, self = this, elementTag = desiredElementTag, widths = overrideWidts || [480,640,780,1024,1280], currentElementWidth = 0, pfx = classPrefix, w, c, cmax, largestActualWidth; if(!pfx){pfx= '';} if(!classTrackerTag){ classTrackerTag = elementTag; } self.runWidthCheck = function(){ var $element = $(elementTag), $classTracker = $(classTrackerTag); currentElementWidth = $element.width(); for(var i=0,l=widths.length; i= w){ if(!$classTracker.hasClass(c)){ $classTracker.addClass(c); } }else{ if($classTracker.hasClass(c)){ $classTracker.removeClass(c); } } } } self.runWidthCheck(); } setInterval(function(){ for(var i in sircon.objects.mediaQueryElement){ sircon.objects.mediaQueryElement[i].runWidthCheck(); } }, 180);