Shubham Tiwari Shubham Tiwari - 6 months ago 7
Javascript Question

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

Answer

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