Enable and Disable tab using jQuery/JavaScript - javascript

I need to enable and disable tab based select results.Below the code I am working.If device B status is On-Line I need to disable Device-V tab.How to implement this using JavaScript/jQuery.
jQuery:
if(result.includes("On-line") ){
$(selected_device_id).html("");
//Need to implement disable function here
$(selected_device_id).append(result+" ✅");
HTML File:
<div class="panel">
<br>
<ul class="nav nav-pills nav-tabs">
<li class="active">
<a
data-toggle="tab"
href="#Device-B"
onclick="document.getElementById('Object').value = '';
document.getElementById('first_i').value = '';
document.getElementById('second_i').value = '';
document.getElementById('third_i').value = '';">
<i>
<b>Device B</b>
</i>
</a>
</li>
<li>
<a
data-toggle="tab"
href="#Device-V"
onclick="document.getElementById('tr181_object').value = '';
document.getElementById('first_i').value = '';
document.getElementById('second_i').value = '';
document.getElementById('third_i').value = '';">
<i>
<b>Video</b>
</i>
</a>
</li>
</div>

$(document).ready(function()
{
var switch_ch = 0 ;
$(".linktoggle").on("click",function(){
i = $(this).index(".linktoggle") ;
if( $(".linktoggle").attr("href") === "#Device-B")
{
if( switch_ch === 0 )
{
$(".linktoggle:eq(0)").show();
$("li:eq(0)").show();
$(".linktoggle:eq(1)").hide();
$("li:eq(1)").hide();
switch_ch = 1 ;
}
else
{
$(".linktoggle:eq(1)").show();
$("li:eq(1)").show();
switch_ch = 0 ;
}
}
if( $(".linktoggle").attr("href") === "#Device-V")
{
$(".linktoggle:eq("+i +")").hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel">
<br>
<ul class="nav nav-pills nav-tabs">
<li class="active">
<a
class="linktoggle"
href="#Device-B" >
<i>
<b>Device B</b>
</i>
</a>
</li>
<li>
<a
class="linktoggle"
data-toggle="tab"
href="#Device-V"
>
<i>
<b>Video</b>
</i>
</a>
</li>
</div>

Related

active anchor link not being highlighted

I have been staring at this code for far too long, unfortunately I do not see the problem.
I am trying to get the active menu entry highlighted when the relevant div gets scrolled into view. But nothing is happening and no errors are being thrown in the console.
My menu html:
<section class="LeftAnchorNav" style="display: block;">
<nav id="LeftAnchorNav">
<div class="container" style="padding-left: 50px;">
<div class="col-md-4 LeftAnchorNavWrapper">
<ul class="LeftAnchorNavMenu">
<li class="leftanchorlink">
<a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
An example div:
<div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9"></div>
</div>
My jquery/js:
if ($('.LeftAnchorNav').length > 0) {
// prepare the variables
var lastID;
var anchorMenu = $(".LeftAnchorNavMenu");
var anchorMenuHeight = anchorMenu.outerHeight() + 100;
var anchorMenuItems = anchorMenu.find(".leftlink");
var anchorMenuItemsTarget = anchorMenuItems.map(function () {
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// bind everything to the scrolling
$(window).scroll(function () {
// get anchornav container scroll position and add buffer
var fromTop = $(this).scrollTop() + anchorMenuHeight + 300;
// get ID of the current scroll item
var currentItem = anchorMenuItemsTarget.map(function () {
if ($(this).offset().top < fromTop)
return this;
});
// get the ID of the current element
currentItem = currentItem[currentItem.length - 1];
var id = currentItem && currentItem.length ? currentItem[0].id : "";
if (lastID !== id) {
lastID = id;
// Set/remove active class
anchorMenuItems.removeClass("highlightleftnavactive")
anchorMenuItems.filter("[href='#" + id + "']").addClass("highlightleftnavactive");
}
});
}
It's quite fiddly to do the arithmetic for scrolling so this snippet uses IntersectionObserver instead. This has the added benefit of less processing overhead as it just gets informed when the elements come in or go out of view, not every time the user scrolls a bit.
It sets up the observer to observe when any of the relevant elements come into or go out of the viewport. When alerted to that it adds or removes the highlighting class to the related navbar link.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<style>
.LeftAnchorNav {
position: fixed;
z-index:1;
}
.tall {
width: 100vw;
height: 100vh;
background-image: linear-gradient(cyan, magenta, yellow, black);
}
.highlightleftnavactive {
background-color: yellow;
}
</style>
</head>
<section class="LeftAnchorNav" style="display: block;">
<nav id="LeftAnchorNav">
<div class="container" style="padding-left: 50px;">
<div class="col-md-4 LeftAnchorNavWrapper">
<ul class="LeftAnchorNavMenu">
<li class="leftanchorlink">
<a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<div class="tall"></div>
<div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">
An example block coming into and going out of view it belongs to the About us link in the navbar</div>
</div>
<div class="tall"></div>
<script>
let callback = (entries) => {
entries.forEach(entry => {
let id = entry.target.firstChild.id;
let leftLink = document.querySelector("a.leftlink[href='#"+ id + "']");
if (entry.isIntersecting) { leftLink.classList.add('highlightleftnavactive');}
else { leftLink.classList.remove('highlightleftnavactive');}
});
};
const observer = new IntersectionObserver(callback);
const anchorBlocks = document.querySelectorAll('.anchorblock');
anchorBlocks.forEach( (anchorBlock) => {
observer.observe(anchorBlock);
});
</script>

How to add/remove active class in Bootstrap4

I am trying to add/remove active class in the navbar using a snipped from similar questions, however nothing happens in my case. It´s very possible I am missing out something that could not figured out so far.
Here is my HTML
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active" id="dashboard">
<a class="nav-link" href="{% url 'dashboard' %}">Dashboard</a>
</li>
<li class="nav-item" id="painel_regras">
<a class="nav-link" href="{% url 'painel_regras' %}">Todos as Regras</a>
</li>
</ul>
</div>
Here is the Javascript part
<script type="text/javascript">
var navContainer = document.getElementById("navbarColor01");
var navitem = navContainer.getElementsByClassName("nav-item");
for (var i = 0; i < navitem.length; i++) {
navitem[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
There might be conflicts with other elements that have the active class, so when you access current[0], the item at index 0 is not the one in the navbar. I have replaced document.getElementsByClassName with document.querySelector to make the element more specific.
var navContainer = document.getElementById("navbarColor01");
var navitem = navContainer.getElementsByClassName("nav-item");
for (var i = 0; i < navitem.length; i++) {
navitem[i].addEventListener("click", function() {
var current = document.querySelector("#navbarColor01 .nav-item.active");
current.className = current.className.replace(" active", "");
this.className += " active";
});
}
.active {
font-weight: bold;
}
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active" id="dashboard">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item" id="painel_regras">
<a class="nav-link" href="#">Todos as Regras</a>
</li>
</ul>
</div>

how to rendering element in state React JS?

i have a trouble at the moment will rendering html tag inside state. When i add 'div dangerouslySetInnerHTML={{__html: this.state.actions}} it seems can't because i will render in li tag for menu
this.state = {
sideBar : '<li>[object Object]</li>'
}
// when i render
render(){
return(
{ this.state.sideBar}
) ==> // '<li>[object Object]</li>'
// what should happen is to create a new list
[object Object]
You can get it working without using dangerouslySetInnerHTML. Here's an example of using <ul> and an array of <li> tags that you can render directly in React.
class App extends Component {
constructor(props) {
super(props);
this.state = {
list: ["list 1", "list 2", "list 3"]
};
}
render() {
return (
<div>
<ul>
{this.state.list.map((obj, index) => <li key={index}>{obj}</li> )}
</ul>
</div>
);
}
}
like this code
import React, { Component } from 'react'
import { Route, NavLink, Link } from 'react-router-dom'
import ReactTimeout from 'react-timeout'
class Menu extends Component {
constructor() {
super();
this.state = {
menuBar: [],
sideBar: []
}
}
async componentDidMount() {
const res = await fetch('http://localhost:3001/api/menu/' + 18)
const something = await res.json()
this.setState({ menuBar: something })
console.log(this.state.menuBar)
let menuBar = this.state.menuBar
let html = "";
let link_menu = []
for (var i = 0; i < menuBar.length; i++) {
if (menuBar.menu_url == 'dashboard' || menuBar.menu_flag_link === 1) {
var span_selected = ''
} else {
var span_selected = 'arrow'
}
if (menuBar.menu_flag_link == 0) {
var title_menu = menuBar[i].menu_title
link_menu =
<NavLink
to='javascript:;'
exact>title_menu</NavLink>
} else {
var title_menu = menuBar[i].menu_title
link_menu = <NavLink
to="/"
exact>title_menu</NavLink>
}
html += '<li>' + link_menu
if (menuBar[i].child.length > 0) {
html += "<ul class='sub-menu'>"
for (var j = 0; j < menuBar[i].child.length; j++) {
if (menuBar[j].child.menu_flag_link == 0) {
var link_menu2 = <NavLink
to='javascript:;'
exact>menuBar.child.menu_title</NavLink>
} else {
var link_menu2 =
<NavLink
to="/"
exact>menuBar.child.menu_title</NavLink>
}
html += "<li>, ${link_menu2}"
if (menuBar[i].child[j].length > 0) {
html += "<ul class='sub-menu'>"
for (var kjh = 0; kjh < menuBar[i].child[j].length; kjh++) {
var link_menu3 =
<NavLink
to="/"
exact>menuBar.child.menu_title</NavLink>
html += '<li> ${link_menu3} </li>'
}
html += '</ul>'
}
html += '</li>'
}
html += '</ul>'
}
html += '</li>'
}
this.setState({ sideBar: html })
}
render() {
let menuBar = this.state.menuBar
let sideBar = this.state.sideBar
// console.log(sideBar)
return (
<div class="page-sidebar-wrapper">
<div class="page-sidebar navbar-collapse collapse">
<ul class="page-sidebar-menu page-sidebar-menu-light" data-keep-expanded="true" data-auto-scroll="true" data-slide-speed="200">
<li class="sidebar-toggler-wrapper">
<div class="sidebar-toggler">
</div>
</li>
<li class="sidebar-search-wrapper">
<form class="sidebar-search " action="extra_search.html" method="POST">
<a href="javascript:;" class="remove">
<i class="icon-close"></i>
</a>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..." />
<span class="input-group-btn">
<i class="icon-magnifier"></i>
</span>
</div>
</form>
</li>
<li class="start active open">
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Dashboard</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
<ul class="sub-menu">
<li>
<NavLink
to="/"
exact>Home</NavLink>
</li>
<li class="active">
<NavLink to={{
pathname: '/blog',
hash: '#submit',
search: '?quick-submit=true'
}}
>Blog</NavLink>
</li>
<li>
<NavLink to={{
pathname: '/Table'
}}>Table</NavLink>
</li>
<li>
<NavLink to={{
pathname: '/BCC'
}}>BCC</NavLink>
</li>
</ul>
</li>
{this.state.sideBar}
<li>
<a href="javascript:;">
<i class="icon-folder"></i>
<span class="title">Multi Level Menu</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li>
<a href="javascript:;">
<i class="icon-settings"></i> Item 1 <span class="arrow"></span>
</a>
<ul class="sub-menu">
<li>
<a href="javascript:;">
<i class="icon-user"></i>
Sample Link 1 <span class="arrow"></span>
</a>
<ul class="sub-menu">
<li>
<i class="icon-power"></i> Sample Link 1
</li>
<li>
<i class="icon-paper-plane"></i> Sample Link 1
</li>
<li>
<i class="icon-star"></i> Sample Link 1
</li>
</ul>
</li>
<li>
<i class="icon-camera"></i> Sample Link 1
</li>
<li>
<i class="icon-link"></i> Sample Link 2
</li>
<li>
<i class="icon-pointer"></i> Sample Link 3
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="icon-globe"></i> Item 2 <span class="arrow"></span>
</a>
<ul class="sub-menu">
<li>
<i class="icon-tag"></i> Sample Link 1
</li>
<li>
<i class="icon-pencil"></i> Sample Link 1
</li>
<li>
<i class="icon-graph"></i> Sample Link 1
</li>
</ul>
</li>
<li>
<a href="#">
<i class="icon-bar-chart"></i>
Item 3 </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
)
}
}
export default ReactTimeout(Menu)

Change active navbar link when using JQUERY Load

I have a navigation bar which is being loaded into each of my pages using a JQUERY '.load'
However, the active link will be different for each page. Is there a way i can override the active link from the page that has loaded the Navbar?
Any help would be much appreciated :)
Below is an example of the Navbar links
<nav class="navbar navbar-toggleable-sm">
<button type="button" data-toggle="collapse" data-target="#mai-navbar-collapse" aria-controls="#mai-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler hidden-md-up collapsed">
<div class="icon-bar"><span></span><span></span><span></span></div>
</button>
<div id="mai-navbar-collapse" class="navbar-collapse collapse mai-nav-tabs">
<ul class="nav navbar-nav">
<li class="nav-item parent open"><span class="icon s7-home"></span><span>Training</span>
<ul class="mai-nav-tabs-sub mai-sub-nav nav">
<li class="nav-item"><span class="icon s7-monitor"></span><span class="name">Written Guides</span></li>
<li class="nav-item"><span class="icon s7-video"></span><span class="name">Video Guides</span></li>
</ul>
</li>
<li class="nav-item parent"><span class="icon s7-users"></span><span>Support</span>
<ul class="mai-nav-tabs-sub mai-sub-nav nav">
<li class="nav-item"><span class="icon s7-id"></span><span class="name">Signing Up</span></li>
<li class="nav-item"><span class="icon s7-search"></span><span class="name">FAQS</span></li>
</ul>
</li>
</ul>
</div>
</nav>
JQUERY
<script>
$(function(){
$("#nav-placeholder").load("../../navbarL1.aspx");
$('.dropdown-toggle').dropdown()
});
</script>
Try to run this code. I hope it will work.
function getURL() {
// get the whole URL
var currentURL = window.location.href;
// get the file name after = sign
var activeTemplate = currentURL.substr(currentURL.indexOf("=") + 1);
// add active class to url
$('a[href="/teams/Training/sitepages/training/'+ activeTemplate +'"]').addClass('active');
})
You can use .toggleClass() with a toggle state value as the second param. At that point it's a matter of figuring out how to compare the href with the current URL. You can use location.pathname, but you may want to get the href using getAttribute so it doesn't include the hostname. Otherwise you could also use this.href === location.href. It is important, however, to include this code in a callback to .load() so you don't encounter a race condition.
$(function(){
$("#nav-placeholder").load("../../navbarL1.aspx", function(){
$('.mai-sub-nav li a').each(function(){
$(this).toggleClass('active', this.getAttribute('href') === location.pathname);
})
});
$('.dropdown-toggle').dropdown()
});
You have to follow this kind of technique to achieve that
Here is my nav bar
<ul class="nav navbar-nav">
<li class="active" data-pos="1">
Home
</li>
<li data-pos="2">
About Egypt
</li>
<li data-pos="3">
Accomodation
</li>
<li data-pos="4">
Nile Cruises
`enter code here`
</li>
<li data-pos="5">
Tour Packages
</li>
<li class="dropdown" data-pos="6">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true">FAQ</span>
</a>
<ul class="dropdown-menu">
<li>Thing to do</li>
<li><a href="{{ route('site.page',['travel-tip']) }}">How to travel</a</li>
<li>Travel Help</li>
</ul>
</li>
</ul>
Here is my script logic in which i get full url and spilt on the base of '/' seprator
to get an array and check second last and last segment
var url = window.location.href;
var urlArray = url.split("/");
var lastUrlString = urlArray[urlArray.length-1];
var pageName = urlArray[urlArray.length-2];
After getting last and second last segment i loop through navbar li elements and add or remove class on the basis of page names
var navLinks = $('ul.nav li');
navLinks.each(function(index,element){
var position = $(element).data('pos');
if(lastUrlString == 'home')
{
if($(element).data("pos") == 1)
{
if(!$(element).hasClass("active") )
{
$(element).addClass('active');
}
}
else
{
$(element).removeClass("active");
}
}
else if(lastUrlString == 'about')
{
if($(element).data("pos") == 2)
{
if(!$(element).hasClass("active") )
{
$(element).addClass('active');
}
}
else
{
$(element).removeClass("active");
}
}
else if(lastUrlString == 'page' && pageName == 'accomodation')
{
if($(element).data("pos") == 3)
{
if(!$(element).hasClass("active") )
{
$(element).addClass('active');
}
}
else
{
$(element).removeClass("active");
}
}
else if(lastUrlString == 'page' && pageName == 'nile_curises')
{
if($(element).data("pos") == 4)
{
if(!$(element).hasClass("active") )
{
$(element).addClass('active');
}
}
else
{
$(element).removeClass("active");
}
}
else if(lastUrlString == 'page' && pageName == 'tour_packages')
{
if($(element).data("pos") == 5)
{
if(!$(element).hasClass("active") )
{
$(element).addClass('active');
}
}
else
{
$(element).removeClass("active");
}
}
else
{
$(element).removeClass("active");
}
});

Load JavaScript if Breadrumb exists

So i made a javascript and would like to make it load only if a certain breadcrumb exists in a page, lets say this breadcrumb is called "support" and my breadcrumb code is:
<ol class="breadcrumb top ipsList_inline left" id="breadcrumb">
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb" class="first">
<a href="https://www.website.com" itemprop="url">
<span itemprop="title">website</span>
</a>
</li>
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">website</span>
</li>
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Section</span>
</li>
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Support</span>
</li>
</ol>
You can do something like this:
window.onload = function () {
var breadcrumb = document.getElementById("breadcrumb");
var titles = breadcrumb.getElementsByTagName("span");
var support = 0;
for(var i = 0; i < titles.length; ++i){
support += titles[i].innerHTML == "Support";
}
if(support) initialize();
}
function initialize() {
/* Do your stuff. */
}

Categories