CODEWITHSUNDEEP
javascriptjquery
Shubham Tiwari
Shubham Tiwari

Reputation: 713

Not able to fetch inline transform scale using jquery

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

Upvotes: 1

Views: 76

Answers (1)

DavidDomain
DavidDomain

Reputation: 15293

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

Upvotes: 1

Related Questions