Variable transmission

hey, I' d like to change a val dinamically with a select and I'm stuck on this. my js (external):

(function ($) {
    $(document).ready(function () {
        var animfx = ''
        animfx = $('#animationfx').val()
        $('#animationfx').on('change', function () {
          animfx = $('#animationfx').val()
          // alert (animfx)
        })
    })
})(jQuery)

my select:

<select id="animationfx">
 <option value="fade">fade</option>
  <!-- … -->
</select>
<div class="uk-margin" data-uk-slideset="{small: 2, medium: 3, large: 5, animation: 'scale'}">

untill here I see the change on select and all is all right. I've spend hours to read things on internet that look like chinese to me θ - ( To change this:

<div class="uk-margin" data-uk-slideset="{small: 2, medium: 3, large: 5, animation: 'scale'}">

by this:

<div class="uk-margin" data-uk-slideset="{small: 2, medium: 3, large: 5, animation: animfx}">

What should I do to match it?

Hey, after a while I'm here:

(function ($) {
    $(document).ready(function () {
        // alert ($("#animationfx").val());
        var animfx = ''

        //Récupération au chargement de la page.
        animfx = $('#animationfx').val()
        changeAnimationValue ()

        function changeAnimationValue () {
          $( "div.tm-replace" ).attr({'data-uk-slideset':'{small: 2, medium: 3, large: 4, animation: \'' + animfx + '\'}'})
        }
        //Récupération au changement de valeur du select.
        $('#animationfx').on('change', function () {
          animfx = $('#animationfx').val()
          changeAnimationValue ()
        })
    })
})(jQuery)

in my include php I had this:

<div class="uk-margin tm-replace" data-uk-slideset="{small: 2, medium: 3, large: 4, animation: 'slide-horizontal'}">

When I'm loading the page it's working good, animation value change to fade:

<div class="uk-margin tm-replace" data-uk-slideset="{small: 2, medium: 3, large: 4, animation: 'fade'}">

but after when using the select dropdown value animation still change but the effect doesn't?

Here is a snippet for you:

( function( $ ) {
 $( document ).ready( function() {
   $( '#animationfx' ).change( function() {
      // Decode attributes to object.
     var attrObject = UIkit.Utils.options( $( '#slideset' ).attr( 'data-uk-slideset' ) );

      if ( undefined !== attrObject.animation ) {
       // Modify animation attribute.
        attrObject.animation = $( this ).val();

       // Re-assign attributes.
        $( '#slideset' ).attr( 'data-uk-slideset', JSON.stringify( attrObject ) );
      }
   } );
  } );
} )( jQuery );

Note: add the id slideset to your slideset div which has the data-uk-slideset attribute for the snippet above to work. In the snippet above we are using UIkit.Utils.options which is a nice utility function to parse data attributes, you could also use Regex for that but I find the solution above more solid.

Have fun,

Super! Many thanks, and the soluce is wide open to reuse it anytime. Oject programming with dot syntax, that's really the rigth way. I'll have a deeper look in Uikit.Utils.options
Thanks again for the lesson and your time, you make my day.

Hum, I've tryied the snippet but it does like mine, value change but effect stay as it was define on loading page, we probably need to reload all the slideset to make the change happen?

May I ask why you would like to change it onload rather than loading the correct value on first load?

Yes, it was to offer interactivity, as I come from actionscript I have old use ; ) By the way, is it bad to use less together with css, I mean may I active style.css together with style.less, it is to quickly see change in development, before integrate it in less later. Thank you.

Hey Oliver,

Do you still need help with the JS to fire on load or you sorted out. Personally, I would advise to load the correct value instead of changing it on load.

Regarding using CSS and LESS it is perfectly fine. If you think of what Beans does with it, it ends up exactly the same as using one file. Why? Because Beans automatically grab your LESS content, process it to CSS, then grab your CSS and compile everything with the UIkit compiled CSS. So everything end up processed to CSS into one file. In fact, you could use 20 files if you want, it won't make a difference 🙂 Note that you can add any CSS in your LESS file hey, it doesn't have to be separated.

