How to fix vertical alignment of title and content inside resizable div? - javascript

When we hit the 'add image' button to the left, it adds a div with 2 <p> draggable and resizable into a container.
There is one <p> which is a Title (Titre) and another <p> which is the content of the div.
Here is the code :
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height : 768px;
width : 432px;
background-color : #000000;
}
.menu {
border:1px solid black;
padding-left:15px;
padding-right:15px;
padding-top:2px;
padding-bottom:2px;
float:left;
text-align : center;
}
h3, li, ul{
text-align : left;
}
.encadrer {
border: 1px solid white;
position:absolute !important;
}
.centrerTitre{
color : white;
margin : auto;
text-align : center;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
}
.centrerPara{
font-size: 16;
color : white;
margin : auto;
text-align : center;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
}
.inner {
display: inline-block;
vertical-align: middle;
text-align:center;
width:100%;
}
.encadrer:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
/*----- Resizable ------*/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-nw { cursor: nw-resize; height: 7px; width: 7px; top: -5px; left: -5px; }
.ui-resizable-se { cursor: se-resize; height: 7px; width: 7px; right: -5px; bottom: -5px; }
.ui-resizable-ne { cursor: ne-resize; height: 7px; width: 7px; top: -5px; right: -5px; }
.ui-resizable-sw { cursor: sw-resize; height: 7px; width: 7px; left: -5px; bottom: -5px; }
/*----------------------*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Affichage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<body>
<div id="menu" class="menu">
<h3>Taille de l'écran</h3>
<select id='selector'>
<option value="1920x1080">1920x1080</option>
</select>
</br></br>
<table>
<tr>
<td><input type="radio" id="portrait" name="orientation" value="portrait" checked="checked">Portrait</td>
<td><input type="radio" id="paysage" name="orientation" value="paysage">Paysage</td>
</tr>
</table>
</br>
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
<script type="text/javascript">
var bg = document.getElementById('bg');
bg.className = "centrer";
var ajoutImg = document.getElementById('ajoutImage');
var initDiagonal;
var initFontSize;
var rad = document.getElementsByName('orientation');
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = tailleEcran;
}
document.getElementById("selector").addEventListener("change", tailleEcran, false);
ajoutImg.onclick = function() {
//var name = prompt("Texte de l'image :");
var container = document.createElement("div");
container.className = 'encadrer';
var inner = document.createElement("div");
inner.className = 'inner';
var titre = document.createElement("p");
var para = document.createElement("p");
titre.textContent = "Titre";
titre.className = 'centrerTitre';
inner.appendChild(titre);
para.textContent = prompt("Texte de l'image :");;
para.className = 'centrerPara';
inner.appendChild(para);
container.appendChild(inner);
//var container = $('<div class="encadrer"><div class="inner"><p class="centrerTitre">Titre</p><p class="centrerPara">' + name + '</p></div></div>');
bg.appendChild(container);
$(container)
.draggable({containment:"parent"})
.resizable({
containment:"parent",
handles: "all"
});
};
function tailleEcran() {
switch(document.getElementById("selector").value){
case '1920x1080' :
if(document.getElementById("portrait").checked == true){
bg.style.height = '768px';
bg.style.width = '432px';
}else{
bg.style.height = '432px';
bg.style.width = '768px';
}
break;
}
}
</script>
</body>
</html>
You can see that the 'Titre' stays at the middle of the page when you resize. I want this title to stay at the top of the div (the white square) but the content to stay at the middle. This is very noticeable after you resize the white squares.

Has i understand you just need to stick the title on the top of your square.
You can do it by adding this to the centerTitre class:
position: absolute;
top: 0;
left: 0;
right: 0;
Tell me if that's you want.

Related

Why my Alert message display out of my DIV HTML

My message display out of my DIV HTML
How do I resolve this?
I need to display this message within the div. If I repeat this code, it appears in the same place every time, I just want to display it in its own div and not invade others. My big problem it's the display message. Does anyone know how to resolve this?
<html>
<head>
</head>
<body>
jhadfjadfjasf
ajdfhkhasdjfas
ajdfhjadfa
ajdfhkajsdfh
<div class="sidney">
<img src="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png" width="220px" height="220px">
<div id="baselayer">
<input type="button" class="testx" value="SubLevel" onclick="showFrontLayer();" />
<input type="button" value="Job Description" onclick="showFrontLayers();"/>
<div id="bg_mask">
<div id="frontlayer">
<div class="containers">
<input type="button" value="X" onclick="hideFrontLayer();" style="position: absolute;top:5%;right:5%;"/>
O Product Owner é a pessoa que define os itens que compõem o Product Backlog e os prioriza nas Sprint Planning Meetings.
</div>
</div>
</div>
<div id="bg_masks">
<div id="frontlayers">
<input type="button" value="X" onclick="hideFrontLayers();" style="position: absolute;top:5%;right:5%;"/>
O Product Owner.
</div>
</div>
</div>
</div>
<style>
.sidney{
width: 250px;
height: 250px;
background-color: black;
border:20px;
}
</style>
<img src="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png" width="170px" height="150px">
<style>
#testx{
position: absolute;
top: 0px;
left: 0px%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;}
#bg_mask{
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayer{
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: 10px 10px 10px 10px;
padding : 30px;
width: 180px;
height: 100px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
#bg_masks {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayers {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 10px 10px 10px 10px;
padding : 30px;
width: 180px;
height: 100px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
</style>
<script>
function showFrontLayer() {
document.getElementById('bg_mask').style.visibility='visible';
document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
document.getElementById('bg_mask').style.visibility='hidden';
document.getElementById('frontlayer').style.visibility='hidden';
}
</script>
<script>
function showFrontLayers() {
document.getElementById('bg_masks').style.visibility='visible';
document.getElementById('frontlayers').style.visibility='visible';
}
function hideFrontLayers() {
document.getElementById('bg_masks').style.visibility='hidden';
document.getElementById('frontlayers').style.visibility='hidden';
}
</script>
</body>
</html>
How do I resolve this?
add position: relative; to this class .sidney (you can find it on line 31)

facing problem to fix component left and right side positions?

i am working on a small component i am facing issue to control moving div. i want to stop moving div when it reaches at left or right side or other words it should stop when left or right position == 0;
i am working on a small component i am facing issue to control moving div. i want to stop moving div when it reaches at left or right side or other words it should stop when left or right position == 0;
var leftDivWidth = $('#left').width()/2;
applyRect = $('#left').css('clip', 'rect(0px,' + leftDivWidth + 'px, auto,0px)');
var isResizing = false,
lastDownX = 0;
$(function () {
var container = $('#container'),
left = $('#left'),
handle = $('#handle');
handle.on('mousedown', function (e) {
isResizing = true;
lastDownX = e.clientX;
});
$(document).on('mousemove', function (e) {
if (!isResizing)
return;
var offsetRight = e.clientX - container.offset().left;
if($(handle).left == 0){
alert('working');
}
handle.css('left', offsetRight);
left.css('clip', 'rect(0px,' + offsetRight + 'px,auto,0px)')
}).on('mouseup', function (e) {
isResizing = false;
});
});
body, html {
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#container {
position: relative;
width: 100%;
margin: 0 auto;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
max-width: 1200px;
}
#container #left {
position: absolute;
width: 100%;
right: 0;
top: 0;
bottom: 0;
z-index: 9;
/*clip: rect(0px, 50%, 484px, 0px);*/
}
#container #handle {
display: block;
width: 50px;
height: 50px;
background: green;
color: yellow;
z-index: 999;
font-size: 25px;
line-height: 50px;
text-align: center;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.fa{
font-family: fontawesome;
line-height: 52px;
}
#left img{
width: 100%;
position: absolute;
top: 0;
display: block;
}
#right img{
width: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="container">
<div id="right">
<img src="https://images.wallpaperscraft.com/image/astronaut_neon_art_148365_1920x1080.jpg">
</div>
<!-- Left side -->
<div id="left">
<img src="https://images.wallpaperscraft.com/image/astronaut_ring_neon_156673_1920x1080.jpg">
</div>
<div class="innerDiv">
<div id="handle"> <i class="fa fa-arrows"></i> </div>
</div>
<!-- Right side -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Just match it with the parentOffsetWidth and to lock movement just create flag lockMovement and simply set it to true when the conditon meets.
var leftDivWidth = $('#left').width()/2;
applyRect = $('#left').css('clip', 'rect(0px,' + leftDivWidth + 'px, auto,0px)');
var isResizing = false;
var lockMovement = false;
lastDownX = 0;
$(function () {
var container = $('#container'),
left = $('#left'),
handle = $('#handle');
handle.on('mousedown', function (e) {
if(!lockMovement){
isResizing = true;
lastDownX = e.clientX;
}
});
$(document).on('mousemove', function (e) {
if (!isResizing)
return;
var offsetRight = e.clientX - container.offset().left;
if($(handle)[0].offsetLeft >= $(handle)[0].offsetParent.offsetWidth){ //========> match the parent offsetwidth with the child offsetLeft
alert('working');
isResizing = false;
lastDownX=0;
lockMovement =true;
}
handle.css('left', offsetRight);
left.css('clip', 'rect(0px,' + offsetRight + 'px,auto,0px)')
}).on('mouseup', function (e) {
isResizing = false;
});
});
body, html {
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#container {
position: relative;
width: 100%;
margin: 0 auto;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
max-width: 1200px;
}
#container #left {
position: absolute;
width: 100%;
right: 0;
top: 0;
bottom: 0;
z-index: 9;
/*clip: rect(0px, 50%, 484px, 0px);*/
}
#container #handle {
display: block;
width: 50px;
height: 50px;
background: green;
color: yellow;
z-index: 999;
font-size: 25px;
line-height: 50px;
text-align: center;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.fa{
font-family: fontawesome;
line-height: 52px;
}
#left img{
width: 100%;
position: absolute;
top: 0;
display: block;
}
#right img{
width: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="container">
<div id="right">
<img src="https://images.wallpaperscraft.com/image/astronaut_neon_art_148365_1920x1080.jpg">
</div>
<!-- Left side -->
<div id="left">
<img src="https://images.wallpaperscraft.com/image/astronaut_ring_neon_156673_1920x1080.jpg">
</div>
<div class="innerDiv">
<div id="handle"> <i class="fa fa-arrows"></i> </div>
</div>
<!-- Right side -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Just add offset() to if-statement:
if($(handle).left <= 0){
alert('working');
}
if($(handle).offset().left <= 0){
alert('working');
}
And it's better to use <= than strict == equation.

