Blogs Hub

by AskGif | Aug 30, 2019 | Category :coding

Implementing Twitter like Login using Jquery and CSS.

Implementing Twitter like Login using Jquery and CSS.

<p>In this post, I want to explain "Twitter-like login hide and show the effect with jquery and CSS ". Very simple just five lines of code using jquery hide() and show() events and little CSS code, use it and enrich your web projects.</p> <p>&nbsp;</p> <p>Javascript Code</p> <pre class="language-javascript"><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $(".sign_in").click(function() { $("#sign_box").show(); return false; }); $("body #main").click(function() { $("#sign_box").hide(); return false; }); }); &lt;/script&gt;</code></pre> <p>&nbsp;</p> <p>HTML Code</p> <p>$('.sign_in').click(function(){} - sign_in is the class name of anchor 'Sign In'. Using show() event displaying the id="sign_box".</p> <pre class="language-markup"><code>&lt;div&gt;&lt;a href="#" class="sign_in"&gt;Sign In&lt;/a&gt;&lt;/div&gt; &lt;div id="sign_box"&gt; &lt;form method="post" action=""&gt; &lt;label&gt;UserName &lt;input type="text" name="usr"/&gt;&lt;/label&gt; &lt;label&gt;Password &lt;input type='password' name="pwd"/&gt;&lt;/label&gt; &lt;input type="submit" value=" Sing In "/&gt; &lt;/form&gt;&lt;/div&gt; &lt;div id='main'&gt;&lt;h1&gt;www.askgif.info&lt;/h2&gt;&lt;/div&gt;</code></pre> <p>&nbsp;</p> <p>CSS code</p> <p>Contains CSS code just find out position:absolute</p> <pre class="language-css"><code>#sign_box { width:170px; background-color:#fff; border:solid 1px #5ea0c1; padding:8px; position:absolute; display:none; -moz-border-radius-topright:6px; -moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:6px; -webkit-border-top-right-radius:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; } .sign_in { background-color:#FFFFFF; border:solid 1px #5ea0c1; padding:6px; } #main { height:500px; }</code></pre> <p>&nbsp;</p>

read more...