CODEWITHSUNDEEP
javascriptjquery
webmonkey237
webmonkey237

Reputation: 379

Setting property of plugin dynamically based on browser width

I am currently implementing a accordion image slider into a project and the slider has the following optional settings.

$("#accordion").awsAccordion({
    type: "horizontal",
    cssAttrsHor: {
        ulWidth: "responsive",
        liHeight: 500,
        liWidth: 50
    },
    cssAttrsVer: {
        ulWidth: "responsive"
    },
    startSlide: 2,
    openCloseHelper: {
        openIcon: "plus",
        closeIcon: "minus"
    },
    openOnebyOne: true,
    classTab: "small",
    slideOn: "click",
    autoPlay: true,
    autoPlaySpeed: 3000
})

Where it says: type:"horizontal", I want to change this to: type:"vertical", When the browser width is under 768px, is that even possible.

Upvotes: 2

Views: 62

Answers (2)

PacMan
PacMan

Reputation: 1358

try to make it variable 

$(function(){
var x;
if(window.width<786){
x = "vertical";}else{
x= "horizontal";}
});

and then you put your code here as defined below 

$("#accordion").awsAccordion({
  type: x , 
  cssAttrsHor:{
      ulWidth:"responsive",
      liHeight:500,
      liWidth:50
  },

Upvotes: 2

Tushar
Tushar

Reputation: 87203

This can be done by setting the type property by using a variable

var type = 'horizontal'; // Default type
if ($(window).width() < 768) {
    type = 'vertical'; // When window width is less than 768, make type vertical
}

$("#accordion").awsAccordion({
    type: type, // Use variable here
    ...
});

To run the code on window resize, resize event can be used.

function update() {
    var type = 'horizontal'; // Default type
    if ($(window).width() < 768) {
        type = 'vertical'; // When window width is less than 768, make type vertical
    }

    $("#accordion").awsAccordion({
        type: type, // Use variable here
        ...
    });
}

$(window).resize(update).trigger('resize');

Upvotes: 2

Related Questions