Allow div to be clicked with 'onblur' event on input text

After 500 milliseconds from the text inserted into the input text, I'm opening a div under the input text which contains a div with the inserted text on it. When inserted text is clicked it should console.log the text, but it is not able to do so because the onblur event occurs before the click. I want to keep my onblur event. But with the onblur event I can't make the div clickable. Please help
index.html:
var input_timeout = undefined;
document.getElementById("navigation").querySelector("INPUT").onkeyup = function () {
clearTimeout(input_timeout);
var val = this.value;
input_timeout = setTimeout(function () {
var to_add_to = document.querySelector("#navigation div");
to_add_to.innerHTML = "";
to_add_to.style.visibility = "visible";
var div_to_put = document.createElement("div");
div_to_put.style.visibility = "visible";
div_to_put.id = val;
div_to_put.innerHTML += "<font>" + val + "</font";
div_to_put.onclick = function () {
console.log(this.id);
}
to_add_to.appendChild(div_to_put);
}, 500);
}
document.getElementById("navigation").querySelector("INPUT").onblur = function () {
this.value = "";
document.querySelector("#navigation div").style.visibility = "hidden";
document.querySelector("#navigation div").innerHTML = "";
}
body {
margin: 0;
}
#navigation {
min-width: 620px;
background-color: silver;
width: 100%;
height: 50px;
position: fixed;
top: 0;
}
#navigation input {
height: 30px;
width: 200px;
font-size: 15px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
display: block;
margin: 10px 5% 0% auto;
padding: 0px 28px 0px 5px;
float: right;
}
#navigation div {
width: 200px;
height: 50px;
position: absolute;
top: 41px;
right: 5%;
color: orange;
background-color: white;
border: 1px solid orange;
border-radius: 5px;
visibility: hidden;
}
#navigation div div {
width: 100%;
height: 30px;
text-align: center;
font-size: 25px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div id="navigation">
<input type="text" name="Search">
<div></div>
</div>
</body>
</html>
Unlike the onclick event, the onmousedown event is fired before the onblur event:
var input_timeout = undefined;
document.getElementById("navigation").querySelector("INPUT").onkeyup = function () {
clearTimeout(input_timeout);
var val = this.value;
input_timeout = setTimeout(function () {
var to_add_to = document.querySelector("#navigation div");
to_add_to.innerHTML = "";
to_add_to.style.visibility = "visible";
var div_to_put = document.createElement("div");
div_to_put.style.visibility = "visible";
div_to_put.id = val;
div_to_put.innerHTML += "<font>" + val + "</font";
div_to_put.onmousedown = function () {
console.log(this.id);
}
to_add_to.appendChild(div_to_put);
}, 500);
}
document.getElementById("navigation").querySelector("INPUT").onblur = function () {
this.value = "";
document.querySelector("#navigation div").style.visibility = "hidden";
document.querySelector("#navigation div").innerHTML = "";
}
body {
margin: 0;
}
#navigation {
min-width: 620px;
background-color: silver;
width: 100%;
height: 50px;
position: fixed;
top: 0;
}
#navigation input {
height: 30px;
width: 200px;
font-size: 15px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
display: block;
margin: 10px 5% 0% auto;
padding: 0px 28px 0px 5px;
float: right;
}
#navigation div {
width: 200px;
height: 50px;
position: absolute;
top: 41px;
right: 5%;
color: orange;
background-color: white;
border: 1px solid orange;
border-radius: 5px;
visibility: hidden;
}
#navigation div div {
width: 100%;
height: 30px;
text-align: center;
font-size: 25px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div id="navigation">
<input type="text" name="Search">
<div></div>
</div>
</body>
</html>

