CODEWITHSUNDEEP
jquerycss
epostema
epostema

Reputation: 31

Jquery .trigger('change'); setting multiple css changes

I would like to change an extra css property:value in the below script. I would like to add top:70%; when 'rotated text' is selected, how do I add it correctly?

I found some different options (e.g. $(".sw_poster_text2").css({"propertyname":"value","propertyname":"value"}); but that's not working in my script.

.trigger('change');
    $("select[data-field-id='5f01284fb2641']").change(function() {
        var transform = $(this).find('option:selected').data('wapf-label');
        if(transform == 'straight text')
            transform = 'rotate(-0deg)';
        if(transform == 'rotated text')
            transform = 'rotate(-40deg)';
        $(".sw_poster_text2").css("transform", transform);
    });

Upvotes: 0

Views: 57

Answers (2)

Twisty
Twisty

Reputation: 30893

If you make good use of Classes, you can more easily style the element.

$("select").change(function() {
  var transform = $(this).find('option:selected').data('wapf-label')
  var sample = $(this).siblings('.sw_poster_text2')
  sample.attr("class", "sw_poster_text2").addClass(transform);
});
.strait {
  top: inherit;
  transform: rotate(-0deg);
}

.rotated {
  position: absolute;
  top: 70%;
  transform: rotate(-40deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select data-field-id="5f01284fb2641">
    <option data-wapf-label="straight text">Straight text</option>
    <option data-wapf-label="rotated text">Rotated text</option>
  </select>
  <div class="sw_poster_text2">Sample text</div>
</form>

Upvotes: 0

Miller Cy Chan
Miller Cy Chan

Reputation: 947

css top should be px, em rather than %.

$("select[data-field-id='5f01284fb2641']").change(function() {
        var transform = $(this).find('option:selected').data('wapf-label');
        if(transform == 'straight text')
            transform = 'rotate(-0deg)';
        if(transform == 'rotated text') {
            transform = 'rotate(-40deg)';
            $(".sw_poster_text2").css({position: "absolute", top: "70px"});
        }
        $(".sw_poster_text2").css("transform", transform);
        console.log($(".sw_poster_text2").attr("style"));
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select data-field-id="5f01284fb2641">
<option data-wapf-label="straight text">Straight text</option>
<option data-wapf-label="rotated text">Rotated text</option>
</select>
<div class="sw_poster_text2">Sample text</div>
</form>

Upvotes: 1

Related Questions