CODEWITHSUNDEEP
javascripthtmlcsshtml-tablerotation
David Jack
David Jack

Reputation: 87

Resize Table Cell/Row to fit newly rotated image

https://jsfiddle.net/3tanm7yu/2/

I currently have images inside a TABLE. I can successfully rotate my images using JavaScript, but unfortunately when the landscape images become portrait the images then appear over the table lines, rather than being contained within the original cell size, or even better, adjusting the size of the table to fit the new orientation of the image. 

<HTML>
<HEAD>
  <STYLE>
    .north {
      transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      /* IE 9 */
      -webkit-transform: rotate(0deg);
      /* Safari and Chrome */
    }

    .west {
      transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      /* IE 9 */
      -webkit-transform: rotate(90deg);
      /* Safari and Chrome */
    }

    .south {
      transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      /* IE 9 */
      -webkit-transform: rotate(180deg);
      /* Safari and Chrome */
    }

    .east {
      transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      /* IE 9 */
      -webkit-transform: rotate(270deg);
      /* Safari and Chrome */
    }

    table {
      border: thin solid black;
      width: auto;
      height: auto;
    }
  </STYLE>
</HEAD>
<BODY>
  <h1>testing rotate</H1>
  <TABLE>
    <TR>
      <TD>
        <IMG WIDTH=1 6 SRC='rotate.png' onclick="rotateImage('image0')">
      </TD>
      <TD>
        <IMG WIDTH=1 6 SRC='rotate.png' onclick="rotateImage('image1')">
      </TD>
    </TR>
    <TR>
      <TD><img class='north' id='image0' src="http://yernana.co.uk/wp-content/uploads/2015/09/tickets.jpg" id="image" /></TD>
      <TD><img class='north' id='image1' src="http://yernana.co.uk/wp-content/uploads/2015/09/tickets.jpg" id="image" /></TD>
    </TR>
  </TABLE>

  <SCRIPT>
    function rotateImage(elementID) {
      alert('Rotating' + elementID);
      alert(document.getElementById(elementID).className);
      if (document.getElementById(elementID).className == "north") {
        alert('changing to west');
        document.getElementById(elementID).className = 'west';
      } else if (document.getElementById(elementID).className == 'west') {
        alert('changing to south');
        document.getElementById(elementID).className = 'south';
      } else if (document.getElementById(elementID).className == 'south') {
        alert('changing to east');
        document.getElementById(elementID).className = 'east';
      } else if (document.getElementById(elementID).className == 'east') {
        alert('changing to north');
        document.getElementById(elementID).className = 'north';
      }
    }
  </SCRIPT>
</BODY>
</HTML>

Any suggestions on how I can fix this?

Upvotes: 1

Views: 337

Answers (2)

David Jack
David Jack

Reputation: 87

Here is the JavaScript I used to fix the issue

function rotateImage(elementID, cellID) {
alert( 'Rotating' + elementID + "Resizing" + cellID);
alert(document.getElementById(elementID).className);

var img = document.getElementById(elementID);
var height = img.clientHeight;
var width = img.clientWidth;

alert('Height = ' + height + 'width = ' +width);

if(document.getElementById(elementID).className == "north"){
    alert('changing to west');
    document.getElementById(elementID).className = 'west';

    document.getElementById(cellID).style.height = width;
}
else if(document.getElementById(elementID).className == 'west'){
    alert('changing to south');
    document.getElementById(elementID).className = 'south';
}
else if(document.getElementById(elementID).className == 'south'){
    alert('changing to east');
    document.getElementById(elementID).className = 'east';
}
else if(document.getElementById(elementID).className =='east'){
    alert('changing to north');
    document.getElementById(elementID).className = 'north';
}
}

Upvotes: 0

silencedogood
silencedogood

Reputation: 3299

You could modify the css using javascript, so basically when you call your rotate image function, have it adjust the size of the cell to fit the newly positioned image. For example: 

document.getElementById('tdelement').style.width = "300px";

although I'd imagine having 

width: auto;

for the cell should accomplish the same thing, but if not the javascript solution should suffice.

Upvotes: 1

Related Questions