1

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.

CMR
  • 317
  • 4
  • 14

1 Answers1

0

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?

Community
  • 1
  • 1
SaidbakR
  • 13,303
  • 20
  • 101
  • 195