CSS Table with hover zoom action in HTA

Question

Hello and thank you for reading my post. I am rather new to all this so I'm sorry if its a bit sloppy.

I have a table built and I am trying to use a hover action to zoom in on a cell without moving the rest of the cells. I would also like it to zoom centered, it seems to zoom from the upper left corner as its axis. Below is an edited portion of my table. Currently when i hover, it zooms and moves everything to the right. I would like it to zoom and leave everything else in it's position. Please let me know if you need more information. BTW, this is all for an HTA and it seems several things don't work within an HTA. Thanks!

CSS

.button1 {
    color: red;
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
}
.button1:hover {
    color: red;
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 14px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
    zoom:150%;
}
.button2 {
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
}
.button2:hover {
    display: table-cell;
    width:245px;
    height:25px !important;
    font-family: Tahoma;
    font-size: 14px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
    zoom:150%;
}

HTML

<table class="table">       
    <tr width="25%" >
        <td width="25%" valign="top">
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button1" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button1" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button1" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a>           
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a>
        </td>
    </tr>
</table>

In the CSS, one of the classes is called `button11`. In the html it's called `button1`. which is correct? — Grevling, Nov 04 '13 at 14:24
sorry its supposed to be button1 and button2. I screwed it up when i was editing to put it on this site. Thanks! — huviduc, Nov 04 '13 at 14:45
You need JS to center `zoom` in old IEs. `transform` (with `transform-origin`) suggested in answers below does the job in IE > 8, though you don't need vendor prefixed styles for other browsers. Available features in HTML, CSS and JS depend on IE version installed in your machine. Also document type definition and `x-ua-compatible` `meta` tag are needed. Please check [this SO answer](http://stackoverflow.com/a/19570684/1169519) for further information. — Teemu, Nov 05 '13 at 05:16

Zach Saucier · Accepted Answer · 2013-11-04T18:44:41.787

In modern browsers, this can be done using CSS3 transform:scale(1.5). However in older browsers or the mshta.exe that HTA uses it is more complex

You may be able to simply use <meta http-equiv="x-ua-compatible" content="ie=9"> (and perhaps also <!DOCTYPE html>) to make it act like IE9, thus interpreting the CSS3 and functioning properly.

If this doesn't work, however, you may be able to add support for pre-IE9 by using the following code

/* IE8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";

/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=1.5,
        M12=0,
        M21=0,
        M22=1.5,
        SizingMethod='auto expand');

/* "\9" is a fix to target only IE versions before IE9 */
margin-left: -64px\9; 
margin-top: -9px\9;

On a side note you could clean up your code a good bit.

Since CSS selectors don't override the styles the element already has unless specified to do so, you don't have to repeat the same code in the class and the hover, you only have to include the parts that change

Also, instead of using the two classes button1 and button2, you can use a more generic button class and a second class for each element, i.e. red and blue

Implementing all of those changes you get a result that looks something like this

.button {
    width:245px;
    height:25px;
    display:inline-block;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
}
.button:hover {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);

    /* IE8+ */
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1.5,
            M12=0,
            M21=0,
            M22=1.5,
            SizingMethod='auto expand');

   margin-left: -64px\9; 
   margin-top: -9px\9;
}
.blue {
    color:blue;
}
.red {
    color:red;
}

It was as I was afraid from the beginning... You may have to use a javascript function as a fallback for HTA if the above options didn't work like you said

This updated solution uses CSS3's scale if it can, but if not uses a custom javascript fallback that makes it seem like the same thing

// Function to see if the browser can support a CSS attribute
var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            return true;
         }
      }
      return false;
   };
})();

// Doesn't do anything if the browser supports transform
if (!supports('transform')) {
    // Gets all the buttons
    var buttons = document.getElementsByClassName('button');

    for(var i = 0, j = buttons.length; i < j; i++) {
        // "Scales" them when hovered
        buttons[i].onmouseover = function() {
            scale(this, 1.5);
        }        
    }
}

function scale(obj, scaleFactor) {
    // Makes a copy of the object, positions it absolutely (to not affect
    // other elements), and scales it appropriately
    var clone = obj.cloneNode(true);
    clone.style.position = 'absolute';
    clone.style.top = obj.offsetTop + "px";
    clone.style.left = obj.offsetLeft + "px";
    clone.style.fontSize = parseInt(document.defaultView.getComputedStyle(obj, null).fontSize) * scaleFactor + "px";
    clone.style.width = obj.clientWidth * scaleFactor + "px";
    clone.style.height = obj.clientHeight * scaleFactor + "px";

    // Removes is when it stops being hovered
    clone.onmouseleave = function() {
        unscale(this);            
    }

    document.body.appendChild(clone);
}
function unscale(obj) {
    obj.parentNode.removeChild(obj);
}

On the positive side, creating a custom pseudo-scale function in pure javascript was an interesting thought. Hopefully the comments aid you enough in understanding it

Hopefully after all this work your problem is finally solved!

