This is navigation I would like to control from code
<div data-role="page" id="settingsPage">
<div data-role="content">
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">aaaaaaaaaaaa</div>
<div id="two" class="ui-body-d ui-content">bbbbbbbbbbbbb</div>
<div id="three" class="ui-body-d ui-content">cccccccccccc</div>
</div>
</div>
</div>
This is how I try to switch to second tab:
setTimeout(function(){
$("#two").trigger("click");
}, 3000);
DEMO
Nothing happens. How to switch?
You can try something like
setTimeout(function(){
$("li>a[href='#two']").trigger("click");
}, 3000);
You can get More information about tag selector([]) and child selector (>) from provide links.
Related
I'm looking for a way to make this hamburger menu close after the user clicks the link/makes selection. I've checked out several options on how to do it, but with no luck. I understand I need a missing piece of JS.
The rest of the code (html&css) can be found here (https://codepen.io/alvarotrigo/pen/oNGzoYd). Stackoverflow is prohibiting me from posting all of the code (says it's mostly code).
function menuOnClick() {
document.getElementById("menu-bar").classList.toggle("change");
document.getElementById("nav").classList.toggle("change");
document.getElementById("menu-bg").classList.toggle("change-bg");
}
You forgot to pass in the onclick function to the nav.
This should do the trick:
<div id="menu">
<div id="menu-bar" onclick="menuOnClick()">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
</div>
<nav class="nav" id="nav" onclick="menuOnClick()">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>
<div class="menu-bg" id="menu-bg"></div>
In your HTML, just call the same menuOnClick() function on every <li> item on the list.
<li onclick="menuOnClick()">Home</li>
<li onclick="menuOnClick()">About</li>
<li onclick="menuOnClick()">Contact</li>
<li onclick="menuOnClick()">Blog</li>
I have a website where I installed SlickNav. I have it calling properly, and the linking works properly, however it doesn't seem to want to initialize in the site itself. I'm calling it via the following:
<link rel="stylesheet" href="/wp-content/themes/mta360/dist/styles/slicknav.css" />
<script src="/wp-content/themes/mta360/dist/scripts/slicknav.js"></script>
The menu code is as follows:
<header>
<!-- Header Start -->
<div class="header-area">
<div class="main-header ">
<div class="header-top top-bg d-none d-lg-block">
<div class="container">
<div class="col-xl-12">
<div class="row d-flex justify-content-between align-items-center">
<div class="header-info-left">
<ul>
<li>1234567890</li>
<li>mta360seo#gmail.com</li>
</ul>
</div>
<div class="header-info-right">
<ul>
<li>Mon - Fri: 9:00 - 5:00</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="header-bottom header-sticky">
<div class="container">
<div class="row align-items-center">
<!-- Logo -->
<div class="col-xl-2 col-lg-1 col-md-1">
<div class="logo">
<img src="/logo.png" alt="">
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-8">
<!-- Main-menu -->
<div class="main-menu f-right d-none d-lg-block">
<nav>
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Heating</li>
<li>Cooling</li>
<li>Press
<ul class="submenu">
<li>Blog</li>
<li>Releases</li>
</ul>
</li>
<li>Company
<ul class="submenu">
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-3">
<!-- Header-btn -->
<div class="header-btn d-none d-lg-block">
Quote
</div>
</div>
<!-- Mobile Menu -->
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header End -->
Is there something I'm missing? It works for my local testing, but when I compile and try to use it on the actual site, it just doesn't want to initialize at all. Is there something I'm missing?
It's a wordpress site using Sage 9, in case that helps with the diagnosis.
You have to initialize it using Javascript code.
The 2 first libraries you are calling are the CSS slicknav library and the JS slicknav library. You also need to load jQuery for slicknav to work.
So add this to your code at the beginning:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
$(document).ready(function(){
$('#menu').slicknav({
// Label for menu button.
// Use an empty string for no label.
'label' : 'MENU',
// If true, the mobile menu is a copy of the original.
'duplicate': true,
// The duration of the sliding animation.
'duration': true,
// other parameters see here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html //
});
});
also you need to specify an ID "menu" to the <ul> element like this:
<ul id="menu">
<li>...</li>
</ul>
Finally, make sure your HTML markup follows the specified structure for slick nav which is:
<ul id="menu">
<li>Home
<ul>
<li>Blog</li>
<li>Plugins
<ul>
<li>Latest</li>
<li>Most Popular</li>
<li>Recommended</li>
</ul>
</li>
<li>Publishing</li>
</ul>
</li>
<li>Top <a href="#">Menu 2</a></li>
<li>Top Menu 3</li>
<li>Top Menu 4
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
more here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html
I am trying to implement two basic tabs and panels. The panel does not show the content(Page 1) on page load. However, clicking on the other tab works fine with the right content(Page 2) and then going back to the first tab works fine(Page 1).
<ul class="nav nav-tabs">
<li class="active">Page 1</li>
<li>Page 2</li>
</ul>
<div class="tab-content">
<div id="panel1" class="tab-pane">
Page 1
</div>
<div id="panel2" class="tab-pane">
Page 2
</div>
</div>
Is there something I am missing?
You don't have the active class for the content panel.
You need the following to show the panel1 content by default:
<div id="panel1" class="tab-pane show active">...
I think we need more details because your code is working fine
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="active">Page 1</li>
<li>Page 2</li>
</ul>
<div class="tab-content">
<div id="panel1" class="tab-pane show active">
This is the content of page1............................
</div>
<div id="panel2" class="tab-pane">
This is the content of page2............................
</div>
</div>
In internet explorer the nested tab is displaying with black dot. Through inspect element if i did any changes in css the dot will be gone. If i do a refresh again it is coming. I don't know how to resolve.Demo is here.Following is the snippet I have used for creating the nested tab.
Thanks in advance..
<div id="tabs">
<ul>
<li>Total Pool Point </li>
<li>Vessel Details</li>
<li>Standard Voyages</li>
<li>Voyage calculation</li>
<li>Cargo Lifts</li>
<li>Performance</li>
<li>Pool Rules</li>
<li>Additional Pool Point</li>
</ul>
<div id="tabs-1">
<div id="totalpp_tab_main" ></div>
</div>
<div id="tabs-2">
<div id="vessel_tab_main" ></div>
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
<ul>
<li>Standard Voyage #1</li>
<li>Standard Voyage #2</li>
<li>Standard Voyage #3</li>
<li>Standard Voyage #4</li>
<li>Standard Voyage #5</li>
<li>Standard Voyage #6</li>
</ul>
</div>
</div>
<div id="tabs-5">
<div id="cargolc_tab_main" ></div>
</div>
<div id="tabs-6">
<div id="performance_tab_main" ></div>
</div>
<div id="tabs-7">
<div id="poolrules_tab_main" ></div>
</div>
<div id="tabs-8">
<div id="additionalpp_tab_main" ></div>
</div>
</div>
Without diving into jquery tabs, here is a quick fix:
http://jsfiddle.net/0m2zdo20/2/
Just added a css to remove theses dots.
#tabs-4 > ul > li {
list-style: none;
}
Try add to your CSS:
ul { list-style: none; }
I have a CSS menu tab which base on idTabs.js , it has 3 buttons which switch between the content appeared on the menu <div> -
<div>
<div id="usual1" class="usual">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
</div>
(here its demo)
Now I try to edit it a little bit such that the button would be under the menu div -
<div>
<div id="usual1" class="usual">
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
</div>
<div class="usualBottom">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
but the buttons stop working , mean they don't switch the menu content .
(here its demo)
How to fix that ?
I think your selector was wrong. Instead of $("#usual1 ul").idTabs(); it should have been $(".usualBottom ul").idTabs(); . See if it works.
Demo :http://jsfiddle.net/3Njy5/3/
You need to write the ul containing tabs before the div containing content. If you need your tabs after the content or at bottom of page, you need to do that by positioning.
I believe that is because you're not constructing the tabs the correct way in your second example. I think the plugin registers the individual tab contents as siblings of the tab navigation menu, and when you move them into different parents the plugin will not work.
You can, however, change the position of the menu by moving it after the tabs: http://jsfiddle.net/teddyrised/HwfF6/1/
<div id="usual1" class="usual">
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
You should replace elements inside of the div.
<div>
<div id="usual1" class="usual">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
</div>
If you want the tabs be inside of wrapper, use before pseudo tag.
.usual ul:before {
content: ".";
}
Example:
JS FIDDLE
Try like this,
<script type="text/javascript">
$(".usualBottom").find("ul").idTabs();
</script>
Demo : http://jsfiddle.net/3Njy5/4/