Databases
StackOverflow2013
Postsdbo
POOpera handles jQuery's animate method in a very strange way
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POOpera handles jQuery's animate method in a very strange way
    primarykey
    data
    text
    <p>I have a dropdown menu. Its height is animated with jQuery from 5px to 130px and vice versa. </p> <p>The menu worked fine while it was separated element (when I was developing it) but when another elements appeared Opera made a surprise:</p> <p><a href="http://img12.imageshack.us/img12/9366/menusy.png" rel="nofollow noreferrer">alt text http://img12.imageshack.us/img12/9366/menusy.png</a></p> <p>I marked first state as 1 and second as 2. Third state should be the same as first but as you can see it has a "tail".</p> <p>UPD: source code</p> <p>html:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="js/jquery.js"&gt; &lt;/script&gt; &lt;script type="text/javascript" src="js/script.js"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; $(function(){ init(); }); &lt;/script&gt; &lt;link rel="stylesheet" href="css/styles.css"/&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="side" class="side_outer"&gt; &lt;div class="cn tr"&gt; &lt;/div&gt; &lt;div class="cn tl"&gt; &lt;/div&gt; &lt;div class="auth"&gt; &lt;span class="auth_entr"&gt;Click me&lt;/span&gt; &lt;div class="auth_fields"&gt; &lt;/div&gt; &lt;div id="auth_separator"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="side_inner"&gt; &lt;div class="cn tr"&gt; &lt;/div&gt; &lt;div class="cn tl"&gt; &lt;/div&gt; &lt;div class="side_content"&gt; Some content &lt;/div&gt; &lt;div class="cn br"&gt; &lt;/div&gt; &lt;div class="cn bl"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="cn br"&gt; &lt;/div&gt; &lt;div class="cn bl"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="header"&gt; Header&lt;/div&gt; &lt;div id="central"&gt; Center&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>css:</p> <pre><code>#header { background: red; height: 100px; margin: 30px 330px 20px 20px; } #central { background: green; height: 150px; margin: 20px 330px 20px 20px; } #side { margin-right: 3%; margin-left: 10px; margin-top: 30px; min-width: 200px; float: right; } .side_outer { padding: 0 10px; background: #f2f2cc; width: 22%; border-bottom-style: dashed; border-bottom-width: 2px; border-bottom-color: black; } .side_inner { position:relative; overflow:hidden; padding: 0 10px; background: #accbfa; } .side_outer .cn { position: relative; width: 20px; height: 20px; } .side_outer .cn.tr, .side_outer .cn.br { float: right; left: 10px; } .side_outer .cn.tl, .side_outer .cn.bl { left: -10px; } .auth { overflow: hidden; } .auth_entr { position: relative; top: 5px; margin-left: 17px; padding: 0 5px; color: #1e5ebe; cursor: pointer; } .auth_fields { overflow: hidden; height: 5px; margin-top: 5px; } #auth_separator { height: 6px; font-size: 2px; } .side_content { height: 100px; padding: 5px 15px; } </code></pre> <p>javascript:</p> <pre><code>var auth_state = 1; function init () { $('span.auth_entr').click (function (){ auth_state = (auth_state + 1) % 2; if (auth_state == 1) { $('div.auth_fields').animate({height: '5px'}, 1000); } else { $('div.auth_fields').animate({height: '132px'}, 1000); } }); } </code></pre> <p>Actually I've solved the problem using some street magic (I added thick white border to the bottom of the menu and now "tale" is transparent). But I'm curious what is the problem and is there any normal solution?</p> <p>P.S. Another elements are actually empty divs with fixed dimensions and background. My Opera version is 9.5 (I know that it's old but it's still popular among my audience).</p> <p>P.P.S. I've just tested it in Opera 9.6 and the same bug occured.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRoman
    1. USRoman
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POOpera handles jQuery's animate method in a very strange way
      1. USRoman
      1. VTFavorite
    2. VO
      singulars
      1. POOpera handles jQuery's animate method in a very strange way
      1. USCruachan
      1. VTFavorite
    3. VO
      singulars
      1. POOpera handles jQuery's animate method in a very strange way
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO+1 for the image, -1 for not showing code. We can't actually help you without seeing what this HTML looks like and what jQuery code is acting on it.
      singulars
      1. POOpera handles jQuery's animate method in a very strange way
      1. USPaolo Bergantino
    2. CO@Paolo Bergantino: now you can play with the code, I've added dashed bottom-border for more effect.
      singulars
      1. POOpera handles jQuery's animate method in a very strange way
      1. USRoman
    3. CONice. I'll take a look now.
      singulars
      1. POOpera handles jQuery's animate method in a very strange way
      1. USPaolo Bergantino
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload