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();
});
Related
I have some cards who are supposed to be inline, but I have to use a display none on them. When I click on a specific button, I want to display these cards; but when I do that, each cards appears to take a row when I want to have them on the same row
<div class="row" id="menu_lv2r">
<div class="col-lg-2">
<div class="card card-chart">
<div class="card-header">Character 1</div>
<div class="card-body card-body-top">
<img class="card-img" alt="character_image" src="./images/char1.jpg"/>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="card card-chart">
<div class="card-header">Character 2</div>
<div class="card-body card-body-top">
<img class="card-img" alt="character_image" src="./images/char2.jpg"/>
</div>
</div>
</div>
</div>
Theses were my 2 cards examples
If I let the code like that, they are all inline which is what I want
Now If I add some css to hide them
#menu_lv2r{
display: none;
}
The row with the 2 cards disapeared which is still fine.
But now, when I use some Js to print them again, they appear in one row each.
var elt = document.getElementById('menu_lv2r');
elt.style.display = "inline";
Thanks for your help
You should use display: flex for parent element.
elt.style.display = "flex";
It's the default value for bootstrap class .row.
Just use flex instead of inline. Everything works fine
before all thanks for reading.
So... I have a problem with bootstrap popover. I have tried many configurations with no success, so I'll try to explain the problem as clearer as I can.
I have multiple elements within bootstrap columns and when the user click on one of them a popover comes out with a form in its popover-content.
Every form is different due to its attributes, you can choose different options in the popover and then send the form.
Untill this point everything is fine, the popover works correctly. The thing is that when I click a second time over the same element in order to hide the popover, popover hides but not the title and the next popover I click content is empty, I mean, popover content stop working, it only show titles.
I think I'm missing something but I can't find out what.
The code that load the content:
$("[data-toggle=popover]").popover({
trigger: "click focus",
template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3>⊗<div class="popover-body"></div></div>',
content: function() {
var $html = $(this).parent().find(".prod-popover").eq(0).html();
return $(".popover-content").html($html);
}
});
I've tried with trigger focus, click, manual and a mix of them with the same results.
I have also tried changing the wrapper .popover-content with #popover-content.
Code to hide popover:
$(document).on("click", "a.popover-close", function(e) {
e.stopPropagation();
$(".popover-content").popover('hide');
return false;
});
Another for hiding found here in stack overflow
$(document).click(function(e) {
if ($(".popover").has(e.target).length == 0 || $(e.target).is(".close")) {
$("#popoverId").popover("hide");
}
});
Another one:
$("[data-toggle=popover]").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
$("[data-toggle=popover]").not(this).popover('hide');
});
HTML:
<div class="col-md-6 col-sm-6 col-xs-12 bt-border k-item" data-placement="right" data-toggle="popover" data-title="Whatever" data-container="body" data-html="true">
<div class="hidden prod-popover">
<form class="cart" role="form" method="post" action="">
<div class="form-group">
<label>Label</label>
<textarea rows="2" placeholder="PLACEHOLDER"></textarea>
</div>
<div class="form-group">
<div class="btn-group pop-quantity" role="group">
<input type="text" value="1" min="1" step="1">
</div>
</div>
<button type="button">Send<button>
</form>
</div>
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-2"><img src="SRC" alt=""></div>
<div class="col-md-8 col-sm-8 col-xs-8">
<h4 class="no-pad-bt">Whatever</h4>
<p class="no-pad-bt">Description</p>
</div>
<div class="col-md-2 col-sm-2 col-xs-2 text-right">
<p>Price</p>
</div>
</div>
Any help will be highly appreciated.
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 having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}
I have a list which contains of several items that are hidden.
In my JS i want a function that changes the items of this list so it becomes visible. I want each item to become visible if a certain event has happened. The event is working fine and can be considered as shakeCount= 6, to test it properly.
Here is my list:
<div class="container">
<div class="list-group">
<div id="s1">Shake1</div>
<div id="s2">Shake2</div>
<div id="s3">Shake3</div>
</div>
</div>
What i tried so far and didn't work:
function nR(){
if (shakeCount>5)
document.getElementbyId("s1").style.visibility ="visible";
}
Thanks in advance!
Have you tried using Toggle? I would recommend it but you may need to remove the "hidden" class from your elements and add in the style="display: none;" attribute to each in order to default them to hidden.
<div class="container">
<div class="list-group">
<div id="s1">Shake1</div>
<div id="s2">Shake2</div>
<div id="s3">Shake3</div>
</div>
</div>
function nR(){
if (shakeCount>5)
document.getElementbyId("s1").toggle();
}
First, you're using getElementbyId -- it should be getElementById (missing capital 'B').
Second, you've made the #shake links visibility:hidden, but you are targeting the wrapping div when you run your js.
var shakeCount = 6;
if (shakeCount>5)
document.getElementById("s1").style.visibility ="visible";
.hidden {visibility: hidden;}
<div class="container">
<div class="list-group">
<div id="s1" class="list-group-item hidden"><a href="#shake1" >Shake1</a></div>
<div id="s2" class="list-group-item hidden"><a href="#shake2" >Shake2</a></div>
<div id="s3" class="list-group-item hidden"><a href="#shake3" >Shake3</a></div>
</div>
</div>
The above code hides the wrapping div elements instead of the links so that they are shown when the js runs.