jquery explode effect not working with percentage width/height

StackOverflow https://stackoverflow.com/questions/13290086

Question

I can't seem to get the jQuery explode effect to work when the element it's being used on has a width/height defined by a percentage. Rather than breaking up into pieces, it just sort of floats in/out from/to the left of the screen.

Example:

        <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
#mydiv
{
  background-color: aqua;
  width: 50%;
  height: 50%;
  display: block;
  z-index: 100;
}

#mydiv2
{
  background-color: red;
  width: 500px;
  height: 500px;
  display: block;
z-index: 100;
}
</style>
    </head>
    <body>
        <a href="#" onclick="$('#mydiv').toggle('explode', {}, 1000);">click %</a> <a href="#" onclick="$('#mydiv2').toggle('explode', {}, 1000);">click px</a>
        <div id="mydiv">% width</div>
<br>
<div id="mydiv2">px width</div>
    </body>
</html>

Is that supposed to be the case? Is there some sort of work around? I can't find anything relevant when googling it as of yet.

Cheers.

Was it helpful?

Solution

You are able to dynamically set the width and height in pixels by knowing the window width and height

The following answer will help you: jQuery: How to detect window width on the fly?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top