Develop Reference

How to change the media query for the child element based on the device selection in parent element in React

I have created few React Components which has a set of styles that has been applied for the Desktop, Tablet and Mobile view which works fine.
Now i have created another Component which will show the created components to see how it looks in Desktop, Tablet and Mobile view.
Here is the implementation of the code
<div className={cx('responsive__outercontainer')}>
<div className={cx(`responsive__innercontainer-${value}`)}>
<StatisticsComponent />
</div>
</div>
Here the ${value} is based on the dropdown value selection (Desktop, Tablet, Mobile)
CSS:
.responsive__outercontainer {
min-height: 300px;
background-color: $color-concrete;
padding: rem(94px) rem(72px);
}
.responsive__innercontainer-Desktop {
width: 100%;
height: 100%;
}
.responsive__innercontainer-Tablet {
width: 768px;
height: 100%;
margin: auto;
}
.responsive__innercontainer-Mobile {
width: 320px;
height: 100%;
margin: auto;
}
Statistics Component css
.statistics__container {
display: flex;
flex-wrap: wrap;
#include respond-above(sm) {
column-gap: rem(24px);
}
#include respond-above(md) {
column-gap: rem(32px);
}
}
.statistics__item {
#include respond-below(sm) {
width: 100vw;
}
#include respond-above(sm) {
max-width: calc(1 / 2 * 100% - (1 - 1 / 2) * 24px);
flex-grow: 1;
flex-basis: calc(1 / 2 * 100% - (1 - 1 / 2) * 24px);
}
#include respond-above(md) {
max-width: calc(1 / 2 * 100% - (1 - 1 / 2) * 32px);
flex-grow: 1;
flex-basis: calc(1 / 2 * 100% - (1 - 1 / 2) * 32px);
}
word-break: break-word;
}
.statistics__innercontainer {
border-top: 1px solid $color-black;
#include respond-below(sm) {
padding: rem(24px) rem(24px) rem(40px) rem(24px);
}
#include respond-above(sm) {
padding: rem(24px) rem(24px) rem(48px) rem(24px);
}
}
.statistics__title {
font-size: rem(12px);
line-height: rem(16px);
color: $charcoal;
margin-bottom: rem(8px);
font-weight: $font-weight-bold;
}
.statistics__stat {
font-size: rem(57px);
line-height: rem(66px);
color: $red;
margin-bottom: rem(8px);
font-weight: $font-weight-light;
}
.statistics__description {
font-size: rem(16px);
line-height: rem(24px);
font-weight: $font-weight-norm;
margin-bottom: rem(24px);
}
.statistics__disclaimer {
font-size: rem(12px);
line-height: rem(16px);
color: $charcoal;
font-weight: $font-weight-norm;
#include respond-above(sm) {
margin-bottom: rem(24px);
}
}
.statistics__chevron-link .statistics__link-title {
font-size: rem(12px);
line-height: rem(16px);
color: $charcoal;
font-weight: $font-weight-norm;
#include respond-above(sm) {
margin-bottom: rem(24px);
}
}
Now when i run the application it works fine but when i change the device size to Mobile the media query remains the same (Desktop) which doesn't show the mobile view rather it shows the Desktop view since the Mediaquery for Desktop is enabled.
Desktop view
Mobile view
But the exact mobile view which needs to be show is the following which we can get when we resize the screen.
Correct View
I am aware that the media query is for the page and not for the element but i am not sure how to achieve a view similar like the Chrome Device Toolbar
It would be great if someone could tell me on how to achieve similar like Chrome Device Toolbar or if there is any better approach which i can follow up. I can't make changes in the styles of the children because it works in isolated way as well.

Using Display:flex & Flex-Wrap to wrap items when screen size if reduced.
body {
margin: 0;
}
.parent {
background-color: gray;
width: auto;
height: auto;
padding: 1rem;
display: flex;
flex-wrap: wrap; /*it will wrap automatically when there is no space*/
justify-content: flex-start; /*items will be placed from the start (left=====>right*/
align-items: center; /*items will be centered within top to bottom */
gap: 10px;
}
.child {
width: 40%; /*Big Devices Child Will take 40% width each to fit 2 children in a row*/
padding: 1rem;
outline: 1px solid red;
}
#media only screen and (max-width: 771px) {
.child {
width: 90%; /*Smaller Devices Child Will take 90% width*/
padding: 1rem;
outline: 1px solid red;
}
}
<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet</p>
<h1>$100M</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis elit venenatis mauris luctus lobortis. Nullam iaculis leo a mauris interdum, id vulputate ante viverra. .</p>
</div>
<div class="child">
<p>Lorem ipsum dolor sit amet</p>
<h1>USD 750Bn</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis elit venenatis mauris luctus lobortis. Nullam iaculis leo a mauris interdum, id vulputate ante viverra. .</p>
</div>
<div class="child">
<p>Lorem ipsum dolor sit amet</p>
<h1>GBP $23,000</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis elit venenatis mauris luctus lobortis. Nullam iaculis leo a mauris interdum, id vulputate ante viverra. .</p>
</div>
</div>

