Develop Reference

Any way to set parent background-color on the basis of child class using css?

is there any way to set parent background-color on the basis of child class using css?
here is my code
https://jsbin.com/bahodalila/edit?html,css,js,output
if child have red class parent should set background-color red.If child have yellow class parent should set background-color yellow.
<div class="par">
<div class="red">
helli
</div>
</div>
.par{
background-color:red;
}
.par{
background-color:yellow;
}
.par{
width:200px;
height:200px;
border:1px solid blue;
}
.red{
width:100px;
height:100px;
color:red;
border:1px solid;
background-color:green
}
will I use javascript in this case ? is there any way to using css ?

A pseudo element can simulate this:
.par {
width: 200px;
height: 200px;
border: 1px solid blue;
position:relative; /* here and not on child to make it relative to parent*/
z-index:0;
}
.red {
width: 100px;
height: 100px;
color: red;
border: 1px solid;
background-color: green;
}
.red::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:inherit;
}
<div class="par">
<div class="red">
helli
</div>
</div>
<div class="par">
<div class="red" style="background:blue;">
helli
</div>
</div>

CSS and DIV do not use the parent-child methodology. You will need to create each variable in CSS and set each DIV to the CSS variable you want. I did an example using your code to show.
.par{
background-color:red;
width:200px;
height:200px;
border:1px solid blue;
}
.par-yellow{
background-color:yellow;
width:150px;
height:150px;
border:1px solid;
}
.red{
width:100px;
height:100px;
color:red;
border:1px solid;
background-color:green
}
<div class="par">
<div class="par-yellow">
<div class="red">
helli
</div>
</div>
</div>

Unfortunately there are no parent selectors on css. A workaround is only with JS posible. You could do something like:
var redElements = document.querySelectorAll(".red");
for(var i = 0; i < redElements.length; i++){
redElements[i].parentElement.style.backgroundColor = "red";
}

Merge dots into line (with css filter?)

How do you merge dots (<div>s) into a line in css?
I have the following grid made up of <divs>:
<div id="outer-container">
<div id="container">
<div class="gridBlock" style="left:-5; top:-5; width:30px; height:30px; background-color: blue;"></div>
<div class="gridBlock" style="left:15; top:-5; width:30px; height:30px; background-color: blue;"></div>
<div class="gridBlock" style="left:35; top:-5; width:30px; height:30px; background-color: blue;"></div>
<div class="gridBlock" style="left:55; top:-5;"></div>
<div class="gridBlock" style="left:-5; top:15; width:30px; height:30px; background-color: red;"></div>
<div class="gridBlock" style="left:15; top:15; width:30px; height:30px; background-color: red;"></div>
<div class="gridBlock" style="left:35; top:15; width:30px; height:30px; background-color: red;"></div>
<div class="gridBlock" style="left:55; top:15;"></div>
</div>
</div>
css:
#outer-container {
padding: 48px;
filter: brightness(1.4) contrast(40); /* ? */
}
#container {
position: absolute;
filter: blur(10px) brightness(1.4) contrast(100); /* ? */
}
.gridBlock {
background-color: #f2f2f2;
border: .5px solid black;
width: 20px;
height: 20px;
display: inline-grid;
position: absolute;
}
This would look like (no css filter):
How would I make this into a line?
I have tried using css filter, but it doesn't really work, see screenshot below:
What I want:
a more complex example
No css filter:
With css filter
This is not quite what I want, as it interferes with the colors and is blurry around the edges.
I have seen this, but it wasn't very helpful for this situation.
A JavaScript solution would be okay as well.
Thanks in advance,

sidebar menu on single page site not working

