Databases
StackOverflow2013
Postsdbo
PODIV does not move or scale via JQuery UI
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODIV does not move or scale via JQuery UI
    primarykey
    data
    text
    <p>I'm getting started with an HTML 5 app. When my page loads, I have a logo in the center of the screen. I need the logo in the center of the screen to begin with. The user can begin using the app by clicking the "Begin" button. When this happens, I want to animate the logo in two ways:</p> <ol> <li>I want the logo to move from its current location to the upper left corner (with a bit of padding from the top and left)</li> <li>I want to scale the image down.</li> </ol> <p>In an attempt to do this, I'm using JQuery UI. Here is what I currently have:</p> <pre><code>&lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="content"&gt; &lt;div id="logo"&gt;&lt;/div&gt; &lt;input type='button' value='Begin' onclick='return beginButton_Click();' /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;span id="greeting" class="footer-content"&gt; Hello &lt;/span&gt; &lt;span class="separator"&gt;|&lt;/span&gt; &lt;a href="#" target="_blank" class="footer-content"&gt;View Status&lt;/a&gt; &lt;/div&gt; &lt;script type='text/javascript'&gt; function beginButton_Click() { $("#load").animate({ width: "30%", height: "30%", opacity: 0.4 }, 1500); } &lt;/script&gt; &lt;/body&gt; </code></pre> <p>My CSS is defined in another file. My CSS looks like this:</p> <pre><code>html, body { margin: 0; padding: 0; height: 100%; } body, #footer { background-color: #2D2D2D; } #wrapper { width: 100%; min-height: 100%; margin-bottom: -34px; background-color: #4cff00; text-align: center; overflow: auto; } #content { margin-top: 200px; width: 350px; display: inline-block; position: relative; text-align: center; margin-bottom: 30px; } #logo { position: relative; display: inline-block; width: 100%; height: 70px; margin-bottom: 5px; background: transparent url(/images/logo.png) no-repeat center center; } #footer { text-align: left; width: 100%; overflow: hidden; } .footer-separator { display: inline-block; vertical-align: middle; } #info{ margin-left: 10px; } .footer-content, .action { display: inline-block; vertical-align: middle; font-weight: normal; } </code></pre> <p>Currently, my logo div does not scale or move to the upper left. I can't figure out how to move the div because its relatively positioned. Yet, I need it in the middle of the screen. Beyond that, I have no idea why the div is not scaling. Can someone please help me?</p> <p>Thank you!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USNode Newbie
    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. PODIV does not move or scale via JQuery UI
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIf you're doing HTML5, you should consider using [CSS animations](http://www.w3.org/TR/css3-animations/) for this, and only use the jQuery as a polyfill for [old browsers](http://caniuse.com/#search=css3%20animation). Use [modernizr](http://modernizr.com/) as a way to detect the browsersupport and conditionally load the extra code.
      singulars
      1. PODIV does not move or scale via JQuery UI
      1. USChris Wesseling
 

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