how to ignore parent css opacity which is dynamic and forcefully applying on child span [duplicate]

I do not want to inherit the child opacity from the parent in CSS.
I have one div which is the parent, and I have another div inside the first div which is the child.
I want to set the opacity property in the parent div, but I don't want the child div to inherit the opacity property.
How can I do that?

Instead of using opacity, set a background-color with rgba, where 'a' is the level of transparency.
So instead of:
background-color: rgb(0,0,255); opacity: 0.5;
use
background-color: rgba(0,0,255,0.5);

Opacity is not actually inherited in CSS. It's a post-rendering group transform. In other words, if a <div> has opacity set you render the div and all its kids into a temporary buffer, and then composite that whole buffer into the page with the given opacity setting.
What exactly you want to do here depends on the exact rendering you're looking for, which is not clear from the question.

A little trick if your parent is transparent and you would like your child to be the same, but defined exclusively (e.g. to overwrite the user agent styles of a select dropdown):
.parent {
background-color: rgba(0,0,0,0.5);
}
.child {
background-color: rgba(128,128,128,0);
}

As others have mentioned in this and other similar threads, the best way to avoid this problem is to use RGBA/HSLA or else use a transparent PNG.
But, if you want a ridiculous solution, similar to the one linked in another answer in this thread (which is also my website), here's a brand new script I wrote that fixes this problem automatically, called thatsNotYoChild.js:
http://www.impressivewebs.com/fixing-parent-child-opacity/
Basically it uses JavaScript to remove all children from the parent div, then reposition the child elements back to where they should be without actually being children of that element anymore.
To me, this should be a last resort, but I thought it would be fun to write something that did this, if anyone wants to do this.

Opacity of child element is inherited from the parent element.
But we can use the css position property to accomplish our achievement.
The text container div can be put outside of the parent div but with absolute positioning projecting the desired effect.
Ideal Requirement------------------>>>>>>>>>>>>
HTML
<div class="container">
<div class="bar">
<div class="text">The text opacity is inherited from the parent div </div>
</div>
</div>
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
}
Output:--
the Text is not visible because inheriting opacity from parent div.
Solution ------------------->>>>>>
HTML
<div class="container">
<div class="text">Opacity is not inherited from parent div "bar"</div>
<div class="bar"></div>
</div>
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
z-index:3;
position:absolute;
top:0;
left:0;
}
Output :
the Text is visible with same color as of background because the div is not in the transparent div

The question didn't defined if the background is a color or an image but since #Blowski have already answered for coloured backgrounds, there's a hack for images below:
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');
This way you can manipulate the color of your opacity and even add nice gradient effects.
.wrapper {
width: 630px;
height: 420px;
display: table;
background: linear-gradient(
rgba(0,0,0,.8),
rgba(0,0,0,.8)),
url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}
<div class="wrapper">
<h1>Question 5770341</h1>
</div>

There is no one size fits-all approach, but one thing that I found particularly helpful is setting opacity for a div's direct children, except for the one that you want to keep fully visible. In code:
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
and css:
div.parent > div:not(.child1){
opacity: 0.5;
}
In case you have background colors/images on the parent you fix color opacity with rgba and background-image by applying alpha filters

Answers above seems to complicated for me, so I wrote this:
#kb-mask-overlay {
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 10000;
top: 0;
left: 0;
position: fixed;
content: "";
}
#kb-mask-overlay > .pop-up {
width: 800px;
height: 150px;
background-color: dimgray;
margin-top: 30px;
margin-left: 30px;
}
span {
color: white;
}
<div id="kb-mask-overlay">
<div class="pop-up">
<span>Content of no opacity children</span>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.
Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu.
</p>
</div>
kb-mask-overlay it's your (opacity) parent, pop-up it's your (no opacity) children. Everything below it's rest of your site.

