Jump to content

Archived

This topic is now archived and is closed to further replies.

Majko

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

Recommended Posts

Majko    0
Majko

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

That guide has no relation to working with Wordpress. If you want to add a form to a menu item you will most likely need to add this code via a hook.

 

You can use this article as a guide (untested) - http://www.wpbeginner.com/wp-themes/how-to-add-custom-items-to-specific-wordpress-menus/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Majko    0
Majko

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
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Majko    0
Majko

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
Danny    1,327
Danny

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. 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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...


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Majko    0
Majko

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Has this issue been resolved or is it still outstanding? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Majko    0
Majko

thank you for asking unfortunately unresolved  :thumbsd:  

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Majko    0
Majko

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

 

surely

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • bnapoli
      By bnapoli+
      On my site www.anewbeginning.com the "toggle" function mysteriously stopped working.  I have tried all browsers, tried disabling plugins, removing all the relevant CSS but still cant understand why it isn't working.
      The toggle is placed on this page: http://anewbeginning.com/?page_id=15965 and http://anewbeginning.com/?page_id=10779 but it does not display.
      On my other Platform5 websites, that exact code works fine: see here http://4aa.d11.myftpupload.com/?page_id=123
      Code is the same. Please help, thank you!
    • Kedark
      By Kedark+
      Hi,
      how to set the menu navi:
      - The background color when you expand a submenu,
      - Background color on mouseover,
      - The color of the text,
      - Width of submenu
      Please help, nowhere in the forum I have not found the answers to these questions ..
      Regards
      RKA
       
    • orangecricket
      By orangecricket
      - If this is a duplicate I apologize, I don't see my first attempt to post this in the forum.
       
      I purchase the Navbanner and I love it but I needed it to drop down on hover for sub menus. I checked the Demo before purchase and the demo dropped down when I moused over it so I assumed it would be as easy as checking a box like the Navbar but I don't see this option anywhere. Am I missing something?
       
      Is there an easy way to make my submenus drop down on hover like the Demo?
       
      Thanks!
    • atcdomainsolutions
      By atcdomainsolutions+
      I am creating a theme for a client and I added the Nav Bar (NOT the fixed nav bar...they did not want a fixed header) and they wanted nav bar right above the main image and slider images on other pages so it basically sits about 50px above the slider.
       
      One of the pages has 4 pages in the dropdown. This shouldn't be a problem but when expanding the menu and dropping it down, part of it gets cut off and disappears behind the slider, etc.  I know z-index should be applied in normal situations but I have tried to add it to one class after another for the navbar and it's not working.
       
      Has anyone else had this problem?  Customer wants it close...I can move the navbar up a bit and when it drops down, it's not cut off or "hidden" is a better word but the client wants it close and really need to figure this out.
       
      Any help would be greatly appreciated!
       
      James
    • suzyo
      By suzyo
      Hi guys. Idea for all you super devs.
       
      I can NOT be the only person who needs a search.
       
      I ended up w a small widget called "Taxonomy Filter Widget" after searching for weeks. It's not much, but it's all I could find.
       
      So, researching pulls up that I'm looking for Multiple Drop downs for Custom Taxonomies, search and filter custom taxonomies, build custom queries using dropdowns of cats and custom taxonomies....phew. 
       
       
      Eg., "Find a Restaurant' and then drill down by 'Cuisine', 'Neighborhood", etc. Look on the left on this guy's Wordpress site: http://www.freewilliamsburg.com/
       
      It seems that there are lots of these for Realtors.
       
      Anyway, I bet they'd fly out the door.
       
      Thanks.
×