We Keep Coding

Hide content behind an image

I'm trying a small code that has a div with image as a background and there is some text in it.
Here the case is when the user clicks on the div, the background should become white(and it is working perfectly). But Initially, the text that is present should be behind the Image. More like a foreground image.
Here is a working fiddle. https://jsfiddle.net/rj0h1g16/
please let me know where am I going wrong and how can I fix this.
Thanks

You could do this by initially setting the text opacity to 0 and changing its color to black with the same click event
function remove_image() {
document.getElementById("myClass").style.background = "white";
document.getElementById("myClass").style.color = "black";
}
.myClass {
background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
height: 100px;
width: 100px;
color: rgba(0, 0, 0, 0);
}
<div class="myClass" id="myClass" onclick="remove_image()">
This is texr
</div>

You could simply set the display style on the text from "none" to anything else as you click.
<div class="myClass" id="myClass" onclick="remove_image()">
<div class="myText" id="myText"> This is texr</div>
</div>
function remove_image() {
document.getElementById("myClass").style.background = "white";
document.getElementById("myText").style.display = "inline";
}
.myClass {
background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
height: 100px;
width: 100px
}
.myText {
display: none;
}
See here: https://jsfiddle.net/hg748zk7/

I want the text behind the image
You can use the z-index property for that. But the text will need to be wrapped in a new element.
In the example I've used js to add a class with the new properties you want.
function remove_image() {
document.getElementById("myClass").classList.add('active');
}
.myClass {
background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
height: 100px;
width: 100px
}
.myClass.active {
background: white;
}
span {
z-index: -1;
position: relative;
}
.myClass.active span {
z-index: 1;
}
<div class="myClass" id="myClass" onclick="remove_image()">
<span>This is text</span>
</div>

function remove_image() {
document.getElementById("myClass").style.background = "white";
document.getElementsByTagName('span')[0].style.display = 'block'
}
.myClass {
background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
height: 100px;
width: 100px;
}
<div class="myClass" id="myClass" onclick="remove_image()">
<span style='display:none;'>This is texr </span>
</div>

i would like hover one element to affect other elements css

added a hover state on my main box element, i want it to turn grey and the text within to turn white
this is the main element: .blogcont
There are 2 other elements within it which are a h4 and another text div :.listing
i would like to change the font color of the h4 and the other div to white upon hover state on .blogcont

Hope this helps!
.blogcont {
width: 300px;
height: 300px;
background: red;
color: black
}
.blogcont:hover {
background: grey;
}
.blogcont:hover h4,
.blogcont:hover .listing {
color: white
}
<div class="blogcont">
<h4>hellooo</h4>
<div class="listing">listingggg</div>
</div>

Automatically resizing div