It seems that display: block elements do not inherit opacity from display: inline parents.
Codepen example
Maybe because it's invalid markup and the browser is secretly separating them? Because source doesn't show that happening. Am I missing something?

Below worked for me:
Changed
From:
opacity: 0.52;
background-color: #7c7c7c;
To:
opacity: 1 !important;
background-color: rgba(124, 124, 124, 0.52) !important;
To convert the hex & opacity to rgba,
use a website like http://hex2rgba.devoth.com/

<!--Background opacity-->
<style>
.container1 {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, .5);
margin-bottom: 50px;
}
</style>
<div class="container1">
<div class="box1">Text</div>
</div>
<!--Before, after, z-index opacity-->
<style>
.container2 {
width: 200px;
height: 200px;
position: relative;
margin-bottom: 100px;
}
.container2:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
opacity: .5;
z-index: 1;
}
.box2 {
position: relative;
z-index: 2;
}
</style>
<div class="container2">
<div class="box2">Text</div>
</div>
<!--Outline opacity-->
<style>
.container3 {
width: 200px;
height: 200px;
outline: 50px solid rgba(0, 0, 0, .5);
margin: 50px;
}
.box3 {
position: relative;
left: -16px;
}
</style>
<div class="container3">
<div class="box3">Text</div>
</div>

I also faced the same issues, after doing some googling I found some solutions ( 3-ways ) of this problem.
I am sharing the solutions here, you can try any of these.
Option-1:
Use a pseudo markup element before or after as the background
.parentContainer {
position: relative;
}
.parentContainer:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
opacity: 0.6;
}
.childContent {
position: relative;
color: red;
z-index: 1;
}
Option-2:
Use rgba colors with alpha value instead of opacity.
<div id="parentContainer" style="background: rgba(255,255,255,0.6);">
<div id="childContent">
Content ...
</div>
</div>
Option-3:
Use background div with absolute position one element over another.
<div class="parentContainer">
<div class="childContent">
Here is the content.
</div>
<div class="background"></div>
</div>
.parentContainer {
position: relative;
}
.childContent {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
opacity: .5;
}

If you have to use an image as the transparent background, you might be able to work around it using a pseudo element:
html
<div class="wrap">
<p>I have 100% opacity</p>
</div>
css
.wrap, .wrap > * {
position: relative;
}
.wrap:before {
content: " ";
opacity: 0.2;
background: url("http://placehold.it/100x100/FF0000") repeat;
position: absolute;
width: 100%;
height: 100%;
}

My answer is not about static parent-child layout, its about animations.
I was doing an svg demo today, and i needed svg to be inside div (because svg is created with parent's div width and height, to animate the path around), and this parent div needed to be invisible during svg path animation (and then this div was supposed to animate opacity from 0 to 1, it's the most important part). And because parent div with opacity: 0 was hiding my svg, i came across this hack with visibility option (child with visibility: visible can be seen inside parent with visibility: hidden):
.main.invisible .test {
visibility: hidden;
}
.main.opacity-zero .test {
opacity: 0;
transition: opacity 0s !important;
}
.test { // parent div
transition: opacity 1s;
}
.test-svg { // child svg
visibility: visible;
}
And then, in js, you removing .invisible class with timeout function, adding .opacity-zero class, trigger layout with something like whatever.style.top; and removing .opacity-zero class.
var $main = $(".main");
setTimeout(function() {
$main.addClass('opacity-zero').removeClass("invisible");
$(".test-svg").hide();
$main.css("top");
$main.removeClass("opacity-zero");
}, 3000);
Better to check this demo http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

I solved this problem by first creating and saving a faded image which I then used in the css background. I used the following python code:
from PLI import Image
bg = Image.open('im1.jpg')
fg = Image.open('im2.jpg')
#blend at ratio .3
Image.blend(bg,fg,.3).save('out.jpg')
Here, im1.jpg was simply a white image of the same dimensions as im2.jpg.

On mac you can use Preview editor to apply opacity to a white rectangle laid over your .png image before you put it in your .css.1) ImageLogo2) Create a rectangle around the imageRectanle around logo3) Change background color to whiterectangle turned white4) Adjust rectangle opacityopaque image

For other people trying to make a table (or something) look focused on one row using opacity. Like #Blowski said use color not opacity. Check out this fiddle: http://jsfiddle.net/2en6o43d/
.table:hover > .row:not(:hover)

