Here is my code I pulled out from the internet which works fine in Online Snippets but when I copy and run it on my local computer , the tab stays same. Please help me
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
I would be very greatful, If anyone could help me what I am doing wrong. For reference, here is the original link to above bootstrap theme.
https://bootsnipp.com/snippets/featured/people-card-with-tabs
The reason is that you didn't include the bootstrap.min.js file, you only included the jQuery and the bootstrap.min.css file.
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
My 2 cents:
You should try and be more careful.
You should try and debug the problem, starting always from the most obvious reasons first.
You just need to load your js at the end of the body.
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab">
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
</script>
Related
In my example below, I've managed to disable the next button until the form field (Case Title) has content in it. I don't quite understand how to disable the next tab until that form field is complete.
How can I disable the other tabs until the form field in the first tab is completed?
$(".btnNext").click(function () {
$(".nav-tabs > .active").next("li").find("a").trigger("click");
});
$(".btnPrevious").click(function () {
$(".nav-tabs > .active").prev("li").find("a").trigger("click");
});
let caseTitle = document.getElementById("caseTitle");
let caseTitleNext = document.querySelector("#tab1 .btnNext");
caseTitle.addEventListener("keyup", () => {
caseTitleNext.removeAttribute("disabled");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ibox-content">
<ul class="nav nav-tabs">
<li class="active">
Case Creation <i class="fa-solid fa-folder"></i>
</li>
<li>
Attributes <i class="fa-duotone fa-circle-nodes"></i>
</li>
<li>
Individual Involvement <i class="fa-solid fa-person"></i>
</li>
<li>
Agency Involvement <i class="fa-solid fa-building"></i>
</li>
<li>
Review Information <i class="fa-solid fa-memo"></i>
</li>
</ul>
<form id="createCase" name="createCase">
<div class="panel blank-panel">
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="caseTitle" class="is-required">Case Title</label>
<input type="text" class="form-control" id="caseTitle">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" placeholder="Enter case number" class="form-control">
</div>
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-default btnPrevious">Cancel</button>
<button type="button" class="btn btn-primary btnNext" disabled="disabled">Next</button>
</div>
</div>
<div class="tab-pane" id="tab2">
<h2>Tab 2 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-warning btnNext">Skip</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab3">
<h2>Tab 3 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab4">
<h2>Tab 4 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab5">
<h2>Tab 5 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
Base on the Bootstrap docs, you can disable tabs by setting <li class="disabled"> and removing the tab from data-toggle. I wrote a setTabDisabled(tabElement) method for quick toggling
Here is a working example
$(".btnNext").click(function () {
$(".nav-tabs > .active").next("li").find("a").trigger("click");
});
$(".btnPrevious").click(function () {
$(".nav-tabs > .active").prev("li").find("a").trigger("click");
});
let caseTitle = document.getElementById("caseTitle");
let caseTitleNext = document.querySelector("#tab1 .btnNext");
const setTabDisabled = (tabEl, isDisabled = true) => {
tabEl.setAttribute("class", isDisabled ? "disabled" : "");
const tabLink = tabEl.querySelector('a');
tabLink.setAttribute("data-toggle", isDisabled ? "" : "tab");
};
const setNonActiveTabsDisabled = (isDisabled = true) => {
document.querySelectorAll('.nav.nav-tabs li:not(.active)').forEach(element => {
setTabDisabled(element, isDisabled);
});
};
caseTitle.addEventListener("keyup", () => {
if(caseTitle.value.trim().length){
caseTitleNext.removeAttribute("disabled");
setNonActiveTabsDisabled(false);
}
else{
caseTitleNext.setAttribute("disabled","");
setNonActiveTabsDisabled(true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ibox-content">
<ul class="nav nav-tabs">
<li class="active">
Case Creation <i class="fa-solid fa-folder"></i>
</li>
<li class="disabled">
Attributes <i class="fa-duotone fa-circle-nodes"></i>
</li>
<li class="disabled">
Individual Involvement <i class="fa-solid fa-person"></i>
</li>
<li class="disabled">
Agency Involvement <i class="fa-solid fa-building"></i>
</li>
<li class="disabled">
Review Information <i class="fa-solid fa-memo"></i>
</li>
</ul>
<form id="createCase" name="createCase">
<div class="panel blank-panel">
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="caseTitle" class="is-required">Case Title</label>
<input type="text" class="form-control" id="caseTitle">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" placeholder="Enter case number" class="form-control">
</div>
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-default btnPrevious">Cancel</button>
<button type="button" class="btn btn-primary btnNext" disabled="disabled">Next</button>
</div>
</div>
<div class="tab-pane" id="tab2">
<h2>Tab 2 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-warning btnNext">Skip</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab3">
<h2>Tab 3 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab4">
<h2>Tab 4 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab5">
<h2>Tab 5 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
In this image
,
you can see a side menu. There is an offline, online and construction panel. Also there are a few locations, each location is a block(the two buttons are attached to its div). These are hardcoded, I'm trying to automate them instead. based on some values in my code "OFF", "ON" or "construction" the blocks should be ordered to their corresponding panel. What's the best way to do this? I want to see the blocks reposition without having to refresh.
This is a basic Jsfiddle of the menu above:
https://jsfiddle.net/3zq4Lpxb/
Entire HTML for the site menu: https://pastebin.com/e8VKmLZH
FYI: I'm creating a webapplication, using MVC5, ASP.net.
Basic snippet of HTML:
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Isfanbul</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Monolith</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">New Haven</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">JejuIsland</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
This works as specified if the item-group gets one of the 3 classes matching the ID of the panel
const reorderDivs = () => {
[...document.querySelectorAll(".panel")].forEach(panel => {
const id = panel.id;
[...document.querySelectorAll("." + id)].forEach(item => {
const parentContainer = panel.querySelector(".panel-body");
// console.log(item.querySelector(".item-title").textContent,"moved to",id);
parentContainer.appendChild(item);
})
})
};
// example toggle code
const classes = ['offline', 'construction', 'online'];
window.addEventListener("load", () => {
reorderDivs(); // initialise
document.getElementById("rightMenu").addEventListener("click", function(e) { // example of a toggle
const tgt = e.target;
if (tgt.classList.contains("toggle")) {
const item = tgt.closest(".item-group");
const classList = item.classList;
for (let cl of classList) {
const idx = classes.indexOf(cl);
if (idx !== -1) { // found
classList.remove(cl);
newClass = classes[(idx + 1) % classes.length];
}
}
classList.add(newClass)
reorderDivs();
}
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger" id="offline">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">Isfanbul <button class="toggle" type="button">Switch state</button></div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group construction">
<div class="col-lg-6 item-title">Monolith CONSTRUCTION</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning" id="construction">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group online">
<div class="col-lg-6 item-title">New Haven ONLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success" id="online">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">JejuIsland OFFLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
I have a accordion placed inside a div and I have added a search box to the div which is intended to function as a search filter. Inside the div some accordion elements are visible and some are hidden. I need the filter to work only on visible elements.
In the current code I have used it's searching for all elements inside the div and when the search box is cleared the page is getting hanged and not responsive unless I refresh the page.
Any solution pointing to the right direction would be highly appreciated.
$(document).ready(function() {
$("#searchTC").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#testcases div").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">Test<i class="fa fa-thumbs-o-down"></i> <small style="color:#117DEF">CASES</small></h4>
<div class="panel-actions">
<!--Search TestCases-->
<div id="filterTC" class="form-group">
<div class="input-search">
<i class="input-search-icon ti-search" aria-hidden="true" style="color: #1179EF"></i>
<input type="search" class="form-control" placeholder="Search..." id="searchTC">
</div>
</div>
<!--Select All/Deselect All Toggle-->
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)" style="transition: transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, box-shadow 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, border-color 0s linear 0.17s, -webkit-transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s;">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body container-fluid">
<div id="testcases" class="accordion js-accordion" style="max-height: 240px;overflow: auto;">
<div class="accordion__item js-accordion-item" id="0001" style="display: block" name="com.onlineshopping.TS_Ebay">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-0001" value="tc_SearchProducts" aria-hidden="true" style="display: none;"><label for="labelauty-0001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_SearchProducts</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-0001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-00010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Ebay</button>
<div class="modal fade modal-fill-in" id="dtFillIn-00010" aria-hidden="false" aria-labelledby="dtFillIn-00010" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_Ebay</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_Ebay"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item active"></div>
<div class="accordion__item js-accordion-item" id="00011" style="display: block" name="com.onlineshopping.TS_Ebay">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-00011" value="tc_LoginToApplication" aria-hidden="true" style="display: none;">
<label for="labelauty-00011"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_LoginToApplication</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-00011"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-000110" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_EbayLogin</button>
<div class="modal fade modal-fill-in" id="dtFillIn-000110" aria-hidden="false" aria-labelledby="dtFillIn-000110" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_EbayLogin</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_EbayLogin"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
<div class="accordion__item js-accordion-item" id="1001" style="display: none" name="com.onlineshopping.TS_Amazon">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-1001" value="tc_ExploreAmazon" aria-hidden="true" style="display: none;"><label for="labelauty-1001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_ExploreAmazon</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-1001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-10010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Amazon</button>
<div class="modal fade modal-fill-in" id="dtFillIn-10010" aria-hidden="false" aria-labelledby="dtFillIn-10010" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_Amazon</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_Amazon"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
</div>
<br>
<button type="button" class="btn btn-info float-right waves-effect waves-classic" onclick="loadplan()">Add to Plan</button>
</div>
</div>
</div>
Use jquery hidden attribute to check if element is hidden
if ($('#testElement').is(':visible')) {
// Code
}
I am trying to pick two different start points for the slide content. The setSlideContent indicator is set to 17 for the main gallery. But for the modal that will popup if there is alternate variations of that image will start at 0. Is there a way to start the slide content at 17 for main gallery carousel, but if it is a modal carousel, have it start at 0? I'm guessing I need an if/else here.
Would (using the original script) changing the setSlideContent to check if $carouselSelector contains .modal return setSlideSelector(0) else if $carouselSelector does not contain .modal return setSlideSelector(17) or whatever number I need work? Still extremely new to this.
NOTE in the example below the setSlideContent is set to 0 but but it is never set to 0 in practice (unless the carousel is in a modal) to take into account new slides being added. The number will always be the last slide added in my case it is 17.
$(function() {
$('.carousel-container').each(function() {
var $carouselContainer = $(this);
var $carousel = $carouselContainer.find('.carousel');
var $carouselText = $carouselContainer.find('.carousel-text');
var $carouselSelector = $carouselContainer.find('.carousel-selector');
$carousel.carousel({
interval: false
});
function setSlideContent(id) {
var targetContent = $carouselContainer.find('.slide-content[data-slide="' +
id +
'"]').html();
$carouselText.html(targetContent);
}
setSlideContent(0);
$carouselSelector.on('click', function() {
var targetSlide = $(this).data('slide');
$carousel.carousel(targetSlide);
});
$carousel.on('slid.bs.carousel', function() {
var targetSlide = $carousel.find('.active').index();
setSlideContent(targetSlide);
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container carousel-container">
<div class="row">
<div class="col">
<div class="carousel slide" id="carousel-0">
<!-- change this id and match with that in the JS -->
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="carousel-item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<!-- Carousel nav -->
<a class="carousel-control-prev" href="#carousel-0" role="button" data-slide="prev">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel-0" role="button" data-slide="next">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col carousel-text"></div>
<div style="display: none;">
<!-- only needs the inline CSS -->
<div class="slide-content" data-slide="0">
<h5>Slide 1</h5>
<button class="btn btn-outline-dark btn-sm" data-toggle="modal" data-target="#modal1" type="button" style="margin-left: -1px;">press me</button>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Download</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice1/avarice-nodof1280.jpg" download>1280x1024</a>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<!-- change this id and match with that in the JS -->
<h5>Slide 2</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice0/avarice01280.jpg" download>1280x1024</a>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row">
<div class="col">
<a class="carousel-selector" data-slide="0"><img src="http://placehold.it/170x100&text=one" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img src="http://placehold.it/170x100&text=two" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
</div>
</div>
<div class="container carousel-container">
<div class="row">
<div class="col">
<div class="carousel slide" id="carousel-1">
<!-- change this id and match with that in the JS -->
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="carousel-item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<!-- Carousel nav -->
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col carousel-text"></div>
<!-- change this id and match with that in JS -->
<div style="display: none;">
<!-- only needs the inline CSS -->
<div class="slide-content" data-slide="0">
<!-- change this id and match with that in the JS -->
<h5>Dreams of Avarice1</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Download</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice1/avarice-nodof1280.jpg" download>1280x1024</a>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<!-- change this id and match with that in the JS -->
<h5>Avarice Zero1</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice0/avarice01280.jpg" download>1280x1024</a>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row">
<div class="col">
<a class="carousel-selector" data-slide="0"><img src="http://placehold.it/170x100&text=one" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img src="http://placehold.it/170x100&text=two" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
</div>
</div>
<!-- modal -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>...</h3>
</div>
<div class="modal-body">
<div class="container-fluid carousel-container">
<div class="container">
<div class="row mx-auto">
<div class="col">
<div class="carousel slide carousel-fade" id="carousel-...">
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img data-src="./Downloads/hoohum" src="./loader-carousel.gif" class="lazy img-thumbnail" width="450" height="250"></div>
<div class="carousel-item" data-slide-number="1">
<img data-src="./Downloads/hoohum" src="./loader-carousel.gif" class="lazy img-thumbnail" width="450" height="250"></div>
</div>
</div>
</div>
</div>
<hr>
<div class="row mx-auto">
<div class="col carousel-text"></div>
<div style="display: none;">
<div class="slide-content" data-slide="0">
<h5>0ne</h5>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Desktop</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>1280x1024</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Dual</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>2560x1024 (Dual)</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Triple</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>3840x1024 (Triple)</a>
</div>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<h5>two</h5>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Desktop</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>1280x1024</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Dual</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>2560x1024 (Dual)</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Triple</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>3840x1024 (Triple)</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row mx-auto">
<div class="col">
<a class="carousel-selector" data-slide="0"><img data-src="./Downloads/hoohum" src="./loader-thumb.gif" class="lazy img-thumbnail" width="75" height="42"></a>
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img data-src="./Downloads/hoohum" src="./loader-thumb.gif" class="lazy img-thumbnail" width="75" height="42"></a>
</div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If I understand correctly, you want :
to initialize the modal carousel at its first slide, with corresponding caption.
to initialize all other carousels at their last slide, with corresponding caption.
At least, that would makes sense.
If I'm right, then the javascript will be something like this :
$(function() {
$('.carousel-container').each(function() {
var $carouselContainer = $(this);
var $carousel = $carouselContainer.find('.carousel').on('slid.bs.carousel', function() {
var targetSlide = $carousel.find('.active').index();
var targetContent = $carouselContainer.find('.slide-content[data-slide="' + targetSlide + '"]').html();
$carouselContainer.find('.carousel-text').html(targetContent);
}).carousel({
interval: false
});
$carouselContainer.find('.carousel-selector').on('click', function() {
var targetSlide = $(this).data('slide');
$carousel.carousel(targetSlide);
});
// The carousel is already at first slide (slide 0).
var n = $carouselContainer.find(".slide-content").length; // number of slides in this carousel
if (n < 2 || $carouselContainer.closest(".modal").length > 0) { // if there are less than 2 slides, or the carousel is in a .modal container
// Trigger the 'slid.bs.carousel' event so its handler can look after the .carousel-text ...
$carousel.trigger('slid.bs.carousel');
} else { // ... else, there are 2 or more slides and this is a non-modal carousel:
// send to last slide
$carousel.carousel(n - 1);
$carousel.trigger('slid.bs.carousel'); // shouldn't be necessary but has been found to be a workaround for `slid.bs.carousel` not being triggered automatically under some (undiagnosed) circumstances.
}
});
});
Demo
I have a toolbar with 3 buttons. and one of them has a dropdown.
the html is the following:
<div id="primary-section" class="wrapper wrapper-content">
<div class="row" id="create-container">
<div class="col-lg-12">
<div class="ibox float-e-margins animated fadeInRight">
<div class="ibox-title" style="height: 60px;">
<div class="btn-group">
<button onclick="javascript:vm.createContainer()" class="btn btn-primary" id="newcontainer" style="margin-right:16px;"><i class="fa fa-plus"></i> New Container</button>
</div>
<div class="btn-group">
<button type="button" id="btn-connect" class="btn btn-success" disabled="disabled">Connect</button>
</div>
<div class="btn-group" id="actions" style="margin-right:16px;">
<button id="btn-actions" data-toggle="dropdown" class="btn btn-info dropdown-toggle" aria-expanded="false" disabled="disabled">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a>Start</a></li>
<li><a>Stop</a></li>
<li><a>Pause</a></li>
<li><a>Resume</a></li>
<li><a>Delete</a></li>
<li class="divider"></li>
<li><a id="inspect">Inspect</a></li>
<li><a id="console">Console</a></li>
<li><a>Clone</a></li>
</ul>
</div>
</div>
<div class="ibox-content">
<div id="loading-grid">
<img src="/public/img/squares.gif" height="130" width="130" title="Loading" alt="Loading"/>
<h3>Loading containers...</h3>
</div>
<div id="grid" class="hidden"></div>
</div>
</div>
</div>
</div>
</div>
Now for some reason the html that results out of this is the following.
The create button ends up inside of the connect button. and i can't for the life of me figure out what the hell is going on. it looks like i closed all tags and quotes.
parsed HTML:
<div id="primary-section" class="wrapper wrapper-content">
<div class="row" id="create-container">
<div class="col-lg-12">
<div class="ibox float-e-margins animated fadeInRight">
<div class="ibox-title" style="height: 60px;">
<div class="btn-group">
</div>
<div class="btn-group">
<button type="button" id="btn-connect" class="btn btn-success" disabled="disabled"><button onclick="javascript:vm.createContainer()" class="btn btn-primary" id="newcontainer" style="margin-right:16px;"><i class="fa fa-plus"></i> New Container</button>Connect</button>
</div>
<div class="btn-group" id="actions" style="margin-right:16px;">
<button id="btn-actions" data-toggle="dropdown" class="btn btn-info dropdown-toggle" aria-expanded="false" disabled="disabled">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a>Start</a></li>
<li><a>Stop</a></li>
<li><a>Pause</a></li>
<li><a>Resume</a></li>
<li><a>Delete</a></li>
<li class="divider"></li>
<li><a id="inspect">Inspect</a></li>
<li><a id="console">Console</a></li>
<li><a>Clone</a></li>
</ul>
</div>
</div>
<div class="ibox-content">
<div id="loading-grid">
<img src="/public/img/squares.gif" height="130" width="130" title="Loading" alt="Loading"/>
<h3>Loading containers...</h3>
</div>
<div id="grid" class="hidden"></div>
</div>
</div>
</div>
</div>
</div>
Ok so kids, next time you post to SO remember, first check the javascript.
I was prepending the button on the element id of the connect button.
Thanks folks!