Hope that helps,

Hey Thierry, thank you, yes I forgot the interactivity I'll see that later, I'm too young to play with such thing 😉 Anyhow your poo snippet will be useful anytime. About Less and css, ok I'm right in, mostly in Less, to get it's all power. Beans is really a great tool, I long to get use to it, so still then I'm practicing 🙂 Have a nice day.

Hey everyone, in fact this will do the trick:

jQuery(function ($){
      var select = $('animationfx').on('change', function (){
         select.next('[data-uk-slideset]').data('slideset').options.animation = select.val();
      })
})

or this:

(function ($){
      var select = $('#animationfx').on('change', function (){
         select.next('[data-uk-slideset]').data('slideset').options.animation = select.val();
      })
})(jQuery)

The the last one only run once!

So we have the js:

jQuery(function ($) {
      var select = $('#animationfx').on('change', function () {
         select.next('[data-uk-slideset]').data('slideset').options.animation = select.val()
      })
})

including in beans with beans_uikit_enqueue_scripts:

beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/lib/assets/helpers/js/animValSelect.js', 'js' );

and the include php:

<?php
?>
<article class="uk-article">
  <h3 class="tm-article-subtitle">Slideset with fx</h3>

  <select id="animationfx">
    <option value="fade">fade</option>
    <option value="scale">scale</option>
    <option value="slide-horizontal">slide-horizontal</option>
    <option value="slide-vertical">slide-vertical</option>
    <option value="slide-top">slide-top</option>
    <option value="slide-bottom">slide-bottom</option>
  </select>

  <div id="slideset" class="uk-margin" data-uk-slideset="{small: 2, medium: 3, large: 4, animation: 'fade'}">
    <div class="uk-slidenav-position  uk-margin-top-remove">
      <ul class="uk-slideset uk-grid uk-flex-center">
        <li><img src="../../wp-content/themes/tbr-viadecom/assets/slideset/1.jpg" width="224" height="150" alt="paysage"></li>
        <li><img src="../../wp-content/themes/tbr-viadecom/assets/slideset/2.jpg" width="224" height="150" alt="paysage"></li>
        <li><img src="../../wp-content/themes/tbr-viadecom/assets/slideset/3.jpg" width="224" height="150" alt="paysage"></li>
        <li><img src="../../wp-content/themes/tbr-viadecom/assets/slideset/4.jpg" width="224" height="150" alt="paysage"></li>
        <li><img src="../../wp-content/themes/tbr-viadecom/assets/slideset/5.jpg" width="224" height="150" alt="paysage"></li>
        <li><img src="../../wp-content/themes/tbr-viadecom/assets/slideset/6.jpg" width="224" height="150" alt="paysage"></li>
        <li><img src="../../wp-content/themes/tbr-viadecom/assets/slideset/7.jpg" width="224" height="150" alt="paysage"></li>
        <li><img src="../../wp-content/themes/tbr-viadecom/assets/slideset/8.jpg" width="224" height="150" alt="paysage"></li>
        <li><img src="../../wp-content/themes/tbr-viadecom/assets/slideset/9.jpg" width="224" height="150" alt="paysage"></li>
        <li><img src="../../wp-content/themes/tbr-viadecom/assets/slideset/10.jpg" width="224" height="150" alt="paysage"></li>
        <li><img src="../../wp-content/themes/tbr-viadecom/assets/slideset/11.jpg" width="224" height="150" alt="paysage"></li>
      </ul>
    </div>
    <ul class="uk-slideset-nav uk-dotnav uk-flex-center uk-margin-top"></ul>
  </div>
</article>
<?php

including in beans with beans_add_smart_action :

beans_add_smart_action( 'beans_post_append_markup', 'add_intro' );
function add_intro() {
  echo beans_open_markup( 'viadecom_container', 'div', array(
    'class' => 'uk-container uk-container-center' ) );
    ?><?php include_once( 'lib/uikit-components/slideset/slideset-dotnav-fx.inc.php' ); ?><hr class="uk-grid-divider" /><?php
    echo beans_close_markup( 'viadecom_container', 'div' );
  }