click link in navbar menu - javascript

I'd like to use javascript to click on a link in a navbar dropdown menu. If the dropdown has been opened at least once $("#state_save").is(":visible") is true and I can use document.getElementById("state_save").click(); to click the link.
However, without activating the navigation bar manually first, document.getElementById("state_save").click(); won't work
I can get the list of all links in the navbar using $("#nav_radiant li:has(a)") but it is not clear how to click on #state_save.
EDIT:
Based on the comments I figured out that until the dropdown menu has been opened the href of the state_save element is blank.
Praveen: A (slightly) older version of the app is linked below. The id in this version is saveStateNav
https://vnijs.shinyapps.io/radiant/?SSUID=1f38b44126
FYI The code is generated using R and the shiny package

Related

Dropdown menu on mobile doesn't hide on second click

I'm trying to put this dropdown menu on my website:
*https://codepen.io/sean_codes/pen/WdzgdY*
My website is totally mobile-friendly.
When I click to open the menu on the phone, it opens normally, but when I click the second time, it doesn't close. It closes only when I click away.
How do I put that menu to close when I click the menu icon a second time?
It is best to avoid the usage of hover on mobile devices. You will first have to check if the browser supports it via #media and create some sort of fallback in case it does not.
Try using input html element and set the type to checkbox for your dropdown buttons and toggle your dropdown with checked.
No need to use javascript for this.

Bootstrap Umbraco menu Dropdown click

I work for a site which has a site which is built upon Umbraco and utilizes bootstrap and Jquery.
We have a top navigation menu which has pages and sub-pages. When you hover over a navigation menu it opens up the sub-menu and lets you go to them.
When this menu is viewed on a mobile device it becomes a hamburger and when you click on it it drop-down and the main tabs are shown. Here when you click on the main tab it shows the sub-menu quickly but then goes to the main tab instead of allowing you to click on the sub-menu.
The problem is that this is a large site which is about to launch so that there is no easy way to find what links to what. What is a elegant way to fix this?
I cannot provide the link due to the fact that it is a company.
Thank you!
You could try using this bit of JS (requires jQuery):
$(".dropdown").on('click', function (e) {
e.preventDefault();
});
Or you could change your menu partial to just not put the URL in for menu items that have a dropdown and instead put a # in its place.

Bootstrap 3 accordion menu: Stop the panel open from also opening the page

I am developing an Angular JS 1.5 app using Booststrap components. I have an accordion menu on the sidebar which is based upon this:
http://bootsnipp.com/snippets/QXqM1
(Not my code)
When I open a menu and select the menu item the page is loaded (I am using vanilla angular JS routing for this.
If I then open another menu from the accordion i.e click on the menu header, the menu opens, the previous one collapses but the loaded page changes.
What I would like is for a page to be loaded only when an item is clicked and not when a menu is opened.
Is this and angular issue or a css or bootstrap issue and how can I solve it?
Thanks in advance for any help or pointers on this.
Well thanks for the overwhelming response ;-)
I found a solution: Instead of using href for the sub menu titles I now use data-target. Bootstrap interprets data-target and this way Angular JS routing does not get invoked.
In this way the menus can be opened and closed without impact the view. the href tags remain only on the menu items which should show anything.

Wordpress top navigation menu links inactive

I'm using a theme called Ironbull and when wordpress generates a menu the custom links are inactive. They are shown and when I hover the links the URL shows, but it wont load the link or open a new window.
There are a few "scroll to ID" links which works on the frontpage, but thats it. If I right-click on the link and press open in new window it loads.
I'm working on this site localy so please tell me if you need me to post any part of the code.
Many thanks

Sliding panels closing when clicked outsite and linking to an open panel

I am planing to use sliding panels as pages for this website.
Even tough I am a JS noob I managed to find and edit scripts until I got pretty much the perfect script
Problem is that the sliding panels are closing when clicked outside. I want then to close when another panel opens but not when somebody clicks outside the panel.
Also this will be an one page design except the portfolio. I a link to index.html with the portfolio panel open. Can I do that? To understand better what I mean please check this image.
Edit: Okay I will explain better.
This will be a one page design, since I will be using sliding panels for pages. However each gallery item will have it's own html page because I do not want the site to be slow.
So I need to link portfolioitem1.html to the index.html with the portfolio panel open just like in the image I posted
Here's a jsFiddle that solves the first part of the problem:
http://jsfiddle.net/aUHwA/1/
The thing that was causing the panels to collapse was the document.click() function you were using. I've moved everything into a $(document).ready() function, added some generic wrappers for the sliders and buttons, and used a generic click function that's shared across all three buttons.
The click function uses the data-rel property of the button that was clicked to decide what panel it should toggle. It also hides any panels that are already visible within the #content div.
To open the portfolio panel by default, you can add this immediately after the on('click') function:
$('#portfolio_button').click();
That will trigger the portfolio animation (see http://jsfiddle.net/aUHwA/3/). Alternatively:
$('#portfolio').slideToggle(0);
will open the portfolio panel instantly, without the sliding animation (see http://jsfiddle.net/aUHwA/2/).

Categories

Resources