How to resize a image with jquery

Question

I want to resize a img on a click function. Here is my code that is currently not working. I am not sure if I am doing this correctly at all, any help would be great.

<script>
$(document).ready(function(){
 $("#viewLarge").click(
 function(){
  $("#newsletter").width("950px");
 });
});
</script>
<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a>
<img id='newsletter' width='630px' src='images/news/hello.jpg'>

Answer 1

It could be that the page is reloading because you aren't preventing the default action of the link. Try adding return false; after setting the width so that the link isn't taken. You really ought to rewrite it using style rather than a width attribute, although in testing it, it didn't seem to matter. Using the following code (but replacing your image with one of mine) worked fine for me.

<script> 
$(document).ready(function(){ 
 $("#viewLarge").click( 
    function(){ 
       $("#newsletter").width("950px");
       return false; 
    }); 
}); 
</script> 
<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a> 
<img id='newsletter' src='images/news/hello.jpg' style="width: 630px;">

Answer 2

Hey, Anders. Try using the firebug console like the guy above is talking about. You'll have to enable it first, but it will catch your errors. You can also try the error console with Ctrl+Shift+J which is built into firefox and most other browsers.

In regards to your code, this works fine for me.

<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a>
<img id='newsletter' width='630' height='250' src='http://www.google.ca/intl/en_com/images/srpr/logo1w.png'&gt;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("#viewLarge").click(function(){
        $("#newsletter").css('width', '950px');
    });
});
</script>