Change class value in jquery at a certain resolution

Asked

Viewed 312 times

0

I’m implementing a youtube video plugin, but I want this plugin in a certain resolution to change a value in your statement. Follows code of example : 

        $('#youmax').youmax({
        apiKey:'AIzaSyDEm5wGLsWi2G3WG40re-DAJcWioQSpJ6o',
        youTubeChannelURL:"https://www.youtube.com/channel/exemplo",
        youmaxDefaultTab:"Uploads",
        youmaxColumns:4, //Valores que quero mudar
        showVideoInLightbox:true,
        maxResults:4 //Valores que quero mudar


    });

I want to change these values "youmaxColumns" and "maxResults" when reaching the width om 600px, for example, declaring another value, like 3 or 2. I await, and thank you for your attention

javascript jquery html

  • Want container or screen width?

  • screen. I want to change the plugin view when arriving on smaller screens

2 answers

0


A simple way to solve this is like this:

function videoYoutube(el, novoValor1, novoValor2) {
   var dados = {
        apiKey:'AIzaSyDEm5wGLsWi2G3WG40re-DAJcWioQSpJ6o',
        youTubeChannelURL:"https://www.youtube.com/channel/exemplo",
        youmaxDefaultTab:"Uploads",
        youmaxColumns:4, //Valores que quero mudar
        showVideoInLightbox:true,
        maxResults:4 //Valores que quero mudar
    };

if (el.width() == 600) {
  dados.maxResults = novoValor1;
  dados.youmaxColumns = novoValor2; 
}
$(el).youmax(dados);
}

$(function() {
   videoYoutube('#youmax', 3, 2);
});

0

Let me give you an example that I use a lot when I want boostrap columns to dynamically change, I create a function that helps me get this result

function BootstrapCalCss(size) {


  var colSize = Math.ceil(12 / (size || 1));

  var $windowSize = $(window).width();


  if ($windowSize >= 992) {
    return 'col-md-' + colSize;
  } else if ($windowSize >= 768) {
    return 'col-sm-' + colSize;
  } else if ($windowSize >= 1200) {
    return 'col-lg-' + colSize;
  } else {
    return 'col-xs-12';
  }


}


$(function() {
  $(window).resize(function() {
    $("#change").addClass(BootstrapCalCss(3));
    $("#change").text(BootstrapCalCss(3));
    
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<H1>RESIZE ME</H1>

<div id="change"></div>

Fiddle: https://jsfiddle.net/Badzpeed/pnntr8c3/1/

Codepen: http://codepen.io/anon/pen/PNmvqJ

This script returns boostrap columns, but if you wanted an int number you can return only the colSize

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.