Assign opacity 1.0 to the child recursively with:
div > div { opacity: 1.0 }
Example:
div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }
<div style="background-color: #f00; padding:20px;">
<div style="background-color: #0f0; padding:20px;">
<div style="background-color: #00f; padding:20px;">
<div style="background-color: #000; padding:20px; color:#fff">
Example Text - No opacity definition
</div>
</div>
</div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
<div style="opacity:0.5; background-color: #0f0; padding:20px;">
<div style="opacity:0.5; background-color: #00f; padding:20px;">
<div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity inherited
</div>
</div>
</div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
<div class="x" style="background-color: #0f0; padding:20px;">
<div class="x" style="background-color: #00f; padding:20px;">
<div class="x" style="background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity not inherited
</div>
</div>
</div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity
</div>

Unusual shape of a textarea?

Usually textareas are rectangular or square, like this:
But I want a custom-shaped textarea, like this, for example:
How is this possible?

Introduction
First, there are many solutions, proposed in other posts. I think this one is currently (in 2013) the one which can be compatible with the largest number of browsers, because it doesn't need any CSS3 properties. However, the method will not work on browsers which doesn't support contentdeditable, be careful.
Solution with a div contenteditable
As proposed by #Getz, you can use a div with contenteditable and then shape it with some div on it. Here is an example, with two blocks which float at the upper left and the upper right of the main div:
As you can see, you have to play a little with the borders if you want the same result as you requested in your post. The main div has the blue border on every side. Next, red blocks has to be sticked to hide top borders of the main div, and you need to apply border to them only on particular sides (bottom and left for the right block, bottom and right for the left).
After that, you can get the content via Javascript, when the "Submit" button is triggered for example. And I think you can also handle the rest of the CSS (font-size, color, etc.) :)
Full code sample
.block_left {
background-color: red;
height: 70px;
width: 100px;
float: left;
border-right: 2px solid blue;
border-bottom: 2px solid blue;
}
.block_right {
background-color: red;
height: 70px;
width: 100px;
float: right;
border-left: 2px solid blue;
border-bottom: 2px solid blue;
}
.div2 {
background-color: white;
font-size: 1.5em;
border: 2px solid blue;
}
.parent {
height: 300px;
width: 500px;
}
<div class="parent">
<div class="block_left"></div>
<div class="block_right"></div>
<div class="div2" contenteditable="true">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
</div>
</div>

In the near future we can use so called css-shapes to achieve this. A div with the contenteditable attribute set to true combined with css-shapes can make a text area any kind of shape.
Currently Chrome Canary already supports css-shapes. An example what is possible with css-shapes is:
Here they are using a polygon shape to define the text-flow. It should be possible to create two polygons to match the shape you want for your textarea.
More information about css-shapes has been written at: http://sarasoueidan.com/blog/css-shapes/
To enable css-shapes in Chrome Canary:
Copy and paste
chrome://flags/#enable-experimental-web-platform-features into the
address bar, then press enter.
Click the 'Enable' link within that
section.
Click the 'Relaunch Now' button at the bottom of the
browser window.
from: http://html.adobe.com/webplatform/enable/
.container {
overflow: hidden;
shape-inside: polygon(200.67px 198.00px, 35.33px 198.47px, 34.67px 362.47px, 537.00px 362.74px, 535.67px 196.87px, 388.33px 197.00px, 386.67px 53.53px, 201.33px 53.53px);
font-size: 0.8em;
}
/** for red border **/
.container:before {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 190px;
height: 190px;
background-color: white;
border-right: 1px solid red;
border-bottom: 1px solid red;
}
.container:after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 190px;
height: 190px;
background-color: white;
border-left: 1px solid red;
border-bottom: 1px solid red;
}
<div class="container" contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis diam lacus, id lacinia quam interdum quis. Ut vitae dignissim lorem, nec lobortis turpis. Fusce non fringilla nulla, eu blandit urna. Nulla facilisi. Nunc tristique, mauris vitae
tincidunt egestas, eros metus dapibus sapien, quis tincidunt sem dui ac purus. Morbi lobortis, quam sit amet consequat aliquam, elit mi rutrum erat, id tempus turpis turpis et sem. Vivamus tempor mollis porttitor. Sed elementum nisl sit amet sapien
auctor imperdiet. Sed suscipit convallis nisi, in dignissim risus placerat suscipit. Sed vel lorem eu massa vulputate pretium. Nulla eget dolor sed elit gravida condimentum non vel lorem. Vivamus pretium, augue sed aliquet ultricies, neque nibh porttitor
libero, a tristique elit mi eu nibh. Vestibulum erat arcu, condimentum eleifend adipiscing ut, euismod eu libero. In pharetra iaculis lorem, at consectetur nisi faucibus eu.
</div>
Polygon created with: http://betravis.github.io/shape-tools/polygon-drawing/
Result
http://jsfiddle.net/A8cPj/1/

