css style transform

Question

I wanted to be able to put into effect the css transform property depending on the size of a container with respect to the size of the enclosing window.

With the following code, scaleCameraShutter() is called. Zooming does occur with the re-written code for scaleCameraShutter()and the scaling is accurate.

Here's the only remaining problem = window resizes and so does the container. THEN, I do a reload of the window and the correct zooming totally disappears. In short, the zooming is only temporary, not permanent??

Since this Board thrives on code, the .css specs are at the bottom ...

$(window).bind('resize', function() {

    scaleCameraShutter();  // below, container is GLOBAL

});

I call:

function scaleCameraShutter() {

    // .width() returns "###px"

    // value before scaling
    var containerWidth = parseInt( container.width() );   
    var windowWidth    = parseInt( $(window).width() );

    var theScale = windowWidth/containerWidth;
    var maxContainerWidth = 480;

    if (windowWidth > maxContainerWidth)
    {
        theScale = maxContainerWidth/containerWidth;
    }

    // Let the Browser pick the parm it accepts:
    // IE 10 and Firefox
    container.css("-transform"       , "scale(" + theScale + ", " + theScale + ")");
    // IE 9
    container.css("-ms-transform"    , "scale(" + theScale + ", " + theScale + ")");
    // Firefox
    container.css("-moz-transform"   , "scale(" + theScale + ", " + theScale + ")");
    // Chrome and Safari
    container.css("-webkit-transform", "scale(" + theScale + ", " + theScale + ")");
    // Opera
    container.css("-o-transform"     , "scale(" + theScale + ", " + theScale + ")");

}

Last, here's the css:

#container {
    position:  relative;

    margin:    0 auto;
    width:     30.00em;
    height:    22.50em;

}

Can you post an example of your code to something like plunker? — Joseph Evans, Sep 09 '15 at 16:18
I truly apologize to everyone ... very new to jsFiddle and simply added a jsFiddle without considering that it be public. Hope this ends it ... http://jsfiddle.net/johnlove/yL2td3r2/ — , Sep 27 '15 at 23:24

score 0 · Answer 1 · answered Sep 09 '15 at 16:43

0

As Far as I know, you are passing only one value to SCALE. Try doing one of the following: scale(x,y) Defines a 2D scale transformation
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a scale transformation by giving a value for the X-axis
scaleY(y) Defines a scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis

http://www.w3schools.com/cssref/css3_pr_transform.asp

good luck.

answered Sep 09 '15 at 16:43

sagarthapa

176
1
12

Blessings for the response ... unfortunately, I tried "scale(theScale, theScale)", with and without the quotes ... and even tried scale(10,10) or some other ridiculous #. Result = still nothing. SO, it appears that something quite fundamental is wrong. OH, I also tried using theContainer.css("-transform", scale(theScale, theScale)) – Sep 09 '15 at 19:18
Can you be more specific on what you trying to acomplish here? Can you show some demo? Sorry but Without knowing what you want, it is very hard to give you any suggestion. – sagarthapa Sep 09 '15 at 22:44
My pleasure: http://lovesongforever.com/50/ As you see at the top is a "camera shutter" jQuery plugin inside a box with a border. What I want to do is scale down that $('#container') with window width via scale(xxx, xxx). Only with this approach can I leave the code that effects the shuttering effect alone. In other words, the scaling would be identical to what happens in Safari, for example, when the user zooms in and out. In point of fact, I can successfully use appropriate css specs to do that zooming, but then I have to change the jQuery plug-in code. – Sep 10 '15 at 02:52
Hey John! this is probably what you looking for: http://stackoverflow.com/questions/10808096/using-css-transform-property-in-jquery – sagarthapa Sep 12 '15 at 14:24
I truly apologize to everyone ... very new to jsFiddle and simply added a jsFiddle without considering that it be public. Hope this ends it ... http://jsfiddle.net/johnlove/yL2td3r2/ – Sep 27 '15 at 23:25
Trying to put the above sliding off to the right (in the new jsFiddle) in different words ... it appears that somehow the window's width is falsely computed to be larger than it is ... the bordered image is scaling correctly, but with the incorrect (larger) window width, the bordered image is sliding or shifting to the right because the DOM's CSS code is centering it. Anyway, these are my impressions, FWIW. – Oct 01 '15 at 05:31
Hey John! I looked at your jsfiddle and the observation that I made are: First, you can use border to an image rather than div itself, so it wouldn't be a problem when you minimize. Second, since you are using scale, it will minimize your image but its original position remain unchanged. Lets say, if your image height is 200px and you scale it to 0.5, the new image width will be 100px but it will still occupy 200px. So, both right and left will look empty by 50px each. Hence, you get impression that it is going to right when you minimize as you keep seeing less and less of right-side. GOODLUCK – sagarthapa Oct 01 '15 at 16:45

css style transform

1 Answers1