How To Easily Insert Tooltips in HTML? - javascript

Does anyone know how to insert a tooltip for a phrase in HTML as you write without too much of code?
The idea is that it shouldn't be a huge block of code, but relatively short, and easily insertable.
An imaginary example: <p> This is a <tooltip-data="A yellow fruit"> bananna </tooltip> </p>
The purpose is for when you are writing an article, to add a tooltip explaining what a word or phrase means, but without requiring much effort, or taking too much space on the code.
One alternative I found is this, but it's a huge block of code and it takes a lot of space, also I do not know how to apply this to several phrases, it seems like you need to add a div for every tooltip you want to show.
And I already do know about Bannana but it doesn't allow for styles, and does not show up on phones.

Take a look at this.
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me2
<span class="tooltiptext">Tooltip text again</span>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me3
<p class="tooltiptext">Tooltip text</p>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me
<h1 class="tooltiptext">Tooltip text</h1>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me
<h2 class="tooltiptext">Tooltip text</h2>
</div>
</body>
</html>
This is courtesy of W3schools. Just note that all of the css in there is not necessary, you just need some to make the tooltip actually work

What you need is library based on Angular-like directives. Every aspect of tooltip may be described directly in html in place of usage. Take a look at:
https://angular-ui.github.io/bootstrap/#/popover
Example of usage:
<button uib-popover="I appeared on mouse enter!"
popover-trigger="'mouseenter'" type="button">Mouseenter</button>

Please try this.
.tooltip {
position: relative;
cursor: pointer;
}
.tooltip:after {
position: absolute;
background: rgba(140,180,140,.5);
content: attr(data-tooltip);
bottom: 100%;
left: 0;
max-width: 200px;
opacity: 0;
transition: all ease .3s;
padding: 5px;
border-radius: 7px;
}
.tooltip:hover:after {
opacity: 1;
}
<h1>Tooltip Example</h1>
<div class="tooltip" data-tooltip="My tips">
Hover over me
<div>

Related

I need to animate an elevator image in my webpage and move it to preset locations in the view