Pause a document - HTML, CSS, JavaScript

I am making a styled HTML version of the typical JS 'alert()' box.
It is simply a nice that uses 'display: none;' and 'display: block;' to toggle the box.
However, this doesn't have the functionality of a JS 'alert()' box, as doing
for(var c = 0; c < 10; c++){ //like the joke? (c++)
cool.alert('You have seen '+c+' alerts');
}
will not create 10 successive alert boxes, but make the box's display 'block' 10 times.
Is there any way to pause the document until the alert box is closed so that the loop would be paused?
Here's all the relevant code:
<button onclick="cool.alert('Hi')">Alert box</button><div id='block'></div>
<div id='box'>
<p id='text'></p><hr id='hr'>
<div id='Ok' onclick='cool.alertclear()'>Ok</div>
</div>
<script>
var cover = document.getElementById('block');
var box = document.getElementById('box');
var text = document.getElementById('text');
var ok = document.getElementById('Ok');
var hr = document.getElementById('hr');
var cool = {
alert: function(input){
cover.style.display = 'block';
box.style.display = 'block';
ok.style.display = 'block';
text.innerHTML = input;
},
alertclear: function(){
cover.style.display = 'none';
box.style.display = 'none';
ok.style.display = 'none';
}
}
</script>
<style>
#block{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.6);
display: none;
z-index: 100;
}
#box{
position: absolute;
top: 25%;
left: 35%;
height: 30%;
width: 30%;
border-radius: 10px;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.2);
display: none;
z-index: 101;
color: #000;
padding: 10px;
cursor: default;
}
#text{
height: 60%;
word-break: break-all;
overflow-x: hidden;
overflow-y: auto;
}
#Yes{
position: absolute;
bottom: 5%;
right: 25%;
height: 15%;
width: 18%;
border-radius: 5px;
background: linear-gradient(left top, #00FF00, #00DD00);
background: -webkit-linear-gradient(left top, #00FF00, #00DD00);
cursor: hand;
text-align: center;
font-size: 1.5em;
color: white;
display: none;
}
#No{
position: absolute;
bottom: 5%;
right: 5%;
height: 15%;
width: 18%;
border-radius: 5px;
background: linear-gradient(left top, #ff6c6c, #ff4e4e);
background: -webkit-linear-gradient(left top, #ff6c6c, #ff4e4e);
cursor: hand;
text-align: center;
font-size: 1.5em;
color: white;
display: none;
}
#Ok, #Go{
position: absolute;
bottom: 5%;
right: 5%;
height: 15%;
width: 18%;
border-radius: 5px;
background: grey;
cursor: hand;
text-align: center;
font-size: 1.5em;
color: white;
display: none;
}
#Prompt{
position: absolute;
top: 30%;
left: 5%;
height: 40%;
width: 90%;
resize: none;
overflow-x: hidden;
overflow-y: auto;
word-break: break-all;
display: none;
}
#hr{
position: relative;
bottom: 0%;
}
</style>
You could keep track of the alerts like this:
var inputArr = [];
var showing = false;
var cool = {
alert: function(input){
if(!showing) {
cool.show(input);
showing = true;
} else {
inputArr.push(input);
}
},
alertclear: function(){
cover.style.display = 'none';
box.style.display = 'none';
ok.style.display = 'none';
if(inputArr.length>0) {
input = inputArr.shift();
cool.show(input);
} else {
showing = false;
}
},
show: function(input) {
cover.style.display = 'block';
box.style.display = 'block';
ok.style.display = 'block';
text.innerHTML = input;
}
}

