Retrofitting Responsiveness : Plugin Issues

[Steven Gardner]

Hi,

I have the task of retrofitting our Your text to link here…. We have a long term plan of redeveloping the whole site from the ground up with responsiveness in mind but for the time being I can scatter some javascript/CSS magic over the site and have it respond well to different device sizes.

I have the majority of the site working well, but I have an issue I’m not sure I can solve. On the homepage I have to jQuery plugins being used: liteAccordion and bxSlider.

These get called if ($window.width() > 974) {

but if i resize the screen down the call has still been made and screws up the layout. I have fixed it if the screen is reloaded or is only loaded at that size. These plugins effect the dom by adding classnames and styles

So my question is; Is there something that I can do to “reset” or cancel the calls or effects of the plugin when resized below a threshold then activate them again once the screen is resized beyond the threshold.

I know this might be crazy and overkill but I’d like to be able to answer any questions that will come my way when someone trys to resize their browser and brakes the layout.

Thanks
Steven

[Podders]

Hi @steven_gardner

If your only looking to hide and show that section then i’d be tempted to use a mediaquery in the css to hide/show based on a threshold,

What you are describing can be done because both those plugins support some kind of destroy method but the issue with doing that is that the content will still remain in the page, just not formatted by the plugins,

If it essential that you must unload the plugins at a given breakpoint then i’d recommend taking a look at the Modernizr.mq method, this method will evaluate a given mediaquery in javascript and return true or false if the mediaquery is satisfied, you can then manipulate the dom or unload plugins based on that result,

Documentation for Modernizr can be found here: http://modernizr.com/docs/#mq

[Steven Gardner]

Thanks,

I don’t want to hide the content and already have my css in place to manipulate the content at breakpoints.

The plugins are only activated if the browser window is more than 974px when loaded. If its less my css and javascript will take care of it, the problem is on resize.

I will look into the kill/destroy functionality of the plugins when the screen has reached a breakpoint then hopefully my css will deal with the rest.

[Author]

Posts