I want to use .detach and .prepend with a checkbox, I found this function that uses it with two buttons:
$(document).ready(function(){
var x;
$("#btn1").click(function(){
x = $("p").detach();
});
$("#btn2").click(function(){
$("body").prepend(x);
});
});
But how can I use it with a check box? And when the checkbox is checked it prepend the elemento to the body, and when is unchecked detach the element.
Right now I am using fade in and fade out, but I want to change that to detach and prepend:
$('#toggle').change(function () {
if (!this.checked)
// ^
$('.content').fadeOut('slow');
else
$('.content').fadeIn('slow');
});
How about this:-
var x;
$('#toggle').change(function() {
if (!this.checked)
x = $('.content').detach();
else
$('body').append(x);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="toggle" checked="true" />
<div class="content">
content content content content content content content content content content content content
</div>
Check if this example helps you get a clarity.
$(document).ready(function() {
var p;
$("#trigger").change(function() {
if (this.checked) {
$('#mydiv').prepend(p);
p = null;
} else {
p = $("p").detach();
}
});
});
p {
background: yellow;
margin: 6px 0;
}
p.off {
background: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>detach demo</title>
<link href="style.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="mydiv">
<p>Hello</p>
<p>you?</p>
</div>
Toggle:
<input type="checkbox" name="mycheckbox" id="trigger" checked/>
<script src="script.js"></script>
</body>
</html>
$(function () {
var myCheck = $('input[name=myCheck]'),
content = $('#content');
myCheck.change(function(){
if (myCheck.is(':checked')) {
content.prependTo(document.body);
} else {
content.detach();
}
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="content"><span>Content</span></div>
<label for="myCheck">
<input type="checkbox" name="myCheck" checked="true">
<span>My Check</span>
</label>
</body>
</html>
Related
I am making a calculator and want a specific value to be assigned depending on if the checkbox is checked or not, the code I have might work however everytime I click the "Calculate" button it automatically checks the checkbox even if it wasn't checked in the first place. How would I fix this?
function run() {
var checkbox = document.getElementById('side1');
if (checkbox.checked = true) {
var output = 5;
} else {
var output = 3;
}
document.getElementById("totalvalue").innerHTML = output;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<label for="side1">Side 1</label>
<input type="checkbox" id="side1" name="side1"></input>
<input type="button" value="Calculate" onclick="run()"></input>
<span>Total: $</span>
<span id="totalvalue"></span>
<script type="text/javascript" src="tek.js"></script>
</form>
</body>
</html>
You have a typo in tek.js
Since you are assigning true to checkbox.checked , it sets the checkbox (similar to checking the checkbox) and 5 is evaluated based on your logic.
You may want to set checkbox.checked == true to get desired output.
I updated your code now. It's working as expected. Due to your if condition, your checkbox got selected.
i replaced if (checkbox.checked = true) with if (checkbox.checked == true). It is now working.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function run() {
var checkbox = document.getElementById('side1');
if (checkbox.checked == true) {
var output = 5;
} else {
var output = 3;
}
document.getElementById("totalvalue").innerHTML = output;
}
</script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<label for="side1">Side 1</label>
<input type="checkbox" id="side1" name="side1"></input>
<input type="button" value="Calculate" onclick="run()"></input>
<span>Total: $</span>
<span id="totalvalue"></span>
<script type="text/javascript" src="tek.js"></script>
</form>
</body>
</html>
</body>
</html>
As you can see in the example, resizing doesn't work properly when using an iframe. You can move the splitter to the left, but not to the right. Does anybody know why this is and how it could be fixed?
<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<title>UI.Layout : demo </title>
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
<style>
.html-back {
background: #eee;
}
</style>
</head>
<body>
<div ui-layout options="{ flow : 'column', disableToggle: true }">
<div ui-layout-container size="50%" class="html-back">
AA
</div>
<div ui-layout-container size="50%" class="html-back">
<iframe style="width: 100%; height: 100%;" src=""></iframe>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.js"></script>
<script>
var app = angular.module("x", ["ui.layout"]);
</script>
</body>
</html>
The problem seems to be that the iframe steals the focus. I managed to prevent this by adding an overlay div while moving the split bar.
<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<title>UI.Layout : demo </title>
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
<style>
.html-back {
background: #eee;
}
</style>
</head>
<body>
<div ng-controller="AppController">
<div ui-layout ui-layout-loaded options="{ flow : 'column', disableToggle: true }" id="splitViewContainer">
<div ui-layout-container size="50%" class="html-back">
AA
</div>
<div ui-layout-container class="html-back">
<iframe style="width: 100%; height: 100%;" src=""></iframe>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.js"></script>
<script>
class AppController {
constructor($document, $element, $scope) {
this.$document = $document;
this.$element = $element;
this.$scope = $scope;
this.mouseDown = this.mouseDown.bind(this);
this.mouseUp = this.mouseUp.bind(this);
this.$scope.$on("ui.layout.loaded", () => {
this.splitter = this.$element.find(".ui-splitbar");
this.splitter.on("mousedown", this.mouseDown);
});
this.overlay = angular.element("<div></div>");
this.overlay.css({
width: "100%",
height: "100%",
"z-index": 1,
position: "absolute",
top: 0,
left: 0
});
}
mouseDown() {
if (!this.splitViewContainer) {
this.splitViewContainer = this.$element.find("#splitViewContainer");
}
this.splitViewContainer.append(this.overlay);
this.$document.one("mouseup", this.mouseUp);
}
mouseUp() {
this.overlay.remove();
}
}
const app = angular.module("x", ["ui.layout"]);
app.controller("AppController", AppController);
</script>
</body>
</html>
I don't really know why this isn't working but I'm new to javascript so I'm sure I made a mistake.
I have a button and when clicked I want the div to disappear but when I click on the button nothing happens.
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
};
<div id="welcome-div">
<p>Welcome</p>
</div>
<a href="#" id="begin-button" class="intro-button"/>Begin Tour</a>
You are missing jQuery library in your code snippet.Add <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> to include jQuery library
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
};
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
});
//^....... missing ')'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="welcome-div">
<p>Welcome</p>
</div>
<a href="#" id="begin-button" class="intro-button" />Begin Tour</a>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hide</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
label input[type="file"]
{
display: block;
margin-top: -20px;
opacity: 0;
}
</style>
<script>
$(window).ready(function() {
$(document).delegate('#hide','click',function(){
$('#spanFileName').hide();
});
});
</script>
</head>
<body>
<p id='hide'> Click for hide</p>
<span id='spanFileName'>Hide me</span>
</body>
</html>
When i click one of the buttons i want the paragraphs to change size depending on the button i've clicked. That doesn't seem to work. I've checked everything and with my level of knowledge of jQuery (beginner ) i can't figure it out so i need your help. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<input type="button" id="smaller" value="smaller text" />
<input type="button" id="bigger" value="bigger text" />
<p > Some text inside of it.</p>
<p > Some text inside of it too!</p>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="query.js"> </script>
</body>
</html>
jQuery
$('#bigger').click(function() {
$('p').addClass('.bigger');
});
$('#smaller').click(function() {
$('p').addClass('.smaller');
});
CSS
.bigger {
font-size:30px;
background-color:red;
}
.smaller {
font-size:10px;
}
Remove . from addClass() because the function already recognize the string like a class without specifiy the class selector.
try this:
$('#bigger').click(function() {
$('p').addClass('bigger'); //instead of .bigger
});
$('#smaller').click(function() {
$('p').addClass('smaller'); //instead of .smaller
});
DEMO
Remember $.addClass("bigger"); not $.addClass(".bigger");
Demo
http://jsfiddle.net/dieegov/ebGQ2/
I need checkBox 3 to disable checkBox 1 & 2 when it is selected.
The code works when I have the onClick in the 3rd checkbox tag, but my lead programmer wants the onClick in the JavaScript code above. I'm not that good with JS so I don't know exactly why it's not working. This is what I have so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<SCRIPT TYPE="text/javascript">
<!--
var field = document.getElementById("check_1157");
if (field)
{
function update1157Box(contactMethod)
{
var contactMethod = document.getElementById("check_1157");
if(contactMethod.check_1157.checked)
{
//enable the not to receive information
contactMethod.check_1156.disabled =true;
contactMethod.check_1156.checked = false;
contactMethod.check_1158.disabled =true;
contactMethod.check_1158.checked = false;
return;
}
}
field.onClick = update1157Box(this.form)
//the not to receive information
contactMethod.check_1156.checked = false;
contactMethod.check_1156.disabled = false;
contactMethod.check_1158.checked = false;
contactMethod.check_1158.disabled = false;
}
//-->
</SCRIPT>
</head>
<body>
<form>
<div class="many-from-many">
<label style="display: block;"><input id="check_1156"
name="answers[166][]" value="1156" type="checkbox">Check Box 1</label>
<label style="display: block;"><input id="check_1158"
name="answers[166][]" value="1158" type="checkbox"> Check Box 2</label>
<label style="display: block;"><input id="check_1157"
name="answers[166][]" value="1157" type="checkbox">Check Box 3</label>
</div>
</form>
</body>
</html>
jQuery makes event handlers a piece of cake:
$('#check_1157').click(function() {
if ($(this).prop('checked')) {
$('#check_1156, #check_1158').prop({
checked: false,
disabled: true
});
} else {
$('#check_1156, #check_1158').prop({disabled: false});
}
});
My approach apposed to Fabian's, I would do some thing like this, as you have a div around around those block of three checkboxs called many-from-many this will look for the (parent <lable>) nodes (parent <DIV>) of the third check box and then find the childNodes (checkboxs)
<form>
<div class="many-from-many"><label style="display: block;"><input id="check_1156"name="answers[166][]" value="1156" type="checkbox">Check Box 1</label><label style="display: block;"><input id="check_1158"name="answers[166][]" value="1158" type="checkbox">Check Box 2</label><label style="display: block;"><input id="check_1157"name="answers[166][]" value="1157" type="checkbox" onclick="togTopTwo(this)">Check Box 3</label></div>
</form>
.
function togTopTwo(c){
var mm = c.parentNode.parentNode;
var xx = mm.firstChild.firstChild;
var secondOfMany = xx.parentNode.nextSibling.firstChild;
if(c.checked){
xx.disabled=true;
secondOfMany.disabled = true;
}else{
xx.disabled=false;
secondOfMany.disabled =false;
}
}
As Eric's solution is using jQuery, here is a pure JavaScript alternative:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<SCRIPT TYPE="text/javascript">
<!--
var toggle_list = ['check_1156', 'check_1158'];
function toggle(checkbox) {
if (checkbox.disabled) {
checkbox.removeAttribute('disabled');
} else {
checkbox.setAttribute('disabled', true);
}
}
function toggleActivation() {
for (var i=0; i<toggle_list.length; i++) {
var id = toggle_list[i];
var checkbox = document.getElementById(id);
toggle(checkbox);
}
}
//-->
</SCRIPT>
</head>
<body>
<form>
<div class="many-from-many">
<label style="display: block;"><input id="check_1156"
name="answers[166][]" value="1156" type="checkbox">Check Box 1</label>
<label style="display: block;"><input id="check_1158"
name="answers[166][]" value="1158" type="checkbox"> Check Box 2</label>
<label style="display: block;"><input id="check_1157"
name="answers[166][]" value="1157" type="checkbox" onchange="toggleActivation()">Check Box 3</label>
</div>
</form>
</body>
</html>
This might not be IE safe as I am currently running Linux. If it doesn't work in IE, the problem will be inside the toggle function.