Click here to Skip to main content
15,907,395 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
This is my java script.its lace on a image and when i click the circle it enlarges. But when i click it again it should be the normal size again. See the image below.. http://i.imgbox.com/adbuiwsa.png[^]

This is the code for the javascript circle.What i need is when i click the blue circle again it should be the normal size again... How do i code it?? I preffer is it is done using a variable...Pls help me guys.

JavaScript
$('#c1').click(function () {
    clearCircle()
    ResetCircle()

    $(this).removeClass("blink1");
    //$(this).css('background-color', '#005aa8');
    $(this).css('width', '190px');
    $(this).css('height', '190px');
    $(this).css('top', 243 - ((190 - 125) / 2));
    $(this).css('left', 335 - ((190 - 125) / 2));
    $(this).css('background-image', 'URL(assets/images/blue_back.png)');
});
Posted
Updated 14-Aug-13 23:23pm
v3
Comments
Mahesh Bailwal 15-Aug-13 2:13am    
inside click function check the height of image if its height is enlarged then reduce image size else enlarge the image.
ZurdoDev 15-Aug-13 7:21am    
You have code to change the size so where are you stuck?

The method .css() can change style, but it can also retrieve existing value for a style property. Apparently, you need to perform the enlargement or reset the circle size under "if" block, depending on condition. What condition? Call .css with one argument, return the size and check it. Depending on current circle size, change the size.

It's not clear what you mean by clearCircle or ResetCircle, you don't show these functions.

—SA
 
Share this answer
 
Its better you define a class with css for normal size say normalImage -
CSS
.normalImage{
  // css for normal image
}

and then define a class with css for zoomedImage -
CSS
.zoomedImage{
  // css for normal image
}


And switch the classes on click -
JavaScript
$('#c1').click(function () {

    //if the image is normal, enlarge it
    if($(this).hasClass('normalImage')) {
       $(this).removeClass('normalImage');
       $(this).addClass('zoomedImage');
    }
    //if the image is enlarged, make it normal
    else if($(this).hasClass('zoomedImage')) {
       $(this).removeClass('zoomedImage');
       $(this).addClass('normalImage');
    }
});

This would be a better approach to maintain the CSS rather than using .css() each time to make changes for a single element.

I hope this helps
Thanks
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900