jquery explode effect not working with percentage width/height

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

Pregunta

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.

¿Fue útil?

Solución

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?

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top