Note that there are some explanatory texts on larger screens.

plurals
  1. PODiv opens vertically when page loaded with javascript and css
    primarykey
    data
    text
    <p>Im new to web developing and would like to know if there is a way to make the div open vertically without the use of css height transitions. I also to had to add the opacity transition to the div with text since its showing before the main div appears. Here is a demo <a href="http://jsfiddle.net/wq7v7/" rel="nofollow">http://jsfiddle.net/wq7v7/</a></p> <pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt; &lt;/script&gt; &lt;script&gt; window.onload = function(){ document.getElementById("body").setAttribute("class","loaded"); } &lt;/script&gt; &lt;style type="text/css"&gt; .fadein { height: 0px; transition: height 0.7s; -moz-transition: height 0.7s; -webkit-transition: height 0.7s; -o-transition: height 0.7s; background-color: #39F; width: 600px; border-top-width: 2px; border-bottom-width: 2px; border-top-style: solid; border-bottom-style: solid; border-top-color: #000; border-bottom-color: #000; } #body.loaded .fadein { height: 200px; opacity: 1; } .thebox { opacity: 0; transition: opacity 0.5s; -moz-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; } #body.loaded .thebox { opacity: 1; } &lt;/style&gt; &lt;/head&gt; &lt;body id="body"&gt; &lt;div class="fadein"&gt; &lt;div class="thebox" style="text-align:center; color:#000; font-size:24px; font-family:'Myriad Pro'; margin-top:10px;"&gt; Choose your city &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    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. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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