Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to zoom div content by using javascript.

    I am adding the my code below.But it is not supporting all browsers.
    <html>
    <head>
    <script type="text/javascript">
    Collapse | Copy Code
    function zoomings(){
    var val=document.getElementById("zooming").value;

    //alert(val);
    searches.style.zoom=val;

    searches.style.moz.zoom=val;
    }

    </script>
    </head>
    <body>
    Collapse | Copy Code
    <span>Zoom</span><select id='zooming' onchange="zoomings()">
    <option value="25%">25%</option>
    <option value="50%">50%</option>
    <option value="75%">75%</option>
    <option value="100%" selected="selected">100%</option>
    <option value="150%">150%</option>
    <option value="200%">200%</option>
    <option value="250%">250%</option>
    <option value="300%">300%</option>
    </select>

    </body>
    </html>

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    The "zoom" property is not a cross-browser property. As far as I know, it works only in IE, Safari, and Chrome.

    You can use jQuery to fake it, though:
    http://janne.aukia.com/zoomooz/
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Re: How to zoom div content by using javascript.

    Hello Deepthi.21456
    From what I know there are a few possibilities for do what you want,
    and from my little experience I know 2 types that will work, it will be up to you which one of them is suited best for your problem:

    - if you want that image to be zoomed on mouse hover

    Code:
    $(document).ready( function() {
    $('#div img').hover(
        function() {
            $(this).animate({ 'zoom': 1.2 }, 400);
        },
        function() {
            $(this).animate({ 'zoom': 1 }, 400);
        });
    });
    - or you may do like this if zoom in and out buttons are used

    Code:
     $("#ZoomIn").click(ZoomIn());
    
     $("#ZoomOut").click(ZoomOut());
    
     function ZoomIn (event) {
    
            $("#div img").width(
                $("#div img").width() * 1.2
            );
    
            $("#div img").height(
                $("#div img").height() * 1.2
            );
        },
    
        function  ZoomOut (event) {
    
            $("#div img").width(
                $("#imgDtls").width() * 0.5
            );
    
            $("#div img").height(
                $("#div img").height() * 0.5
            );
        }
    both of them was tested by me and work fine... I hope that will solve your problem
    Last edited by VIPStephan; 03-31-2013 at 11:50 AM. Reason: added code BB tags

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Guys, if you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •