So, here's what I'm trying to do... I want to create a checklist, and when a box is checked, then the corresponding image appears (by default each image is set to hide). Here is the code that partially works:
http://jsfiddle.net/rpt8ck6L/1/
HTML/Javascript:
<script>
function toggleVisibility(id) {
var el = document.getElementById(id);
if (el.style.visibility == "visible") {
el.style.visibility = "hidden";
} else {
el.style.visibility = "visible";
}
}
</script>
<label for="001">001</label>
<input type="checkbox" id="001" onChange="toggleVisibility('img001');" />
<br/>
<label for="002">002</label>
<input type="checkbox" id="002" onChange="toggleVisibility('img002');" />
<hr/>
<div class="testclass">
<img id="img001" src="http://tinyurl.com/n6amvuw" width="200" height="200" style="visibility:hidden" />
<img id="img002" src="http://tinyurl.com/mm297df" width="200" height="200" style="visibility:hidden" />
</div>
CSS:
.testclass {
border: 1px solid #000;
position: relative;
}
.img001 {
border: 1px solid #f00;
display: block;
position: relative;
z-index: 2;
}
.img002 {
border: 1px solid #0f0;
display: block;
position: relative;
z-index: 1;
top: -12px;
left: 12px;
}
However, I also want the images to overlap one another, so that if two are checked, then the second one will appear on top. In order to have the images overlap, I was told that I had to use CSS styling (with z-index) and image CLASSES, instead of IDs.
So, I just changed the code to use className instead of ID:
http://jsfiddle.net/tbqm1yeo/
HTML/Javascript:
<script>
function toggleVisibility(className) {
var el = document.getElementByClassName(className);
if (el.style.visibility == "visible") {
el.style.visibility = "hidden";
} else {
el.style.visibility = "visible";
}
}
</script>
<label for="001">001</label>
<input type="checkbox" id="001" onChange="toggleVisibility('img001');" />
<br/>
<label for="002">002</label>
<input type="checkbox" id="002" onChange="toggleVisibility('img002');" />
<hr/>
<div class="testclass">
<img class="img001" src="http://tinyurl.com/n6amvuw" width="200" height="200" style="visibility:hidden" />
<img class="img002" src="http://tinyurl.com/mm297df" width="200" height="200" style="visibility:hidden" />
</div>
CSS:
.testclass {
border: 1px solid #000;
position: relative;
}
.img001 {
border: 1px solid #f00;
display: block;
position: relative;
z-index: 2;
}
.img002 {
border: 1px solid #0f0;
display: block;
position: relative;
z-index: 1;
top: -12px;
left: 12px;
}
However, that didn't work (the images don't even appear when checkboxes are checked)... I'm assuming the problem has to do with using className? If someone could get the code from the second link working (so that the images will overlap and appear/disappear when checked), that would be great. Thank you very much.
You can fix your problem just by using position absolute. Your original JavaScript is fine.
Working fiddle: http://jsfiddle.net/rpt8ck6L/2/
CSS:
#img001, #img002 {
width:200px;
height:200px;
position:absolute;
top:80px;
left:0px;
z-index:1;
}
#image002 {
z-index: 2
}
Related
I want to display a border around an element, when it is hovered. Like this image:
The issue is that I don't want add to add border or outline on the element itself because I'm allowing user to change styles and it'll affect the added outline as well.
Here is what I've tried to counter this:
Created overlay div on top of the content using position: absolute
Added a div inside it to which is also set to absolute
Added onmouseover and onmouseout listener on overlay div to get the width, height, offsetLeft and offsetTop of the element
Now the issue is that because the overlay is on top, the events are not firing on elements underneath (as I want the nested element's info as well). I've also tried setting z-index but it doesn't seem to be working as well.
So, how to achieve this?
PS: The screenshot is taken from the visual builder of Webflow but I'm not sure how they are achieving this.
Here is the code:
var outlineContainer = document.querySelector('#content-container');
outlineContainer.onmouseover = outlineContainer.onmouseout = handler;
function handler(event) {
var hoverOutline = document.querySelector('.hover-outline');
if (event.type == 'mouseover') {
console.log(event.target.tagName);
var clientRects = event.target.getBoundingClientRect();
hoverOutline.style.width = `${clientRects.width}px`;
hoverOutline.style.height = `${clientRects.height}px`;
hoverOutline.style.transform = `translate(${event.target.offsetLeft}px,${event.target.offsetTop}px)`;
}
if (event.type == 'mouseout') {
hoverOutline.style.width = 0;
hoverOutline.style.height = 0;
hoverOutline.style.left = 0;
hoverOutline.style.top = 0;
}
}
#content-container {
border: 2px solid black;
background-color: white;
padding: 50px;
position: relative;
height: 100%;
}
.overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 2;
}
.hover-outline {
position: absolute;
border: 2px solid orange;
z-index: 6;
top: 0px;
left: 0px;
z-index: 3;
}
.content {
z-index: 4;
}
<div id="content-container">
<div class="overlay">
<div class="hover-outline"></div>
</div>
<div class="content">
<div class="component">
<label>Hi</label>
</div>
<div class="component">
<label>Text Field</label>
<span class="wrapper">
<input type="text" placeholder="Text Input Field" />
</span>
</div>
</div>
</div>
I may have misunderstood what is required, but could you just change the border color on hover? (And remove the JS).
#content-container {
border: 2px solid black;
background-color: white;
padding: 50px;
position: relative;
height: 100%;
}
#content-container:hover {
border: 2px solid red;
}
.overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 2;
}
.hover-outline {
position: absolute;
border: 2px solid orange;
z-index: 6;
top: 0px;
left: 0px;
z-index: 3;
}
.content {
z-index: 4;
}
<div id="content-container">
<div class="overlay">
<div class="hover-outline"></div>
</div>
<div class="content">
<div class="component">
<label>Hi</label>
</div>
<div class="component">
<label>Text Field</label>
<span class="wrapper">
<input type="text" placeholder="Text Input Field" />
</span>
</div>
</div>
</div>
In this html file ,I would like to add a image search filter functionality. For example, there are three images which consists of one Naruto image, one Superman image and one Batman image.
So, I would like to add the functionality like when I type "N or n" ,only the Naruto image shows hiding the other two and same for the rest two.
I think making the images run through an array would work but couldn't do so for images and I have seen many youtube videos but most of them use jQuery,electron but I would like to use only Javascript.
The file screenshot and the code(HTML and CSS) are given below:
sample image
HTML:
<body>
<div class="container">
<div class="searchbox_container">
<div class="searchbox">
<input type="text" name=" " placeholder="Search" class="search">
</div>
</div>
<div class="image_container">
<img src="images/naruto.png" alt=""
class="actionimages">
<img src="images/batman.png" alt=""
class="actionimages">
<img src="images/superman.png" alt=""
class="actionimages">
</div>
</div>
</body>
CSS:
<style>
body {
background-color: black;
}
.container {
width: 700px;
height: 400px;
border: 2px solid yellow;
margin: auto;
background-color: black;
}
input {
border: 2px solid darkgoldenrod;
background-color: yellow;
border-radius: 2px;
width: 100px;
height: 10px;
padding: 0 10px;
font-size: smaller;
color: black;
}
.searchbox {
float: right;
margin-top: 5px;
margin-right: 5px;
}
.image_container
{ width:300px;
border:2px solid yellow;
clear:both;
margin:0 auto;
margin-top:50px;
}
.image_container img{
width:90px;
margin-right:auto;
}
</style>
Pardon for any mistakes.Thank you.
This is what I understood from your comments
Fiddled here
var input=document.querySelector('.search');
var images=document.querySelectorAll('.image_container > img');
input.addEventListener('keydown',function(){
for(var i=0; i<images.length;i++)
{
if(new RegExp(this.value).test(images[i].src))
{
images[i].style.display ='block'
}
else
{
images[i].style.display ='none'
}
console.log(images[i].src)
}
})
in short you can use javasscript to search for image.
how you implement the search however is up to you.
one way to do so is to use data attribute for your images data-tags="naruto" and data-tags="batman" and so on.
As you can see in the example below I created an attribute for tags and added the names you want to the tags such as batman image has batman tag attribute.
Then in the javascript I get all the images when the user enters something into the search text box and loop through those images.
in the loop first i hide every image then check with the if statement if the image tag has the searched text in it by using indexOf if the tag has the search text then I show the image
function search(){
var searchText = document.getElementById("searchInput").value;
var images = document.querySelectorAll(".image_container > img");
if(searchText.length > 0){
images.forEach((image) => {
image.classList.add("hide");
if(image.dataset.tags.indexOf(searchText) > -1){
image.classList.remove("hide");
}
});
}else{
images.forEach((image) => {
image.classList.remove("hide");
});
}
}
body {
background-color: black;
}
.container {
width: 700px;
height: 400px;
border: 2px solid yellow;
margin: auto;
background-color: black;
}
input {
border: 2px solid darkgoldenrod;
background-color: yellow;
border-radius: 2px;
width: 100px;
height: 10px;
padding: 0 10px;
font-size: smaller;
color: black;
}
.searchbox {
float: right;
margin-top: 5px;
margin-right: 5px;
}
.image_container
{ width:300px;
border:2px solid yellow;
clear:both;
margin:0 auto;
margin-top:50px;
}
.image_container img{
width:90px;
margin-right:auto;
}
.hide{
display:none;
}
<div class="container">
<div class="searchbox_container">
<div class="searchbox">
<input type="text" name=" " placeholder="Search" class="search" id="searchInput" onkeyup="search()">
</div>
</div>
<div class="image_container">
<img data-tags="naruto" src="https://img.freepik.com/free-psd/3d-gold-logo-mockup-facade-sign_204971-162.jpg?size=664&ext=jpg" alt=""
class="actionimages">
<img data-tags="batman" src="https://img.freepik.com/free-photo/side-view-man-dancing_23-2148666505.jpg?size=664&ext=jpg" alt=""
class="actionimages">
<img data-tags="superman" src="https://img.freepik.com/free-vector/beautiful-floral-invitation-card-template_21799-4192.jpg?size=664&ext=jpg" alt=""
class="actionimages">
</div>
</div>
In my example, if you click on one of the alt images, I am looking to get the checkmark image to appear. Right now my on change event is registering (see console), but the image .checkmark-img is not being found or faded in. The fadeBoolToggle function is to fadeIn out if active.
This code is meant to be allow only one checkbox checked at once. So when someone clicks on an input, it unchecks all inputs and then checks the one clicked.
$('.option-check').not(this).prop('checked', false).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(false);
this.checked = true;
$(this).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(true);
Does anyone see why my image is not fading in when one of the alt images are clicked?
Jsfiddle
jQuery.fn.fadeBoolToggle = function(bool) {
return bool ? this.fadeIn(400) : this.fadeOut(400);
}
$('.option-check').on('change', function() {
$('.option-check').not(this).prop('checked', false).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(false);
this.checked = true;
$(this).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(true);
var test = $('.option-check:checked').val();
console.log('option check clicked');
console.log(test);
});
.product-wrap {
width: 100%;
position: relative;
display: block;
}
.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 2;
cursor: pointer;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
}
.calendar-option img {
margin: 20px auto;
cursor: pointer;
width: 50%;
height: auto;
}
.product-check,
.calendar-check,
.option-check {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-option">
<div class="product-wrap">
<label for="flag-option" class="package-check-toggle">
<img src='images/cal-flag.jpg' alt='A' class='pg-preview-img'>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
<p class="calendar-option-push"></p>
<cite>A</cite>
</label>
</div>
<input type="checkbox" class="option-check" id='flag-option' value='A'>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="nickel-option" class="package-check-toggle">
<img src='images/cal-nickel.jpg' alt='Brushed Nickel & Black' class='pg-preview-img'>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
<p class="calendar-option-push"></p>
<cite>B</cite>
</label>
</div>
<input type="checkbox" class="option-check" id='nickel-option' value='B'>
.closest() returns the closest of the current item's parents, including current object itself, which matches the selector.
Because you placed your <input>s outside .product-wrap divs...
$(this).closest('.product-wrap')
... returns empty.
Working example:
jQuery.fn.fadeBoolToggle = function(bool) {
return bool ? this.fadeIn(400) : this.fadeOut(400);
}
$('.option-check').on('change', function() {
$(this).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(true);
var test = $('.option-check:checked').val();
console.log('option check clicked');
console.log(test);
});
.product-wrap {
width: 100%;
position: relative;
display: block;
}
.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 2;
cursor: pointer;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
}
.calendar-option img {
margin: 20px auto;
cursor: pointer;
width: 50%;
height: auto;
}
.product-check,
.calendar-check,
.option-check {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-option">
<div class="product-wrap">
<label for="flag-option" class="package-check-toggle">
<img src='images/cal-flag.jpg' alt='A' class='pg-preview-img'>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
<p class="calendar-option-push"></p>
<cite>A</cite>
</label>
<input type="radio" class="option-check" id='flag-option' name='check-option' value='A'>
</div>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="nickel-option" class="package-check-toggle">
<img src='images/cal-nickel.jpg' alt='Brushed Nickel & Black' class='pg-preview-img'>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
<p class="calendar-option-push"></p>
<cite>B</cite>
</label>
<input type="radio" class="option-check" id="nickel-option" name='check-option' value='B'>
</div>
When facing such issues in the future, consider using console.log methodically. I started with
console.log($(this).closest('.product-wrap').is('.product-wrap'))
If this would have returned true, I'd have moved on to
console.log($(this).closest('.product-wrap').find('.checkmark-img').is('.checkmark-img'))
... and so on.
Note: Even though it reproduced the issue, your snippet looked like it was broken and it stopped everyone, including me, from taking a closer look. Whether you take something out of that, it's totally up to you.
I have added a side menu layer to my HTML app taking refrence this link http://www.uiupdates.com/sidebar-menu-layer-with-jquery/.
When i press menu button & side menu appers. My following div class "buttoncls_scrollableCenter" & "buttoncls_fotter" is able to move right when menu appears .
But this div "buttoncls_scrollable" does not moves to the right when side menu appears.
How to make this div "buttoncls_scrollable" move when side menu appears ?
Code :--
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>My item list </title>
<style>
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
position:relative;
}
.div_wrapper {
left:0px;
z-index:100;
}
.div_layer {
background: none repeat scroll 0 0 #3e4046;
position: absolute;
width: 200px;
height: 100%;
}
.div_layer ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.div_layer ul li {
border-bottom: 1px solid #dfdfdf;
overflow: hidden;
padding: 5px;
height: 33px;
color:white;
text-align:center;
}
.buttoncls {
background:#767676;
width:75px;
height:25px;
position:absolute;
float:left;
border:1px solid #000;
cursor:pointer;
color:#fff;
}
.input {
display: inline-block;
padding: 0 2px;
}
.input input {
display: block;
}
.imgtxt {
margin: 0;
font-family:arial;
color:#DDDFED;
font-size:15px;
}
#images {
background-color: grey;
white-space:nowrap;
}
div.scrollable {
margin: 0;
padding: 0;
overflow: auto;
padding-left: 4px;
padding-top: 20px;
box-sizing:border-box;
}
div.scrollableMenu {
margin: 0;
padding: 0;
overflow: auto;
padding-left: 4px;
padding-top: 20px;
box-sizing:border-box;
}
div.scrollableCenter {
margin: 0;
padding: 0;
overflow: auto;
padding-left: 4px;
padding-top: 20px;
box-sizing:border-box;
}
#center {
background-color:#292B3B;
position:absolute;
top:115px;
left:0px;
right:0px;
bottom:20px;
}
#fotter {
background-color:#CC99FF;
text-align:center;
position:absolute;
left:0;
bottom:0;
width:100%;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function menu_onclick() {
var rig=$('.div_layer').position().left;
if(rig == 0 )
{
$('.div_layer').animate({left:-this.width}, 300);
$(".buttoncls_scrollable").animate({left:'0px'}, 300);
$(".buttoncls_scrollableCenter").animate({left:'0px'}, 300);
$(".buttoncls_fotter").animate({left:'0px'}, 300);
}
else
{
var center = this.width;
$('.div_layer').animate({left:'0px'}, 300);
$(".buttoncls_scrollable").animate({left:this.width}, 300);
$(".buttoncls_scrollableCenter").animate({left:center}, 300);
$(".buttoncls_fotter").animate({left:this.width}, 300);
}
}
function doc_onload() {
this.width = $('.div_layer').width();
$('.div_layer').css('left',-this.width);
this.rig = $('.div_layer').position().left;
};
//http://rickluna.com/wp/2012/10/setting-css-background-colors-via-javascript-rgb-triplet-vs-hex/
function convertToHex(str){
var raw = str.match(/(\d+)/g);
var hexr = parseInt(raw[0]).toString(16);
var hexg = parseInt(raw[1]).toString(16);
var hexb = parseInt(raw[2]).toString(16);
hexr = hexr.length == 1 ? '0' + hexr: hexr;
hexg = hexg.length == 1 ? '0' + hexg: hexg;
hexb = hexb.length == 1 ? '0' + hexb: hexb;
var hex = '#' + hexr + hexg + hexb;
return hex;
}
//
function selectId(id) {
//alert(id);
if(id == "1")
{
//alert('one');
var div = document.getElementById('1');
div.style.backgroundColor = 'red';
var div = document.getElementById('2');
div.style.backgroundColor = 'black';
var div = document.getElementById('3');
div.style.backgroundColor = 'black';
}
//http://stackoverflow.com/questions/13712697/set-background-color-in-hex
//http://rickluna.com/wp/2012/10/setting-css-background-colors-via-javascript-rgb-triplet-vs-hex/
if(id == "2")
{
//alert('two');
var div = document.getElementById('1');
div.style.backgroundColor = 'black';
var div = document.getElementById('2');
div.style.backgroundColor = 'red';
var div = document.getElementById('3');
div.style.backgroundColor = 'black';
}
if(id == "3")
{
//alert('three');
var div = document.getElementById('1');
div.style.backgroundColor = 'black';
var div = document.getElementById('2');
div.style.backgroundColor = 'black';
var div = document.getElementById('3');
div.style.backgroundColor = 'red';
}
$('.div_layer').animate({left:-this.width}, 300);
var center = 250;
$(".buttoncls_scrollable").animate({left:'100px'}, 300);
$(".buttoncls_scrollableCenter").animate({left:'0px'}, 300);
$(".buttoncls_fotter").animate({left:'0px'}, 300);
//collaspe the menu
};
</script>
</head>
<body onload="doc_onload()">
<div class="div_layer">
<ul>
<li onclick="selectId(this.id)" id="1">Fruits</li>
<li onclick="selectId(this.id)" id="2">Automobile</li>
<li onclick="selectId(this.id)" id="3">Cloth</li>
</ul>
</div>
<div id="images" class="scrollable buttoncls_scrollable">
<div class="input">
<input type="image" src="http://www.shoredreams.net/wp-content/uploads/2014/02/show-menu-icon.png" onclick="menu_onclick()" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">Menu</p>
</div>
<div class="input">
<input type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcRTBRnn9Aqx74JvKyJ7Z5ydbXXuj8cIDVuOdJZUxb02Q2LWfJGP" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">Normal Vegitable</p>
</div>
<div class="input">
<input type="image" src="http://www.boldsky.com/img/2013/03/19-greenveggies.jpg" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">Green Vegitable</p>
</div>
</div>
<div id="center" class="scrollableCenter buttoncls_scrollableCenter">
<div >
<input type="image" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTMPmp8aVaovrd3AGj1_hL_GEXX1M4DJ-TTMJ34Vr622XeY_usu" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">brinjal</p>
<hr/>
</div>
<div >
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/2/25/Cauliflower.JPG" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">cauliflower</p>
<hr/>
</div>
<div >
<input type="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQJgt4i9ph9uQsS3JV940PBg-kwN1kkrKbC6FLYI6UhbxucEb91" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">tomato</p>
<hr/>
</div>
<div >
<input type="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT-mwuxaqQeHXjoZzPUoee9Rvg8Jq-eCvo8H0EgEtapjfr6U4E3" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">ladyfinger</p>
<hr/>
</div>
<div >
<input type="image" src="http://t2.gstatic.com/images?q=tbn:ANd9GcQRxXUO2stKHLyET_rXpxOuLp67qc1IzlBcJGke5jYoGPeRZpnO" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">radish</p>
<hr/>
</div>
<div >
<input type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcT2zCeG621TSX1YmcsT9DPLaQJkdVwdYk_n-eWECCa8NTtXR0LFeQ" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">ginger</p>
<hr/>
</div>
</div>
<div class="buttoncls_fotter" id="fotter">List of Items</div>
</body>
</html>
Actual Html page:--
side Menu appears, top div is not moving :--
You need to absolutely position your buttoncls_scrollable:
div.scrollable {
position: absolute;
right:0;
left:0;
}
Example
If you also change your #fotter to have right:0 instead of width:100%; it will fix your issue with the horizontal scrollbar appearing when the side menu shows
why not using jquery? it will be very simple.
there is more than one way to do it but you can for example use the Jquery click() function to do the action and to use Jquery addClass() function to give the 'body' (or other 'wrap all' element) a class to affect all his children after click - new position for the menu and for the new div (div that wrap all the element except of the menu itself). on the HTML, add a div that will wrap all the elements except of the menu itself and add to the input image a class or id to avoid conflict, for example add a id (id="menu_button") and call it with jquery:
Jquery:
$(document).ready(function(){
$('#menu_button').click(function(){
if ($('body').hasClass('show')){
$('body').removeClass('show');
}
else {
$('body').addClass('show')
}
});
});
on CSS, you need to add the new div wrap. add left: 200px; (the width of the menu) to hide the menu fully when it's not need be displayed. add z-index: 1; (you can use higher value as long as it will be higher the all the rest element that needs to be below). for make them menu above the other elements. add new class with left: 0; to bring the menu to the position it needs to be after click. you can use CSS3 transition for better show.
CSS:
.content_wrap
{
width: 100%;
height: 100%;
float: right;
}
.show .content_wrap
{
width: calc(100% - 200px);
}
.div_layer
{
background: none repeat scroll 0 0 #3e4046;
position: absolute;
left: -200px;
width: 200px;
height: 100%;
z-index: 1;
}
.show .div_layer
{
left: 0;
}
.content_wrap, .div_layer
{
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
example: http://jsfiddle.net/6dgbp5dh/1/
I have a main div. Inside the div, I have an image. I want to place a text field and a button at a specific position on top of the image. Both of them should be transparent so that the users feels that they are writing on top of the image.
My question is how is this best solvable? Is it to make a div that contains those two and place the div in correct position using CSS? Or is there some kind of javascript I could use?
Also, when I hover over the button, I want it to replace the image with a new image.
I made a Fiddle on how it looks like. Here is the code from that fiddle.
HTML:
<div id="apDiv1"><img src="http://s24.postimg.org/4vpzx68yt/test1.png" width="317" height="595" />
<div id="apDiv2">
<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input name="textfield" type="text" class="formcodeaktiv" id="textfield" style="width: 153px; color: black; background-color: transparent;" />
<input name="aktiverabut" type="submit" class="aktiverabut" id="aktiverabut" style="width: 1px; color: transparent; background-color: transparent; padding-left: 40px" value="aktiverabut" />
</form>
</div>
</div>
CSS:
#apDiv1 {
position:absolute;
left:79px;
top:22px;
width:354px;
height:655px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:147px;
top:472px;
width:216px;
height:26px;
z-index:2;
}
.aktiverabut {
color: #FFF;
background: transparent;
position: absolute;
left: 165px;
}
.formcodeaktiv {
left: 5px;
position: absolute;
}
This is my solution, but please, read #Chandranshu advices:
HTML
<form>
<div class="iphone">
<div>
<input type="text"/>
<button></button>
</div>
</div>
</form>
CSS
html {
font-family: Arial, Helvetica, sans-serif;
}
div.iphone {
position: relative;
width: 317px;
height: 595px;
background: transparent url(http://s24.postimg.org/4vpzx68yt/test1.png) no-repeat 0 0;
}
div.iphone div {
position: absolute;
bottom: 122px;
left: 71px;
}
div.iphone div > * {
display: block;
float: left;
padding: 0;
margin: 0;
border: none;
background: transparent;
appearance: none;
border-radius: 10px;
outline: 0;
}
div.iphone input {
line-height: 10px;
width: 148px;
height: 10px;
padding: 5px;
background: #fff;
}
div.iphone button {
margin-left: 5px;
width: 50px;
height: 20px;
cursor: pointer;
}
http://jsfiddle.net/coma/jXCS3/
I've just updated my jsfiddle to show you the benefits of using position relative on the container and absolute on its children (try resizing the textarea):
http://jsfiddle.net/coma/jXCS3/4/
I have updated your jsfiddle to 'almost' solve your problem. Here is the updated code:
HTML:
<div id="apDiv1"><img src="http://s24.postimg.org/4vpzx68yt/test1.png" width="317" height="595" />
<div id="apDiv2">
<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input name="textfield" type="text" class="formcodeaktiv" id="textfield" placeholder="Skriv in aktiveringskoden"/>
<input name="aktiverabut" type="submit" class="aktiverabut" id="aktiverabut" style="width: 1px; color: transparent; background-color: transparent; padding-left: 40px" value="aktiverabut" />
</form>
</div>
</div>
CSS:
#apDiv1 {
position:absolute;
left:79px;
top:22px;
width:354px;
height:655px;
z-index:1;
}
#apDiv2 {
position:absolute;
top:451px;
width:216px;
height:26px;
z-index:2;
}
.aktiverabut {
color: #FFF;
background: transparent;
border: 0;
outline: none;
position: absolute;
left: 233px;
}
.formcodeaktiv, .formcodeaktiv:focus, .formcodeaktiv:active {
left: 72px;
position: absolute;
padding-left: 5px;
border: 0;
outline: none;
width: 153px;
color: black;
background-color: transparent;
}
Significant changes:
Your absolute positions were not right. Just correcting the positions positioned the inputs on top of the image.
Then you need to add border: 0 and outline: none to get rid of their borders.
Make sure that you also include the :focus and :active pseudoclasses because otherwise the borders will show up when the user starts typing.
Move the styles from your HTML to the CSS file. It's annoying to have inline styles.
Add a placeholder attribute to the text field. That way when the user starts typing, the placeholder text will disappear. If you keep the text in the image, user typed text will appear on top of the grey hint text.
Since you've also asked about the best way to solve this, let me answer that as well. If you can edit the image, just white out the area where the text field and the button are supposed to be and then use a pure CSS solution to render the them as you want. You can get the rounded corners using border-radius and use an image sprite for different states of the button.