Develop Reference

First sibling div treated as a background of second dynamic div

HTML Markup,
<div class="bluredBackground"></div>
<div class="content">
Hi This is dynamic content.<br>
If the div height increases then first div height <br>
should be automatically increase.
</div>
I want first div height should automatically increase whenever the second div height increases because of its dynamic content.
As of now, I was able to place one div on top of another,
.content {
width: 70%;
height: auto;
border:1px solid;
position: absolute;
z-index:10;
background-color: white;
}
.bluredBackground {
width:70%;
height:70%;
background-color: red;
z-index:0;
border:1px solid;
position:absolute;
-webkit-filter: blur(2px);
}
How can I solve this problem with CSS?
I was trying this thing > http://jsfiddle.net/hsinghbisht/nLj5dqay/2/
Please help!
Thanks in advance.

This is not a direct answer to question, but what exactly are you planning with the 2nd div (blurred) being on the same height as 1st one?
If you want the fancy red blurred glare behind, then just use box-shadow. Add it to the .content and it will work pretty identical
box-shadow: 0px 0px 4px 0px red;
However, if you definitely need to use the red blurred div, then you cannot solve that with plain CSS. You must use JavaScript and look for class style of one element and copy it to the next one.
Example:
window.onload = () =>
{
const div1 = document.querySelector('.bluredBackground');
const div2 = document.querySelector('.content');
div1.style.height = `${div2.offsetHeight}px`;
}

why does changing of class of a element distorts the view?

I am trying to change a class of a element and my view gets distorted?
How do I solve it.
I have created the fiddle for the same Jsfiddle
Issue Description:
I have a custom textbox. I have a reference value at top left corner of it.
If I enter value greater or less than the reference value , I show a box asking for reason.
It works perfectly fine, but when I try to add some extra functionality , like changing the color of the div in right top corner of textbox by changing the class of the div , the view is distorted and not as it was expected.
In the fiddle I can commented the code in javascript section at line 73,74,77,78
function changeClassOfCommentToRed(divId){
//$("#"+divId).removeClass();
//$("#"+divId).addClass("commentCornerRed");
}
function changeClassOfCommentToGreen(divId){
//$("#"+divId).removeClass();
//$("#"+divId).addClass("commentCornerGreen");
}
if I uncomment the above line for extra functionality , I get a distorted view as in following image

You only need to remove the classes you want to change:
function changeClassOfCommentToRed(divId){
$("#"+divId).removeClass("commentCornerGreen commentCornerRed");
$("#"+divId).addClass("commentCornerRed");
}
function changeClassOfCommentToGreen(divId){
$("#"+divId).removeClass("commentCornerGreen commentCornerRed");
$("#"+divId).addClass("commentCornerGreen");
}
And in your CSS you need to address your arrow pseudo element not the element itself:
.commentCornerRed:after {
...
}
.commentCornerGreen:after {
...
}
With this changes, only the color of the arrows is changed, not the color of the box.

Try to specify which class to remove in your removeClass :
removeClass('classToRemove');

If I get what question correctly. I think this commentCornerRed class got width: 0 and height: 0. you can have the same properties as .arrow_box
.commentCornerRed {
position: absolute;
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 0 10px 10px 0;
border-color: transparent #ff0000 transparent transparent;
padding-left: 36px;
cursor: pointer;
}
You can make it like this.
.commentCornerRed {
position: absolute;
background: #bcb476;
border: 1px solid #08090a;
z-index: 1;
margin-left: 50px;
margin-top: -40px;
}

I made a silly mistake. I was passing the wrong id for class name. Got the desired result by passing the right id at line 85 and 87 in javascript section.
changing from
function handleCommentBox(event){
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){
changeClassOfCommentToGreen(returnIdPrefix(event)+"r1");
}else{
changeClassOfCommentToRed(returnIdPrefix(event)+"r1");
}
}
to
function handleCommentBox(event){
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){
changeClassOfCommentToGreen(returnIdPrefix(event)+"c1");
}else{
changeClassOfCommentToRed(returnIdPrefix(event)+"c1");
}
}
solved the problem. Thanks people for helping.

jQuery custom checkboxes + hidden html checkbox

I'm making a grid of divs that can be toggled on and off. I need to post the values of these toggled divs to a database.
Currently I have jQuery waiting for clicks on the divs and then changing checkbox values on a hidden checkbox element...
$('.icon').click(function(){
var checkValue = $(this).attr("data-c");
// Then tick hidden checkbox where data-c = checkbox
});
As I end up posting this data with ajax, is there a better way to do this?
Here's what it looks like:

