So far I have coding for making the tab's display property to none until the button is clicked. The code is given below.
The problem is only one tab is showing at a time. What I want is, all tabs should be visible but not clickable. Please help me with the code if possible or just give me some suggestions, I will try coding it myself and will post it here as answer.
Thanks!
In
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="-1" id="tab1"><b>BOOKING</b></li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab2" style="">QUOTE</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab3">SIGNUP</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab4">PAYMENT</li>
</ul>
In (with this only the first tab is visible and the other tabs are non-visible)
<script type="text/javascript">
$(document).ready(function(){
/*initially hide all tab except tab1*/
$('.TabbedPanelsTabGroup').children().hide().eq(0).show();
/*show tab2 when click the complete button by hiding all tabs*/
$('.complete').on('click', function(){
$('#tab2').siblings().slideUp();
$('#tab2').slideDown();
});
});
</script>
In JS: (at button click) (With this the second tab will be visible and the rest 3 tabs will be non-visible)
TabbedPanels1.showPanel(1);
$('.TabbedPanelsTabGroup').children().hide().eq(1).show();
Try this
$('.TabbedPanelsTabGroup').off("click");
or
$('.TabbedPanelsTabGroup li').off("click");
jQuery off().
Let me know if it not works.
UPDATE 1
$('.TabbedPanelsTabGroup li').on("click", function(){
return false;
});
Or if you are using jquery tab, look: http://jqueryui.com/demos/tabs/#event-select
Thanks for all the help, I have finally found the answer myself. It is actually quite simple. I just commented Spry.Widget.TabbedPanels.prototype.onTabClick event in the .js file.
/*Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
{
this.showPanel(tab);
return this.cancelEvent(e);
};*/
Now the tabs are not clickable and works the way I want it to.
use this
$('.TabbedPanelsTabGroup').children().unbind("click");
$('.TabbedPanelsTabGroup').children().eq(0).bind("click");
instead of doing
$('.TabbedPanelsTabGroup').children().hide().eq(0).show();
Related
Pretty simple question please : How can I add a button at the bottom called "Next" to switch to the next tab without having to get to the top of the page and click on the next tab ?
In fact, I'm copying the tab's code existing in the top of my page but it's not working.
<a id="aba_2" href="#aba_2">Next</a>
This is the existing HTML code that you can also find here https://codepen.io/DiogoAlvaro/pen/wWzNEm :
<ul id="abas" class="teste">
<li class="selecionada"><a id="aba_1" href="#aba_1">Aba 1</a></li>
<li><a id="aba_2" href="#aba_2">Aba 2</a></li>
<li><a id="aba_3" href="#aba_3">Aba 3</a></li>
</ul>
<div id="conteudos">
<div id="conteudo_1" class="conteudo visivel">
<p>Conteúdo da Aba 1</p>
</div>
<div id="conteudo_2" class="conteudo">
<p>Conteúdo da Aba 2</p>
</div>
</div>
The javascript code is :
var abas = document.getElementById("abas");
var conteudos = document.getElementById("conteudos");
function limparSelecao(){
abas.getElementsByClassName("selecionada")[0].classList.remove("selecionada");
conteudos.getElementsByClassName("visivel")[0].classList.remove("visivel");
}
abas.addEventListener("click", function(event){
var abaClicada = event.target.id;
var itemSelecionado = abaClicada.substring(abaClicada.lastIndexOf("_"));
limparSelecao();
event.target.parentElement.classList.add("selecionada");
conteudos.querySelector("#conteudo"+ itemSelecionado).classList.add("visivel");
});
The problem I'm noticing is the switching functionality between tabs is working only one time. It means if I copy the same tabs' code another time it will not work.
Can you help me with this issue please ?
Thanks in advance.
As you can see in your javascript, when you click on a tab things will be done in the background in order to show you its content.
When a tab is clicked the class selectionada is added to your tab as well the class visivel is added to your content in order to show it.
So that sad if you want to use a button you will need then some additional javascript which has to add the class selectionada to the tab and the class visivel to the content you want to display.
Additionally the button has to know which the current open (selectionada) tab is in order to open the next one. Also if you use a Next button it seems to me logical that you will also need a Previous button.
I don't know your programming skills but this process involves some logic in order to be done.
If you are confident with javascript and jquery you can do this with some little effort.
Anyway you know now why just using a button as you ar doing, will not work.
I'm working on a wordpress site with a mobile dropdown menu. The dropdown works fine but clicking on any link in the dropdown menu just closes the menu and doesn't go to the link.
I can't find the JS code for this functionality so is there any code I can add to make sure clicking on any menu item within the menu div won't close the menu?
Below is the html.
Here's the site: www.nomad8.com
<header class="edgtf-mobile-header">
<div class="edgtf-mobile-header-inner">
<div class="edgtf-mobile-header-holder">
<div class="edgtf-grid">
<div class="edgtf-vertical-align-containers">
<div class="edgtf-mobile-menu-opener">
<a href="javascript:void(0)">
<span class="edgtf-mobile-opener-icon-holder">
<i class="edgtf-icon-font-awesome fa fa-bars " ></i> </span>
</a>
</div>
</div>
</div>
</div>
</div>
<nav class="edgtf-mobile-nav">
<div class="edgtf-grid">
<ul id="menu-production-1" class=""><li id="mobile-menu-item-5597" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home edgtf-active-item"><span>menuiteams</span></li></span></a></li>
</ul>
</div>
</nav>
</div>
</header>
UPDATE:
I've added this code to the header and it kind of works. But the anchor tags don't work all the time. Only on the first click:
(function($) {
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(300);
$('.edgtf-mobile-nav').css("display", "block");
$('.edgtf-mobile-nav').css("height", "100px !important");
e.stopPropagation();
});
$(".edgtf-mobile-nav .edgtf-grid").click(function(e){
e.stopPropagation();
});
$('.edgtf-mobile-nav > li').click(function(){
$('.edgtf-mobile-nav').fadeIn('fast');
});
});
})(jQuery);
I wish i could inspect your code in chrome broswer. That would have helped to determine the menu list wrapper/container.
But i am guessing that your wrapper is edgtf-mobile-menu-opener
However, you can target the wrapper that contains mobile menu list and the do something like this:
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(2000)
});
fadeToggle will fade the menu in and it will stay until you click the menu-icon again
Just try that first and lets see
Well, clear the cache.
However, i would like to know where you added the script to in your wp theme because you can be adding it wrongly.
Add this to the CSS. It's an issue with the theme framework itself it looks like. I had this issue myself and this worked as a fix.
.dropdown-backdrop{
position: static;
}
That is most probably because you toggle (open/close) the navigation whenever you click on .edgtf-mobile-header.
Try to change the toggle selector to .edgtf-mobile-opener-icon-holder.
Thanks to #Dayo-Greats answer I managed to work this out..kind of.
Here's the code that makes things work. But for some reason #anchortag menu links still don't work. Otherwise the links are now clickable. Any reason wy the anchor tags wouldn't work?
Here's my code:
(function($) {
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(300);
$('.edgtf-mobile-nav').css("display", "block");
$('.edgtf-mobile-nav').css("height", "100px !important");
e.stopPropagation();
// return;
});
$(".edgtf-mobile-nav .edgtf-grid").click(function(e){
e.stopPropagation();
// return;
});
});
})(jQuery);
I don't have a privilege to make a comment yet.
However, you did not pass the function argument(function()) before you called e.stopPropagation(); as seen below:
(function($) {
$(document).ready(function(){
....
e.stopPropagation();
Quickly fix a bug in the your new code like this function(e)
(function($) {
$(document).ready(function(e){
....
e.stopPropagation();
Try it again and lets see
At the same time, i am thinking you can use another approach that shows the menu again, even when you clicked on the menu li element like this:
....
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle('slow', function(){
#-> trying to target ul>li
$('.edgtf-mobile-nav > li').click(function(){
#-> and when clicked ('.edgtf-mobile-nav > li') then show menu again
$('.edgtf-mobile-nav').fadeIn('fast');
})
...just thinking anyway
Im using Bootstrap to create a tab content. It works fine outside netsuite. but once i put this page into netsuite it gives me an error saying "Cannot assign to read only property 'preventDefault' of error"
My page is like this
HTML:
<ul id="hireTab" class="nav nav-tabs" data-tabs="tabs">
<li class="active">One
<li class="active">Two
<li class="active">Three
</ul>
<div class="tab-content">
<div id="tabOne" class="tab-pane active">
One, one one
</div>
<div id="tabTwo" class="tab-pane active">
Two, two two
</div>
<div id="tabThree" class="tab-pane active">
Three, three three
</div>
</div>
JS:
<script type="text/javascript">
jQuery(function() {
jQuery('#hireTab a').click(function(e) {
e.preventDefault();
jQuery(this).tab('show');
});
});
</script>
On a closer look i found that the tab changing is working. but after the tab changes, the preventDefault doesnt stop the page junmping.
Any idea why is that or any solution? I am new to netsuite so bear with me if this question is stupid.
UPDATE: 1 hr of googling lead me to this page. http://backbonejs.org/#Router
So it appears that backbone is hijacking my browser and changed the behavior of it.
The syntax href="#xxx" is intercepted by backbone and interpreted into "HOME_URL/xxx".
The problem now is how to stop backbone from doing this when i dont want to mess with the backbone code while im not sure how it will effect other parts of the project.
My temporary solution is event.stopPropagation().
Final Working code is:
<script type="text/javascript">
jQuery(function() {
jQuery('#hireTab a').click(function(e) {
e.preventDefault();
e.stopPropagation();
jQuery(this).tab('show');//Maybe this line is not needed
});
});
</script>
What this function does is it kills the request and stop it from going up the DOM tree.
Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
It is a brutal way of doing this. Im sure there are more elegant or native of getting this to work.
I know this is a topic discussed here many times, but none of the solution of the site have helped me....
I'm having two nav items and both of them load two different PHP files by using jquery ajax. I'm using jquery mobile.
My problem is that whenever i click on the other nav item the other one doesn't clear itself, so basically i get div on top of div.
I've tried .html(""); but hasn't worked for me so far.
HTML:
<div id="tabs">
<ul>
<li><a class="classloader1">Upcoming</a></li>
<li><a class="classloader2">History</a></li>
</ul>
</div>
<div id="content"></div>
JS:
$(".classloader1").click(function(){
$("#content").load("get.php");
})
$(".classloader2").click(function(){
$("#content").load("history.php");
})
I would try a different tab structure like
<div id="tabs">
<ul>
<li><a class="classloader one">Upcoming</a></li>
<li><a class="classloader two">History</a></li>
</ul>
</div>
where both elements share the classloader class name. Then I would use jQuery .html() to load the content but returning the specific file depending on the clicked tab like :
$(".classloader").on("click", function (event) {
var file = $(event.target).hasClass("one") ? "get.php" : "history.php";
$("#content").html(function () {
return $(this).load(file);
});
});
If you have more than two tabs, you could use a switch statement to set the value of the file var.
See DEMO
UPDATE : see DEMO using jQuery mobile.
I'm using Bootstrap 3 to create a simple site.
I've created on about.html some Tabs with different content.
<ul class="nav nav-tabs" id="TabSomos">
<li class="active">Quienes Somos</li>
<li>Nosotros</li>
<li>Calidad</li>
</ul>
<article class="tab-content">
<div class="tab-pane active" id="somos">...</div>
<div class="tab-pane" id="nosotros">...</div>
<div class="tab-pane" id="calidad">...</div>
</article>
From index.html I want to create links that open different tabs. I created an ID per tab. However, since it's "hidden" it doesn't work properly.
Modelos de Calidad
I've been reading this solution: link to a specific tab by jquery however I do not fully understand where(and why) to put the scripts. Not sure if that's just within the same html document or between different ones, that it's the thing I need.
Any advice? (As you may see I'm not really that proficient with JS/jQuery). Thank you!
I cannot understand your question completely but here is what i can help you with what i understand.
You want to open a particular tab using the ID in about page.
Try using this code at the end of your about.html page,
$(document).ready(function() {
var hash = location.hash;
$(hash).tab('show');
});
Thank you vigneshmoha,
It seems that someone asked the "same" question as well, and we were heading in the right direction regarding the hash.
Bootstrap tabs opening tabs on another page