• 0
Sign in to follow this  
Followers 0

Drop Down Login Form to Bootstrap’s Navbar - problem with stopPropagation


Question

Posted · Report post

Hi I have a problem with this code, when you click into the login form to roll up menu. Function - stopPropagation not working as it should

<script language="javascript">
    jQuery('.dropdown-toggle').dropdown();
    jQuery('.dropdown-menu').find('form').click(function (e) {
        e.stopPropagation();
      });
</script>

 
           <li class="dropdown" id="menu1">
             <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
               Login
                <b class="caret"></b>
             </a>
             <div class="dropdown-menu">
               <form style="margin: 0px" accept-charset="UTF-8" action="/sessions" method="post">
                 <fieldset class='textbox' style="padding:10px">
                   <input style="margin-top: 8px" type="text" placeholder="Username" />
                   <input style="margin-top: 8px" type="password" placeholder="Passsword" />
                   <input class="btn-primary" name="commit" type="submit" value="Log In" />
                 </fieldset>
               </form>
             </div>
           </li>

Share this post


Link to post
Share on other sites

19 answers to this question

  • 0

Posted · Report post

Hi,

 

Where have you added this form ?

 

As you can't add forms to the Wordpress menu, you will most likely need to use a hook.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, Thanks for responding.

 

But I have no problem with that as add a form to the menu.

 

My problem is that when they create a bootstrap component dropdown and give it to the form, so when you click into the input form, the dropdown hides sooner than I write some text. This should solve function stopPropagation, but it does not work in DMS.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you tell me how you have added the form to your menu please.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

DMS section TextBox 

 

<li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
Login
<b class="caret"></b>
</a>
<div class="dropdown-menu">
<form style="margin: 0px" accept-charset="UTF-8" action="/sessions" method="post">
<fieldset class='textbox' style="padding:10px">
<input style="margin-top: 8px" type="text" placeholder="Username" />
<input style="margin-top: 8px" type="password" placeholder="Passsword" />
<input class="btn-primary" name="commit" type="submit" value="Log In" />
</fieldset>
</form>
</div>
</li>

 

DMS section TextBox / END

 

 

 

Custom </>    -> Custom Scripts / Custom Javascript or Header HTML

 

<script language="javascript">

jQuery('.dropdown-toggle').dropdown();
jQuery('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
</script>

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Working for me - http://d.pr/i/ice0

 

I copied the code from here - http://mimi.kaktusteam.de/blog-posts/2012/02/login-menu-with-twitter-bootstrap/

I also have same script in my custom code as you added. I must say that you can not except code copied from a blog regarding Twitter Bootstrap to work correctly inside a Wordpress Framework. The post where you got the code from is targeting users using Bootstrap and HTML, not a Wordpress user.

If you're having an issue getting this to work, you either have copied the HTML incorrectly or you have something conflicting. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I was using DMS 1.1.2 and the login box worked fine. Therefore, it is most likely related to your HTML or a conflict with a plugins, custom script etc...

However, like I said you can not expect to simply copy and paste code from a blog that is referring to the user using Bootstrap and nothing else to work in a Wordpress theme, framework or DMS, without having any conflicts etc...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

None I do not have plugins On, and I have not any custom javascript.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Then the issue is related to your code then, as I didn't use your code. I used the code from the site I linked above.

Also, in your code you initiate it with <li> that isn't valid HTML, if you want to begin a list, you need to start it with <ul> or <ol> etc..

I recommend you use valid code instead of taking snippers from the code provided from that blog. Also please be aware that we do not provide HTML/CSS support for user created code nor do we provide support for code generated else where. If you're still encountering an issue, I recommend you contact the author the code directly.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Has this issue been resolved or is it still outstanding? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

thank you for asking unfortunately unresolved  :thumbsd:  

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Just for clarity - are you using the code Danny provided previously?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Just for clarity - are you using the code Danny provided previously?

 

surely

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I would say look for an alternative solution, maybe a plugin http://wordpress.org/plugins/baw-login-logout-menu/ could help?

Thank you for your interest.

 This is a completely different solution as I mentioned I have no problem to add custom items to the menu.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The problem is the code you're using most likely. As the instructions you're following are specific to Bootstrap and HTML based websites. PageLines uses a heavily customized version of Bootstrap so. I think you need to find an alternative method.

 

Unfortunately, we do not provide support to third party code, you will need to contact the author of the code for assistance.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0