I'm making a snake game with JavaScript and I'm trying to add the 'pause menu' feature. I manage to make the menu appear when the user clicks the pause icon, but I wish I could make the menu appear centered inside the canvas where the game is rendered. This is what I got:
How can I make it look like it is centered inside the canvas? I know I can accomplish that by setting the margin-left, margin-right, etc to a certain number, but that doesn't work well in my case because my website is supposed to be responsive to window resize. I want that menu to maintain almost the same dimensions whatever is the width of the window. Here is the HTML:
<div class="body-divs">
<div id="score-div">
<span id="score-text"></span>
<span id="level-text"></span>
<button id="pause-button"><i id="pause-resume-icon" class="fa fa-pause" aria-hidden="true"></i></button>
</div>
<div id="pause-menu">
<span class="menu-text"> Paused </span>
<div id="game-menu-div-4">
<button class="game-menu-button" id="resume-button"> Resume </button>
<button class="game-menu-button" id="back-button"> Main Menu </button>
</div>
</div>
<canvas class="body-divs" id="stage" width="600" height="600">
</canvas>
</div>
And here is the CSS:
.body-divs, #score-div{
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 5%;
}
#pause-menu {
position: absolute;
font-family: 'Manaspace';
padding: 10px;
background-color: yellow;
text-align: center;
max-width: 250px;
width: 100%;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: gold;
border-radius: 4px 4px;
}
#resume-button, #back-button {
margin: 10px;
}
#resume-button {
font-size: 22px;
}
#back-button {
font-size: 15px;
}
You can put #pause-menu and the canvas in shared .container parent who has position: relative and then center the #pause-menu using position: absolute along with top: 50%; left: 50%; transform: translate(-50%, -50%) to center it over the canvas. Example:
.container {
position: relative;
}
#pause-menu {
position: absolute;
font-family: 'Manaspace';
padding: 10px;
background-color: yellow;
text-align: center;
max-width: 250px;
width: 100%;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: gold;
border-radius: 4px 4px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#resume-button, #back-button {
margin: 10px;
}
#resume-button {
font-size: 22px;
}
#back-button {
font-size: 15px;
}
<div id="score-div">
<span id="score-text"></span>
<span id="level-text"></span>
<button id="pause-button">pause</button>
</div>
<div class="container">
<div id="pause-menu">
<span class="menu-text"> Paused </span>
<div id="game-menu-div-4">
<button class="game-menu-button" id="resume-button"> Resume </button>
<button class="game-menu-button" id="back-button"> Main Menu </button>
</div>
</div>
<canvas class="body-divs" id="stage" width="600" height="600"></canvas>
</div>
#pause-menu {
position: relative;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Related
I am trying to make my modal to be responsive.
I am currently using "right: 405px" in css to make my modal to stick in the right section.
However, the position of the modal keep changes as the screen size of the browser changes, which means this is not responsive.
In the attached screenshot, you can see the "Google Translator Modal" when the "info icon" is clicked.
Could anyone help me write a responsive CSS code?
Thank you.
.google-translator-modal {
position: absolute;
background: #fff;
z-index: 10000;
right: 405px;
top: 40px;
width: 230px;
height: 50px;
border-radius: 3px;
}
<div class="google-translator-modal" style="display: none">
<span class="upward-white-triangle"></span>
<div class="google-translator-modal-content">
powered by
<a class="google-logo-link" href="https://translate.google.com" target="_blank">
<img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="60px" height="20px" style="padding-top: 3px; padding-left: 3px" alt="Google Translate">
Translate
</a>
</div>
</div>
This a crude example but it ultimately comes down to positioning an absolute positioned element inside of a relative positioned element and showing it on hover.
I have placed the "modal," what I would call a tooltip, inside of the element that appears to be triggering it's appearance. By placing the tooltip inside and relative to the element that triggers it, we don't have to worry about how far from the edge of the viewport we are. The tooltip will always be position relative to the icon in my example.
.translate {
float: right;
margin: 0 1.5rem;
}
.translate-icon {
position: relative;
cursor: pointer;
font-size: 1.5rem;
}
.translate-icon:hover .translate-tooltip {
display: block;
}
.translate-tooltip {
display: none;
position: absolute;
bottom: -1.75rem;
right: -0.35rem;
width: 13rem;
text-align: center;
font-size: 1rem;
border: 1px solid gray;
}
.translate-tooltip::before,
.translate-tooltip::after {
content: '';
position: absolute;
bottom: 100%;
right: 0.25rem;
width: 0;
height: 0;
border: solid transparent;
}
.translate-tooltip::before {
border-bottom-color: gray;
border-width: 9px;
}
.translate-tooltip::after {
border-bottom-color: white;
border-width: 8px;
right: calc( 0.25rem + 1px );
}
<div class="translate">
Select Language
<span class="translate-icon">ω
<div class="translate-tooltip">
Powered by Google Translate
</div>
</span>
</div>
I am trying to move content left and right using on click event and need to stop by margins on the left or right. list-items generating dynamically. Here is the code I tried so far but no worth. By my code it is moving the container left and right. But I need to move list-items left and right.
How can I do this.?
function moveList(px) {
$('.list').animate({
'marginLeft': px
});
}
.list {
white-space: nowrap;
overflow: auto;
height: 85px;
padding: 10px 0;
margin: 25px 0;
position: relative;
}
.list-item {
display: inline-block;
min-width: 20%;
max-width: 150px;
padding: 10px 0;
border-radius: 3px;
background: #eee;
border: 1px solid #ddd;
margin: 0 5px;
cursor: pointer;
text-align: center;
}
#right-arrow {
width: 40px;
height: 40px;
display: block;
position: absolute;
right: 0;
top: 35px;
z-index: 999;
border-radius: 50%;
background: url(img/right-arrow.png) no-repeat #000;
}
#left-arrow {
width: 40px;
height: 40px;
display: block;
position: absolute;
left: 0;
top: 35px;
z-index: 999;
border-radius: 50%;
background: url(img/left-arrow.png) no-repeat #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right-arrow" onclick="moveList('-=50px')"></div>
<div id="left-arrow" onclick="moveList('+=50px')"></div>
<div class="list">
<div class="list-item">1</div>
<div class="list-item">2</div>
<div class="list-item">3</div>
<div class="list-item">4</div>
<div class="list-item">5</div>
<div class="list-item">6</div>
<div class="list-item">7</div>
<div class="list-item">8</div>
<div class="list-item">9</div>
<div class="list-item">10</div>
</div>
Try script like this:
function moveList(px) {
$(".list-item:first-child").animate({
'marginLeft': px
});
}
It will be easier for you if you create a element that wraps the .list-items with:
position: absolute;
top: 0;
left:0;
Then, instead of modify the margin, you should modify the left value.
If you want to use semmantic content for your web it's better to use another HTML structure, not only div. For example:
<nav> <!-- As this is containing page navigation elements-->
<ol> <!-- As this is an ordered list of elements-->
<li> <!-- Each list element-->
First element
</li>
<li>
Second element
</li>
</ol>
</nav>
Simply translate them.
Define this (given that clicker is the selector for your click event).
var xValue = -5;
$("#clicker").on('click', function(e) {
e.preventDefault();
$(".list-item").css("transform","translateX("+xValue+")");
xValue -= 5;
});
Translate will not mess with your markup, and only move the objects it's working on to the left (in this case).
By keeping xValue you can keep moving them to the left by repeatedly clicking clicker.
circle example
I need to create a page something like figure shown.
The main circle which is green has to been connect to the 2 sub circle with line using css and html..kindly provide me solution.
.left-box,
.right-box {
vertical-align: middle;
display: inline-block;
}
.left-box {
margin-right: 50px;
}
.right-box .circle + .circle {
margin-top: 20px;
}
.circle {
border-radius: 100%;
background: #ed1c24;
text-align: center;
position: relative;
display: table;
height: 70px;
z-index: 10;
color: #fff;
width: 70px;
}
.big-circle {
background: #52883b;
height: 100px;
width: 100px;
}
.purple {
background: #ec008c;
}
.circle .circle-content {
vertical-align: middle;
display: table-cell;
}
.circle.one:before,
.circle.two:before {
transform: rotate(-20deg);
position: absolute;
margin: 0 -5px 0 0;
background: #000;
width: 74px;
content: '';
height: 1px;
right: 100%;
z-index: -1;
top: 50%;
}
.circle.two:before {
transform: rotate(20deg);
}
<div class="left-box">
<div class="big-circle circle">
<div class="circle-content">1</div>
</div>
</div>
<div class="right-box">
<div class="circle one">
<div class="circle-content">1.1</div>
</div>
<div class="circle purple two">
<div class="circle-content">1.2</div>
</div>
</div>
for making circle in web page use border-radius:50%; for connecting use the appropriate margins as your page needed. And please next time provide the code for getting better help.
One of similar post i found
Creating CSS circles connected by lines to middle main circle
in this they are connecting for one circle multiple circles as been connected but i required as per the image
I'm trying to make a popup slide up when clicking on the link.
I've prepared an example with elements around the popup under this LINK
There are 2 blocks (block and footer}:
<div id="block">
Some content inside the block.
</div>
<div id="Popup">
<div class="Container">
<div id="tmp"> Popup!
<span id="close">X</span>
</div>
</div>
</div>
<div id="footer">
<span id="FooterLink">Link</span>
</div>
Between them as you can see there is my hidden popup, which I would like to show just above the footer block. When pressing a link in in the footer area, the popup should slowly slide up above the footer overflowing the block above the footer. My popup should have dynamic height because of different content inside depending of a language is chosen by the user. Sorry for my english, hopefully someone can help me with this. I found an example here LINK how should this work (except the clients button is my footer and I can have only popup with absolute position or z-index so I can't really use this example).
The rest of the code:
CSS:
#block {
height: 150px;
color: #FFF;
background-color: #505050;
text-align: center;
}
#Popup {
display: none;
position:absolute;
z-index: 100;
background-color: red;
width: 100%;
min-height: 60px;
}
#close {
width: 20px;
margin-left: 100px;
cursor: pointer;
}
#footer {
height: 50px;
background-color: blue;
color: white;
text-align: center;
}
#FooterLink {
cursor: pointer;
}
JS:
$('#FooterLink').click(function () {
$('#Popup').slideToggle();
});
$('#close').click(function () {
$('#Popup').slideToggle();
});
There's many ways you could accomplish this. What I did was to wrap your footer and popup elements under one wrapping div. This helps in placing and animating their positions in relation to each other. I also wrapped the entire box in one div and called it box.
The footer-container is given a height equal to the and footer element. When you click on the button, bottom with the value of the element's height is applied and since the popup is positioned absolutely, it will animate upwards.
Removing bottom: 60px hides the element again.
This implementation allows for a dynamic height of the popup element as well.
Fiddle
$('#FooterLink').click(function() {
$('#Popup').animate({
top: -$("#Popup").height()
});
});
$('#close').click(function() {
$('#Popup').animate({
top: 0
});
});
#test {
display: inline-block;
}
#block {
height: 150px;
color: #FFF;
background-color: #505050;
text-align: center;
}
#Popup {
position: absolute;
z-index: 0;
background-color: red;
width: 100%;
min-height: 60px;
}
#close {
width: 20px;
margin-left: 100px;
cursor: pointer;
}
#footer-container {
position: relative;
height: 60px;
}
#footer {
position: relative;
z-index: 100;
height: 60px;
background-color: blue;
color: white;
text-align: center;
}
#FooterLink {
cursor: pointer;
}
#box {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="block">
Some content inside the block.
</div>
<div id="footer-container">
<div id="Popup">
<div class="Container">
<div id="tmp">Popup!
<span id="close">X</span>
</div>
</div>
</div>
<div id="footer">
<span id="FooterLink">Link</span>
</div>
</div>
You simple need to change you css #Popup position to relative
Try this solution
$('#FooterLink').click(function () {
$('#Popup').show(2000);
});
$('#close').click(function () {
$('#Popup').hide(2000);
});
#block {
height: 150px;
color: #FFF;
background-color: #505050;
text-align: center;
}
#Popup {
display: none;
position:relative;
z-index: 100;
background-color: red;
width: 100%;
min-height: 60px;
}
#close {
width: 20px;
margin-left: 100px;
cursor: pointer;
}
#footer {
height: 50px;
background-color: blue;
color: white;
text-align: center;
}
#FooterLink {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block">
Some content inside the block.
</div>
<div id="Popup">
<div class="Container">
<div id="tmp"> Popup!
<span id="close">X</span>
</div>
</div>
</div>
<div id="footer">
<span id="FooterLink">Link</span>
</div>
i'm under this situation... i've made an overlay div working as a popup window.
Contains a little header that has some text and a "X" button to "close" it (which is a child div). Then it has the body content as another child div.
I've set the draggable and re-sizable jquery functionality to the parent overlay popup window.
Works fine... sort of speak, because when i scroll down due to large content, the little handler resize icon moves up or down depending on how I scroll instead of being fixed at the bottom like where it was in the first place.
And another thing, the little child divs inside its parent aren't resized with the parent's size. How can i achieve that?
This is my HTML code:
<div id="sendmessage-panel-overlay">
<div id="overlay-header">
<h1 id="title" style="font-size: 12px; float: left; padding-top: 7px;"></h1>
<div id="maximize_icon">
<img src="<c:url value='/images/x-icon.gif'/>" title="Close window" onclick="closePopUp()">
</div>
</div>
<div id="body-content"></div>
</div>
And this is the CSS:
#sendmessage-panel-overlay
{
background-color: white;
border-color: gray;
border-style: solid;
border-width: 1px;
float: left;
height: 500px;
left: 21%;
padding: 0px 17px 17px;
position: fixed;
text-align: center;
top: 10%;
visibility: hidden;
width: 700px;
overflow: auto;
}
#overlay-header
{
width: 700px;
position: fixed;
height: 30px;
background-color: #fff;
}
#maximize_icon {
width: 16px;
height: 16px;
float: right;
}
#body-content {
padding-top: 50px;
padding-left: 10px;
display: inline-block;
}
Either move the element outside of the scroll-able element or use position: absolute (probably combined with a position: relative somewhere).