Not able to fetch inline transform scale using jquery

Question

I am creating a functionality wherein I need to fetch the inline transform scale value from each li.

Below I have created a demo for you to help me out?

HTML

<div style="color:red;transform:scale(1);">Dummy content</div>

JS

$(function(){
   $('div').click(function(){
   var trans=$('div').css('transform');
   console.log(trans);  
  });
});

Thanks in advance!

--------------------Update------------------------

I think my question didnt justify to the problem currently I am facing so please check the below codepen for the reference.

http://codepen.io/anon/pen/vOzoWv

Below is the code available who might not be able to check in codepen:

HTML

<ul>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.55); margin-top: -100px;">
    </li>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.6); margin-top: -80px;">
    </li>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.7); margin-top: -40px;">
    </li>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.8); margin-top: 1px;">
    </li>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.9); margin-top: 50px;">
    </li>
    <li class="image-container">
        <img src="static/images/fileeebox/Receipt.jpg" alt="Receipt" style="transform: scale(1); margin-top: 100px;">
    </li>
    <li class="image-container">
        <img src="static/images/fileeebox/Receipt.jpg" alt="Receipt" style="transform: scale(1.1); margin-top: 200px;">
    </li>
    <li class="image-container" style="display: none;">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(1.1); margin-top: 200px;">
    </li>
    <li class="image-container" style="display: none;">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(1.2); margin-top: 700px;">
    </li>
    <li class="image-container" style="display: none;">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt">
    </li>
</ul>

CSS:

ul li.image-container img {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
    transition: all 600ms ease-in-out;
    list-item-style:none;
}
ul li.image-container:last-child img {
    transform: scale(1.2);
    margin-top: 700px;
}
ul li.image-container:nth-last-child(2) img {
    transform: scale(1.1);
    margin-top: 200px;
}
ul li.image-container:nth-last-child(3) img {
    transform: scale(1);
    margin-top: 100px;
}
ul li.image-container:nth-last-child(4) img {
    transform: scale(0.9);
    margin-top: 50px;
}
ul li.image-container:nth-last-child(5) img {
    transform: scale(0.8);
    margin-top: 1px;
}
ul li.image-container:nth-last-child(6) img {
    transform: scale(0.7);
    margin-top: -40px;
}
ul li.image-container:nth-last-child(7) img {
    transform: scale(0.6);
    margin-top: -80px;
}
ul li.image-container:nth-last-child(8) img {
    transform: scale(0.55);
    margin-top: -100px;
}
ul li.image-container:nth-last-child(9) img {
    transform: scale(0.5);
    margin-top: -120px;
}
ul li.image-container:nth-last-child(10) img {
    transform: scale(0.45);
    margin-top: -140px;
}
ul li.image-container:nth-last-child(n+10) img {
    transform: scale(0.4);
    margin-top: -155px;
}

JS

$(function(){
    $('img').click(function(){
        var arrImages=$('li.image-container');
        var length=arrImages.length;
        var lastElement=$(arrImages).find(':visible').last();
        var i;
        for(i=length-1;i>=0;i--){
            var obj=$(arrImages[i]);
            var prevMargin=$(obj).eq(i-1).find('img').css('margin-top');
            var prevScale=$(obj).eq(i-1).find('img').css('transform');
            alert(prevMargin);
            alert(prevScale);
        }
    });
});

see stackoverflow.com/questions/8601209/… or stackoverflow.com/questions/8601209/… Read up on transform matrix so you can figure out how to work with the various x-y values — charlietfl
– charlietfl, Commented Jul 23, 2015 at 14:08

DavidDomain · Accepted Answer · 2015-07-24 08:28:50Z

1

-- Update

Ok, since that was not obvious from the info in your previous post i am just putting my update of the answer up here. This should be what you are looking for.

$(function() {
  $('img').click(function(){
    var arrImages = $('li.image-container');
    var length = arrImages.length;
    var lastElement = $(arrImages).find(':visible:last');
    var i;
    for( i = length -1; i >= 0; i-- ) {
      var obj = $(arrImages[i]);
      if (i < length - 2 && i !== 0) {
        var prevMargin = arrImages.eq(i - 1 ).find('img').css('margin-top');
        var prevScale = arrImages.eq(i - 1 ).find('img').css('transform');
        console.log(prevScale);
      }
    }
  });
});

edited Jul 24, 2015 at 8:28

answered Jul 23, 2015 at 15:32

DavidDomain

15.3k4 gold badges44 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Shubham Tiwari Over a year ago

Hi Thanks for the detailed answer, Have updated my code request you to please check and let me know what I am missing out.

Shubham Tiwari Over a year ago

Hi David, So looking at the code the difference is that I should have used last method whereas u have included that in selector? Please let me know incase if I am missing out something. Thanks !

DavidDomain Over a year ago

@ShubhamTiwari - What do you mean by last method ? The main difference is, that obj is already a jquery object, so you don't have to do $(obj).eq(..., the other thing is that obj is the current image in the loop, so to select the previous image you have to select from arrImages.eq(.... You also have to make sure that there is a previous image, the if ( i = length - 2 && i !== 0 )... takes care of that.

Shubham Tiwari Over a year ago

@DavidDomain- I think I was referring to your previous update but this one does points out the mistake I was doing. Thanks for your time and looking at my issue! It worked thanks!

DavidDomain Over a year ago

@ShubhamTiwari - Sure, your welcome. So you mean the calculation of the matrix? Maybe it is better to post another question for that, i deleted it here, because it was so different from your current problem and had not really anything to do with it.

Collectives™ on Stack Overflow

Not able to fetch inline transform scale using jquery

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related