I have four checkboxes ,clicking any of them returns respective html code from server. I want that on selecting 2 checkboxes screen should split in 2, similarly on selecting 3 checkboxes into 3.
how to write logic using Jquery, HTML and CSS.
$(document).ready(function () {
$("#go").click(function () {
$("#output1").html('');
$("#output2").html('');
$("#output3").html('');
$("#output4").html('');
if ($('#getdisabledusers').prop("checked") == true)
{
$("#output1").html("<img src='http://blog.teamtreehouse.com/wp-content/uploads/2015/05/InternetSlowdown_Day.gif' width='200' height='200' />");
$("#box1").addClass("checkedbox");
$.ajax({
url: "/MVC_client/getdisabledusers",
success: function (data) {
$("#output1").html(data);
}
});
}
Here i have one of my method in JS. Output1, output2, output3.... are the four divs. If checkbox is true , an ajax call will be there to return output.
you can do the thing you want using css display:table and display:table-cell: DEMO
HTML
<div class="checkbox-container">
<div class="input-box">
<input type="checkbox"><label>option 1</label>
</div>
<div class="input-box">
<input type="checkbox"><label>option 2</label>
</div>
<div class="input-box">
<input type="checkbox"><label>option 3</label>
</div>
<div class="input-box">
<input type="checkbox"><label>option 4</label>
</div>
</div>
<div class="container">
<section></section>
<section></section>
<section></section>
<section></section>
</div>
SCSS
.container{
width:100%;
height:500px;
display:table;
section{
display:none;
&.show{
display:table-cell;
}
&:nth-child(1){
background-color:red;
}
&:nth-child(2){
background-color:yellow;
}
&:nth-child(3){
background-color:blue;
}
&:nth-child(4){
background-color:green;
}
}
}
.checkbox-container{
text-align:center;
.input-box{
display:inline-block;
}
}
jQuery
$('input[type=checkbox]').change(function(){
var index=$(this).parent().index();
if($(this).is(':checked')){
$('section').eq(index).addClass('show');
//your ajax call goes here
}
else{
$('section').eq(index).removeClass('show');
}
});
Related
I have a div with a link inside of it. as you see in snippet when the link is clicked it appends a new div beside. it is working!
but what i want is when every time link is clicked a new seperative class should be dynamically adding to 'project-list'.
$(".click").click(function () {
$(".container").append('<div class="project-list"><div class="projects-name"> div1</div><div class="project-box">Content</div></div>');
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>
if it is not clear ask me below.
var i=0;
$(".click").click(function () {
i++;
var toAppend = '<div class="project-list newClass'+i+'"><div class="projects-name"> div1 [newClass'+i+']</div><div class="project-box">Content</div></div>';
$(".container").append(toAppend);
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>
i have created two forms, one form having the div that div id is "one" second form having the another div id is "two".When div one hover the div two wants to be displayed. i have tried like this.
<form action="">
<div id="one">
<p>source of hover content</p>
</div>
</form>
<form action="">
<div id="two">
<p>destination of hover content</p>
</div>
</form>
In Css:
#two{
display: none;
}
#one:hover #two {
display: block;
}
To show/hide second div on hover of first div use below script.
$(function(){
$("#one,#two").hover(function(){
$("#two").show();
},function(){
$("#two").hide();
});
});
Please check working demo:
$(function(){
$("#one,#two").hover(function(){
$("#two").show();
},function(){
$("#two").hide();
});
});
#two{
display: none;
}
#one:hover #two {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="one">
<p>source of hover content</p>
</div>
</form>
<form action="">
<div id="two">
<p>destination of hover content</p>
</div>
</form>
var clr;
$(document).ready(function()
{
$(function() {
$("#one,#two").bind('mouseout', function(){
clr = setTimeout( function(){$("#two").css("display", "none");} , 2000);
})
});
$(function() {
$("#one,#two").bind('mouseover', function(){
clearTimeout(clr);
$("#two").css("display", "block");
})
});
});
var clr;
$(document).ready(function()
{
$(function() {
$("#one,#two").bind('mouseout', function(){
clr = setTimeout( function(){$("#two").css("display", "none");} , 500);
})
});
$(function() {
$("#one,#two").bind('mouseover', function(){
clearTimeout(clr);
$("#two").css("display", "block");
})
});
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<form action="">
<div id="one" style="border: 1px solid #000; width:200px;padding:5px;">
<p>source of hover content</p>
</div>
</form>
<form action="">
<div id="two" style="border: 1px solid #000; width:200px;padding:5px;display:none;">
<p>destination of hover content</p>
</div>
</form>
Give an ID to each of your forms
Then, you can use jQuery to point a specific element within a form
<form id="form1" action="">
<div id="one">
<p>source of hover content</p>
</div>
</form>
<form id="form2" action="">
<div id="two">
<p>destination of hover content</p>
</div>
</form>
Using jQuery you can specify each element inside a particular form
$(document).ready(function() {
$("#form2 #two").hide();
$("#form1 #one").hover(function(){
$("#form2 #two").show();
});
});
Pure JavaScript and supported in all browsers using Element.style.display and Element.onmouseover & Element.onmouseout for hover events
String.prototype.Tshow = function(s){
document.getElementById(this).style.display = s ? "block" : "none";
}
document.getElementById("one").onmouseover = function(){"two".Tshow(true)}
//to hide onmouseout
/*
document.getElementById("one").onmouseout = function(){"two".Tshow(false)}
*/
#two{
display: none;
}
#one:hover{
display: block;
}
<form action="">
<div id="one">
<p>source of hover content</p>
</div>
</form>
<form action="">
<div id="two">
<p>destination of hover content</p>
</div>
</form>
i need to hide div1 and show div2 when checkbox1 is checked
i have used below code but it didn't work
<script type="text/javascript">
function valueChanged() {
if ($('.checkbox1').is(":checked"))
$(".div2").show();
else
$(".div1").hide();
}
</script>
Html
<input type="checkbox" name="checkbox1" onchange="valueChanged()" />
<div class="row" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none">Show Div 2</div>
Instead you can just use toggle()
function valueChanged() {
$('.row').toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" onchange="valueChanged()" />
<div class="row show" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none">Show Div 2</div>
If you want to keep it JS based your logic isn't quite right. Corrections below:
HTML Update:
<input id="checkbox1" type="checkbox" name="checkbox1" onchange="valueChanged()">
<div class="row" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none;">Show Div 2</div></div>
Javascript:
<script type="text/javascript">
function valueChanged() {
if ($("#checkbox1").is(":checked")) {
$("#div2").show();
$("#div1").hide();
} else {
$("#div1").show();
$("#div2").hide();
}
}
</script>
If you want to do it with just CSS instead add a class or id to the checkbox as well and use the ~ selector. You'll also want to remove the inline display none on the div2.
#div2 { display:none; }
#checkbox:checked ~ #div1 { display:none; }
#checkbox:checked ~ #div2 { display:block; }
You code is not correct. It should be like this:
function valueChanged() {
if ($('#checkbox1').is(":checked")) {
$("#div1").hide();
$("#div2").show();
} else {
$("#div1").show();
$("#div2").hide();
}
}
// OR you could just use toggle()
function valueChanged2() {
$('.row').toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1" onchange="valueChanged()" />
<div class="row" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none">Show Div 2</div>
You use not correct access to elements
<script type="text/javascript">
function valueChanged() {
if ($(this).is(":checked"))
$("#div2").show();
else
$("#div1").hide();
}
</script>
Here is my code:
<html>
<head>
<style type="text/css">
#div1
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#F00;
}
#div2
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#000;
}
#div3
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#ccc;
}
#div4
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#999;
}
#links
{
position:absolute;
left:0px;
top:200px;
}
</style>
</head>
<body>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="links">
<input type="button" value="Link1" onclick="resetAll(); up('div1');">
<input type="button" value="Link2" onclick="resetAll(); up('div2');">
<input type="button" value="Link3" onclick="resetAll(); up('div3');">
<input type="button" value="Link4" onclick="resetAll(); up('div4');">
<script>
function reset(id)
{
document.getElementById(id).style.zIndex = 1000;
}
function up(element)
{
element.style.zIndex = 1;
}
function resetAll()
{
for (var i = 1; i <= 4; i++)
{
reset('div' + i);
}
}
</script>
</div>
</body>
</html>
So that works, when you click Link 2 button to display div2, it overrides the zindex of div1 just fine, as I'd like.
However, when you click Link 1 (which is supposed to display div1), it doesn't go back to div1. I'd like whichever button I click to display the div it is linked to.
you should reset all your divs to their original state... then mark your selected. do..upgrade your html to this version:
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="links">
<input type="button" value="Link1" onclick="resetAll(); up('div1');">
<input type="button" value="Link2" onclick="resetAll(); up('div2');">
<input type="button" value="Link3" onclick="resetAll(); up('div3');">
<input type="button" value="Link4" onclick="resetAll(); up('div4');">
</div>
and add this JS functions:
function reset(id)
{
document.getElementById(id).style.zIndex = 1000;
}
function up(element)
{
element.style.zIndex = 1;
}
function resetAll()
{
for (var i = 1; i <= 4; i++)
{
reset('div' + i);
}
}
and here comes the fiddle: http://jsfiddle.net/ymzrocks/5604wmtc/
you need to set the first one back to 0
<script>
var shown;
function show(){
if(shown) shown.style.zIndex = 0;
shown = this;
shown.style.zIndex = 1;
}
</script>
then
<input type="button" value="Link1" onclick="show()">
<input type="button" value="Link2" onclick="show()">
<input type="button" value="Link3" onclick="show()">
<input type="button" value="Link4" onclick="show()">
it is the correct behavior because step by step you are giving z-index=1 to all divs. Id div4 is visible with z-index=1 and you execute document.getElementById('div1').style.zIndex='1' the correct behavior is show div4. You should give an higher z-index to div1 or a lower z-index to other divs
I have multiple Divs based rows. Each row contains a check box.
I want to click on that row anywhere, it should check uncheck that specific checkbox.
Here is the what I tried till now DEMO: http://jsfiddle.net/kERYB/19/
JS :
$('.row').click(function ()
{
$(this).closest(":checkbox").attr("checked", checked");
});
HTML:
<div class="row">
<div class="left">
<input type="checkbox" class="cb-element" value="1" />
</div>
<div class="left">
<select><option>choose</option></select>
</div>
<div class="right">
This is First Record
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">
<input type="checkbox" class="cb-element" value="1" />
</div>
<div class="left">
<select><option>choose</option></select>
</div>
<div class="right">
This is Second Record
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">
<input type="checkbox" class="cb-element" value="1" />
</div>
<div class="left">
<select><option>choose</option></select>
</div>
<div class="right">
This is Third Record
</div>
<div class="clear"></div>
</div>
CSS:
.row {
width:300px;
padding:4px;
border:1px solid #000;
margin:2px;
}
.left {
float:left;
width:50px;
}
.right {
float:right;
}
.clear {
clear:both;
}
}
You can do this without if condition.
Working Demo
Jquery
$('.row').click(function ()
{
$(this).find('input[type=checkbox]').prop("checked", !$(this).find('input[type=checkbox]').prop("checked"));
});
Update (with variable) See Demo
jQuery
$('.row').click(function ()
{
var checkbox = $(this).find('input[type=checkbox]');
checkbox.prop("checked", !checkbox.prop("checked"));
});
Update 2: Fixed Bug on Cliking input See Demo
$('input[type=checkbox]').click(function (e)
{
e.stopPropagation();
return true;
});
Update 3: Without jQuery See Demo
Wrap the row with label
<label>
<div class="row">
...
</div>
</label>
Update 4: To exclude select tag See Demo
$('input[type=checkbox], .row select').click(function (e)
{
e.stopPropagation();
return true;
});
Try with this one :
$('.row').click(function ()
{
$(this).find('div:first input:checkbox').prop('checked', true)
}
);
Try in fiddle
Updated:
$('.row').click(function ()
{
if($(this).find('div:first input:checkbox').is(':checked')){
$(this).find('div:first input:checkbox').prop('checked', false)
}
else{
$(this).find('div:first input:checkbox').prop('checked', true)
}
});
Try in fiddle
You can do it simply with HTML.
<input type="checkbox" class="cb-element" id="my-checkbox" value="1" />
<label for="my-checkbox">here you click to check or uncheck.</label>
id of 'input' should be value of 'for' attribute of 'label' tag.
Here checkbox id is 'my-checkbox' and in label --for="my-checkbox")--.
You can see an example: http://jsfiddle.net/kERYB/21/
You can use .find for this.
$(this).find('input[type=checkbox]').prop("checked", true);
http://api.jquery.com/find/
To check uncheck, use this -
$('.row').click(function ()
{
var cb = $(this).find(':checkbox');
if (cb.is(':checked')) {
cb.prop('checked', false);
} else {
cb.prop('checked', true);
}
});
Update Fiddle - http://jsfiddle.net/kERYB/14/
$(document).ready(function (){
$('.row').click(function (e){
var cur = $(this).find('input[type=checkbox]');
if(cur.prop("checked"))
{
$(this).find('input[type=checkbox]').prop("checked", false);
}
else
{
$(this).find('input[type=checkbox]').prop("checked", true);
}
});
});
this will be good for you....
$('.row').click(function ()
{
if ( $(this).find(".cb-element").prop('checked') == true){
$(this).find(".cb-element").prop('checked', false);
}
else{
$(this).find(".cb-element").prop('checked', true);
}
});
http://jsfiddle.net/kERYB/13/