Change class value in jquery at a given resolution

Question

Change class value in jquery at a given resolution

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm implementing a youtube video plugin, however I want this plugin at a given resolution to change a value in your statement. Here is an example code:

        $('#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 "youmaxColumns" and "maxResults" values when I reach 600px width, for example, declaring another value, such as 3 or 2. I am waiting, and thank you in advance for your attention

javascript html jquery

asked by anonymous 24.03.2016 / 20:24

2 answers

0

I'll give you an example that I use a lot when I want to dynamically change boostrap columns, I create a function that helps me get to 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><scriptsrc="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: link

Codepen: link

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

24.03.2016 / 21:13

@Retryable and @Async with spring .Text to .Int Converter

score 0 · Accepted Answer

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);
});