www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: [RESOLVED] Image scale onclick

  1. #1
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34

    resolved [RESOLVED] Image scale onclick

    I never get any better - Iím sorry. Iíve hunted around and canít find this covered on here. It used to be bad practice to resize an image with code but SVG files render beautifully at any scale and Iíd like to try this out.

    Iíd like to have a series of images, each one doubling in scale when clicked then returning to its original size when clicked a second time.

    Could I use transform: scale(2) somewhere in there to make it extra streamlined?

    Thanks for your help!

  2. #2
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34
    This thread almost has what I was after: http://www.webdeveloper.com/forum/sh...d.php?p=663467 -

    Code:
    <script type="text/javascript">
    function toggle(it) {
      if (it.width == 200)
        {it.width = 600;}
      else
        {it.width = 200;}
    }
    </script>
    then

    Code:
    <img src="example.svg" onclick="toggle(this)"/>
    but is there a tidy way to switch that 200 for original-size, and that 600 for double-size - I can't just smash in scale(2)... sorry for being so clumsy with this...

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    i'm not sure that i understood your question good but try this anyway

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>123</title>
    <style type="text/css">
    body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#fff;color:#000;padding:0px;margin:15&#37; 0px 0px 0px;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#imgs img').click(function(){
    var wd=$(this).width();
    if(!$(this).hasClass('maximized')){$(this).animate({'width':wd*2+'px','margin-top':'-'+wd/2+'px'},'normal',function(){$(this).addClass('maximized');});}
    else{$(this).animate({'width':wd/2+'px','margin-top':'0px'},'normal',function(){$(this).removeClass('maximized');});}
    });
    });
    </script>
    </head>
    <body>
    <div id="imgs"><img src="http://www.bogotobogo.com/svg_source/svgclock.svg" alt="" width="200" /><div>
    </body>
    </html>

  4. #4
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34
    Thanks for that! It's a good effect but maybe too complicated? I'm looking at something like this (using that same example SVG):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function toggle(it) {
      if (it.width == 200)
        {it.width = 600;}
      else
        {it.width = 200;}
    }
    </script>
    </head>
    <body>
    <img src="http://www.bogotobogo.com/svg_source/svgclock.svg" onclick="toggle(this)"/>
    </body>
    </html>
    but need to learn how to switch those specified sizes with a more abstract 'original' size and 'double original' size...

  5. #5
    Join Date
    Jun 2012
    Posts
    20
    What you may want to do if you want to double the size or half the size is as follows.

    Code:
    function toggle(it) {
    	if (it.class.match(/enlarged/) === null) {
    		it.class += " enlarged";
    		it.width = it.width * 2;
    		it.height = it.height * 2;
    	} else {
    		it.class = it.class.replace(/\senlarged/,"");
    		it.width = it.width / 2;
    		it.height = it.height / 2;
    	}
    }

  6. #6
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34
    Thanks for that Nemesis - but pasting it over the original script means nothing's happening when I click the image - I know I'm missing something... but what?

  7. #7
    Join Date
    Jun 2012
    Posts
    20
    try just using toggle() instead of toggle(this) and then at the toggle function add an alert to see if it triggers. You can use Chrome's web developer tools to debug your code to see whether or not the code is triggered. Just navigate to your script under the script tab, put a break point on the first line of your function and click your image. If it works, it'll break and you can step through the code.

  8. #8
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34
    Ah, thanks for your patience - I'm sorry, I'm way below this level of knowledge - I've no experience of debugging with Chrome, having a look for the first time now but it's 4 in the morning here and I'm a bit fuzzy. I'll look on tomorrow, unless there's an obvious problem or an alternative solution you could highlight for me? Thanks again... I'm sorry for being so needy...

  9. #9
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34
    Thanks again for your patience - I'm getting:

    Uncaught TypeError: Cannot call method 'match' of undefined (repeated 6 times)
    Uncaught TypeError: Cannot read property 'class' of undefined (repeated 14 times)


    right underneath:

    Code:
    if (it.class.match(/enlarged/) === null) {
    Can that be fixed? Here's the code as it exists:

    http://www.suresure.co.uk/Temp/BM1.html

    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">
                img{
    cursor: pointer;
                }
            </style>
    <script type="text/javascript">
    function toggle(it) {
    	if (it.class.match(/enlarged/) === null) {
    		it.class += " enlarged";
    		it.width = it.width * 2;
    		it.height = it.height * 2;
    	} else {
    		it.class = it.class.replace(/\senlarged/,"");
    		it.width = it.width / 2;
    		it.height = it.height / 2;
    	}
    }
    </script>
        </head>
        <body>
                <img src="biscuitman.svg" onclick="toggle(this)"/>
                <img src="biscuitman.svg" onclick="toggle()"/>
        </body>
    </html>

  10. #10
    Join Date
    Jun 2012
    Posts
    20
    Im sorry that's my fault, change all the references of it to this and see what happens

  11. #11
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34
    Like this?:

    http://www.suresure.co.uk/Temp/BM2.html

    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">
                img:hover{
    cursor: pointer;
                }
            </style>
    <script type="text/javascript">
    function toggle(this) {
    	if (this.class.match(/enlarged/) === null) {
    		this.class += " enlarged";
    		this.width = this.width * 2;
    		this.height = this.height * 2;
    	} else {
    		this.class = this.class.replace(/\senlarged/,"");
    		this.width = this.width / 2;
    		this.height = this.height / 2;
    	}
    }
    </script>
        </head>
        <body>
                <img src="biscuitman.svg" onclick="toggle(this)"/>
                <img src="biscuitman.svg" onclick="toggle()"/>
        </body>
    </html>
    Hmm - it's not happy - something about:

    Code:
    function toggle(this) {
    Sorry Nemesis, I wish I could read this properly - really grateful for your help.

  12. #12
    Join Date
    Jun 2012
    Posts
    20
    Well I'll need an exact error from the debugger to help here, try to remove this as a parameter to toggle cause you maybe overwriting the object. When a function is triggered by event like on click, you have access to the this variable anywhere in the called function.the other thing you could try is adding return true to the end of the function.

  13. #13
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34
    Thanks for the speed -
    Code:
    return true;
    doesn't seem to change anything... I'm in so far over my head. Chrome just has undefined (repeated 0 times) under that function toggle (this) line - Dreamweaver (sorry) suggests it contains a syntax error.

    http://www.suresure.co.uk/Temp/Screen%20shot%202012-06-16%20at%2015.31.43.png

    Removing 'this' maybe helps something along:

    Code:
    <script type="text/javascript">
    function toggle() {
    	if (this.class.match(/enlarged/) === null) {
    		this.class += " enlarged";
    		this.width = this.width * 2;
    		this.height = this.height * 2;
    	} else {
    		this.class = this.class.replace(/\senlarged/,"");
    		this.width = this.width / 2;
    		this.height = this.height / 2;
    	}
    	return true;
    }
    </script>
        </head>
        <body>
                <img src="biscuitman.svg" onclick="toggle(this)"/>
                <img src="biscuitman.svg" onclick="toggle()"/>
        </body>
    - only now Chrome has Uncaught TypeError: Cannot call method 'match' of undefined right underneath

    Code:
    if (this.class.match(/enlarged/) === null) {

  14. #14
    Join Date
    Jun 2012
    Posts
    20
    Easy enough to fix lol, add this.class !== undefined to the beginning of the if statement as the first condition, if that one fails it shouldn't go on to the next one. It should look like

    if (this.class !== undefined && this.class.match(/enlarged/) === null) {

  15. #15
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34
    No! Ha! This must be getting close though, right?

    http://www.suresure.co.uk/Temp/BM3.html

    I now have this:

    Uncaught TypeError: Cannot call method 'replace' of undefined (repeated 2 times)

    underneath this:

    Code:
    this.class = this.class.replace(/\senlarged/,"");
    Thanks for sticking with 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">
                img:hover{
    cursor: pointer;
                }
            </style>
    <script type="text/javascript">
    function toggle() {
    	if (this.class !== undefined && this.class.match(/enlarged/) === null) {
    		this.class += " enlarged";
    		this.width = this.width * 2;
    		this.height = this.height * 2;
    	} else {
    		this.class = this.class.replace(/\senlarged/,"");
    		this.width = this.width / 2;
    		this.height = this.height / 2;
    	}
    	return true;
    }
    </script>
        </head>
        <body>
                <img src="biscuitman.svg" onclick="toggle(this)"/>
                <img src="biscuitman.svg" onclick="toggle()"/>
        </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles