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').
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 have a page of styled links that I broke into sections using jQuery.
Using jQuery .internal causes the page to navigate to the specified target specified by the href attribute of the link inside the div the user clicked on.
.external does the same thing as .internal except it opens in a new tab.
.video should simply cause the div clicked to play the video specified by the link in a fancybox but it does not. Nor does it report an error in the console.
Here is my code for the fancybox:
HTML
<div id="fentanylVid" class="col-sm-3 dept video" data-department="fentanyl the real deal">
<div class="box listed-left animated-content move_right animate clearfix">
<div class="box-text">
<h4><a data-fancybox="" href="https://youtu.be/Tt0dFCuwkfQ?rel=0">Fentanyl: The Real Deal (Video)</a></h4>
</div>
</div>
</div>
jQuery
$('.video').click(function(){
$().fancybox({
selector : '.video'
});
});
I also have the two resources in the header of my page
You can either initialize the fancybox like this
$('.video').fancybox({
selector : '.video'
});
or as #Taplar said
$('.video').click(function(){
$.fancybox.open(this)
});
A bit explaining what your code does:
$('.video').click(function(){ // <- Here you are attaching your click event on selected items
// So, when user clicks, this happens:
$().fancybox({ // Here you are telling fancybox to attach click event ..
selector : '.video' // .. on this selector
});
});
So, basically you have done too much work and all you have to do is to remove your own click event and it should work fine. Or you can use API to start fancybox programmatically, like in the other answer.
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();
}
}
});
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 trying to use the jQuery tabbed widget as a menu for my application and have managed to set up the tabbed interface so that when you click a tab it shows the first page of that section. According to the docs, if you click on a link on this page and want it to load in the same tab then you need to use the code below. This partially works because now when I click on an image-hyperlink on that page it renders the new page in the tabbed window.
However, when I click on a button which has javascript the button no longer works. This is the case for all of the javascript. How can I get the javascript working again under the new tabbed interface?
$('#example').tabs({
load: function(event, ui) {
$(ui.panel).delegate('a', 'click', function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
});
}
});
EDIT: So if you add the following line to LeftyX's code in the page 1 file, then the button causes page4.html to open but does not do it in the tab
<button onclick="location.href='Page4.html'">Test button </button>
It must work.
If you show us your HTML we might try to help.
You can check my sample and download the code.
Try and check if there are any errors in your script using some Dev Tools (ex: Google Chrome Developer Tools)
UPDATE:
if you're using a button you can use some HTML5 attribute:
<button data-pagelink="Page4.html">Test button</button>
and trap the click event:
$(ui.panel).delegate('button', 'click', function(event, o) {
$(ui.panel).load(this.dataset.pagelink);
event.preventDefault();
});
or use an hyperlink and transform it in a button:
<a id="thisIsAButton" href="Page4.html">go to page 4</a>
with this:
$("#thisIsAButton").button();