Maybe it's possible with Content Editable ?
It's not a textarea, but if you succeed to create a div with this shape, it could work.
I think it's not possible with just textarea...
A little example: http://jsfiddle.net/qgfP6/5/
<div contenteditable="true">
</div>

You could work with a contenteditable div, with two corners divs:
<div style="border:1px blue solid ; width: 200px; height: 200px;" contenteditable="true">
<div style="float:left; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div>
<div style="float:right; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div>
hello world, hello worldsdf asdf asdf sdf asdf asdf
</div>

You could also do this with CSS Regions
With Regions, you can use CSS properties to flow content into existing
styled containers, specifying any container order you choose,
regardless of their position on the page.
(Web Platform)
[Currently supported in WebKit Nightly, Safari 6.1+ and iOS7 and already usable in chrome and opera after enabling the flag: enable-experimental-web-platform-features - caniuse, Web Platform ]
FIDDLE
So you could make that textarea shape by flowing the text through 2 regions, and edit it by adding contenteditable on the content.
Markup
<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="content" contenteditable>text here</div>
(Relevant) CSS
#content {
-ms-flow-into: article;
-webkit-flow-into: article;
}
.region {
-ms-flow-from: article;
-webkit-flow-from: article;
box-sizing: border-box;
position: absolute;
width: 200px;
height: 200px;
padding: 0 1px;
margin: auto;
left:0;right:0;
border: 2px solid lightBlue;
}
#box-a {
top: 10px;
background: #fff;
z-index: 1;
border-bottom: none;
}
#box-b {
top: 210px;
width: 400px;
overflow: auto;
margin-top: -2px;
}
The result:
For more info about regions - here's a good aricle: CSS3 regions: Rich page layout with HTML and CSS3

A long line of text in the box will drop the cursor down past the middle edges and I can't seem to fix that.
**[Fiddle Diddle][1]**
#wrap {
overflow: hidden;
}
#inner {
height: 350px;
width: 500px;
border: 1px solid blue;
}
#textContent {
word-wrap: break-word;
word-break: break-all;
white-space: pre-line;
}
#left, #right {
height: 50%;
width: 25%;
margin-top: -1px;
padding: 0;
border: 1px solid blue;
border-top-color: white;
margin-bottom: 5px;
}
#right {
margin-left: 5px;
float: right;
margin-right: -1px;
border-right-color: white;
}
#left {
margin-right: 5px;
float: left;
margin-left: -1px;
border-left-color: white;
}
<div id="wrap">
<div id="inner">
<div id="left"></div>
<div id="right"></div>
<span id="textContent" contenteditable>The A B Cs</span>
</div>
</div>
[1]: http://jsfiddle.net/yKSZV/

That's not possible sire! A textarea is generally a rect or square box, where you can type in.
However, to make something like that you can use 2 textarea's and then give them a specified width and height. Otherwise I don't think its gonna happen!
Second method would be to make an editable element.
http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/
The code is:
<div contenteditable="true">
This text can be edited by the user.
</div>
Using this, you can make any element editable! You can give dimensions to it, and it will work! You will get it just as a textarea.
Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

If you combine CSS shapes with contenteditable this can be done in webkit browsers.
First you have to enable the flag: enable-experimental-web-platform-features
Then restart your webkit browser and then check this FIDDLE out !
This method will work for non-standard shapes as well.
Markup
<div class="shape" contenteditable="true">
<p>
Text here
</p>
</div>
CSS
.shape{
-webkit-shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
width: 400px;
height: 400px;
text-align: justify;
margin: 0 auto;
}
So how on earth did I get that polygon shape?
Go to this site and make your own custom shape!
Notes about enabling the flag:
(from here)
To enable Shapes, Regions, and Blend Modes:
Copy and paste
chrome://flags/#enable-experimental-web-platform-features into the
address bar, then press enter. Click the 'Enable' link within that
section.
Click the 'Relaunch Now' button at the bottom of the browser
window.

