Requirements:
When I clicked first time on menu item which has dropdown menu, It should show its dropdown and when I clicked on the same menu item second time it will redirect to its own page.
Please consider the situation. Menu item redirect to its own page only when its dropdown are opens
Reference Images:
Reference website link:
Reference website link
Note for referaence website:
1) Please open reference website link on mobile view.
2) Click on about page than Dental Page and than again About page , When you second time clicked on about page It goes to its own page. But on this occasion I want to open its dropdown and again If I clicked About page than it goes to its own page
Currently I am using jQuery bind function and disable link through event.preventDefault() but i didn't resolve my problem
Here's my code
jQuery Code:
$(document).ready(function(){
$(".flexnav li.parent-menu-item > a").bind("click.myclick", function(event) {
event.preventDefault();
$(".flexnav li .sub-menu").hide();
$(this).unbind(".myclick");
$(this).parents(".flexnav li.parent-menu-item").children(".sub-menu").toggle();
});
});
Sorry for my language mistakesThanks!
Instead of handling the click event inside the $(document).ready function, you should try doing it inline with each li.
<li id="link1" onclick="ShowMenu('#menu1', 'index.html')">
<ul class="dropdown" id="menu1">
...
</ul>
</li>
<li id="link2" onclick="ShowMenu('#menu2', 'aboutus.html')">
<ul class="dropdown" id="menu2">
...
</ul>
</li>
<script>
function ShowMenu(menuId, linkRef){
var display = $(menuID).css('display');
if(display == 'block')
window.location.href = linkRef;
else{
$('dropdwon').hide();
$(menuId).show();
}
}
</script>
So, here, what I am doing is to call the ShowMenu() function with the id of the menu I want to show, as the parameter and the url of the page linked to it.
The function then checks if that menu is being displayed or not. If being displayed then it redirects the user to the url. If not, then it proceeds to hide all other dropdowns and shows only the one that was clicked.
You can use CSS class toggle to see if the dropdown is open or not and perform the action accordingly. (Assuming your current code is working fine to open dropdown)
$("body").on("click",".flexnav li.parent-menu-item > a",function(e){
var dropdowns=$(this).parent('li').children(".sub-menu");
var menu=$(this).parents(".flexnav li.parent-menu-item").children(".sub-menu");
if(dropdowns.size()>0) {
if(!menu.hasClass('open')) {
e.preventDefault();
menu.addClass('open');
menu.show();
}
}
});
Related
I would like to open "nav-Customer" drop-down menu option with a Javascript command.
(There is no way to change source html file below)
<ul id="nav-People-container">
<li id="nav-Owner">
Owner
</li>
<li id="nav-Responsible">
Responsible
</li>
<li id="nav-Customer">
Customer
</li>
</ul>
Trying with document.getElementById("nav-Customer").click(); does not open the pop-up window that should activate upon mouseclick.
I tried this script with regular buttons, it works. but I need it in this specific case.
Can anyone help me? What am I not doing right?
(I have no Javascript experience)
You can do it this way:
$(document).ready(function(e) {
$('body').on('click', '#nav-Customer', function(e) {
// do something after click
// comment out to stop debug
console.log("something was clicked");
alert("You Clicked the Link");
});
});
Check if document is ready.
onclick #nav-Customer do something.
I'm using tabs with Twitter Bootstrap 3 and want one of them to function as an external link that opens a new window. I removed the data-toggle="tab" and added some JQuery to accomplish this. The code below doesn't work and gives me the following error message, however if I add class="active" to the li element, it works perfectly (other than that tab having incorrect styling). Why is this the case? How can I alter my code so I don't need class="active" on the parent li?:
HTML:
<li>
<a href="https://www.google.com/" class="external-link" target="_blank">
<span class="nav-text-wrapper">Example Tab Name</span>
</a>
</li>
Javascript:
$('.external-link').click(function(){
window.open($(this).attr('href'));
});
EDIT:
I found the solution. I had the following JQuery code to allow for nested tabs, but apparently this conflicted with me using external links on tabs
var $mainTabs = $('.tab-menu a');
$mainTabs.click(function (e) {
e.preventDefault();
$(this).tab('show');
});
How about this?
$('a.external-link').on('show.bs.tab', function (e) {
e.preventDefault(); // prevents the default tab selection behavior
window.open($(this).attr('href'));
});
show.bs.tab is an event that gets raised for a tab right before it is shown. By cancelling it with e.preventDefault(), you're interrupting the tab's show() function early on and inserting your own behavior. If you don't stop the show() function early like this, it will try to select the tab panel referenced in your href in order to show it. The error you were getting was because the tab plugin was trying to find a DOM element with a selector like this: $('https://www.google.com').
I have a very simple Tab. On clicking the Tab Head I want the URL to get updated like:
http:/somepath/demo-tabs/#tab2 or http:/somepath/demo-tabs/#tab3
As well as I want these tabs to be navigated as and when I clicked the Prev and Next button of the Browser. Which also seems to be working fine. But the point is the page jumps every time the Tabs are clicked. How can I stop page Jump with all the other things still working. i.e URL gets updated and it works on clicking the browsers Prev and Next buttons.
$(window).on("hashchange", function() {
$("a[href='" + window.location.hash + "']").click();
});
Above is the code I used, which I got from my previous post question. This makes my tab working on clicking the Prev and Next buttons of the browser. Below is the HTML sample markup for tab and Jquery:
ul>
<li>Head 1</li>
<li>Head 2</li>
</ul>
<div class="content"> Some Content/........</div>
<div class="content"> Some Content/........</div>
$(document).ready(function() {
var tabHead = $('ul li');
var tabContent = $('.content');
tabContent.not(':first').hide().end();
tabHead.on('click',function() {
tabContent.hide().eq($(this).index()).show();
});
});
I found `window.history.pushState(“object or string”, “Title”, “/new-url”); on research. However could you help me with the sources or links or demo on how to actualy use it.
And I don't want to use AJAX. Just simple Jquery or JS.
I am pretty new in JQuery and I have a question about addClass(). I spent some time to try to get this working, but seems like I did something wrong. I created a top menu with HTML and bootstrap. I assume visitors will land on my index.php first, so I created the class="active" for my index.php. Then if they click on any other link on the top menu (ex. About Us), then the class="active" will add to the and remove the class="active" from the "li" tab for index.php.
Below is my HTML code:
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li id="home" class="active"> Home</li>
<li id="about"> About Us</li>
<li id="browse"> Browse</li>
<li id="contact"> Contact</li>
</ul>
</div>
And below is the JQuery code that I use and try to get this done.
$(function (){
var sidebar = $('.nav');
sidebar.delegate("li", "click", function(){
if($(this).hasClass('active')){
//If click on the tab that is currently active, it will do nothing.
}else{
sidebar.find('.active').addClass('inactive');
sidebar.find('.active').removeClass('active');
$(this).removeClass('inactive');
$(this).addClass('active');
}
});
});
I tested it out on my local server. I could see the tab in my top menu turned to grey after I clicked it, but it didn't stay. So I am sure I did something wrong, but not sure where. I am really new in JQuery, so I hope I can learn from you guys. thank you!
When the link is clicked on, it takes the browser to a whole new page which starts a whole new javascript environment and nothing you've done to the current page carries over to the newly loaded page.
Thus the active class may be changed on the current page, but then a whole new page loads which inherits nothing from the first page (e.g. it's starts over from scratch). Your code from the first page is no longer in play once the new page is loaded.
You need to either just code the active class into each separate page (since each page knows what page it is) or have one common set of JS that sets the active class when the page loads based on the URL so it is intialized properly when the page loads.
Also, you probably don't need an inactive class. The default CSS state can represent the inactive look and the active class can apply a CSS override to show the active state.
This is not working, because when someone clicks on another link, they are redirected to a different page. However, your header doesn't really know which link was clicked on nor which page it is on. You need to let your header know which page you are. Does this make sense?
The other answers are correct, when you click on the tag you are opening a new page and therefore losing your javascript environment.
If you want to have a single page app, you can use preventDefault to stop the browser from following the link.
sidebar.delegate("li", "click", function(e){
e.preventDefault();
if($(this).hasClass('active')){
//If click on the tab that is currently active, it will do nothing.
}else{
sidebar.find('.active').addClass('inactive');
sidebar.find('.active').removeClass('active');
$(this).removeClass('inactive');
$(this).addClass('active');
}
});
I am struggling with a JavaScript / jQuery issue. I am developing with foundation 4. I have a group of 5 buttons. Two of the buttons are dropdown buttons. When the dropdown button is pressed a window is presented with the dropdown options(links).
<a id="products" href="#" data-dropdown="prod" class="not_active_button_dropdown">Dropdown Button</a><br>
<ul id="prod" class="f-dropdown">
<li><a class="prod" href="index.php?info=basic">Basic</a></li>
<li><a class="prod" href="index.php?info=unifrost">Unifrost</a></li>
<li><a class="prod" href="index.php?info=teal">Teal-Sorb</a></li>
</ul>
Note: I created my own buttons classes with sass by mixin (class="not_active_button_dropdown").
Now I developed a script that loads the php response into a div #dropdownwrap, changes the buttons so it highlights the current button that has been pressed.
<script style="text/javascript">
$(document).on('click','a.not_active_button, a.prod', function(){
var href=$(this).attr('href');
var querystring=href.slice(href.indexOf('?')+1);
//get
$.get('index_jq.php', querystring, processResponse).error(errorResponse);
//reset all buttons to not active
//normal button
$('a.active_button').removeClass("active_button").addClass("not_active_button");
//dropdown button
$('a.active_button_dropdown').removeClass("active_button_dropdown").addClass("not_active_button_dropdown");
//if it is a normal button make it active
if ($(this).hasClass("not_active_button"))
{
$(this).addClass("active_button");
}
//if it is a dropdown button option link make it active
if ($(this).hasClass("prod"))
{
$('#products').removeClass("not_active_button_dropdown").addClass("active_button_dropdown");
//$('ul#prod.f-dropdown').close();
}
//slide down wrap
if ($('.dropdownwrap').is(":hidden")) {
$('.dropdownwrap').slideDown();
} else {
$('.dropdownwrap').slideToggle("slow");
$('.dropdownwrap').slideDown("slow");
}
return false; // stop the link
});
function processResponse(data) {
$('.dropdownwrap').html(data);
}
function errorResponse() {
var errorMsg = "Your request could not be processed right now.";
errorMsg += "Please try again.";
$('.dropdownwrap').html(errorMsg);
}
</script>
I am not that experienced with JavaScript or jQuery. Anyhow the problem is the following:
//$('ul#prod.f-dropdown').close();
which is commented out above. Everything works fine, my data loads and the dropdown button highlights. The problem is that the foundation 4 dropdown button window does not close after the script executes. This is because (I am guessing) I return false to stop the link from executing. So I tried to close the window using the above commented out line. When I uncomment the line, the window closes but the return false does not execute, that is the link is not disabled, it goes to the link, i. e. index.php?info=basic. So it seems when I add the close window statement, return false does not work. I tried adding the line after return false, but it does not close the dropdown menu.
The return false; not working is probably because there is some JavaScript error before it reaches that line. In this case, the error is calling .close() on something which does not have a close method. Instead, in order to call Foundation dropdown’s close method, you have to do something like the following:
$('#prod').foundation('dropdown', 'close', $('#prod'))
I guess there is a more elegant way to do this, but I found this to work. As a note, next time please post a minimal example on jsfiddle.net and link to it in your question. This makes reproducing your problem much easier.
You also need the data-dropdown-content attribute attached to the dropdown ul element.
Reference: https://github.com/zurb/foundation/issues/1831#issuecomment-15133817