dynamically modifying/disabling javascript based on viewport size

Question

I'm using the galleriffic jQuery image gallery plugin within a responsive site design which can be viewed here. As you can see by resizing the browser window, I've created various states for iPad, portrait & landscape--which still displays the full image gallery, i.e. thumbnails and adjacent full-size images-- and finally the for the iPhone, which displays only thumbnails.

My problem is that with the iPhone layout, the thumbnails are still linking to the main gallery container-- which I have hidden-- whereas I'd like them to link simply to larger JPEGs to open separately, i.e. as if the galleriffic script were disabled entirely. The script is dynamically removing a "noscript" class attached to "ul.thumbs"-- so the gallery will degrade gracefully without javascript-- and I thought by trying to re-add the class via jQuery addclass I could effectively disable galleriffic from initializing, but that didn't work.

Ultimately, I'm hoping to find the most elegant solution possible for changing/disabling the galleriffic script's modification of the thumbnail links only when the viewport is 480 px or less-- is this possible?

Thanks for any guidance here.

ahren · Accepted Answer · 2012-08-25 07:15:40Z

4

Inside your document.ready() (or alternative), do a conditional check.

if($(window).width() > 480){
//create gallery
}

Keep in mind this won't work for people who resize their browsers on the fly - which is pretty much nobody except for web developers.

answered Aug 25, 2012 at 7:15

ahren

17k5 gold badges52 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nickpish Over a year ago

thanks for your response ahren. I was trying to figure out where exactly to place that condition as wrapping the actual initialization didn't seem to work (?) I was able to find a solution by modifying the click handler in the galleriffic script-- i.e.

if ($(window).width() > 480){ 					 				$aThumb.attr('rel', 'history') 					.attr('href', '#'+hash) 					.removeAttr('name') 					.click(function(e) { 						gallery.clickHandler(e, this); 					});  				return this; 				};},

do you see any issues with this approach? (I've updated the page referenced in my original post)

Community · Accepted Answer · 2017-05-23 12:06:28Z

1

You're better off using a CSS media query based detection to trigger your js functions, with some browsers the media query width differs from the width reported in js.

And yes people DO now resize their windows reasonably often... when ever someone rotates their iphone/android it's a window resize event.

See this related question which includes some basic code: How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Oct 12, 2012 at 20:11

Ed Kirk

5831 gold badge4 silver badges9 bronze badges

Comments

Carlos Cabo · Accepted Answer · 2015-02-26 08:07:06Z

0

I had a similar problem with some carousels that must be created on mobile, but destroyed in desktop... and I did not likde the solution of being checking window width in pixels, so I created a small function to "listen" when the mediaquery state changes.

You can define your own code in every state ("on entering mobile resolution", "on leaving desktop")...

Hope could be useful for someone else ;)
https://github.com/carloscabo/MQBE

edited Feb 26, 2015 at 8:07

answered Feb 26, 2015 at 8:01

Carlos Cabo

7411 gold badge7 silver badges14 bronze badges

Collectives™ on Stack Overflow

dynamically modifying/disabling javascript based on viewport size

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related