I have a single page site with lots of contents and a sticky sidebar navigation on the left. I am trying to get the page to scroll down to the corresponding section in the contents div whenever a menu item is selected. This is probably really basic stuff but I just can’t wrap my head around it (been trying out various solutions, without success – see code below).
I am relatively new to javascript and jquery and would be very grateful for ideas/ suggestions.
What I managed to do so far:
The sidebar menu is sticky.
The active state of the links in the sidebar nav changes when a menu item is selected.
I also managed to get the elements in the contents div to change active state whenever the corresponding nav menu item is selected.
All that is missing now is for the menu links to work and actually push down the page to the right section ids.
Again, sorry if this is a really dumb question, I am grateful for any suggestions.
$(function() {
$('.feature_tab').click(function(evt) {
var selectedTab = $(this);
var featureGroup = selectedTab.parents('.features_public_content_container');
var allTabs = featureGroup.find('.feature_tab');
var allContent = featureGroup.find('.feature_box');
// get the rel attribute to know what box we need to activate
var rel = $(this).attr('rel');
// clear tab selections
allTabs.removeClass('selected');
selectedTab.addClass('selected');
// make all boxes "in-active"
$('.feature_box').each(function() {
$(this).removeClass('active');
});
//show what we need
$('.feature_box.feature_category_'+rel).addClass('active');
// find correlated content
var idx = selectedTab.index();
var selectedContent = $(allContent);
selectedContent.removeClass('in-active');
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1000);
return false;
});
});
});
.hidden {
display:block;
color: blue;
}
.features_page {
margin-top:65px;
position: relative;
}
.features_public_content_container {
width:100%;
height: 100% !important;
position: relative;
max-width:1200px;
margin-left:auto;
margin-right:auto;
font-size:12px;
padding:0 40px
}
#left_sidebar {
height: 100% !important;
width: 20%;
border: 4px solid green !important;
position: absolute;
float: left
}
#right {
border: 4px solid pink !important;
height: auto;
max-width:80%;
top: 0;
right: 0;
float: right;
position: relative;
}
.features_page .sidebar_nav_container {
margin:45px auto;
background: yellow;
position: relative;
float: left
}
.features_page .sidebar_nav_container .feature_tab {
float:none;
width:100%;
color:#1193f6 !important;
text-align: left;
line-height:40px;
height:40px;
padding-left: 24px;
font-size:12px;
border-left:1px solid #efefef !important;
text-transform:uppercase;
font-weight:500;
overflow:hidden;
cursor:pointer;
position:relative
}
.features_page .sidebar_nav_container .feature_tab .indicator {
position:absolute;
width:100%;
height: 100%;
display:none;
bottom:0;
left: 0
}
.features_page .sidebar_nav_container .feature_tab:hover .indicator {
display:block;
border-left:4px solid #d6ecfd
}
.features_page .sidebar_nav_container .feature_tab.selected .indicator {
display:block;
border-left:4px solid #1193f6;
}
.features_page .feature_boxes_container {
padding-bottom:80px;
padding-top:45px;
text-align: center;
background: #f2f2f2;
}
.features_page .feature_boxes_container .feature_box {
background:#fff;
display:inline-block;
height:210px;
width:235px;
margin:12px;
padding: 24px;
text-align:center;
vertical-align:top;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-ms-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-o-box-shadow:0 1px 3px rgba(0,0,0,0.12);
box-shadow:0 1px 3px rgba(0,0,0,0.12)
}
.features_page .feature_boxes_container .feature_box.active {
border: 2px solid #1193f6;
}
.features_page .feature_boxes_container .feature_box .feature_overview_icon {
padding: 18px
}
.features_page .feature_boxes_container .feature_box.active .feature_overview_icon {
color: #1193f6;
}
.features_page .feature_boxes_container .feature_box.in-active .feature_overview_icon {
color: #363636;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body id='public_layout' class='with_header'>
<div class="layout_wrapper">
<div class="features_page">
<div class="container features_public_content_container">
<div class="col span_2" id="left_sidebar">
<div class="sidebar_nav_container">
<div class="feature_tab indicator feature_category_A selected" rel="A">Features A</div>
<div class="feature_tab indicator feature_category_B" rel="B">Features B</div>
<div class="feature_tab indicator feature_category_C" rel="C">Features C</div>
<div class="feature_tab indicator feature_category_D" rel="D">Features D</div>
<div class="feature_tab indicator feature_category_E" rel="E">Features E</div>
</div>
</div> <!-- / sidebar navigation -->
<div class="col span_10" id="right">
<div class="feature_boxes_container">
<div id="A"> <!-- START A Features -->
<div class="feature_box feature_category_A active">Feature A-1</div>
<div class="feature_box feature_category_A active">Feature A-2</div>
<div class="feature_box feature_category_A active">Feature A-3</div>
</div>
<div id="B"> <!-- START B Features -->
<div class="feature_box feature_category_B in-active">Feature B-1</div>
<div class="feature_box feature_category_B in-active">Feature B-2</div>
<div class="feature_box feature_category_B in-active">Feature B-3</div>
</div>
<div id="C"> <!-- START C Features -->
<div class="feature_box feature_category_C in-active">Feature C-1</div>
<div class="feature_box feature_category_C in-active">Feature C-2</div>
<div class="feature_box feature_category_C in-active">Feature C-3</div>
</div>
</div> <!-- /.feature_boxes_container -->
</div> <!-- /.col .span_10 -->
</div> <!-- /.public_content_container -->
</div> <!-- /.features_page -->
</div> <!-- /.layout_wrapper -->
</body>
</html>

Probably you want this:
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
JSFiddle
Please also see these questions:
Simple jQuery scroll to anchor up or down the page...?
Smooth scrolling when clicking an anchor link
And also you can use plugin to do this. like FullPage

How to give opacity for div when it is set Overflow=visible

I have 1 div and 1 image tag , one upon the other. Div is smaller than image.
I have set overflow=visible for div. My question is that, when I insert an image to image tag, the content which is overflowed through div should be opacity=0.5 like this.
for me it shows like this.. any help
<div style="border-style: solid; border-width: 2px; height: 5cm; width: 8cm;top: 20px; left: 20px; position: relative; overflow: visible;" id="divimg">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" style="height: 7cm; width: 10cm;" />
</div>

If you can change HTML to something like this:
<div id="holder">
<div id="overlay">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" />
</div>
<div id="box"></box>
</div>
CSS:
#holder {
width:500px;
height:250px;
position:relative;
overflow:hidden;
}
#overlay {
width:500px;
height:250px;
opacity:0.5;
}
#displayimg {
width:500px;
height:250px;
}
#box {
width:250px;
height:100px;
background-color:black;
position:absolute;
left:200px;
top:70px;
overflow:hidden;
}
#box #ima {
position:absolute;
width:500px;
height:250px;
display:block;
}
And little JQuery magic:
$('#box').append('<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="ima" /> ');
$('#ima').offset($('#holder').offset());
$( "#box" ).draggable();
$( "#box" ).draggable({
drag: function() {
$('#ima').offset($('#holder').offset());
}
});
Since you have mentioned dragging, i have imported JQuery UI in fiddle:
http://jsfiddle.net/y3c41d10/1/
For resizing, you will have to do some calculations, but it is doable, i hope...