You actually don't need JS.
Use a <label> elements to wrap your checkbox and a span.
Change the style of that inner span using the input:checked next sibling selector +:
label.icon span{
cursor: pointer;
display: inline-block;
width: 75px;
height: 75px;
background:url(http://i.stack.imgur.com/ceycQ.jpg) no-repeat;
border: 3px solid #0186C9;
border-radius: 12px;
}
label.icon input{ /* hide the checkbox */
position: absolute;
visibility: hidden;
}
label.icon input:checked + span{ /* when input is checked */
background-position: 0 -75px;
}
<form action="">
<label class="icon">
<input type="checkbox" name="dog">
<span></span>
</label>
</form>
on form submit you'll submit all the correct data without a single line of JS

I've found a similar question here: Jquery Use Image As CheckBox
As an alternative to storing the value in a check box you could store it in a object? For example:
window.icons = {};
$('.icon').click(function() {
var id = $(this).data('identifier');
window.icons[id] = !!window.icons[id];
});
Also check out this example for a similar use http://jsfiddle.net/bdTX2/

OnClick event to change cell background

Link to JsFiddle
I'm having the need to change the cell's background color everytime the user click on it, but I can't get it to work!
This is my script :
$( function() {
$('.tk099 td').click( function() {
$(this).toggleClass("red-cell");
} );
} );
in which tk099 is the table's class, and I don't want any td tag which has a class be affected by the event. Is this possible? Thanks alot!

Your selector .tk099 td takes presidence over .red-cell because:
It is more specific
It is declared later than .red-cell (and CSS cascades)
Declare .red-cell later on and make it just as specific/more specific:
.tk099 td {
background-color:#EEEEEE;
text-align:center;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
}
td.red-cell {
background: #F00; /* Or some other color */
}
JSFiddle

change css to and should be declared at the after the default css
td.red-cell {
background: #F00; /* Or some other color */
}

Enable hover when the checkbox is not selected & disable it once the checkbox is selected

I'm trying to enable hover (adding '.add_link_twitter_hover' class) when the checkbox is not selected & disable it (removing the '.add_link_twitter_hover' class) once the checkbox is selected the same way Pinterest does it for Twitter/Facebook checkboxes when a user adds a pin:
I tried this, but it doesn't disable hover (doesn't remove '.add_link_twitter_hover' class) once mouse pointer is away:
var hoverTwitter = "add_link_twitter_hover";
$(postTwitter + " input").click(function(e) {
$(this).parent().removeClass(hoverTwitter);
$(this).parent().toggleClass(activePostTwitter);
});
$("label.add_link_twitter").hover(function(e) {
if($("input.publish_to_twitter").is(":checked")) {
$(this).removeClass(hoverTwitter);
return;
}
$(this).addClass(hoverTwitter);
});
Any idea how to enable hover when the checkbox is not selected & disable it once the checkbox is selected? Thanks in advance!
Here's the jQuery:
var postTwitter = ".add_link_twitter";
var activePostTwitter = "active";
$(postTwitter + " input").click(function(e) {
$(this).parent().toggleClass(activePostTwitter);
});
Here's the html:
<label class="add_link_twitter">
<input type="checkbox" name="publish_to_twitter" class="publish_to_twitter"><span>Share on Twitter</span>
</label>
Here's the css:
.add_link_twitter{
position:absolute;
left:15px;
bottom:16px;
color: #a19486;
border: 2px solid transparent;
border-color: #F0EDE8;
border-radius: 4px;
font-size: 13px;
font-weight: bold;
cursor: pointer;
padding: 7px;
padding-top: 5px;
padding-bottom: 5px;
}
.active {
border-color: #468BD0;
color: #468BD0;
background-color: whiteSmoke;
}
.add_link_twitter_hover
{
color: #A19486;
border: 2px solid transparent;
border-color: #C2B1A2;
border-radius: 4px;
background-color: white;
padding: 7px;
padding-top: 5px;
padding-bottom: 5px;
}

Try this:
$("label.add_link_twitter").hover(function(e) {
if(!$("input.publish_to_twitter").is(":checked"))
$(this).addClass(hoverTwitter);
}, function() {
$(this).removeClass(hoverTwitter);
});
The usual way to use the .hover() method is to supply two functions: the first is called when the mouse moves over the element in question, and the second is called when the mouse moves out.
So what I've done above is in the first function (mouseenter) I've added your class if the checkbox is not checked. In the second function (mouseleave) I just remove the class.

This can be done without any javascript at all. if you expect to always have the class "publish_to_twitter", just separate the two states with pseudoclasses:
.publish_to_twitter:hover{
width:50px;
}
input.publish_to_twitter:checked{
width:500px;
}
I added the input element in the selector to ensure that the checked style took precedence. Just make sure that for every style you set with :hover, you have an equivalent style in :checked.