Admin LTE Submenus not remaining open on click - javascript

I have incorporated AdminLTE template for my Visual Basic Project. I want the same effect which has been used for the demo:
https://almsaeedstudio.com/themes/AdminLTE/index.html , i.e when you click on sub menu in the Tree view drop down the targeted page open but the Tree view stays open and shows which page is active. Which is not happening in my case, when I click on the sub menu, it takes me to the targeted page, but the Tree view closes automatically.
Please help.

On the menus, the active class set according to the route and you need to put active conditions manually according to each route.

Related

Menu Links not working in Mobiles/Tablets

I have a AngularJS application which has a left to right menu slider of bootstap.
The problem is on clicking the links in the menu,page is not navigated.
This problem only occurs in every Mobile and Tab device not Laptops/Desktop.
On clicking the menu item,page should navigate and the menu should go inside right to left slider,but only the menu goes in.
I know the click event is workig as the menu goes in on a click event.
What could be the issue.
I tried the z-index, to check if other part of the pages are overalaping with menu but it doesnt make any diference.
Bootstrap Javascript components will never work with Angular JS views
because the views in Angular loads via HTTP request which mean when bootstrap javascript fires there is no DOM element to attach event listener
The solution is to use Angular Bootstrap
https://angular-ui.github.io/bootstrap/
all component is Angular directives so it fire after views loading

Tabbed menu in CSS and Javascript - tab sets to active after refreshing page

I have tabbed menu written mainly in HTML and CSS. There are 5 tabs, the first one is set to active when we first load the page. I had to add little JS script, because that active tab wouldn't change its look to "not-active" when we clicked on another tab (so we had two tabs with "active" look). Everything works fine, but if we click on, let's say, 3rd tab and then refresh website, the first tab changes its look from "not-active" to "active", so there are two tabs with "active" look. Only the styling is wrong, content in the tabs views the right content... So if we click on another tab and refresh the page, we have two tabs with "active" look, but the website still views the content from the right tab. I don't want the first tab to set its look to "active" after refreshing page. I don't know JS and I don't know how to fix it.
Javascript:
jQuery(function($){
$(".tabmenu").children("div").click(function(){
$(".current").removeClass("current");
});
});
Here's the full code: http://jsfiddle.net/y5SzQ/1/
The simplest solution
$(".tabmenu").children("div").click(function () {
$(".current").removeClass("current");
})
.filter(location.hash).click();
(to test: change tab, right click Reload resule frame)
Demo: http://jsfiddle.net/y5SzQ/3/
What it does is just triggers click event similarly to what happens when user clicks with a mouse. If there is location.hash (say '#french-tab') and tab other then Polish has to be selected, then .filter(location.hash) will become for example .filter('#french-tab') and corresponding tab will be selected.

Tabs UI using Jquery

http://jqueryui.com/tabs/#manipulation the tabs manipulation does a click to add a tab. but i need a little tweak in there. after i click the add tab i.e., clicking add tab creates a tab2..but the screen doesn't takes the view to the second tab. It remains in the first tab but add the second tab(which is not active after click)
I need tab2 to be active after clicking the add button...this process continues for all the adding tabs.
I need a example or a way..coz it's a showstopper for my current project
There’s a link of the bottom of that page, “Want to learn more about the tabs widget? Check out the API documentation.”
And to get from there to http://api.jqueryui.com/tabs/#option-active should not be an impossible task for a developer, don’t you think …?

How to make a full page JS and CSS menu

To be more specific, how do we create a JavaScript menu with CSS styling that occupies the whole page, but the menu bar will be shown. There will be an icon on the top-left. Upon clicking that icon or symbol, the menu should appear and that image should glow. And after cliking it again, the menu goes away. I tried a lot but failed. I am just 14 year old. Please help me.
If there is something like that already which is open source, please post a link so that I can get on it.
UPDATE: I did it own my own.
Try this site here which gives you different menu bars to choose from. all you need to do is download a menu and change the menu details inside the script so that you can change menu names, add more or fewer menu tabs, etc. It uses jquery and contains its own css page which you can manipulate.
In order to hide and show the menu, how about using something like a html tooltip, except for hovering over the button to open/hide the menu, you can set it so that if you click the button, it opens/hide the button ?
Try this its opensource
http://www.interspire.com/content/2005/12/07/building-an-expanding-dhtml-menu-with-css-and-javascript/
http://www.noupe.com/css/13-awesome-java-script-css-menu.html

jQuery: onclick drop-down menu with controls

I wish to create a menu (a sign-up menu), see this to get an idea of it. When user clicks on this button/link a drop-down menu appears, using which he can do something (here login).
The behaviour of the link should be the following:
The drop-down menu should appear when clicked on this button/link.
when clicked anywhere on the page (including the button/link itself), but outside the menu, the menu should disappear.
If clicked somewhere on the drop-down menu, the menu should not disappear.
All the controls in the drop-down menu should work.
I did somehow managed to get first three working, but then the controls within the drop-down menu (4th behaviour) are not working.
The javascript/jQuery code along with html code is given here (jsfiddle link, same as above). You can fork it and make changes.
Thanks.
check this
http://thefinishedbox.com/files/freebies/loginfreebie/index.html
Download tha code
http://thefinishedbox.com/freebies/scripts/jquery-dropdown-login/
I made a fork of what you have on your jsFiddle: http://jsfiddle.net/DukyJ/
If you look at the code I just added an extra div to have the page's content so I don't have to assign click events to the whole body just only to that div.
Then, I removed the return false and the stopProppagation and just added a '#' to the link in the href because it wasn't necesary.
And finally just added some style to the signin link and the singin panel so you can see that the menu appears over the content as I suppose you want it to appear.

Categories