Drongo_III Posted November 23, 2012 Share Posted November 23, 2012 (edited) 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> Edited November 23, 2012 by Drongo_III Quote Link to comment 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.