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>

Hide a div if input is not focused

I am trying to hide a div using
if ($("input,textarea").is(":focus")) {
$("#logos").hide();
} else {
$("#logos").show();
}
I have also tried
if ($("#input").is(":focus")) { }
and giving the input id of "input", but it seems to not work. It's supposed to work like in mobile google search.
What am I missing here?

You're probably missing an event handler
$("input,textarea").on({
focus : function() {
$("#logos").hide();
},
blur : function() {
$("#logos").show();
}
});

Here is a working example, using the jQuery methods
show()
hide()
focus()
blur()
$(document).ready(function(){
$('.logos').hide();
$('.focus').focus(function(){
$('.logos').show();
});
$('.focus').blur(function(){
$('.logos').hide();
});
});
div, textarea {
position: absolute;
width: 100px;
height: 100px;
vertical-align: top;
}
.logos {
top: 0;
left: 0;
color: rgb(255,255,255);
background-color: rgb(255,0,0);
}
.focus {
top: 0;
left: 112px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logos">
#logos
</div>
<textarea class="focus">
Focus on me
</textarea>

How to put a lights off effect

can anyone help me how to make a light off effect if i click any of my textboxes?
I found this idea in this site: http://www.emanueleferonato.com/stuff/lightsoff/
I want to do is when i click the textbox that particular textbox will be high-lighten and if i click that textbox again it will remove the light off effect.
Does anyone know how to do that?
html code:
<input type="text" readonly id="myname1" style="width:1000px; height:30px !important " />
<br />
<br />
<input type="text" readonly id="myname2" style="width:1000px; height:30px !important " />
script code:
<script>
$(function(){
$('#myname1').on('click', function(){
alert(1)
})
})
$(function(){
$('#myname2').on('click', function(){
alert(2)
})
})
</script>

Here's how I would do that:
HTML:
<input type="text" readonly id="myname1" style="width:1000px; height:30px !important" />
<br />
<br />
<input type="text" readonly id="myname2" style="width:1000px; height:30px !important" />
<div id="overlay"></div>
CSS:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background-color: rgba(0,0,0,.5); /* Semi-transparent */
}
.highlight {
position: relative;
z-index: 11;
}
JavaScript:
$(function () {
var lightsOff = false;
$('#myname1,#myname2').on('click', function () {
lightsOff = !lightsOff;
$('#overlay').fadeToggle(1000); /* Choose desired delay */
if (!lightsOff)
setTimeout((function() {
$(this).removeClass('highlight');
}).bind(this), 1000); /* Same delay */
else
$(this).addClass('highlight');
})
})
Demo: http://jsfiddle.net/AP6kr/

Here is a basic version I just made, take a look and mess around with it.
So we create an overlay this will take up the whole screen with a black background. We then want to have another div where the content we want to show will go, on this div we set z-index: 1 so it sits on top of the overlay.
From here its just as simple as using fadeIn and fadeOut to get the effect we want.
Note: This is very basic version, you can do better then this so mess around and see what you can do with it. This should give you a good start.
HTML:
<div class="overlay"></div>
<div class="highlight">Test
<br/><span class="on">On</span> | <span class="off">Off</span>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
}
.overlay {
background: black;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
top: 0;
display: none;
}
.highlight {
width: 100%;
background: white;
z-index: 1;
}
jQuery:
$(".on").click(function () {
$(".overlay").fadeIn();
});
$(".off").click(function () {
$(".overlay").fadeOut();
});
DEMO HERE

Hitting 'Cancel' during file upload in Chrome clears value

I'm working with a simple html type="file" input, and I'm having an issue in Chrome. Specifically, when you browse to and choose a file, it saves the value. However, if you re-browse, then press cancel it will clear out the value.
The html is simple:
<input type="file">
Here is a simple fiddle- http://jsfiddle.net/78ghn/.
This doesn't happen in other browsers -- is there a way to force Chrome to retain the value??

function f()
{
document.getElementById("b").appendChild(document.getElementById("a"));
document.getElementById("d").innerHTML = document.getElementById("c").innerHTML
document.getElementById("alert").innerHTML = 'Your last file was '.concat(document.getElementById("b").lastChild.value.slice(12))
}
function g()
{
if(document.getElementById("b").lastChild.value)
{
document.write("You have submitted ".concat(document.getElementById("b").lastChild.value.slice(12)));
}
else
{
document.write("You have submitted nothing.");
}
}
#a
{
opacity: 0;
width: 100%;
height: 100%;
}
#c
{
display: none;
}
#d
{
width: 100%;
height: 100%;
}
#e
{
background-color: green;
border: 2px solid black;
color: white;
font-size: 16pt;
width: 180px;
height: 90px;
}
#f
{
position: relative;
left: 25%;
bottom: 70%;
}
<form>
<div id='e'>
<span id='d'>
<input type="file" onchange='f();' id='a'>
</span>
<span id='f'>Select File</span>
</div>
<input type='button' value='Submit' onclick='g();'>
</form>
<span id='alert'>You have chosen no files.</span>
<ul id='b'>
</ul>
<form id='c'>
<input type="file" onchange='f();' id='a'>
</form>
I was unable to find a native implementation for this, so I tried my own workaround. It takes input from a custom CSS button overlay, then adds the actual input element to a list and replaces it with an empty one. The value is read and displayed, as it would be with a normal input. It is not included, but submitting it would involve moving the original input (last element of ul with id='b') to a form and submitting it via JavaScript. It is not optimal, but it does work.

Expand textarea (and bring it to front) while it has the focus

I want to expand a textarea (increase the height) as long as it has the focus. When expanded, the textarea should not move the content down, instead it should be displayed above the other content.
This is the code I'm using so far (see here for an example):
$(document).ready(function () {
$('#txt1').focus(function () {
$(this).height(90).css('zIndex', 30000);
$('#txt2').val('focus');
});
$('#txt1').blur(function () {
$(this).css('height', 'auto');
});
});
The expanding of the textarea works fine, but I can't get it to display above the other elements on the page (it is displayed behind the elements which follow).
Are there any tricks to show the expanded textarea above/in front of all other elements?
Update: this is the (minmal) HTML code used to reproduce the problem:
<div style="height:20px;">first:<br/>
<textarea id="txt1" rows="1" cols="20"
style="width: 400px; height: 12px; font-size: 10px;">
</textarea>
</div>
<br/>
second:
<br/>
<input type="text" id="txt2"/>

Setting position on the textarea works. You can also get rid of the z-index.
Working demo

Adding a z-index does nothing without the element having a position other than static. Personally, I would add a class with all of the css changes and include an overlay, like this (demo):
CSS
.focused {
position: relative;
height: 90px !important;
z-index: 1000;
}
.overlay {
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 0;
background: #000;
opacity: .75;
filter: alpha(opacity=75);
z-index: 999;
}
Script
$(document).ready(function () {
$('#txt1').focus(function () {
$('<div class="overlay"/>').appendTo('body');
$(this).addClass('focused');
$('#txt2').val('focus');
});
$('#txt1').blur(function () {
$(this).removeClass('focused');
$('.overlay').remove();
$('#txt2').val('blur');
});
});

Try setting the style 'position:absolute;' on the first textarea (txt1) and that should do the trick.

Try this plug-in. Should be quick and simple: http://unwrongest.com/projects/elastic/

working fiddle with input and textarea, mostly css with a little jquery for positioning
http://jsfiddle.net/Ap5Xc/