Bootstrap menu is open when page is loaded - javascript

I've implemented into my website the Bootstrap dropdown menu and the issue is that when I load the page, then as the default statue is popped up dropdown menu. I am struggling with how to have this dropdown menu hidden when the page is loaded as default.
Here's the HTML structure:
Sign in
<div class="login_window dropdown-menu">
...
</div>
So, when I load the page, the window is displayed. When I click somewhere, then is hidden. When I click on it, then will be displayed again. That's ok.
But I am trying to have the window have hidden when I load the page. How to achieve that?
Thanks

add display:none in default css for the class you want to hide...then in jquery do
$("body").click(function(){
$('.divclass').css('display','block'); /*or $('.divclass').toggle() */
})

My guess is that you have the structure of your HTML wrong. Did you look at the example on bootstrap? http://getbootstrap.com/components/#dropdowns
You need to have a clickable element (button, div, span - whatever) that's never hidden. When you click that element it animates the visibility of a sibling or child element to show the menu items. Try using the code from the sample and simply replace the <li> values with your menu items. That should help you understand the required form.
There is no need to toggle visibility on your own.

Related

ngx-bootstrap dropdown menu DOM is not being rendered on init

I'm not able to get routerLink activated on the dropdown on init.
It works after I trigger the dropdown by clicking on it once and keeps working even after I close it.
It isn't working on init because the dropdown DOM is not rendered by that point.
It gets rendered after the dropdown button is clicked.
I want the dropdown list rendered and hidden on init please.
StackBlitz that reproduces the issue:
https://stackblitz.com/edit/ngx-bootstrap-dropdown
This is the default stackblitz for ngx-bootstrap-dropdown.
If DOM is observed, on init, the dropdown elements are not rendered but after it is opened and closed, the elements are there.
On init before the button is clicked
After the dropdown is clicked and closed, the ul is there
What I am looking for is a proper way to use the dropdown pre-rendered (and definitely hidden) so that routerLink is already working

Prevent Bootstrap popover from resetting content on show

I am using a bootstrap popover to display an instance of fancytree. On the initial click of the button that triggers the popover, everything loads and initializes correctly.The user can select items in the tree, search for items in the tree, etc. When the popover is dismissed and then shown for the second (or more) time, only the original static html that was in the data-content attribute is shown. After looking at the DOM while this happens, it appears that the popover is just replacing the dynamically generated content that fancytree created with the static content in the data-content attribute.
My question is, is there a way/option for the popover to not reinitialize the content every time it is displayed and just hide it instead?
Because I have an instance of fancytree created dynamically, I can't just swap out the HTML as it would no longer "link" to the fancytree object.
Any help is greatly appreciated!
This is not a solution to the issue of preventing the bootstrap popover from re-initializing the content inside of it but I did end up going with the bootstrap dropdown instead since the content that is displayed by it does not get reset every time a user opens it.

Dynamically disabling / enabling the links in a Bootstrap dropdown menu on-click

I understand that bootstrap allows a user to disable links within its dropdown menu component simply by adding a class="disabled" into the corresponding <li> tag.
What I'd like to do is write some javascript so that when a user selects the dropdown menu and clicks on a link within it, that link will become disabled. It's in the nature of the dropdown menu to close immediately when a valid link is selected, or when the user clicks outside of the dropdown box. Therefore when the user opens the menu on any subsequent visit, he or she should see all of their previously selected items appearing as disabled.
I've already tried to use the solutions posted in this link: disable a hyperlink using jQuery, but none of them are working for me.
Using Nagra's above javascript solution in this modified form: $('#my_link').click(function(){$(this).addClass('disabled');}); I am able to add the disabled class to each of the <li> elements whenever a user clicks on the <a> embedded within the <li> parent.
Thank you.

Use same ID for popover

I have multiple buttons on my website and I want them all to use the same popover ID. The problem is, the only popover that actually works is for the button at the top of the page.
If I click any other button (with the exact same settings and popover ID), it won't open. Only the top one opens.
How can this be fixed?
Instead of using IDs, I had to use the class.

Toggle menu issue

I've got a toggle menu, please see http://jsfiddle.net/Wp2em/41/ for code and functions.
On the real site which is using the same code, everytime when you click on h3 (Category 1, 2 & 3 which is an a tag at the moment), it toggles its submenu down a bit, then the page changes to a new h3 linking page, and the submenu collapses together on the new page.
I'm just wondering is there any way I can tell the submenu to be open when its parent page/the new h3 linking page is opened? Please see this bank site which has the side bar effect I'd like my toggle menu to be.
Thank you in advance!
Here is my fiddle
all you will need to do is put the class "currentPage" on the li that you are currently on and the menu should be open after the page loads. I also moved some of your css around so it should move a little smoother now.
** Updated fiddle code. It will now look at your current URL and set the link that matches with it to the currentPage. Also I added that if another menu is open it will close itself if you click on another parent menu
** Updated fiddle code. Ok now if you click on the arrow the menu will expand and not go to the link(like the bank site). Also I changed it where you will have to put the anchor tag in all parent H3s.
This is not too simple. I've had a very similar problem, although I was posting the page back to the same url so I used a hidden field to store a list of the id's of the H3's which were open.
You I think will have to use a cookie to do this as you're navigating straight to the new page. The idea is you create a cookie and set a value on it every time you open an H3 and remove it every time you close it. You can use this plugin to do this. Then when you open the other page, the script reads the H3's which should be open out of the cookie and opens them.
Another route would be to use Ajax to post the open/closed H3 information back to the server which would store it in session data and use it to build the HTML of the new page so the right H3's were open.
If the page loads and the submenu (ul.second_level) is generated (i.e. from php), parse an active css class on the submenu that must be visible.
ul.active {
display: block
}
ul.second_level {
display: none
}
This is in addition to your click function. Do not trigger the click event since it starts the animation (which I presume you don't want).
Update:
It is quite basic stuff, but I do not know how the HTML code for your menu is created. If you are using php and a database (for example) to create the menu, check every submenu item with the page you are on. If the page is one of the pages in the submenu, set the class 'active' on that submenu. The CSS does the rest (displaying this submenu and hide other submenus).
If you have a static page, use javascript to check on which page you are with window.location.href for example. The rest is the same.

Categories

Resources