This is another of the infinite questions about how to get div sizing to behave, but conversely I haven't been able to find a sufficiently similar question to get my particular case working.
function update() {
$('#container .body-text').bigText({verticalAlign:'top',whiteSpace:'pre'});
}
function doresize(form) {
var container = $('#container')[0];
container.style.height = form.height.value + 'px';
setTimeout(500, update);
}
function dotext(form) {
$('#container .body-text').text(form.text.value);
update();
}
update();
.container {
float: left;
border: solid 1px black;
position: relative;
margin-left: 5px;
width: 20%;
height: 200px;
padding: 2px;
}
.header {
width: 100%;
height: 64px;
background-color: blue;
}
.body {
width: 100%;
height: 100%;
max-height: calc(100% - 64px);
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgithub.com/DanielHoffmann/jquery-bigtext/master/jquery-bigtext.js"></script>
<form name="setup">
<label>Set height: <input type="number" name="height" value="200" /></label>
<button type="button" onclick="doresize(this.form)">Resize</button><br />
<label>Set text: <textarea name="text">Multi-Line
Text</textarea></label>
<button type="button" onclick="dotext(this.form)">Change</button><br />
</form>
<br />
<div id="container" class="container" onload="update()">
<div class="header"></div>
<div class="body"><div class="body-text">Multi-Line
Text</div></div>
</div>
The above snippet shows a fairly basic layout with a container div with a width and height that are controlled by outside forces. (In the real code this is controlled by the browser window resizing, but I've put in a basic form height adjustment here for demonstration purposes.)
What I'm trying to achieve with this is the following:
Both internal divs fill to 100% width of their parent.
The top (blue) div has a fixed height.
The bottom (green) div will use the remaining space in the parent by default.
However, after a bit of existing JS code resizes the font size of the text to best-fit this space (both width and height)...
If the container is tall enough and the text is short enough that there's extra space below, then the green div should vertically shrink to fit its text and both the blue and green divs should then appear vertically centred in the container div.
If the container size or the text changes, repeat the process of fitting the text and recentering.
I know how to do most of the pieces individually, I'm just not sure how to put it all together, and whether step 5 is possible with CSS or whether it requires JS. (I've tried adding the vertical centering with CSS via the absolute-translate-50% trick, which works great at tall container sizes or text that is wider than it is tall, but not the other way around -- the text overflows the green div because the height is not fixed so can't be taken into account by the font sizing script.)
I'm ok with rearranging or inserting additional divs if this is required.
EDIT: the following snippet inspired by Shadi's answer seems to do the trick:
function update() {
var text = $('#container .body-text');
text.parent().parent().css('height', '100%');
text.parent().css('height', '100%');
text.bigText({verticalAlign:'top',whiteSpace:'pre'});
text.parent().css('height', text.height());
text.parent().parent().css('height', text.height() + 64);
}
function doresize(form) {
$('#container').css('height', form.height.value);
update();
}
function dotext(form) {
$('#container .body-text').text(form.text.value);
update();
}
update();
.container {
float: left;
border: solid 1px black;
margin-left: 5px;
width: 20%;
height: 200px;
padding: 2px;
}
.subcontainer {
position: relative;
width: 100%;
height: 100%;
top: 50%;
transform: translateY(-50%);
}
.header {
width: 100%;
height: 64px;
background-color: blue;
}
.body {
width: 100%;
height: 100%;
max-height: calc(100% - 64px);
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgithub.com/DanielHoffmann/jquery-bigtext/master/jquery-bigtext.js"></script>
<form name="setup">
<label>Set height: <input type="number" name="height" value="200" /></label>
<button type="button" onclick="doresize(this.form)">Resize</button><br />
<label>Set text: <textarea name="text">Multi-Line
Text</textarea></label>
<button type="button" onclick="dotext(this.form)">Change</button><br />
</form>
<br />
<div id="container" class="container">
<div class="subcontainer">
<div class="header"></div>
<div class="body"><div class="body-text">Multi-Line
Text</div></div>
</div>
</div>
Try values between 80 and 300 to see it in action.

I have tried this in a code, please would you try it and see if it fits your need, the following code will make the green div fullfil the remining container height, and then after calcuating the text size and width it shrinks to fit the new text height
function update() {
$('#container').css('height', '200px' /*this would be dynamic based on the container height*/);
$('#container .body-text').bigText({ verticalAlign: 'top', whiteSpace: 'pre' });
$('#container').css('height', $('#bodytxt').height() + 64 /*this is the header height - blue div*/);
}
You need also to add an id for your bodytext div:
<div id="bodytxt" class="body-text">Multi-Line Text</div>

Resizing one element using jQuery UI changing the position of another

I am trying to make resizible and draggable lines out of labels using jQuery UI.
The problem is, if I add two labels and try to resize the first label, it changes the position of the second label (but if I resize the second label it does not change the position of the first label).
How to prevent labels from changing other label's position while resizing..?
HTML:
<div id="main">
<button id="s">add line</button>
</div>
<div id="line" class="hidden">
<label class="dra"></label>
</div>
JS:
function makeline() {
$t = $(".dra", "#line").clone(true).draggable().resizable({
handles: "s, n"
});
$("#main").append($t);
}
$("#s").click(function () {
makeline();
});
CSS:
.dra {
display: block;
background-color:red;
width: 7px;
height: 80px;
border: 1px solid red;
}
.hidden {
display: none;
}
#main {
border: 1px solid black;
width:500px;
height: 300px;
}
UPDATE: Full code in JSFiddle

This is happening because the jQuery UI widgets set the position of element to relative by default, leaving it in the normal flow of the document. You can work around this issue by applying position:absolute for the elements like:
.ui-resizable {
position:absolute !important;
}
This will cause them to stack on top of each other rather than one below another since they aren't in the normal flow anymore. You can easily fix this using the jQuery ui position() utility method as shown below:
$("#s").click(function() {
$t = $("#line .dra").clone(true).draggable().resizable({
handles: "s, n"
})
if ($("#main").find(".dra").length) {
$t.position({
at: "left bottom",
of: "#main .dra:last"
})
};
$("#main").append($t);
});
.dra {
display: block;
background-color: red;
width: 7px;
height: 80px;
border: 1px solid red;
}
.hidden {
display: none;
}
#main {
border: 1px solid black;
width: 500px;
height: 300px;
}
.ui-resizable {
position: absolute !important;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="form-group">
<label>ADD two line and RESIZE THE FIRST LINE it will scroll down the line added after it. NOW add a 3rd line and resize the second line it will scroll down the 3rd line and if you resize the very first line you added it will scroll down the other lines</label>
<div id="main">
<button id="s">add line</button>
</div>
<div id="line" class="hidden">
<label class="dra"></label>
</div>
You can adjust the positioning however you want.

If your label is:
<div class="label">Lorem ipsum</div>
add this CSS:
.label {
white-space: nowrap;
}

How to change CSS property using JavaScript

I want to change a CSS property of a class using JavaScript. What I actually want is when a <div> is hovered, another <div> should become visible.
.left,
.right {
margin: 10px;
float: left;
border: 1px solid red;
height: 60px;
width: 60px
}
.left:hover,
.right:hover {
border: 1px solid blue;
}
.center {
float: left;
height: 60px;
width: 160px
}
.center .left1,
.center .right1 {
margin: 10px;
float: left;
border: 1px solid green;
height: 60px;
width: 58px;
display: none;
}
<div class="left">
Hello
</div>
<div class="center">
<div class="left1">
Bye
</div>
<div class="right1">
Bye1
</div>
</div>
<div class="right">
Hello2
</div>
When hello1 div is hovered, bye1 div should be visible and similarly bye2 should appear when hello2 is hovered.

You can use style property for this. For example, if you want to change border -
document.elm.style.border = "3px solid #FF0000";
similarly for color -
document.getElementById("p2").style.color="blue";
Best thing is you define a class and do this -
document.getElementById("p2").className = "classname";
(Cross Browser artifacts must be considered accordingly).

// select element from DOM using *const*
const sample = document.getElementById("myid"); // using CONST
// or you can use *var*
var sample = document.getElementById("myid"); // using VAR
// change css style
sample.style.color = 'red'; // Changes color, adds style property.
// or (not recomended)
sample.style = "color: red"; //Replaces all style properties. NOT RECOMENDED

Use document.getElementsByClassName('className').style = your_style.
var d = document.getElementsByClassName("left1");
d.className = d.className + " otherclass";
Use single quotes for JS strings contained within an html attribute's double quotes
Example
<div class="somelclass"></div>
then document.getElementsByClassName('someclass').style = "NewclassName";
<div class='someclass'></div>
then document.getElementsByClassName("someclass").style = "NewclassName";
This is personal experience.

Consider the following example:
If you want to change a single CSS property(say, color to 'blue'), then the below statement works fine.
document.getElementById("ele_id").style.color="blue";
But, for changing multiple properies the more robust way is using Object.assign() or, object spread operator {...};
See below:
const ele=document.getElementById("ele_id");
const custom_style={
display: "block",
color: "red"
}
//Object.assign():
Object.assign(ele.style,custum_style);
Spread operator works similarly, just the syntax is a little different.

Just for the info, this can be done with CSS only with just minor HTML and CSS changes
HTML:
<div class="left">
Hello
</div>
<div class="right">
Hello2
</div>
<div class="center">
<div class="left1">
Bye
</div>
<div class="right1">
Bye1
</div>
</div>
CSS:
.left, .right{
margin:10px;
float:left;
border:1px solid red;
height:60px;
width:60px
}
.left:hover, .right:hover{
border:1px solid blue;
}
.right{
float :right;
}
.center{
float:left;
height:60px;
width:160px
}
.center .left1, .center .right1{
margin:10px;
float:left;
border:1px solid green;
height:60px;
width:58px;
display:none;
}
.left:hover ~ .center .left1 {
display:block;
}
.right:hover ~ .center .right1 {
display:block;
}
and the DEMO: http://jsfiddle.net/pavloschris/y8LKM/

This is really easy using jQuery.
For instance:
$(".left").mouseover(function(){$(".left1").show()});
$(".left").mouseout(function(){$(".left1").hide()});
I've update your fiddle:
http://jsfiddle.net/TqDe9/2/

You can do so using jQuery like this.
$('.left, .right').on('mouseenter', function(e) {
if ($(this).attr('class') == 'left1') {
$('.left1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
} else if ($(this).attr('class') == 'left1') {
$('.right1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
}
})
or you can use it like this
for first requirement
$('.left').on('mouseenter', function(e) {
$('.left1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
})
for second requirement
$('.right').on('mouseenter', function(e) {
$('.right1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
})