The thing is I want to create an overlay for every meal we're selling and I want to activate it through the "Order" button but the problem is I can't seem to know how to target each specific button in order to give every button a diffrent overlay
Here is the html
<div class="container">
<div class="MenuItems">
<img src="ribeye.jpg">
<button onclick="on()">Order Now</button>
<img src="Sirloin.jpg">
<button onclick="on()">Order Now</button>
<img src="Skirt.jpg">
<button onclick="on()">Order Now</button>
<img src="T-Bone.jpg">
<button onclick="on()">Order Now</button>
<img src="TomahawkSteak.jpg">
<button onclick="on()">Order Now</button>
<img src="Flank.jpg">
<button onclick="on()">Order Now</button>
<img src="Chuck.jpg">
<button onclick="on()">Order Now</button>
<img src="BBQChuck.jpg">
<button onclick="on()">Order Now</button>
<img src="ribeye.jpg">
<button onclick="on()">Order Now</button>
</div>
<div class="left">
<div class="SideMenu">
<ul>
<li>Steak</li>
<li>Chicken</li>
<li>Appietizers</li>
<li>Bevreges</li>
<li>Desserts</li>
</ul>
</div>
</div>
</div>
This is supposed to be one of the overlays however I need to create multiple others and be able to assign them to any button of my choice
<div id="over">
<img src="r.png">
<Button class="AddBtn">-</Button>
<Button class="SubtractBtn">+</Button>
<Button class="CloseBtn" onclick="off()">X</Button>
</div>
<script type="text/javascript" src="MenuJS.js"></script>
</body>
</html>
Javascript :
function on() {
document.getElementById("over").style.display = "block";
}
function off() {
document.getElementById("over").style.display = "none";
}
Here is the CSS:
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
#over{
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 3;
cursor: pointer;
}
#over img {
position: relative;
left: 35%;
top: 25%;
border: 2px crimson;
width: fit-content;
border-style: inset;
height: 280px;
width: 280px;
}
.CloseBtn {
background-color: crimson;
font-size: larger;
color: white;
border: solid 1px crimson;
left: 1500px;
border-radius: 5px;
position: relative;
bottom: 220px;
}
.AddBtn {
background-color: crimson;
font-size: larger;
color: white;
border: solid 1px crimson;
border-radius: 5px;
position: relative;
left: 750px;
top: 200px;
width: 30px;
}
.SubtractBtn {
background-color: crimson;
font-size: larger;
color: white;
border: solid 1px crimson;
border-radius: 5px;
position: relative;
left: 760px;
top: 200px;
width: 30px;
}
You can pass this as a parameter when calling the function, and access the element which was clicked via event.target within the function
HTML:
<button onclick="on(this)">Order Now</button>
JS:
function on() {
console.log(event.target)
}
For the functionality you're looking for, your approach will depend on how you structure your HTML.
For the most basic approach, you can do the following:
HTML:
<button onclick="on(this)">Order Now</button>
<div class="over">
<img src="r.png">
<p>overlay 1</p>
<Button class="AddBtn">-</Button>
<Button class="SubtractBtn">+</Button>
<Button class="CloseBtn" onclick="off()">X</Button>
</div>
<button onclick="on(this)">Order Now</button>
<div class="over">
<img src="r.png">
<p>overlay 2</p>
<Button class="AddBtn">-</Button>
<Button class="SubtractBtn">+</Button>
<Button class="CloseBtn" onclick="off()">X</Button>
</div>
<button onclick="on(this)">Order Now</button>
<div class="over">
<img src="r.png">
<p>overlay 3</p>
<Button class="AddBtn">-</Button>
<Button class="SubtractBtn">+</Button>
<Button class="CloseBtn" onclick="off()">X</Button>
</div>
JS:
function on() {
event.target.nextElementSibling.style.display = 'block'
}
function off() {
event.target.parentElement.style.display = 'none'
}
This is utilizing nextElementSibling (because the next element after the button is the overlay) and parentElement (the container of closeBtn which is the overlay)
Related
VIDEO I made it so when ever you a click a button the user is able to duplicate the note div but the copied not div do not function as the original it's not draggable and also when ever I change the color of the copied note it changes the original note color is there a way I could fix this and make it the duplicated notes work exactly like the original note?
Online Editor For The Project
I use jquery to make my div with the id note draggable and and also clone
$('#note').draggable({
handle: "#headeR"
});
//this will duplicate the note container
function dup(){
$(function(){
$('#note').clone().appendTo('#notecopy');
});
the div that I'm duplicating
<!-- my note area container-->
<div class="NoteSection" id="note">
<!--text container-->
<!--text header with colors-->
<div id="headeR">
<button id="color#1" class="BtnColor1" onclick="greennote()"></button>
<!--buttons to change color-->
<button id="color#1" class="BtnColor2" onclick="bluecolor()"></button>
<button id="color#1" class="BtnColor3" onclick="redcolor()"></button>
<button id="color#1" class="BtnColor4" onclick="purplecolor()"></button>
<button class="BtnColor5" onclick="deleteR()"><span class="black"></span><span
class="material-symbols-outlined">Delete</span></button>
</div>
<!--text header with colors-->
<!--text area-->
<div class="textspot" id="NOTEE">
<textarea id="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
</div>
<!--text area-->
</div>
Full Code
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<style>.NoteSection {
font-family: 'Combo', cursive;
background-color: #E2F1FF;
height: 50px;
width: 245px;
color: black;
font-size: 25px;
outline: none;
box-shadow: 4px 4px 15px 2px #AFC4D7;
opacity: 0.9;
position: relative;
left: 250px;
}
textarea {
font-family: 'Combo', cursive;
background-color: #E2F1FF;
height: 240px;
width: 240px;
position: relative;
bottom: 83%;
color: black;
font-size: 25px;
outline: none;
box-shadow: 4px 4px 15px 2px #AFC4D7;
opacity: 0.9;
resize: none;
}
.BtnColor1 {
background-color: #C2EA92;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #728F4E;
}
.BtnColor2 {
background-color: #92EADD;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #4E8F8C;
}
.BtnColor3 {
background-color: #EA92A5;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #8F4E55;
}
</style>
<body>
<div class="Container" id="'note'">
<div class="addnote">
<button onclick="dup()" class="Btn3" type="button"> <span class="black">N</span>ote
<span class="material-symbols-outlined">
add_box
</span></button>
</div>
<!-- my note area container-->
<div class="NoteSection" id="note">
<!--text container-->
<!--text header with colors-->
<div id="headeR">
<button id="color#1" class="BtnColor1" onclick="greennote()"></button>
<!--buttons to change color-->
<button id="color#1" class="BtnColor2" onclick="bluecolor()"></button>
<button id="color#1" class="BtnColor3" onclick="redcolor()"></button>
<button id="color#1" class="BtnColor4" onclick="purplecolor()"></button>
<button class="BtnColor5" onclick="deleteR()"><span class="black"></span><span
class="material-symbols-outlined">Delete</span></button>
</div>
<!--text header with colors-->
<!--text area-->
<div class="textspot" id="NOTEE">
<textarea id="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
</div>
<!--text area-->
</div>
<div id="notecopy" style="width:0px; height:0px;">
</div>
<script>
$('#note').draggable({
handle: "#headeR"
});
//this will duplicate the note container
function dup(){
$(function(){
$('#note').clone().appendTo('#notecopy');
});
}
// changes notes colors
function greennote(){
document.getElementById("notepage").style.backgroundColor = "#C2EA92";
}
function bluecolor(){
document.getElementById("notepage").style.backgroundColor = "#92EADD";
}
function redcolor(){
document.getElementById("notepage").style.backgroundColor = "#EA92A5";
}
function purplecolor(){
document.getElementById("notepage").style.backgroundColor = "#EA92E9";
}
</script>
</body>
</html>
You need to understand that ID tags have to be unique. You are reusing them each time you make your clone and that is partly why this isn't working for you.
I show below a few ways of working around this and optimizing your code. Notice I don't use ID's at all in the javascript. I left the references in HTML because I didn't want to clean all the excess .. just show the JS. Notice how i use element.closest(ref) to find a container so I know which buttons affect which notepad. I also show how you can use that same logic for a delete function
$('.NoteSection').draggable({
handle: ".headeR"
});
// get the 'master' refrerence so we can use it to make copies easily
let masterCopy = $('.NoteSection').first()
//this will duplicate the note container
function dup() {
masterCopy.clone().appendTo('#notecopy');
}
// changes notes colors
let colors = {
green: '#C2EA92',
blue: "#92EADD",
red: "#EA92A5",
purple: "#EA92E9"
}
function deleteR(el) {
el.closest('.NoteSection').remove()
}
function changeColor(el, color) { el.closest('.NoteSection').querySelector(".notepage").style.backgroundColor = colors[color];
}
.NoteSection {
font-family: 'Combo', cursive;
background-color: #E2F1FF;
height: 50px;
width: 245px;
color: black;
font-size: 25px;
outline: none;
box-shadow: 4px 4px 15px 2px #AFC4D7;
opacity: 0.9;
position: relative;
left: 250px;
}
textarea {
font-family: 'Combo', cursive;
background-color: #E2F1FF;
height: 240px;
width: 240px;
position: relative;
bottom: 83%;
color: black;
font-size: 25px;
outline: none;
box-shadow: 4px 4px 15px 2px #AFC4D7;
opacity: 0.9;
resize: none;
}
.BtnColor1 {
background-color: #C2EA92;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #728F4E;
}
.BtnColor2 {
background-color: #92EADD;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #4E8F8C;
}
.BtnColor3 {
background-color: #EA92A5;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #8F4E55;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Container">
<div class="addnote">
<button onclick="dup()" class="Btn3" type="button"> <span class="black">N</span>ote
<span class="material-symbols-outlined">
add_box
</span></button>
</div>
<!-- my note area container-->
<div class="NoteSection">
<!--text container-->
<!--text header with colors-->
<div class="headeR">
<button class="BtnColor1" onclick="changeColor(this,'green')"></button>
<!--buttons to change color-->
<button id="color#1" class="BtnColor2" onclick="changeColor(this,'blue')"></button>
<button id="color#1" class="BtnColor3" onclick="changeColor(this,'red')"></button>
<button id="color#1" class="BtnColor4" onclick="changeColor(this,'purple')"></button>
<button class="BtnColor5" onclick="deleteR(this)"><span class="black"></span><span
class="material-symbols-outlined">Delete</span></button>
</div>
<!--text header with colors-->
<!--text area-->
<div class="textspot" id="NOTEE">
<textarea class="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
</div>
<!--text area-->
</div>
<div id="notecopy" style="width:0px; height:0px;">
</div>
I'd like to know how to close multiple popup boxes by clicking close buttons with Pure Javascript.
I tried the code below, but it didn't work.
JavaScript
const buttons = document.querySelectorAll('.button');
buttons.forEach((button) => {
button.addEventListener('click', () => {
this.parentElement.querySelector('.popup').style.display = 'none';
});
});
HTML
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
CSS
.popup {
border: 3px solid gray;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
const buttons = Array.prototype.slice.call(document.querySelectorAll('.button'));
buttons.forEach((button) => {
button.addEventListener('click', () => {
button.parentElement.style.display ='none';
});
});
.popup {
border: 3px solid gray;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
Try this
<!DOCTYPE html>
<html>
<head>
<style>
.popup {
border: 3px solid gray;
}
.closePopup{
display:none;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
</style>
</head>
<body>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
<script>
const buttons = document.querySelectorAll('.button');
const popups = document.querySelectorAll('.popup');
buttons.forEach(function(button,index){console.log('index:',index);
let newIndex =index; button.addEventListener('click', () => {
console.log('newIndex: ',popups[newIndex]);
popups[newIndex].classList.add("closePopup");
});
});
</script>
</body>
</html>
I have 9 buttons in a board and I want to show an 'X' or an 'O' whenever I press them. However when I press a button it goes down.
$(document).ready(function(){
var against = 'human';
var board = ['-','-','-',
'-','-','-',
'-','-','-'];
var turn = 'X';
$('.xo-btns').click(function(){
$(this).text(turn);
});
});
body{
padding: 0px;
margin: 0px;
width: auto;
height: auto;
background: black;
font-family: 'Raleway', sans-serif;
}
.container{
text-align: center;
}
.board{
display: inline-block;
text-align: center;
background: red;
padding-top: 15px;
padding-left: 10px;
height: 250px;
width: 250px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.xo-btns{
width: 70px;
height: 70px;
padding: 0px;
border-radius: 4px;
background: transparent;
outline: none;
color: white;
/* display: inline-block; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="board">
<button class="xo-btns" id="one" value="1"></button>
<button class="xo-btns" id="two" value="2"></button>
<button class="xo-btns" id="three" value="3"></button>
<br>
<button class="xo-btns" id="four" value="4"></button>
<button class="xo-btns" id="five" value="5"></button>
<button class="xo-btns" id="six" value="6"></button>
<br>
<button class="xo-btns" id="seven" value="7"></button>
<button class="xo-btns" id="eight" value="8"></button>
<button class="xo-btns" id="nine" value="9"></button>
<br>
</div>
</div>
How can I fix it so every time I press one of them, they stay where they started.
Thank you!
This happens because of the vertical-align attribute, which sometimes has a buggy behaviour in my opinion.
Add
vertical-align: middle; to your "xo-btns" class and you should be fine.
I'm creating a small radio player using jQuery. You can find the code on codepen. I'm having problems with the code when I run it on Firefox (it works on every other browser). Following part of the JS:
$(".back").click(function(){
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
});
doesn't work. I've never experienced that problem. What might cause this?
$(document).ready(
function() {
$(".middle").click(function() {
$(this).children(".guziki").show();
$("h2").hide();
$("hr").hide();
$("#backbutton").show();
});
$(".back").click(function() {
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
console.log($(".back").parent())
});
});
var buttons = $("#one, #two").on("click", function() {
buttons.toggle();
});
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet"> #radio {
background-color: #e0e0e0;
max-width: 25%;
overflow: hidden;
font-family: helvetica;
}
h2 {
color: #212121;
text-align: center;
font-family: 'Bungee Hairline'
}
h1 {
color: #e0e0e0;
text-align: center;
text-transform: uppercase;
padding-top: 2%;
font-family: 'Bungee Hairline', cursive;
font-size: 2em;
}
.top {
background-color: #212121;
height: 50px;
margin-top: -5%;
}
.bottom {
text-align: center;
background-color: #212121;
color: #e0e0e0;
padding: 5px 0;
}
button {
border: none;
background: transparent;
display: block;
margin: 0 auto;
font-size: 40px;
}
.guziki {
text-align: center;
display: none;
}
#two {
display: none;
}
.fa-chevron-left {
position: absolute;
left: 20px;
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<audio id="player" src="http://uk3.internet-radio.com:11128/;"></audio>
<audio id="player2" src="http://stream.techno.fm/live.mp3"></audio>
<div id="radio">
<div class="top">
<h1>radio techno</h1>
<div id="backbutton">
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="middle kinetic">
<h2 id="kinetic">Kinetic</h2>
<div class="guziki" id="guzikione">
<button onclick="document.getElementById('player').volume += 0.1">+</button>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle technofm">
<h2 id="technofm">techno.fm</h2>
<div class="guziki">
<button onclick="document.getElementById('player2').volume += 0.1">+</button>
</button>
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player2').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player2').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player2').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle">
<h2>uzic</h2>
</div>
<hr>
<div class="middle">
<h2>ballads fm 87,1</h2>
</div>
<hr>
<div class="middle">
<h2>maximum fm 142,2</h2>
</div>
<div class=bottom>
<h4>currently playing</h4>
</div>
</div>
EDIT: I thought it might be a codepen/firefox bug, but even if I run it from my computer, it still doesn't work only in Firefox.
The problem is not with jQuery. The button is so small that you aren't hitting it with your click.
Demo
#backbutton button {
position: absolute;
left: 300px;
min-width: 50px;
min-height: 50px;
background: pink;
}
This is caused by your chevron being repositioned outside the bounds of where Firefox was expecting the button. If you keep the chevron inside the button and position the button then it works.
.fa-chevron-left {
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
position:relative;
}
.back {
position: absolute;
left: 20px;
}
http://codepen.io/anon/pen/GjokQp
I am bulding a mobile responsive web page that looks like the "Play Market" from Android.
I have a list of divs which have a button inside them.
Each button opens a div with unique links.
how do I create something like this in an efficient way without positioning every div differently?
This is my JSfiddle: http://jsfiddle.net/e0byofe2/
I tried using the position: relative; property to the menu - it made a mess with the elements within the div.
I tried using position: absolute; which is ok, but I can't position the menu over each single div in a global way.
HTML:
<div class="main">
<div id="header-wrap">
<div id="header" class="clear">
<img src="arrow.jpg" />
<img src="search.jpg" style="float: right;" />
</div>
</div>
<div class="content">
<div id="apps-header">Apps</div>
<div class="line"></div>
<div class="apps">
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
<div style="width: 202px; height: 106px; border: 1px solid grey; position: relative; ">
</div>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
</div>
</div>
</div>
CSS:
body{
margin: 0;
height: 100%;
}
.main{
overflow-x: hidden;
width: 100%;
height: 100%;
}
#header-wrap {
width: 100%;
position: fixed;
background-color: #689f38;
height: 62px;
}
#header {
width: 100%;
position: absolute;
bottom: 0;
box-shadow: 0px 0px 19px rgb(10, 29, 90);
-webkit-box-shadow: 0px 0px 19px rgb(10, 29, 90);
-moz-box-shadow: 0px 0px 19px rgb(10, 29, 90);
}
.content{
padding-top: 80px;
width: 100%;
/*height: 100%;*/
background-color: #eeeeee;
}
#apps-header{
margin-left: 10px;
font-family: arial;
background-image: url('triangle.png');
background-position: bottom;
width: 86px;
background-repeat: no-repeat;
background-size: 10px;
}
.line{
width: 100%;
height: 2px;
background-color: #458b09;
margin-top: 10px;
}
.apps{
width: 100%;
/*border: 1px solid black;*/
padding-top: 10px;
height: 100%;
}
.app{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0px 0px 6px rgb(145, 145, 145);
-webkit-box-shadow: 0px 0px 6px rgb(145, 145, 145);
-moz-box-shadow: 0px 0px 6px rgb(145, 145, 145);
background-color: #fafafa;
padding: 10px 8px;
margin: 5px 8px;
display: inline-table; /******/
}
.app_icon{
width: 83px;
height: 83px;
float: left;
}
.app_info{
/*border: 1px solid red;*/
float: left;
width: 210px;
height: 81px;
padding-left: 20px;
}
.app_name{
font-family: arial;
font-size: 18px;
}
.app_comp{
font-family: arial;
font-size: 16px;
color: #595959;
}
.stars img{
float: left;
width: 14px;
height: 14px;
}
.free{
color: #69a03a;
font-family: arial;
position: relative;
bottom: -25px;
left: 105px;
font-size: 14px;
}
.3dots{
height: 25px;
}
The best example I can give you is when you open the "Play Market" on your Android and search for a random app, you get a bunch of app div results. When clicking the 3 dots on the top-right corner - it opens a list with 2 items over the specific apps div.
It should look like this:
When you choose an other app and press the 3 dots in the corner, you get the same list with 2 option, but over the apps div.
I've changed your structure little bit and made the 'dots' image as a button of the menu with jquery
HTML:
<img src="3dots.png" class="dots"/>
<div class="dots_menu">
link 1
link 2
</div>
CSS:
.app
{
position: relative;
}
.dots
{
float: right;
}
.dots_menu
{
display: none;
width: 202px;
position: absolute;
top: 35px;
right: 0;
z-index: 1;
background: rgb(238, 238, 238);
-webkit-box-shadow: 0px 4px 15px #000;
-moz-box-shadow: 0px 4px 15px #000;
box-shadow: 0px 4px 15px #000;
}
.dots_menu.show
{
display: block;
}
.dots_menu a
{
display: block;
text-decoration: none;
color: #000;
padding: 10px;
}
JQuery:
$(document).ready(function(){
$('.dots').click(function(){
$('.dots_menu').removeClass('show');
$(this).next().addClass('show');
});
});
example: http://jsfiddle.net/e0byofe2/3/
is that what you are looking for?