Here is the demo for your requirement.
.outter_div{width:400px; height: 200px;position: relative;}
.outter_div:after{content:"";border:50px solid rgba(255,255,255,0.5);position: absolute; top: 0;width: 300px;height: 100px;}
img{width: 100%;position:}
<div class="outter_div">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/>
</div>
JSFiddle demo

This is what I came up with:
<div class="container">
<div class="main">
<div class="sub">This is a text</div>
</div>
</div>
.main {
background-image:url(http://lorempixel.com/g/200/200/);
position: relative;
}
.container {
width:300px;
height:300px;
}
.sub {
text-align: center;
padding:15px;
border: solid 30px rgba(255, 255, 255, 0.5);
color:white;
}
Here is the JSFiddle demo

css style for div tag

I want to display the button in div tag on right side.I use the code which I used to display the div content on right side.Now I have a problem that my div tag display on left side.
I want to display login div tag on right side.
I created a layout.I want to display login div tag where I marked as red and named it btn div.I marked current display of div tag in blue color.
CSS
.login {
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
http://jsfiddle.net/mount/q4gxv7y2/

You can use an absolute position for your login div. For that, you also have to set the header position as relative, in order to make position the login div relatively to it.
Position absolute but relative to parent
.header{
position:relative;
background:red;
width:100%;
height:100px;
margin-bottom:300px
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
width:40%;
position:absolute;
right:0;
bottom:0;
background:blue;
}
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>

html:
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">
<input type='button' value='right click' class='right-button'>
</div>
</div>
css:
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
border: 1px red solid;
height: 100%;
position:relative;
}
.header{
width: 100%;
height: 100px;
border: 1px green solid;
}
.right-button{
position:absolute;
bottom:0;
right:0;
}
Jsfiddle Demo

You can use something like this:
CSS
.login {
margin:0 auto;
padding:0
text-align:right;
float:right;
width:40%;
}
.ribbon{
float:left;
}
.logo{
float:left;
}
.header {
width:100%;
height:auto; // or specify the max height of content
outline:none
position:relative;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>

Use position:absolute to achieve this.
HTML
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
CSS
.header {
width:100%;
height:40px;
outline:1px solid green;
position:relative;
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
outline:1px solid red;
position:absolute;
right:0;
bottom:0;
}
JSFiddle demo
Side note: Keep in mind that class is only used for objects placed more than once on a page. If an object is only placed once on the page, in your case for example: header, logo, then you should use id instead of class. Biggest reason for this is because id's have a higher specificity score compared to classes. So you can give styles to all objects more controlled.

Something like:
.header {
position: relative;
}
. login {
position: absolute;
bottom: 0;
right: 0;
}