this still looks perfect if firefox but the HTA/IE still arent functioning correctly. The text gets very blurry and just the column moves over compared to the whole row like before. I really appreciate all your help BTW — huviduc, Nov 04 '13 at 16:43
@huviduc Did you try putting the `meta` tag in the header? The issue here is that I don't know much about HTA styling. I'm creating a javascript fallback now — Zach Saucier, Nov 04 '13 at 17:11
i tried placing the meta tag in the header and it didn't seem to change anything unfortunately,Thanks — huviduc, Nov 04 '13 at 18:41
@huviduc Added a working javascript fallback, see if that helps — Zach Saucier, Nov 04 '13 at 18:45
This appears to work correctly when i view the fiddle link in IE but I do not know how to get my code to work. Do I place the javascript above between ? — huviduc, Nov 04 '13 at 19:13
@huviduc Yes, it should be ``. Make sure you put it in just before the closing `
` tag — Zach Saucier, Nov 04 '13 at 19:16

score 0 · Answer 2 · answered Nov 04 '13 at 14:57

0

Are you willing to use CSS3? Here is a fiddle of it working with CSS3 and also the code below. I have removed some css that was not needed (.button1:hover keeps all the same settings as .button1 so they do not need to be re-written)

Link to fiddle

.button1 {
    display: inline-block;
    position: relative;
    color: red;
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
    z-index: 1;
}
.button1:hover {
    -webkit-transform:scale(1.6);
    -moz-transform:scale(1.6);
    -ms-transform:scale(1.6);
    -o-transform:scale(1.6);
    transform:scale(1.6);
    z-index: 2;
}
.button2 {
    display: inline-block;
    position: relative;
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
    z-index: 1;
}
.button2:hover {
    -webkit-transform:scale(1.6);
    -moz-transform:scale(1.6);
    -ms-transform:scale(1.6);
    -o-transform:scale(1.6);
    transform:scale(1.6);
    z-index: 2;
}

answered Nov 04 '13 at 14:57

Andrew

1,935
2
26
34

This doesn't seem to do anything at all on hover? Do i have to declare CSS3 somehow? – huviduc Nov 04 '13 at 15:10
@huviduc What browser are you on? If you're on an old browser it may not support CSS3 – Zach Saucier Nov 04 '13 at 15:11
This is an HTA so it uses MSHTA.exe not a browser. I believe it renders the same as IE8 though, not sure – huviduc Nov 04 '13 at 15:16
1

@huviduc [**Try this updated demo then**](http://jsfiddle.net/fPD7K/3/). It should support all the way back to IE6. I will post an answer if it works – Zach Saucier Nov 04 '13 at 15:20
@huviduc If that doesn't work, you may be able to include `` and have it work – Zach Saucier Nov 04 '13 at 15:29
This works exactly the way i want it to in Firefox but not IE or within the HTA. I am not sure where to add the above ? – huviduc Nov 04 '13 at 16:05
1

A `` tag goes in the `` tags of the html. HTA rendering is dependant on the version of IE that is installed, so it will require a lot of fiddly CSS to make sure it works as expected on each users machine. The answer that Zeaklous has provided should work in most broswers, but I don't know much about styling an HTA. – Andrew Nov 04 '13 at 16:38
@TheWaxMann Me neither :/ That's what was posing the issue here. I updated my solution with a javascript fix to make up for my lack of knowledge about HTA's styling capabilities – Zach Saucier Nov 04 '13 at 18:50

score 0 · Answer 3 · answered Nov 05 '13 at 12:55

I was able to get this working with a mixture of everyone's contributions above and the link that Teemu posted. Unfortunately after everyone's hard work, i believe the fix was to simply have the !DOCTPYE and the meta tag (in the correct places). Thank you all very much for the assistance! See below for working code

<!DOCTYPE html>
<HTML>
  <HEAD>
    <TITLE>Menu</TITLE>
    <meta http-equiv="x-ua-compatible" content="ie=9">  
    <HTA:APPLICATION ID = "AppMenu"
        APPLICATIONNAME = "AppMenu"
        border="thick"
        scroll="no" 
        singleinstance="no"
        showintaskbar="yes"
        windowstate="Normal"
        innerBorder="no"
    >
<Script>
</Script>

</HEAD>
 <style text="text/CSS">
.button {
    width:245px;
    height:15x;
    display:inline-block;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
}
.button:hover {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);


}
.Normal {
    color:Normal;
}
.Eform {
    color:Red;
}
</style> 
  <BODY>
    <table class="table" style="padding-left:50px" >       
        <tr width="25%" style="padding-left:50px" >
            <td width="25%" valign="top" style="padding-left:50px" >
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a>           
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application</span></a>
            </td>
        </tr>
    </table>

  </BODY>
</HTML>

yes it is pretty much exactly what you said but I didn't have the meta in the right spot. I just wanted to post the exact working code so another noobie like myself can figure it out easier if they come across this thread. Thanks again for your help — huviduc, Nov 05 '13 at 15:50
More commonly you'd accept the answer that aided you (given one actually has the solution) and instead edit the question to include the answer, but you're free to do as you'd like — Zach Saucier, Nov 05 '13 at 16:40
Sorry, I am not very familiar with this site and layout. I did however mark yours as the answer. Thanks again — huviduc, Nov 05 '13 at 16:49
I was able to get it to work by adding ();. For example if i was calling the Application sub, I used onclick="Application();". Thanks again for all your help, you have been very helpful — huviduc, Nov 05 '13 at 18:13

CSS Table with hover zoom action in HTA

3 Answers3