CODEWITHSUNDEEP
javascriptjqueryresponsive-designlightbox
Adrian
Adrian

Reputation: 283

Remove rel attribute using jquery based on screensize?

I am using lightbox for a group of images on 3 seperate pages. I have just made the website responsive for mobile but need to disable the lightbox on mobile. I believe the best way for this is to remove the rel attribute for smaller screens.

The rel attribute is: rel="lightbox[page-name]" and these are in the anchors within unordered lists with classes of brandingsamples, marketingsamples and webdesignsamples.

I havent got a clue where to start with this so any help appreciated.

Upvotes: 0

Views: 1754

Answers (4)

Donnie Rock
Donnie Rock

Reputation: 525

You could try

<script type="text/javascript>
$(document).ready(function(){
  if(screen.width<600){
    $('a').removeAttr('rel[lightbox]');
  }
});
</script>

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

Instead of removing the attribute I would rather execute the lightbox script (and load all necessary assets) only if your page is not viewed on a mobile context. This would allows you to save precious bandwidth and make your page faster to load.

You could use a light script/assets loader like yepnope that loads the lightbox assets only if a given condition is satisfied (e.g. you may look at screen resolution, or your screen dpi value)

A simple example could be

<script src="/assets/yepnope.min.js"></script>
<script>
    yepnope([{
       test: (screen.width > 1024),  // if we're on a large screen
       yep: ["/css/lighbox.css", "/assets/lightbox.js"]
    }]);
</script>

Upvotes: 2

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

to simply remove an attribute you can try this:

$('selecter').attr('attrname', 'valueifany');

In your case it would be:

$('body').attr('rel[lightbox]', '');

Or a simple one: 

$('body').removeAttr('rel[lightbox]');

To give the condition you can apply the screen-width condition as:

if($(window).width() >= 'value' && $(window).height() >= 'value') {
  // write the code here..
}

http://api.jquery.com/removeattr/

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

Detect mobile device and then remove attribute in it.Use:

   if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   $('selector').removeAttr('rel');
   }

Upvotes: 0

Related Questions