You can use Google web designer tool for creating complex shapes using HTML5-canvas and CSS.
More over you will get other tools like typing tools to enter texts inside these shapes.
As the output file contains much code, providing a fiddle of a sample demo created using Google Web Designer tool
FIDDLE DEMO>>

If, for whatever reason, you really need to support browsers that don't have contenteditable, you could probably do the same thing in JavaScript, by using events, although this is a very messy workaround.
Pseudocode:
focused=false;
when user clicks the div
{
focused=true;
}
when user clicks outside the div
{
focused=false;
}
when user presses a key
{
if (focused)
{
add character of key to div.innerHTML;
}
}

Using cssPIE for js tab content in IE8 not rendering

I've created a tab and tab content animation. When the tab is clicked, the corresponding tab content is displayed underneath and the others are hidden, easy enough and works fine. The problem I'm having is with the rendering of the border-radius in IE7 and 8. I am using cssPIE.htc for any css that may be effected by these css3 properties. This is working for static content on the page that is not being manipulated with jQuery, but for dynamic content such as the tabs, I believe the css for content needs the -pie-watch-ancestors: n attribute. After doing so, still no results. Below is my code(CSS, HTML, and jQuery) and a screen shot of the difference between chrome and IE8. Any help would be great.
UPDATE: I may be able to fix this by having the tab content left, off the page, then placing the active one back to left: 0, so that it is always displayed and never re-rendered. **IN THE MEANTIME, here is the fiddle, go nuts: tab fiddle
Chrome Screenshot
IE8 broken Screenshot
As you may notice: no border, no background, and no background image(small colored boxes).
CSS affiliated with tab content
.tabContent {
position:absolute;
display:none;
background-color:White;
background-image: url(/includes/images/home_phase2/colored_boxes_small.png);
background-repeat: no-repeat;
background-position: 98% 90%;
border-left:1px solid #772981;
border-right:1px solid #772981;
border-bottom:1px solid #772981;
width:945px;
margin-top:1px;
margin-left:-1px;
z-index:9999;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
behavior: url("/includes/css/PIE.htc");
-pie-watch-ancestors: true;
}
.roundedCorners {
border-radius:7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
behavior: url("/includes/css/PIE.htc");
}
jQuery(document.load expected)
$('.tabContent').click(function (event) {
event.stopPropagation();
});
tabLnk.each(function () {
$(this).attr("href", "javascript: void(0)")
});
tabLnk.click(function (event) {
event.stopPropagation();
var $this = $(this);
var hideActive = $('.active').parent().index();
if ($this.hasClass('active')) {
$this.removeClass('active');
$('.tabContent_wrapper .tabContent:eq(' + hideActive + ')').hide();
} else {
$('.tabLnk').removeClass('active');
$this.addClass('active');
var showActive = $('.active').parent().index();
$('.tabContent_wrapper').show();
var activeContent = $('.tabContent_wrapper .tabContent:eq(' + showActive + ')');
activeContent.show();
activeContent.siblings().hide();
}
if ($('.tab_wrapper li a').slice(1, 3).hasClass('active')) {
$('.tabContent').slice(1, 3).addClass('borderTopLeftTabContent');
}
});

Try adding
position: relative
to
.roundCorners {}
Sounds funny, but had the same issue, may help.
EDIT:
Same may apply to:
.tabContent {}

