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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Create javascript buttons that increments a variable so user can effectively scale th

    I am trying to create three buttons that will scale the page up, down, or reset to a default value. I would like to base that incrementing on a global variable declared in javascript:

    Code:
    var canvasWidth = 600;
    Desired incrementing would be in sets of 200, so that when the user clicks zoom in once, the value is 800 and the page is redrawn, twice to 1000, and so on.

    All of the visual elements of the page are created in javascript and are sized based on this variable. Very little is done on the HTML page visually, except for a little display organization, so if possible I'd like to be able to complete this task mainly in the javascript file.

    Does this make sense?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,240
    Thanks
    203
    Thanked 2,554 Times in 2,532 Posts
    I hope I have understood correctly what you want.

    Code:
    <input type = "button" value = "Zoom In" onclick =  "zoomIn()">
    <input type = "button" value = "Zoom Out" onclick = "zoomOut()">
    <input type = "button" value = "Reset" onclick= "doaReset()">
    
    <script type = "text/javascript">
    var cWidth = 600;
    
    function zoomIn() {
    if (cWidth < 2000) {
    cWidth += 200;
    alert (cWidth); // for testing
    }
    }
    
    function zoomOut() {
    if (cWidth >= 400) {
    cWidth -= 200;
    alert (cWidth); // for testing
    }
    }
    
    function doaReset() {
    cWidth = 600;
    alert (cWidth); // for testing
    }
    
    </script>
    I expect you know that the canvas tag is only supported in HTML5. And remember to define canvas height as well as width. http://www.trisis.co.uk/blog/?p=881


    "If malice or envy were tangible and had a shape, it would be the shape of a boomerang." - Charley Reese
    Last edited by Philip M; 04-14-2011 at 09:28 AM.

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by impresently View Post
    I am trying to create three buttons that will scale the page up, down, or reset to a default value.
    Are you aware that both IE, FF and I think most if not all of the other major browsers already have a page zoom feature built into them?

    You can zoom just text and not images if you like.
    Last edited by bullant; 04-14-2011 at 09:27 AM.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Also, I'm not sure how you will be taking the height into account.

    But if all you want to do is increment/decrement a global value on button clicks, then maybe something like this.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                var globalWidth = 600;
                var globalWidthMin = 600;
                var globalWidthMax = 1200;
                var incr = 200;
                function setZoom(dir){
                    globalWidth += incr*dir;
                    if(globalWidth < globalWidthMin){globalWidth = globalWidthMin;}
                    if(globalWidth > globalWidthMax){globalWidth = globalWidthMax;}
                    alert(globalWidth);
                }
                window.onload=function(){
                    document.getElementById('btnZoomIn').onclick=function(){setZoom(1);}
                    document.getElementById('btnZoomOut').onclick=function(){setZoom(-1);}
                    document.getElementById('btnReset').onclick=function(){globalWidth = 600;}
                }
            </script>
        </head>
        <body>
            <div id="zoomBtnCont">
                <button id="btnZoomIn">Zoom in</button>
                <button id="btnZoomOut">Zoom out</button>
                <button id="btnReset">Reset</button>
            </div>
        </body>
    </html>
    Last edited by bullant; 04-14-2011 at 10:12 AM.

  • Users who have thanked bullant for this post:

    impresently (04-14-2011)

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    Are you aware that both IE, FF and I think most if not all of the other major browsers already have a page zoom feature built into them?

    You can zoom just text and not images if you like.
    Text is created in canvas, and font sizes are scaled based on the canvasWidth global variable. Often the text is almost illegibly small due to this. Scaling that up with the browsers' zoom feature will make small text created in canvas (as it essentially a raster at that point) pixellated and messy.

  • #6
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    @Bullant
    This seems close.

    Alert dialogue comes up with the new value, but canvas elements are not redrawn.

    I tried adding a window reload step to the onclick function.... but that is not working.

    js file:
    Code:
    var canvasWidth = 600;
    var canvasWidthMin = 600;
    var canvasWidthMax = 1600;
    var incr = 200;
    function setZoom(dir){
            canvasWidth += incr*dir;
            if(canvasWidth < canvasWidthMin){
    		canvasWidth = canvasWidthMin;
    	}
            if(canvasWidth > canvasWidthMax){
    		canvasWidth = canvasWidthMax;
    	}
            alert(canvasWidth);
            }        
    	window.onload=function(){
            document.getElementById('btnZoomIn').onclick=function(){setZoom(1);}
            document.getElementById('btnZoomOut').onclick=function(){setZoom(-1);}
            document.getElementById('btnReset').onclick=function(){canvasWidth = 600;}
            }
    html file:
    Code:
    <div id="zoomBtnCont">
                <button id="btnZoomIn">Zoom in</button>
                <button id="btnZoomOut">Zoom out</button>
                <button id="btnReset">Reset</button>
    	    
    </div>
    Last edited by impresently; 04-14-2011 at 05:01 PM. Reason: Direct comment to Bullant

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by impresently View Post
    @Bullant
    This seems close.
    I haven't played much with any html5 elements yet. I just did a quick google on canvas and at w3schools it says

    The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript:
    so I doubt just changing the width of the canvas will automatically rescale the canvas' content.

    It looks like to change the canvas's content in any way you have to call the canvas object's appropriate method for that task.

    This mozilla tutorial might be useful.


  •  

    Tags for this Thread

    Posting Permissions

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