Alright so I am making an elevator simulator. The buisness logic of everything is fine, I am using queues. The problem I am having is moving the elevator from one floor to the next in the queue. I am using HTML, CSS, and JavaScript / Jquery. So far the two approaches I have been trying is Jquery's animate method and CSS translate. I have not yet been able to find a decent answer. My most recent attempt has to do with using invisible elements in the DOM in order to have coordinates to move the elevator to. I will provide code snippets for further explanation.
That is a picture of the webpage, as you can see I need to be able to move the elevator to any given floor at any given time.
// Called when user selects the Start button
$('#btn-start').click(function() {
// Start the Simulation
let destination = $('#second-floor').offset();
$("#elevator").animate( {right: destination.left, bottom: destination.top}, 4000, "linear", function(){console.log("Elevator finished moving")} );
//});
});
.elevator-visual {
width: 55%;
}
.elevator {
position: relative;
max-width: 10vw;
margin-left: 6vw;
}
.floor {
position: relative;
}
.hidden-destination {
position: absolute;
bottom: 10vw;
left: 11vw;
background: none;
height: 5px;
width: 5px;
}
.floor-bound {
width: 75%;
margin-bottom: 15vw;
}
#first-floor,
#second-floor {
margin-bottom: 0;
}
.floor-title {
margin: 0;
padding: 0;
text-align: right;
color: #777;
margin-right: 6vw;
}
#floor-four-lable {
margin-top: 15vw;
}
.btn-start{
position: static;
border: none;
padding: 8px 21px;
vertical-align: middle;
text-align: center;
cursor: pointer;
border-radius: 5%;
font-size: 24px;
background-color: #b77110;
color: white;
margin-left: 15px;
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Elevator Diagram -->
<div class="elevator-visual">
<div class="floor">
<div class="hidden-destination"></div>
<p id="floor-four-lable" class="floor-title">Floor 4</p>
<hr id="forth-floor" class="floor-bound" />
</div>
<div class="floor">
<div class="hidden-destination"></div>
<p class="floor-title">Floor 3</p>
<hr id="third-floor" class="floor-bound" />
</div>
<div class="floor">
<div class="hidden-destination"></div>
<p class="floor-title">Floor 2</p>
<hr id="second-floor" class="floor-bound" />
</div>
<img id="elevator" class="elevator" src="https://via.placeholder.com/150" alt="" />
<div class="floor">
<div class="hidden-destination"></div>
<p class="floor-title">Floor 1</p>
<hr id="first-floor" class="floor-bound" />
</div>
<button id="btn-start" class="btn-start">Start</button>
</div>
As you can see in the JS, I toggle some classes when the start button is pressed, then I grab the info for the destination from the top of the queue, and right now I am stuck on animating the elevator (my most recent attempt looks dumb lol) to be able to go to any floor I want.
Here is also a link to the repository if you would like to clone and open with live-server: https://github.com/Amalazing/Elevator-Simulator
Thanks for your time and help.
Something like this?
Just animate the bottom to wherever you want it to go.
I used fixed px values for height here so that it is easier to understand what's happening (At least I hope it is easier)
I get the offset (just the top value) from the element I want to animate to. Then I set the top value of the elevator to match with the top value of the destination.
// Called when user selects the Start button
$('#btn-start').click(function() {
// Start the Simulation
let destination = $('#second-floor').offset().top;
$("#elevator").animate( {top: destination}, 200, "linear" );
//});
});
$('.btn-to-floor').on('click', function() {
let floor = $(this).data('floor');
let floors = $('.floor').length;
// eq(floors - floor) needed to so some magic calculations (you could also just use some hardcoded id here based on data attribute.
let destination = $('.floor').eq(floors - floor ).find('.floor-bound').eq(0).offset().top;
$("#elevator").animate( {top: destination}, 200, "linear");
});
.elevator-visual {
width: 55%;
position: relative;
}
.elevator {
position: absolute;
margin-left: 6vw;
bottom: 0;
}
.floor {
height: 180px; /* height of elevator + text + line */
}
.floor-bound {
width: 75%;
}
.floor-title {
margin: 0;
padding: 0;
text-align: right;
color: #777;
margin-right: 6vw;
}
.btn-start{
position: static;
border: none;
padding: 8px 21px;
vertical-align: middle;
text-align: center;
cursor: pointer;
border-radius: 5%;
font-size: 24px;
background-color: #b77110;
color: white;
margin-left: 15px;
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Elevator Diagram -->
<div class="elevator-visual">
<div class="floor">
<p id="floor-four-lable" class="floor-title">Floor 4</p>
<hr id="forth-floor" class="floor-bound" />
</div>
<div class="floor">
<p class="floor-title">Floor 3</p>
<hr id="third-floor" class="floor-bound" />
</div>
<div class="floor">
<p class="floor-title">Floor 2</p>
<hr id="second-floor" class="floor-bound" />
</div>
<div class="floor">
<p class="floor-title">Floor 1</p>
<hr id="first-floor" class="floor-bound" />
</div>
<img id="elevator" class="elevator" src="https://via.placeholder.com/150" alt="" />
</div>
<button id="btn-start" class="btn-start">Start</button>
<button class="btn-to-floor" data-floor="1">1</button>
<button class="btn-to-floor" data-floor="2">2</button>
<button class="btn-to-floor" data-floor="3">3</button>
<button class="btn-to-floor" data-floor="4">4</button>
Using css' transition and minor javascript you can animate your object (whether it be an img or what have you, I've used text based span for my demo) to a part of your page via inline javascript calls from your button's onclick - I've written a quick and dirty demo at the bottom of this post for you.
More on css transitions: https://www.w3schools.com/css/css3_transitions.asp
Note: I've not included your queue list mechanism because this wasn't a part of your question... but it shouldn't be too tough to implement my example into your project - good luck.
.lift {
position: absolute;
transform: rotate(90deg);
bottom: 10%;
left: 30%;
transition-duration: 2s;
}
.flrfour {
position: absolute;
bottom: 85%;
left: 5%;
}
.flrthree {
position: absolute;
bottom: 60%;
left: 5%;
}
.flrtwo {
position: absolute;
bottom: 35%;
left: 5%;
}
.flrone {
position: absolute;
bottom: 10%;
left: 5%;
}
.buttons {
position: absolute;
bottom: 5px;
left: 50%;
}
<span class="flrfour"> floor 4 </span>
<span class="flrthree"> floor 3 </span>
<span class="flrtwo"> floor 2 </span>
<span class="flrone"> floor 1 </span>
<span id="lft" class="lift">lift</span>
<div class="buttons"><button onclick="document.getElementById('lft').style.bottom = '10%';">1</button><button onclick="document.getElementById('lft').style.bottom = '35%';">2</button><button onclick="document.getElementById('lft').style.bottom = '60%';">3</button><button
onclick="document.getElementById('lft').style.bottom = '85%';">4</button>
</div>

Background Blur animation

I currently have some javascript functions applied to multiple buttons that trigger a popup, showing more content. I want to make a function that triggers a blur background animation once any of those buttons are clicked, and another animation where the popup sliding in from the top. Any help will be appreciate
document.querySelectorAll(".button a").forEach((a)=>{a.addEventListener("click",toggle);});
document.querySelectorAll(".popup a:last-child").forEach((a)=>{a.addEventListener("click",close);});
function toggle()
{
this.parentElement.nextElementSibling.classList.toggle("active"); //popup is sibling of a's parent element
}
function close()
{
this.parentElement.classList.toggle("active"); // .popup
}
This is the CSS for that function.
.popup
{
display: none;
visibility: hidden;
position: fixed;
left: 50%;
transform: translate(-50%,-50%);
width: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0,0,0,.30);
background: #A6A6A6;
}
.active
{
display: block;
top: 50%;
visibility: visible;
left: 50%;
}
And the HTML:
<div class="container">
<div class="box button">
HURRICANE TRACK
</div>
<div class="popup">
<h2>HURRICANE TRACKING</h2>
<video src="python_movies/hurricanetrack.mov"controls></video>
<p>
A Python project that prompts the user for a file containing hurricane information in order to form a dictionary that contains the names of hurricanes, the years the hurricanes occurred, and the correspoding data for each of the hurricanes, including the trajectory, longitude, lattitude, and wind speed. The program graphs all of the corresponding information by adding the information on a table, graphing the trajectory of the hurricanes, and plotting the information in a graph according to the wind speed.
</p>
CLOSE
</div>
<div class="box button">
NINE MEN'S MORRIS
</div>
<div class="popup">
<h2>NINE MEN'S MORRIS</h2>
<video src="python_movies/ninemensmorris.mov"controls></video>
<p>
A Python Project that runs the game, Nine Men's Morris. Nine Men's Morris is a two player game that combines elements of tic-tac-toe and checkers. The board consists of a grid with twenty-four intersections or points. Each player has nine pieces. Players try to form 'mills'—three of their own men lined horizontally or vertically—allowing a player to remove an opponent's man from the game. A player wins by reducing the opponent to two pieces (where they could no longer form mills and thus be unable to win), or by leaving them without a legal move. The game proceeds in three phases, however, this project handles the first phase.
</p>
CLOSE
</div>
$(document).ready(function(){
$(".button").click(function(){
$(".popup").toggleClass("active");
});
});
.popup
{
display: none;
visibility: hidden;
position: fixed;
left: 50%;
transform: translate(-50%,-50%);
width: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0,0,0,.30);
background: #A6A6A6;
}
.active
{
display: block;
top: 50%;
visibility: visible;
left: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click
<div class="popup">
<p>HEllo how r u?</p>
</div>
See this Snippet. It will help you.
$(document).ready(function(){
$(".button").click(function(){
$(".popup").toggle(800);
});
});
.popup
{
display: none;
visibility: visible;
position: fixed;
left: 0;
width: 100%;
padding: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99999999;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click
<div class="popup">
<h2 style="text-align:center">
Your Dummy Text
</h2>
</div>
You can do like this also below is the sample code
$(document).ready(function() {
$(".button").click(function() {
$(".popup").slideToggle(500);
});
});
.popup {
display: none;
visibility: visible;
position: fixed;
left: 0;
width: 100%;
padding: 0;
box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
background: #A6A6A6;
z-index: 99999999;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
Click
<div class="popup">
<h2 style="text-align:center">
Your Dummy Text
</h2>
</div>

html element to hover over another element?

how does one position a html element in front of another so that when one a particular element is hovered over the new element will appear in front of it.
here is my code:
<div class="third">
<label> Enter Password: </label>
<input type="text" name="pword1" class="iBox" id="pword1" onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="allFunctions()" placeholder="choose a password" autocomplete="off">
<p id="tooltipbox" style="visibility:hidden">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</p>
</div>
i have a tooltip and it works so far. but when i hover over the textarea it shoves the element below it downwards so that the tooltip can fit in on the page and when i move the mouse so to 'unhover' it, the element re positions upwards. i want a way when i hover, a message box is brought to the front and all the elements underneath do not move. much like when you hover any links on this page, they bring up a little dialog box which is only there on hover and DOES NOT reposition other elements on the page.
You need to specify z-index and position property; for example:
p#tooltipbox{
z-index:1000;
position:absolute;
top:0;//move the element to the top of div.third of div.third
left:0;//if you want to move the element to the left;
}
div.third{
position:relative;
}
here's more information
z-index property
position propery
I created a jsfiddle for you. Click the following link to see an example:
http://jsfiddle.net/xL7j4k6g/
Refer to the link above, but here is also the code:
.fieldarea {
position: relative;
border: 1px solid red;
width: 50%;
}
.fieldarea label {
width: 35%;
display: inline-block;
}
.fieldarea input {
width: 50%;
display: inline-block;
}
.tooltipbox {
position: absolute;
top: 0px;
right: 0px;
z-index: 1000;
max-width: 200px;
border: 1px solid gray;
background-color: yellow;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fieldarea:hover .tooltipbox {
opacity: 1;
}
<div class="fieldarea">
<label for="pword1">Enter Password:</label>
<input type="text" name="pword1" placeholder="choose a password" autocomplete="off">
<div class="tooltipbox">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</div>
</div>
<div class="fieldarea">
<label for="pword1">Enter Password:</label>
<input type="text" name="pword1" placeholder="choose a password" autocomplete="off">
<div class="tooltipbox">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</div>
</div>
(This doesn't look "cool" but works. I'd recommend looking into CSS3 transitions to some nice transformation touches - e.g. fade in the tooltip on hover.)
Thanks,
David
You can use absolute positioning and jQuery. This is not perfect but a simple example.
$(document).ready(function() {
$('.box1').hover(function() {
$('.box2').toggleClass('active')
})
})
.wrapper {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
border: 2px solid black;
background-color: white;
}
.box1 {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: blue;
}
.box2 {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 100;
background-color: red;
}
.active {
left: 0;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Ability to flip div boxes, changing their size, and interacting with the content

I'm trying to create a design with small clickable div boxes, that once clicked they flip by 180° and show content. Content which you can interact with: like clicking links, copy text or change the content with the use of more buttons.
I've managed to accomplish this, but my question follows: Is there a better way for this?
Found this website of a basic example
But being CSS based the content on the other side isn't interactable.
This is the code:
HTML
<div id="saos">
<div id="pg1" style="display:none;">
<blockquote>Page1</blockquote><br>
Yay content.
</div>
<div id="pg2" style="display:none;">
<blockquote>Page2</blockquote><br>
More content.
</div>
<div class="x" style="display:none;" onclick="closePage()">
<p>X</p>
</div>
<div id="2" class="an2 start startbak" onclick="openPage()">
<p class="sp">Click!</p>
</div>
<div id="cont" style="display:none;">
<p class="sp">Click!</p>
</div>
</div>
CSS
.write {
position: absolute;
width: 100px;
height: 50px;
background: #0055ff;
-webkit-transition: all 1.5s cubic-bezier(.08, 1, .08, 1);
left: 10px;
text-align: center;
font-family: Verdana;
}
.write:hover {
-webkit-transform: perspective(600px)scale(1.2);
-moz-transform: perspective(600px)scale(1.2);
}
.write p {
color: #002164;
text-align: center;
margin-top: 10px;
font-size: 22px;
}
.an {
-webkit-transition: all 1.5s cubic-bezier(.08, 1, .08, 1);
}
.an2 {
-webkit-transition: all .5s ease;
}
.page {
background-color: rgba(17, 17, 17, .8);
position: absolute;
left: 120px;
border: 2px solid #252525;
height: 330px;
width: 530px;
overflow: auto;
font-size: 14px;
color: #818181;
}
.start {
text-align: center;
font-family: Verdana;
position: absolute;
top: 150px;
left: 290px;
height: 120px;
width: 120px;
-webkit-transform: perspective(600px)rotateY(180deg)translateZ(-10px);
-moz-transform: perspective(600px)rotateY(180deg);
}
.start:hover {
background-color: #0055ff;
cursor: pointer;
}
.startbak {
background-color: #0036a3;
}
.mainbak {
background: #252525;
}
.sp {
color: #002164;
margin-top: 43px;
font-size: 30px;
-webkit-transform: rotateY(180deg)rotateZ(-45deg)translateZ(-10px);
-moz-transform: rotateY(180deg)rotateZ(-45deg);
}
.frame {
top: 0px;
left: 0px;
position: absolute;
width: 751px;
height: 452px;
-webkit-transform: perspective(600px)rotateY(0deg);
-moz-transform: perspective(600px)rotateY(0deg);
}
.x {
position: absolute;
left: 700px;
height: 18px;
width: 45px;
background-color: #c75050;
color: #fff;
display: table;
text-align: center;
font-size: 10px;
font-family: Verdana;
z-index: 2;
}
.x:hover {
background-color: #e04343;
cursor: default;
}
.x:active {
background-color: #993d3d;
}
.x p {
display: table-cell;
vertical-align: middle;
}
JavaScript
var htmlString = '<div class="f an write" style="top: 10px;" name="Home" onClick="openTab(\'pg1\',\'0\')"><p>Home</p></div>\n'
htmlString += '<div class="f an write" style="top: 65px;" name="About" onClick="openTab(\'pg2\',\'1\')"><p>About</p></div>\n'
function openTab(id, n){
for (var i=0;i<write.length;i++){
write[i].className = 'f an write';
write[i].style.top = i*55+10+'px';
name = write[i].getAttribute('name');
write[i].innerHTML = '<p>'+name+'</p>';
}
write[n].className = 'f an page';
write[n].style.top = '10px';
write[n].innerHTML= '<div class="ins">'+document.getElementById(id).innerHTML+'</div>';
}
var id2 = document.getElementById('2'),
x = document.getElementsByClassName('x')[0];
function openPage(){
id2.className = 'an2 frame mainbak';
setTimeout(function() {
id2.className = 'an2 frame mainbak'
id2.setAttribute('onclick','')
document.getElementById('2').innerHTML=htmlString
}, 150);
setTimeout(function() {
x.style.display='';
}, 600);
}
function closePage(){
id2.className = 'an2 start mainbak';
setTimeout(function() {
id2.className = 'an2 start startbak'
id2.setAttribute('onclick','openPage()')
document.getElementById('2').innerHTML=document.getElementById('cont2').innerHTML
}, 150);
x.style.display='none';
}
Also made a JSFiddle but it doesn't seem to work..
While on my browser does.
It should be possible to do this with only a couple of lines of Javascript. Rich Bradshaw's example that you posted was an excellent starting point.
Rather than starting the flip on hover (via css selectors) I added a couple of lines of Javascript - actually jQuery, but plain JS would work - to add the relevant class on click. It works really nicely...
See jsFiddle Demo
I also managed to get the back face clickable (as in that demo) so it should meet all of your needs.
By that method the HTML is reduced to:
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://lorempixel.com/450/281/" />
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
<p>Including interactive HTML like
links</p>
</div>
</div>
</div>
And the Javascript is just:
$('#f1_container').click(function() {
$('#f1_container').addClass('clicked');
});

How do I align form inputs nicely on top of a picture?

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.

Categories