OK, after long tries, I managed to do that. Finally I solved it with rounding the corners of tabContent_wrapper.
Here's what I did as a short summary:
removed roundedCorners from every tabContent divs, added to tabContent_wrapper
added clearfix class to all the tabContent divs, defining clearfix class in the CSS code
added PIE.htc to roundedCorners
added some padding to roundedCorners because of the CSS3PIE corners...
added position:relative; z-index:10; to roundedCorners
commented out tabContent's position:absolute;
hid tabContent_wrapper, because there's a 2px padding, which looks ugly when displaying no content in it
deleted the comment sign in front of $('.tabContent_wrapper').show();, it's needed now; put in $('.tabContent_wrapper').hide(); when we click on the active tab again (not to let the ugly empty content show up with a border)
Here is the full code (post-formatted with http://jsbeautifier.org/):
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Tabs...</title>
<style>
.roundedCorners {
padding:2px;
border-radius:7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
/* New stuffs */
behavior: url(PIE.htc);
position:relative;
z-index:10;
}
.tabHome_wrapper {
margin-bottom:-1px;
}
.tab_wrapper {
position:relative;
height:25px;
margin-left:-1px;
}
.tab_wrapper ul li {
display:inline-block;
padding-right:20px;
overflow:hidden;
width:132px;
height:25px;
}
.tab_wrapper ul > li:first-child a {
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomleft: 7px;
border-radius: 0 0 0 7px;
}
.tabLnk {
position:absolute;
background-image:url('http://i.imgur.com/PkR4W.png');
background-position: -132px 1px;
background-repeat:no-repeat;
width:132px;
height:25px;
margin-top:1px;
z-index:9999;
font-size: 15px;
text-align: center;
line-height: 25px;
color: White !important;
text-decoration: none;
}
.borderTopLeftTabContent {
border-radius: 7px 7px 7px 7px !important;
}
.tabLnk.active {
width:130px;
background-position:-1px 1px;
-webkit-border-bottom-left-radius: 0px !important;
-moz-border-radius-bottomleft: 0px !important;
border-bottom-left-radius: 0px !important;
color: #833889 !important;
}
.tabLnk:hover, .tabLnk:focus {
text-decoration: none;
}
.tabLnk:visited {
color: White;
}
.hideContent {
left:-99999px;
}
.tabContent_wrapper {
/* new stuffs */
width:945px;
margin-top:1px;
margin-left:-1px;
border:1px solid #772981;
/*
border-top:0px;
*/
/* hide it first because of the 2 pixel roundedCorner padding */
display:none;
}
.tabContent {
/*
position:absolute;
*/
display:none;
background-color:White;
background-image: url('http://i.imgur.com/yyhGR.png');
background-repeat: no-repeat;
background-position: 98% 90%;
/* moved to tabContent_wrapper, this z-index is not needed now */
/*
border-left:1px solid #772981;
border-right:1px solid #772981;
border-bottom:1px solid #772981;
width:945px;
margin-top:1px;
margin-left:-1px;
z-index:9999;
*/
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
}
.tabContent_img {
float: left;
width:290px;
height:155px;
padding: 20px 20px 10px 15px;
}
.tabContent_description {
padding: 32px 140px 20px 0px;
width:450px;
float:right;
font-size: 14px;
color: gray;
}
.tabContent_description p:first-child {
padding-bottom: 10px;
}
.lblTabTxt {
color: white;
padding-left: 3px;
top: 5px;
position: relative;
}
.lblTabTxt:hover {
text-decoration: none;
}
/* Pete... clearfix from Drupal */
/**
* Markup free clearing.
*
* #see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
*/
.clearfix:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .clearfix {
height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
min-height: 1%;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var tabLnk = $('.tabLnk');
$('.tabContent').click(function (event) {
event.stopPropagation();
});
tabLnk.each(function () {
$(this).attr("href", "javascript: void(0)")
});
tabLnk.click(function (event) {
event.stopPropagation();
var $this = $(this);
var hideActive = $('.active').parent().index();
if ($this.hasClass('active')) {
$this.removeClass('active');
$('.tabContent_wrapper .tabContent:eq(' + hideActive + ')').hide();
// hide tabContent_wrapper too (when empty, it would look ugly because of the 2px padding)
$('.tabContent_wrapper').hide();
} else {
$('.tabLnk').removeClass('active');
$this.addClass('active');
var showActive = $('.active').parent().index();
$('.tabContent_wrapper').show();
var activeContent = $('.tabContent_wrapper .tabContent:eq(' + showActive + ')');
activeContent.show();
activeContent.siblings().hide();
}
if ($('.tab_wrapper li a').slice(1, 3).hasClass('active')) {
$('.tabContent').slice(1, 3).addClass('borderTopLeftTabContent');
}
});
});
</script>
</head>
<body>
<div id="ctl00_cphBody_pnltabWrapper" class="tabHome_wrapper">
<div id="tabArea" class="tab_wrapper">
<ul>
<li> <a class="tabLnk" href="javascript: void(0)">
Administrators
</a>
</li>
<li> <a class="tabLnk" href="javascript: void(0)">
Teachers
</a>
</li>
<li> <a class="tabLnk" href="javascript: void(0)">
Technologists
</a>
</li>
</ul>
</div>
<div id="tabContentArea" class="tabContent_wrapper roundedCorners">
<div class="tabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p> <strong><span style="COLOR: #4b0082">Administrators</span> </strong></p>
<p>a aliquet dolor gravida. Sed auctor imperdiet lacus vel vulputate.venenatis
mauris, a dignissim elit fringilla ac. Quisque malesuada dapibus venenatis.
Aliquam volutpat ante id diam auctor eu volutpat massa sem et augue. Vestibulum
tortor lacus, venenatis sed ultricies ac, porta et ligula. Duis consectetur
Mauris fringilla massa ac sem tristique consectetur. Aliquam varius, lacus
vel sollicitudin congue, elit erat luctus mauris, Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Quisque posuere nunc lacinia diam ornare
a ullamcorper nulla egestas.</p>
</div>
</div>
<div class="tabContent borderTopLeftTabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p><strong><span style="COLOR: #4b0082">Teachers</span></strong></p>
<p>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT</p>
</div>
</div>
<div class="tabContent borderTopLeftTabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p> <strong><span style="COLOR: #4b0082">Technologists </span></strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada,
nulla eu viverra iaculis, nibh ipsum rhoncus risus, sit amet porta sapien
elit id turpis. Donec eu nibh diam. Ut placerat vulputate ligula, ut mattis
odio adipiscing id. Nullam vel arcu est. Praesent vitae porta metus. Cras
auctor sem non nisi aliquet ultricies. Suspendisse potenti. Curabitur gravida
eleifend aliquam. Fusce consequat cursus eros sit amet hendrerit. Curabitur
quam nibh, auctor id dictum non, dapibus sit amet libero.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Some screenshots:
by default, no tabs opened:
1st tab opened:
2nd tab opened:
3rd tab opened:
Of course, you'll have to manipulate the upper border not to show the border under the active tab.
Let me know if this helped.

