I have created a modal box. Within my modal box there are sub-categories named publication and food. Each sub category is linked to a checkbox that changes color on click; which also checks and unchecked the checkbox. I have also added code which allows the text within the div to be loaded onto the page after the modal box is closed.
I want to be able to only have only the checked categories to be able to load up the information within the div onto the page after the modal box is closed.
Basically, if the user chooses to check publication by clicking it which turns it red, I want only that div to be shown on page after the modal box is closed. (Vice-versa for the other category)
But if the user has checked both sub categories, I would like both the information from the divs to be shown on page after the modal box is closed.
I have tried created new unique ID for both sub categories and divs but for some reason they are not treated separately.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<style>
.onlyThese{
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label { color:blue }
input[type="checkbox"] { display: none }
input[type="checkbox"]:checked+label { color:red }
}
input:focus{
outline: none;
}
</style>
<body>
<p> <a class="btn" href="#ex5">Sectors </a> </p>
<div id="ex5"; class="modal"; style="background-color:white">
<div style="float:left;">
<p> <input type="checkbox" id="group1" class="yourCheckbox" checked="checked"> <label for="group1" class="onlyThese">Publication </label> </p>
<div id="myDiv"> blastoise </div>
<p> <input type="checkbox" id="group2" class="yourCheckboxx" checked="checked"> <label for="group2" class="onlyThese">Food </label> </p>
<div id="myDivs"> water </div>
</div>
<div>
<p style="float:right">
<b>Apply</b>
</p>
</div>
</div>
<script>
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').hide();
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function(){
if($(this).prop("checked")) {
$('#myDiv, #myDivs').show();
content = $('#myDiv, #myDivs').html();
} else {
$('#myDiv, #myDivs').hide();
content = "";
}
});
$('[rel="modal:close"]').on('click',()=>{
$('.btn').parent().append(content);
})
</script>
</body>
</html>
The code should be able to achieve the following:
-User interacts with modal box named sectors
user clicks on a sub category turning it red which also checks the
checkbox
-user clicks apply and the information from that specific category div is loaded onto the page
You can use data attributes to differentiate between the elements with same events by getting its value from $.data, consider the following:
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').hide();
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function() {
if ($(this).prop("checked")) {
$("#" + $(this).data('target')).show();
content = $("#" + $(this).data('target')).html();
} else {
$("#" + $(this).data('target')).hide();
content = "";
}
});
$('[rel="modal:close"]').on('click', () => {
$('.btn').parent().append(content);
})
.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: blue
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
}
input:focus {
outline: none;
}
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<body>
<p>
<a class="btn" href="#ex5">Sectors </a>
</p>
<div id="ex5" ; class="modal" ; style="background-color:white">
<div style="float:left;">
<p>
<input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked">
<label for="group1" class="onlyThese">Publication </label>
</p>
<div id="myDiv"> blastoise </div>
<p>
<input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked">
<label for="group2" class="onlyThese">Food </label>
</p>
<div id="myDivs"> water </div>
</div>
<div>
<p style="float:right">
<b>Apply</b>
</p>
</div>
</div>
</body>
Related
I've been playing around with HTML and I created a column that immediately appears when I open my file in a browser. I tried moving the column and row classes around but I can't figure out how to get it so that the column doesn't appear until after I select an option from the dropdown menu. I was wondering how I could fix this issue?
<html>
<head>
<title>Testing Display</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.center{
text-align: center;
border: 3px solid #73AD21;
}
{
box-sizing: border-box;
}
.column {
float: left;
width: 30%;
padding: 10px;
height: 2000px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<body>
<div class ="center">
<p><div><h1>Testing Display</h1></div><br /><p>
<div class="dropdown">
<form>
<select name="list" id="list" accesskey="target" onchange="display(this)">
<option value="none">Choose an option</option>
<option value="one">Option one</option>
</select>
<input type=button value="Select" onclick="display()"/>
<div id="add"></div>
</form>
</div>
</div>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
<div id="div"></div>
</div>
</div>
<script src="order.js"></script>
</body>
</html>
Have the initial visibility of column to hidden.
Have a Javascript function to add a new class to column onChange. Something like this
function onSelect() {
//or add id to easily access unique single element.
var element = document.getElementByClassName("column")[0];
element.classList.add("showCol");
}
.column {
visibility: hidden;
...
}
.showCol {
visibility: visible;
...
}
Can also add styles and remove style onChange instead of toggling classes.
Javascript Solution, call this method in onchange event of drop down list:
function ddlChange(){
if (document.getElementById("list").value === "one"){
document.getElementsByClassName("column").style.display = "table-cell";
}
}
Using jQuery:
$("#list").change(function () {
if($('#list option:selected').val() === "one")
$(".column").css("display","table-cell");
});
Alternatively, you can also try to add or remove a class instead of changing inline CSS value.
I have created a line of code where the user will click on the text, which will change color to red. This is linked to a checkbox feature which is checked every time the text is red. The checkbox is meant to be invisible by the way. But for the purpose of helping me I have increased the opacity to 100 instead of 0.
I am oblivious as to why the code wont work when I place it inside code for a modal box, which is where I want it to be in the first place.
The text changes color only when you interact with the checkbox, but I also want it to change the color when it gets clicked.
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
});
.onlyThese{
cursor:pointer;
}
.checkbox input[type="checkbox"] {
opacity: 100;
}
input[type=checkbox]:checked + label {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<div class="checkbox">
<input type="checkbox" id="group1" class="sector-print-temp">
<label for="group1" class="onlyThese">Publication </label>
</div>
<p> <a class="btn" href="#ex5">Sectors </a> </p>
<div id="ex5" class="modal" style="background-color:white">
<div style="float:left;">
<div class="checkbox">
<input type="checkbox" id="group1" class="sector-print-temp">
<label for="group1" class="onlyThese">Publication </label>
</div>
</div>
<div>
<p style="float:right">
<b>Apply</b>
</p>
</div>
</div>
My expectations of the code should be the following:
The user clicks on the text
Text changes color to red
When the text changes color to red, the checkbox is checked
it's useless to try to do such complicated things, the CSS allows to directly fix this question, whether in a modal window or not
input[type="checkbox"] { display: none }
input[type="checkbox"]:checked+label { color:red }
.onlyThese { cursor: pointer }
<input type="checkbox" id="group1"> <label for="group1" class="onlyThese">Publication </label>
First, I would apologize for my grammar I'm french (and like I already said frenchy su** in grammar, but I'm trying to improve myself)
So, I've an table with array who is automatically generated with the upload of an excel list. The table who is generated contain checkboxes. When you click on a checkboxes you've an Div who appears. In this div you can wrote a text who is reported in the excel document and you've to submit for validation. Summary this is for a guest check-list.
The length of the table is variable and I would align the Div with the checkbox who is clicked. (You click and just to the right there is the div who appears).
I've try with a fixed position but this is not enought precise. Somebody can tell me how I can do this or where I've to search ?
<? header('Content-Type: text/html; charset=utf-8'); ?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="test.css" media="all"/>
<title>Ceci est une page HTML de test</title>
</head>
<script type="text/javascript" language="JavaScript" src="find5.js">
<form action = "check.php" method="GET">
<div class="slidingDiv" style="text-align:center; float:right; width : auto;">
<input type="checkbox" name="vestiaire[]" /><label>Vestiaire</label> <input type="text" name="commentaire" /> <input type="submit" value="VALIDER" />
Cacher</div>
<ul>
<?php
error_reporting(0);
include("script.php");
$i = 1;
foreach ($invites as $invite)
{
if($invite[0] != '' && $invite[1] == '')
{
echo ' <li>
<div class="circle" style="float:left;"></div>
<h4>'.$invite[0].'</h4>
<input class="show_hide" name="checkbox[]" id="'.$i.'" value="'.$i.'" type="checkbox" style="visibility:hidden" />
<label for="'.$i.'"><i class="fa fa-check"></i></label>
</li>';
}
$i++;
}
Hum I don't know if this is more clear with the code, but the Div wich I want dynamically align is "SlidingDiv"
Thanks !
First of all, the HTML structure with some useful classes.
<form action = "check.php" method="GET">
<!-- This div will never be used directly but rather cloned-->
<div id="originalSlidingDiv" class="slidingDiv" style="text-align:center; float:right; width : auto;">
<input type="checkbox" name="vestiaire[]" />
<label>Vestiaire</label>
<input type="text" name="commentaire" /> <input type="submit" value="VALIDER" />
<!-- We add different classes to the "Cacher" button and to the checkbox as they must behave a bit differently-->
Cacher
</div>
<ul>
<li class="item">
<div class="circle"></div>
<h4 class="item-name">bla</h4>
<input class="show_hide_cb" name="checkbox[]" id="a" value="a" type="checkbox" />
<label for="a"><i class="fa fa-check"></i></label>
</li>
<li class="item">
<div class="circle"></div>
<h4 class="item-name">blo</h4>
<input class="show_hide_cb" name="checkbox[]" id="b" value="b" type="checkbox" />
<label for="b"><i class="fa fa-check"></i></label>
</li>
</ul>
</form>
Then, the jQuery to make it work properly:
$(document).ready(function(){
var originalSlidingDiv = $('#originalSlidingDiv'),
slidingDiv;
$(".slidingDiv").hide();
$(".show_hide").show();
// When clicking each item's checkbox.
$('.show_hide_cb').on('click', function() {
// Check if we appended the slidingDiv already.
slidingDiv = $(this).parent().find('.slidingDiv');
// If not, we clone it, remove its id then append it to the parent (.item).
if (slidingDiv.length === 0) {
slidingDiv = originalSlidingDiv.clone(true, true)
.attr('id', '')
.appendTo($(this).parent());
}
// Finally we toggle display.
slidingDiv.slideToggle();
});
// When clicking the hide button (Cacher).
$('.show_hide_btn').on('click', function(e) {
e.preventDefault();
// $(this).parent() is the .slidingDiv element, we toggle display.
$(this).parent().slideToggle();
// $(this).parent().siblings('.show_hide_cb') is the checkbox, we want it to be unchecked.
$(this).parent().siblings('.show_hide_cb').attr('checked', false);
});
});
You can find enough explanations in the comments. Basically this will clone the .slidingDiv when necessary, append it to the clicked item, and toggle its display, but also will hide the slidingDiv when we click the button "Cacher". It will also uncheck the checkbox to get back to the initial state.
Finally, the little CSS to make it look as you wanted:
.slidingDiv {
text-align: center;
float: left;
}
.item {
margin-top: 1em; /* add some margin as it's removed from the h4 */
}
.circle {
float: left;
}
.item-name {
display: inline-block;
margin-top: 0; /* remove the margin to allow alignment */
}
JSFiddle: https://jsfiddle.net/superbiche/fhqcvbpe/
And yeah, I'm french too :)
There's going to be a lot of different answers to this question! Here's another simple way of doing this.
The reason fixed positioning doesn't work is because fixed always aligns to the window. Meaning, adding position: relative; to its parent element doesn't bind a fixed element. So you have to work with absolutely positioned elements or with pseudo elements.
$('.radio-list a').click(function() {
$('#popup').css({top: $(this).parent().offset().top, left: $(this).parent().position().left + $(this).parent().outerWidth()});
console.log($(this).position(), $('#popup').position());
});
.radio-list {
position: relative;
height: 500px;
width: 25%;
overflow-y: scroll;
}
.radio {
height: 50px;
line-height: 50px;
border: 1px solid #1e1e1e;
}
#popup {
position: absolute;
border: 1px solid red;
width: 300px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="radio-list">
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
</div>
<div id="popup">
Hi I'm the popup
</div>
I am trying to preventDefault mouseover on some condition without success. The idea is to show/hide icon next to disabled input on mouseover/mouseleave and keep it on input enable and it works fine. What I am not able to do is to hide icon on blur.
HTML
<!-- Element -->
<div class="ui padded grid element">
<div class="column">
<i class="trash icon" style="display: none;"></i>
</div>
<div class="column page-element-page">
<div class="ui disabled transparent input">
<input value="Input 1" type="text" />
</div>
</div>
</div>
<!-- Element -->
<div class="ui padded grid element">
<div class="column">
<i class="trash icon" style="display: none;"></i>
</div>
<div class="column page-element-page">
<div class="ui disabled transparent input">
<input value="Input 2" type="text" />
</div>
</div>
</div>
JS
// Get input on dblClick
$(".disabled.transparent").dblclick(function () {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active').focus();
});
// Disabled input on blur
$('.ui.input').on('blur', '.active', function () {
$('.ui.input').addClass('disabled transparent');
});
// Show trash icon on hover
$('.element').mouseover(function() {
$(this).find('.trash').css('display', 'block');
})
// Would like to keep trash icon on input focus and hide icon on blur
$('.element').mouseleave(function(event) {
if($(this).find('input').is(":focus")) {
event.preventDefault();
} else {
$(this).find('.trash').hide();
}
});
Here is a fiddle
Thanks for help
Just fix it in CSS with first adding an active class to .element first. Always better to use CSS
$(".disabled.transparent").dblclick(function () {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active').focus();
$(this).closest('.element').addClass('active');
});
/* Disable input on blur page name */
$('.ui.input').on('blur', '.active', function () {
$('.ui.input').addClass('disabled transparent');
$(this).closest('.element').removeClass('active');
});
and in CSS
.page-element .trash,
.page-element .setting {
display: none;
}
.page-element:hover .trash,
.page-element:hover .setting {
display: block;
}
.page-element.active .trash,
.page-element.active .setting {
display: block !important
}
Here is http://jsfiddle.net/Greggg/e1x7jnor/6/
I have a web application which lets you select various bits of furniture using checkboxes, then displays links to the exercises you can do with that piece of furniture. As i am using phonegap i have been trying to use iScroll for the divs that are displayed when the checkbox is ticked.
The Scroll div works perfectly with a simple paragraph, however when i try to add the code for the checkbox divs it does not work.
JAVASCRIPT
//CHECKBOX SHOW/HIDE
function showHideChair(box,id)
{
var chairData = document.getElementById(id)
chairData.style.display = box.checked? "inline":"none"
}
function showHideMatt(box,id)
{
var mattData = document.getElementById(id)
mattData.style.display = box.checked? "inline":"none"
}
function showHideBook(box,id)
{
var bookData = document.getElementById(id)
bookData.style.display = box.checked? "inline":"none"
}
function showHideBunjee(box,id)
{
var bunjeeData = document.getElementById(id)
bunjeeData.style.display = box.checked? "inline":"none"
}
function showHideBottle(box,id)
{
var bottleData = document.getElementById(id)
bottleData.style.display = box.checked? "inline":"none"
}
var myScroll;
function loaded() {
myScroll = new IScroll('#wrapper');
}
HTML
<body onload="loaded()">
<header>
<h1>Home Fitness</h1>
</header>
<section>
<h3>Abdominals</h3>
</section>
<p>Please select the the equipment you have available from the choices</p>
<div class="container">
<form >
<div class="chairCheckbox">
<label for="chair">Chair</label>
<input style="display:inline" type="checkbox" id="chair" value="chair" name="option" onClick="showHideChair(this,'myChair')">
<label for "floorMatt">Floor Matt</label>
<input style="display:inline" type="checkbox" id="floorMatt" value="floorMatt" name="option" onClick="showHideMatt(this,'myMatt')">
<label for "book">Hard Back Book</label>
<input style="display:inline" type="checkbox" id="book" value="book" name="option" onClick="showHideBook(this,'myBook')">
<label for "bunji">Bunji Cord</label>
<input style="display:inline" type="checkbox" id="bunji" value="bunji" name="option" onClick="showHideBunjee(this,'myBunjee')">
<label for "bottle">Water Bottle</label>
<input style="display:inline" type="checkbox" id="bottle" value="bottle" name="option" onClick="showHideBottle(this,'myBottle')">
</div>
</form>
</div>
<div id="wrapper">
<div id="scroller">
<!--ABS CHAIR-->
<div id="myChair" style="display:none;">
<div class="subBanner" >
<h4>Chair</h4>
</div>
<a class="Exercisebutton icon chair" href="ChairCrunch.html"><span>Chair Crunch</span></a>
<a class="Exercisebutton icon chair" href="ElevatedCrunch.html"><span>Elevated Crunch</span></a>
</div>
<!--ABS MATT-->
<div id="myMatt" style="display:none;">
<div class="subBanner" >
<h4>Matt</h4>
</div>
<a class="Exercisebutton icon matt" href="BWLegRaises.html"><span>Bodyweight Leg Raises</span></a>
<a class="Exercisebutton icon matt" href="BWPlank.html"><span>Bodyweight Plank</span></a>
</div>
<!--ABS BOOK-->
<div id="myBook" style="display:none;">
<div class="subBanner" >
<h4>Book</h4>
</div>
<a class="Exercisebutton icon book" href="BookTwists.html"><span>Book Twists</span></a>
<a class="Exercisebutton icon book" href="BookBridge.html"><span>Book Bridge</span></a>
</div>
<!--ABS BUNJEE-->
<div id="myBunjee" style="display:none;">
<div class="subBanner" >
<h4>Bunjee</h4>
</div>
<a class="Exercisebutton icon bunjee" href="BCPLank.html"><span>Bunjee Cord Plank</span></a>
<a class="Exercisebutton icon bunjee" href="BCHipRaise.html"><span>Bunjee Cord Hip Raise</span></a>
</div>
<!--ABS BOTTLE-->
<div id="myBottle" style="display:none;">
<div class="subBanner" >
<h4>Bottle</h4>
</div>
<a class="Exercisebutton icon bottle" href="BSitup.html"><span>Bottle Situp</span></a>
<a class="Exercisebutton icon bottle" href="BSidePress.html"><span>Bottle Side Press</span></a>
</div>
</div>
</div>
CSS
/*ISCROLL*/
#wrapper {
position: relative;
width: 90%;
height: 300px;
overflow: hidden;
/* Prevent native touch events on Windows */
-ms-touch-action: none;
/* Prevent the callout on tap-hold and text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#scroller {
position: absolute;
/* Prevent elements to be highlighted on tap */
-webkit-tap-highlight-color: rgba(0,0,0,0);
/* Put the scroller into the HW Compositing layer right from the start */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
I understand this is a lot of code, im sorry! but any help would be greatly be appreciated.!!
You HTML has lot of errors. Some of the tags inclusing input tags are not closed, label tags are not syntax correct. eg: <label for "book"> should be <label for="book">
You can validate your HTML code using online tools such as http://validator.w3.org/check
See if this helps you in recovering from error
Iscroll is invoked like myScroll = new iScroll('wrapper');
Here is a working example: http://lab.cubiq.org/iscroll/examples/simple/
and offcourse there are lot of SO questions on iScroll difficulties that users encountered, Please try them, and still if you are not getting through, then try a simple example with checkboxes, and if you are stuck, create a jsfiddle and post it here. we can help