Drongo_III Posted November 23, 2012 Share Posted November 23, 2012 Hi Guys I am making a simple lightbox style popup div. What I want is for the div to popup (containing an image) and then scale to 100%. But I want it to scale so it essentially looks like the parent div is opening from the center out. I've seen this effect on lightboxes in the past. The problem I have is that the div appears to only scale from the top left - which you can see because the container's image in the example below shows from the top left. I've tried to play about the various parameters you can set but none seem to achieve what i want. So... a.) Is it possible at all? b.) Is there just some css trickery I am not taking into account? Thanks, Drongo. Simplified example follows: <!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <style type="text/css"> div { margin: 0px; width: 275px; height: 100px; background: green; border: 1px solid black; position: absolute; left: 200px; top: 200px; overflow: hidden; padding: 20px; display: inline-block; display: none; </style> <script> $(document).ready(function() { $("#clicks").click(function () { $('div').show("scale", {direction: 'both', scale: 'both'}, 1000); //alert(1); }); }); </script> </head> <body > <a href="#" id="clicks">Show Div</a> <div> <img src="http://www.google.co.uk/images/srpr/logo3w.png" /> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/271084-jquery-scaling-a-div/ Share on other sites More sharing options...
Scott_S Posted November 26, 2012 Share Posted November 26, 2012 A quick cursory response: it would appear that scale is honoring your absolute positioning. Link to comment https://forums.phpfreaks.com/topic/271084-jquery-scaling-a-div/#findComment-1395198 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.