jquery - setting dynamic equal height of a floated div

I have 2 div containers, one navigation on the left, one content right to that:
#leftnav_static
{
padding:5px;
margin-top: 5px;
margin-left: 5px;
height: 1000px;
width: 195px;
font-size: 1.35em;
float:left;
background-image: url('pagenav.jpg');
}
#content_dynamic
{
margin-top: 5px;
margin-left: 215px;
height: auto;
width: 700px;
padding: 5px;
background-image: url('pagenav.jpg');
font-size: 1em;
line-height:1.6em;
white-space:nowrap;
}
Now I want to set leftnav to the same height as content (no faux columns if possible):
$('#leftnav_static').height($("#content_dynamic").height());
or
$('#leftnav_static').innerHeight($("#content_dynamic").innerHeight());
dont seem to work.
any suggestions as to why that is?

It does work. See this jsfiddle.
Are you running the code in a jQuery ready block? Also, if you want to maintain this height relationship through text size changes from browser 'zooms', you will need to respond to resize events. If at some point you make your content_dynamic div have a width of auto, you will also need to resize the sidebar div when the height of the content_dynamic div changes (again, by responding to a resize event).
jQuery only allows you to attach to a resize event at the window level, but there are plugins that ease translating that to a div level resize event.
HTML:
<div id="leftnav_static"></div>
<div id="content_dynamic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Etiam iaculis ornare
sapien sit amet condimentum. Aliquam a diam vel eros
tristique fermentum vitae at turpis. Etiam fringilla,
enim nec viverra interdum, metus tortor vehicula mauris,
in luctus felis massa ut nulla. Proin et leo vel nunc ornare
pulvinar. Vestibulum quis lectus vel arcu tristique aliquet.
Fusce malesuada nisi non ante egestas semper.
</div>
CSS:
#leftnav_static {
padding:5px;
margin-top: 5px;
margin-left: 5px;
height: 1000px;
width: 195px;
font-size: 1.35em;
float:left;
background-color: blue;
}
#content_dynamic {
margin-top: 5px;
margin-left: 215px;
height: auto;
width: 700px;
padding: 5px;
background-color: red;
font-size: 1em;
line-height:1.6em;
//white-space:nowrap; //This makes the content div only one line,
//I commented this out to make the sizing clear.
}
JavaScript: (Assuming that the jQuery library is already loaded)
$(function() {
$('#leftnav_static').height($("#content_dynamic").height());
});
Note: The benefit of a faux columns or other pure CSS approaches is that you don't need to worry about zooming or resizes as much--and your site would work for people that have JavaScript turned off.

You have to understand that you are manipulating CSS attributes.
var myHeight = $("#content_dynamic").css("height");
$('#leftnav_static').css({"height": myHeight});
should do the trick.

Add display block to #leftnav_static
#leftnav_static
{
display: block;
}
...and this will work
$(document).ready(function() {
$('#leftnav_static').height( $('#content_dynamic').height() );
});
See my example; http://jsfiddle.net/D3gTy/