Databases
StackOverflow2013
Postsdbo
POchange active state on div's by clicking a link
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POchange active state on div's by clicking a link
    primarykey
    data
    text
    <p>I'm currently having some issues with a Login-box. I'm using my own version with the logic behind a <a href="http://tympanus.net/codrops/2011/01/06/animated-form-switching/" rel="nofollow">tutorial online</a>. It all works fine right now. When I click my Login button, a JQuery trigger displays the window which has the class <code>active</code> assigned to it. And once the login box has appears, the user could click on register in the login box and a register window becomes active. I know i could be a bit hard to follow here but the question should be fairly easy. I want to press a new button next to LOGIN, that takes the user directly to REGISTER. For that I would need to set the <code>active</code> state to different forms depending on which button I press. I'm trying to make a js script that senses which link has been click and then sets the active state to that form. So the first Code is the links, right now both of them open the login box at the signin stage. But my goal is to get the second one to open the register stage. Is this possible? How can I set the active state to the right form in a click ?</p> <p><a href="http://jsfiddle.net/v47cT/1/" rel="nofollow">Here is an jsFiddle</a></p> <p>HTML</p> <pre><code>&lt;li&gt;&lt;a href="#login-box" id="signin" class="linkform login-window"&gt;Login&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#login-box" rel="register" class="linkform login-window"&gt;Register&lt;/a&gt;&lt;/li&gt; &lt;div id="login-box" class="login-popup"&gt;&lt;/div&gt; &lt;form class="register" &gt; &lt;input type="text" name="login" placeholder="email"&gt; &lt;input type="password" name='password' placeholder="pass" required&gt; &lt;input type="submit" name="submit" value="Reg"&gt; &lt;a href="index.html" rel="signin" class="linkform forgot right"&gt;login&lt;/a&gt; &lt;/form&gt; &lt;form class="signin active"&gt; &lt;input type="text" name="login" placeholder="email"&gt; &lt;input type="password" name='password' placeholder="pass" required&gt; &lt;input type="submit" name="submit" value="Login"&gt; &lt;a href="register.html" rel="register" class="linkform forgot right"&gt;Reg&lt;/a&gt; &lt;/form&gt; </code></pre> <p>Javascript</p> <pre><code>$(function() { //the form wrapper (includes all forms) var $form_wrapper = $('#login-box'), //the current form is the one with class active $currentForm = $form_wrapper.children('form.active'), //the change form links $linkform = $form_wrapper.find('.linkform'); $linkform.bind('click', function(e) { var $link = $(this); var target = $link.attr('rel'); $currentForm.fadeOut(400, function() { //remove class active from current form $currentForm.removeClass('active'); //new current form $currentForm = $form_wrapper.children('form.' + target); //animate the wrapper $form_wrapper.stop() .animate({ height: $currentForm.data('height') + 'px' }, 500, function() { //new form gets class active $currentForm.addClass('active'); //show the new form $currentForm.fadeIn(400); }); }); e.preventDefault(); }); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRocksteady
    1. USRocksteady
    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. POchange active state on div's by clicking a link
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COcan you arrange a fiddle for this
      singulars
      1. POchange active state on div's by clicking a link
      1. USRohit Agrawal
    2. COI will try to do it!
      singulars
      1. POchange active state on div's by clicking a link
      1. USRocksteady
 

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