Menu error caused by HTML or JS?

Im trying to get the menu to be horizontal and then the flags to be shown below the menu when you press the flag-name.
When doing changes to the menu in my code, which of my files should I be editing?
The flags location is correct right now, but the menu is missplaced.
What can be done to get the menu to be horizontal instead of a list?
JSFiddle: http://jsfiddle.net/528k9z8m/
HTML:
<body>
<h1>Kmom03 sandboxen</h1>
<div id="content">
<div id="menu">
<ul>
<li> Elfenbenskusten
<div id="flag-elfenbenskusten"></div>
</li>
<li> Sverige
<div id="flag-sverige"></div>
</li>
<li> Maruritius
<div id="flag-maruritius"></div>
</li>
<li> Japan
<div id="flag-japan"></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
CSS
body {
}
h1 {
text-align: center;
}
h3 {
color: green;
}
#menu {
width: 500px;
height: 50px;
border: 1px solid black;
}
#content {
border: 1px solid black;
background-color: #eee;
padding: 4em;
margin: 0 auto;
height: 800px;
width: 800px;
border-radius: 30px;
}
.flagga1 {
position: relative;
width: 800px;
height: 500px;
}
.sverige {
background-color: #FECC00;
}
.sverige .box1 {
position: absolute;
width: 250px;
height: 200px;
background-color: #006AA7;
}
.sverige .box2 {
position: absolute;
bottom: 0;
left: 0;
width: 250px;
height: 200px;
background-color: #006AA7;
}
.sverige .box3 {
position: absolute;
top: 0;
right: 0;
width: 425px;
height: 200px;
background-color: #006AA7;
}
.sverige .box4 {
position: absolute;
bottom: 0;
right: 0;
width: 425px;
height: 200px;
background-color: #006AA7;
}
.flag {
position: relative;
width: 300px;
height: 200px;
}
.elfenbenskusten {
background-color: #fff;
}
.elfenbenskusten .part1 {
width: 100px;
height: 200px;
background-color: #F77F00;
}
.elfenbenskusten .part2 {
position: absolute;
top: 0;
left: 200px;
width: 100px;
height: 200px;
background-color: #009e60;
}
.flagga2 {
position: relative;
width: 300px;
height: 200px;
}
.maruritius {
background-color: #EEE;
}
.maruritius .box1 {
position: absolute;
top: 0;
width: 300px;
height: 50px;
background-color: #EA2839;
}
.maruritius .box2 {
position: absolute;
top: 50px;
left: 0;
width: 300px;
height: 50px;
background-color: #1A206D;
}
.maruritius .box3 {
position: absolute;
top: 100px;
width: 300px;
height: 50px;
background-color: #FFD500;
}
.maruritius .box4 {
position: absolute;
bottom: 0;
right: 0;
width: 300px;
height: 50px;
background-color: #00A551;
}
.maruritius .box5 {
position: absolute;
bottom: 0;
right: 0;
background-color: #006AA7;
}
.flagga3 {
position: relative;
height: 200px;
width: 300px;
border-style: solid;
border-width: 1px;
border-color: black;
}
.japan .box1 {
background-color: #FFFFFF;
}
.japan .cirkel1 {
border-radius: 50%;
position: absolute;
top: 40px;
left: 90px;
width: 125px;
height: 125px;
background-color: #BC002D;
}
JS:
(function () {
'use strict';
//var myContent = document.getElementById('content');
//elfenbenskusten
var flagTarget = document.getElementById('flag-elfenbenskusten');
var flagLink = document.getElementById('draw-elfenbenskusten');
function drawFlagElfenbenskusten() {
var flagElfenbenskusten = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>'
flagTarget.innerHTML = flagElfenbenskusten;
}
flagLink.addEventListener("click", function () {
console.log("event for clicking link elfenbenskusten.")
drawFlagElfenbenskusten();
});
//sverige
var flagTargetSverige = document.getElementById('flag-sverige');
var flagLinkSverige = document.getElementById('draw-sverige');
function drawFlagSverige() {
var flagSverige = '<div class="flagga1 sverige"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></div>'
flagTarget.innerHTML = flagSverige;
}
flagLinkSverige.addEventListener("click", function () {
console.log("event for clicking link elfenbenskusten.")
drawFlagSverige();
});
//maruritius
var flagTargetMaruritius = document.getElementById('flag-maruritius');
var flagLinkMaruritius = document.getElementById('draw-maruritius');
function drawFlagMaruritius() {
var flagMaruritius = '<div class="flagga2 maruritius"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div></div>'
flagTarget.innerHTML = flagMaruritius;
}
flagLinkMaruritius.addEventListener("click", function () {
console.log("event for clicking link elfenbenskusten.")
drawFlagMaruritius();
});
//japan
var flagTargetJapan = document.getElementById('flag-japan');
var flagLinkJapan = document.getElementById('draw-japan');
function drawFlagJapan() {
var flagJapan = '<div class="flagga3 japan"><div class="box1"></div><div class="cirkel1"></div></div>'
flagTarget.innerHTML = flagJapan;
}
flagLinkJapan.addEventListener("click", function () {
console.log("event for clicking link elfenbenskusten.")
drawFlagJapan();
});
})();
#menu li {
list-style-type: none;
float: left;
margin-right: 10px;
position: relative;
}
#menu ul li>div {
position: absolute;
top: 20px;
}
Fiddle
Guess it's what you want to achieve
you have to edit the css, try this:
ul {
float: left;
width: 100%;
}
a {
float: left;
width: 6em;
text-decoration: none;
padding: 0.2em 0.6em;
}
li {
display: inline;
}

Categories