I'm using a combination of Jquery and Bootstrap. I'm trying to target only visible panels. If I get rid of the first line, of code, the function work, but targets all panels in my HTML, which I don't want. If I keep the first line of code, the function doesn't carry through at all.
$(".panel:visible").each(function(){
$("#1star").on("click", function() {
$(".5star").show();
$(".4star").show();
$(".3star").show();
$(".2star").show();
$(".1star").show();
});
And yes, I'm sure there's an easier way to do this, but I'm confined to html, css, and jQuery.
:::edit:: html requested.
div class="panel panel-default pa 5star">
<div class="panel-body">
Pa hotel 5 star
</div>
</div>
<div class="panel panel-default pa 4star">
<div class="panel-body">
pa hotel 4 star
</div>
</div>
<div class="panel panel-default pa 3star">
<div class="panel-body">
pa hotel 3 star
</div>
</div>
<div class="panel panel-default pa 2star">
<div class="panel-body">
pa hotel 2 star
</div>
</div>
<div class="panel panel-default pa 1star">
<div class="panel-body">
pa hotel 1 star
</div>
</div>
::edit 2:::
the reason all the panels are hidden is because 1.They are by default and two this other piece of Jq
if (acceptNJ[stateSearch.toLowerCase()]) {
$(".nj").fadeIn(2000);
$(".pa").hide();
$(".ny").hide();
We're missing some of your HTML to get the full picture. It appears though you have a filter capability and you want to display the panels at or above the minimum star value for the selected state.
Here is a rough example: https://jsfiddle.net/rfh62c45/
// hide all panels
$('.panel').hide();
var visibleState = $('#state :selected').text();
var iStar = $('#star :selected').text();
while (iStar <= 5) {
$('.' + visibleState + '.' + iStar + 'star').fadeIn(2000);
iStar++;
}
You can get visibility state with
$(".4star").is(":visible")
with jquery. This returns true or false.
true = visible ,
false = hidden
Hope this helps.
Related
I would like to render a dygraphs graph in a collapsed bootstrap panel. Once the user shows the panel the graph should be visible.
My problem is that, when the initially collapsed panel appears, the dygraphs graph inside it is not shown correctly. See this jsfiddle.
My html body looks like this (using bootstrap 3):
<div class="container">
<div class="row">
<div class="col-sm-3">
<label><input type="checkbox" onclick="checkboxChanged(this)"/> Show panel 2</label>
</div>
<div class="col-sm-9">
<div class="panel panel-default">
<div id="panel1" class="panel-body">
<div id="graphdiv1"></div>
</div>
<div id="panel2" class="panel-body collapse">
<div id="graphdiv2"></div>
</div>
</div>
</div>
</div>
</div>
My javascript looks like this:
function checkboxChanged(checkbox){
if(checkbox.checked){
document.getElementById('panel1').classList.add("collapse");
document.getElementById('panel2').classList.remove("collapse");
} else {
document.getElementById('panel1').classList.remove("collapse");
document.getElementById('panel2').classList.add("collapse");
}
}
g1 = new Dygraph(
document.getElementById("graphdiv1"),
"Date,Temperature\n" +
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n",
{ title: 'Graph on panel 1' }
);
g2 = new Dygraph(
document.getElementById("graphdiv2"),
"Date,Temperature\n" +
"2008-05-07,20\n" +
"2008-05-08,37\n" +
"2008-05-09,17\n",
{ title: 'Graph on panel 2' }
);
What I get:
What I expect:
Note: A curious thing is that, when I resize the output area of the jsfiddle, the graph gets rendered correctly. When I then uncheck the 'show panel 2' checkbox, the first panel graph is rendered incorrectly.
I have tried updating the dygraphs in the end of the checkbox method like this:
g1.updateOptions({});
g2.updateOptions({});
but this doesn't seem to have any effect.
Any help would be greatly appreciated. Thanks!
I found a hack that seems to work. Any suggestions for a cleaner solution would be much appreciated!
My solution is to place a hidden div, containing graphdiv2, at the very end of the document using visibility:hidden; (rather than display:none;) and then, when the checkbox is checked, to have the two graph divs switch places.
So the html body now looks like this:
<div class="container">
<div class="row">
<div class="col-sm-3">
<label><input type="checkbox" onclick="checkboxChanged(this)"/> Show panel 2</label>
</div>
<div class="col-sm-9">
<div class="panel panel-default">
<div id="my_panel" class="panel-body">
<div id="graphdiv1"></div>
</div>
</div>
</div>
</div>
</div>
<div id="hidden_zone" style="visibility:hidden;">
<div id="graphdiv2"></div>
</div>
And the checkbox onclick function now looks like this:
function checkboxChanged(checkbox){
graph1_div = document.getElementById("graphdiv1");
graph2_div = document.getElementById("graphdiv2");
show_parent = document.getElementById('my_panel');
hidden_zone = document.getElementById('hidden_zone');
if(checkbox.checked){
hidden_zone.appendChild(graph1_div);
show_parent.appendChild(graph2_div);
} else {
hidden_zone.appendChild(graph2_div);
show_parent.appendChild(graph1_div);
}
}
Here's the jsfiddel to this solution.
Any suggestions for a cleaner solution?
I want to hover over on the buttons and want to show a hidden div/panel underneath it by using java script. My Javascript is externally included and works fine, i am trying to use the DOM model to change the style and innerHTML of the div but isnt working. This is my HTML, Javascript and CSS code below. I am even passing parameters to verify which button was hovered but failing.
HTML
<div class="container">
<div class="row anchorbutton">
<div class="col-sm-4 col-xs-12 col-md-4 col-lg-4">
<a href=#><div class=" mainbuttons b1 text-center"
onmouseover="updatepanel(1);" onmouseout="hidepanel()">Workout
Programs</div></a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
<a href=#><div class=" mainbuttons b2 text-center"
onmouseover="updatepanel(2);" onmouseout="hidepanel()"> Diet
Plans</div></a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12 ">
<a href=#><div class=" mainbuttons b3 text-center"
onmouseover="updatepanel(3);" onmouseout="hidepanel()"> Food
Supplements</div></a>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default hidden">
<div class="hoverable panel-body hidden"> </div>
</div>
</div>
JS
function hidepanel(){
var panel=document.getElementsByClassName("hidden");
panel.style.display=none;
}
function updatepanel(x){
var desc1="Get fully customized workout programs from our dedicated fitness
experts.";
var desc2="Nutrional advice and diet plans just for your needs!";
var desc3="Our very own state-of-the-art line of supplementations.Click to
Order";
if(x==1){}
document.getElementsByClassName('hidden').style.display='block';
document.getElementsByClassName('hidden').innerHTML='desc1';
}
if(x==2){
document.getElementsByClassName('hidden').style.display='block';
document.getElementsByClassName('hidden').innerHTML='desc2';
}
if(x==3){
document.getElementsByClassName('hidden').style.display='block';
document.getElementsByClassName('hidden').innerHTML='desc3';
}
}
CSS
.hidden{
display: none;
}
I have also tried to change the functionality by changing the function to work on onClick instead of onmousehover but it wont work.Please help me out i have been banging my head.
document.getElementsByClassName() returns an HTML Collection, which is a collection of elements, so saying things like collection.style.display or collection.innerHTML doesn't make a whole lot of sense. I think what you are wanting to do is grab the individual element and update the properties, like so:
document.getElementsByClassName("hidden")[0].
If you need to iterate over the collection, you can access a length property and do a traditional for loop, or you can do an Array.from() using ES6.
function hidepanel() {
var panel = document.querySelector(".hidden");
panel.style.display = "none";
}
function updatepanel(x) {
var desc1 = "Get fully customized workout programs from our dedicated fitness experts.";
var desc2 = "Nutrional advice and diet plans just for your needs!";
var desc3 = "Our very own state-of-the-art line of supplementations.Click to Order";
// make variable so we don't have to search the DOM 2 times for every panel
var hiddenElem = document.querySelector(".hidden");
var panelBody = document.querySelector(".panel-body");
if (x == 1) {
hiddenElem.style.display = 'block';
panelBody.innerHTML = 'desc1';
}
// don't evaluate unnecessarily
else if (x == 2) {
hiddenElem.style.display = 'block';
panelBody.innerHTML = 'desc2';
}
// don't evaluate unnecessarily
else if (x == 3) {
hiddenElem.style.display = 'block';
panelBody.innerHTML = 'desc3';
}
}
.hidden{
display: none;
}
<div class="container">
<div class="row anchorbutton">
<div class="col-sm-4 col-xs-12 col-md-4 col-lg-4">
<a href=#>
<div class=" mainbuttons b1 text-center" onmouseover="updatepanel(1);" onmouseout="hidepanel()">Workout Programs
</div>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
<a href=#>
<div class=" mainbuttons b2 text-center" onmouseover="updatepanel(2);" onmouseout="hidepanel()"> Diet Plans
</div>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12 ">
<a href=#>
<div class=" mainbuttons b3 text-center" onmouseover="updatepanel(3);" onmouseout="hidepanel()"> Food Supplements
</div>
</a>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default hidden">
<div class="hoverable panel-body"> </div>
</div>
</div>
Alternatively, you can use the built in document.querySelectorAll(), which returns a NodeList, which does have a built in iterator function (forEach), which makes iterating over the list cleaner/easier.
That would look like so:
document.querySelectorAll(".hidden").forEach(function (elem) {
elem.syle.display = "block";
// etc...
});
First document.getElementsByClassName returns an HTML Collection so you must specify the index of the element you want to use, like: document.getElementsByClassName('hidden')[0].
Second panel.style.display must be a defined as a string, so change none to "none" in your hide function
Working codepen: https://codepen.io/sunrisem/pen/QagPLG
Don't use inline javascript in your html, instead loop the elements and attach an event listener to them. You can set data-attributes on the button, so you could either create an array like shown below holding the texts, or you could put the text as a data-attribute. You'll also need a listener that reacts on the mouse leaving the button, to hide the div again. You should be easily able to change the code to fit your classes...
let div = document.getElementById('d');
let descriptions = [
"Get fully customized workout programs from our dedicated fitness experts.",
"Nutrional advice and diet plans just for your needs!",
"Our very own state-of-the-art line of supplementations.Click to Order"
];
document.querySelectorAll('.btn').forEach(e => {
e.addEventListener('mouseover', ({
target
}) => {
div.innerHTML = descriptions[target.getAttribute('data-nr')];
div.classList.remove('hidden');
}, false);
e.addEventListener('mouseout', () => {
d.classList.add('hidden');
}, false)
});
.hidden {
display: none;
}
div {
margin-top: 10px;
color: red;
}
<button class="btn" data-nr="0">
1
</button>
<button class="btn" data-nr="1">
2
</button>
<button class="btn" data-nr="2">
3
</button>
<div id="d" class="hidden">
</div>
I'm trying to use checkboxes with categories at the top of my page as filters to display the lower content of the page (which gives specific options as buttons under each category). The lowers divs should only be displayed if the checkbox is checked; I set the display as none for the div in the CSS. However, my code doesn't work..
I've tried using different syntax for the JS that I found online, and declaring the js in different places in my HTML, but nothing so far has worked.
HTML
<input type="checkbox" id="supportcheck"> Support
<div class="row" id= "support">
<h5>Support</h5>
<div class="large-6 medium-6 columns">
<div class="callout panel" >
<div role="button" tabindex="0" class="small radius support button">Managed</div>
</div>
</div>
<div class="large-6 medium-6 columns">
<div class="callout panel">
<div role="button" tabindex="0" class="small radius support button">Self-Managed</div>
</div>
</div>
</div>
JavaScript
$('.supportcheck').change(function () {
if ($(this).attr("checked"))
{
$('.support').fadeIn();
return;
}
$('.support').fadeOut();
});
supportcheck is an id not a class. Use
$('#supportcheck').change(function () {
to add the event handler to the input.
try this instead:
$('#supportcheck').change(function () {
if ($(this).is(':checked'))
{
$('#support').fadeIn();
return;
}
$('#support').fadeOut();
});
Everytime I clicked on the "collapse" button, it worked but after its refreshed, it doesn't save its state. For example when I collapse a panel and refresh the page, then the panel is left open.
P.S the {$forum['fid']} represents a forum number, which is automatically generated through templates
HTML
<div class="panel panel-default" id="forum">
<div class="panel-heading"><h3 class="panel-title">{$forum['name']}</h3><span class="pull-right">Toggle</span></div>
<div id="forumlist{$forum['fid']}" class="panel-collapse collapse in">
<div class="panel-body panel-default">
<div class="panel panel-default" style="margin-bottom: 0px;border:1px solid #2b2b2b;">
<table class="table table-hover">
<tbody>
{$sub_forums}
</tbody>
</table>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
//when a group is shown, save it as the active accordion group
$("#forum").on('shown.bs.collapse', function () {
var active = $("#forum .in").attr('id');
$.cookie('activeForumGroup', active);
// alert(active);
});
$("#forum").on('hidden.bs.collapse', function () {
$.removeCookie('activeForumGroup');
});
var last = $.cookie('activeForumGroup');
if (last != null) {
//remove default collapse settings
$("#forum .panel-collapse").removeClass('in');
//show the account_last visible group
$("#" + last).addClass("in");
}
});
This may be missing
<div class="panel-group" id="forum">
<div class="panel panel-default">
changing the ID of each other
Hello i have the following issue while using a bootstrap toggle.
Code as follow
(I copied the wrong section of HTML code so i edited the question this is the actual code wich is being applied to toggle)
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title active">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Electronics <span class="more">+</span></a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Item 1 (2)</li>
<li>Item 2 (1)</li>
<li>Item 3 (3)</li>
</ul>
</div>
</div>
</div><!-- panel 1-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Cartridges <span class="more">+</span></a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Item 1 (2)</li>
<li>Item 2 (1)</li>
<li>Item 3 (3)</li>
</ul>
</div>
</div>
</div><!-- panel 2-->
</div><!-- panel group -->
And this is what i'm using to replace the text
$('.more').click(function(){
$(this).text(function(i,old){
return old=='+' ? '-' : '+';
});
});
So i wanted to change the text of div class=more to minus(-) when the element it's clicked
on this thread i found the answer Twitter bootstrap collapse: change display of toggle button
However as i have multiple items, when i click on one of them, the sign changes to (-) that works flawlessly, but if i click on another "item" the first one collapses but the sign remains (-) instead of changing to (+)
How can i do it? i know it's a simple question and maybe a simple answer but i'm kinda stuck in here.
Thanks for your help
In my opinion you should be hooking in to the native Bootstrap events :
$('.dropdown').on({
'show.bs.dropdown': function () {
var l = $('.more', this).html('-')
$('.more').not(l).html('+')
},
'hidden.bs.dropdown': function () {
$('.more', this).html('+')
}
});
FIDDLE
Along with updating current more element, you need to update all other more elements to +
var $mores = $('.more').click(function () {
$(this).text(function (i, old) {
return old == '+' ? '-' : '+';
});
//update all other more text to -
$mores.not(this).text('+');
});
Demo: Fiddle
Try:
$('.more').click(function(){
var txt = $(this).text();
if(txt == "+"){
$('.more').text("+");
$(this).text("-");
}
else{
$(this).text("+");
}
});
DEMO here.