Currently making up a browser based game in phaser and trying to add it into the container div tag I've created however phaser seems to be pushing itself to below the container div.
Two screenshots for comparison:
http://gyazo.com/3cc9b9333cf89d7fc879bd2cdc741609 (This is the container div with my header div currently inside of it which is what I want my phaser game to be doing)
http://gyazo.com/5a7cea7514a9e295355c87933c3d14ac (This is what my phaser game is currently doing above the footer div you can see the container div and also clearly see the phaser game currently residing under the footer div)
This is the code for my HTML page:
<!DOCTYPE html>
<html>
<head>
<title>This is our menu bar!</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<ul id="menu">
<li><span>Home</span></li>
<li><span>Link1</span></li>
<li><span>Link2</span></li>
<li><span>Link3</span></li>
<li><span>Link4</span></li>
</ul>
<div class="container">
<script rel="javascript" type="text/javascript" src="phaser.js"></script>
<script rel="javascript" type="text/javascript" src="game.js"></script>
<div class="header">
Title of game & small talk about about with some a box surrounding this text before another text box surrounding the game below
</div>
<div class="instructions">
</div>
Instructions
</div>
<div id="footer">
Copyright 2013 marc
</div>
</body>
</html>
And this is the code for my CSS
body {
font-family: Century Gothic, Arial;
background-color: #CCCCCC;
margin: 0px auto;
text-align: center;
}
.container {
background-color: #999999;
margin: auto;
width: 1000px;
height: 1000px;
}
.header {
font-size: 22px;
background-color: #999999;
border: 1px dashed #666666;
color: #444444;
width: 800px;
font-size: 14px;
text-align: center;
margin: 10px auto 0px auto;
}
#menu {
float: center;
padding: 0px 10px;
margin: 10px;
border-bottom: 5px solid #6D7AB2;
}
#menu li {
display: inline;
list-style: none;
margin: 0px;
padding: 0px;
}
#menu li a {
float: center;
color: #000000;
text-decoration: none;
background: url('menuleft.gif') top left no-repeat;
margin: 0px 0px;
padding: 9px 0px 0px 9px;
}
#menu li a span {
background: url('menuright.gif') top right no-repeat;
padding: 9px 25px 6px 15px;
}
#menu li a:hover,
#menu li a.highlight {
background: url('menuleft-hl.gif') top left no-repeat;
color: #ffffff;
}
#menu li a:hover span,
#menu li a.highlight span {
background: url('menuright-hl.gif') top right no-repeat;
}
canvas {
padding: 0px;
margin: auto;
}
#footer {
clear:both;
margin-top: 10px;
border-top: 5px solid #6D7AB2;
padding: 20px 0px;
font-size: 80%;
text-align:center;
}
Anyone able to help show me where I'm going wrong?
Using the examples found on the phaser github (https://github.com/photonstorm/phaser)
in the Html:
<div id="phaser-example"></div>
on the .js
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
The fourth parameter on Phaser.Game() is the id of the DOM element in which you would like to insert the element that Phaser creates.
For Phaser3
you can specify parent id in configuration object
const config = {
width: 800, height: 600,
...
parent: 'element-id'
};
new Phaser.Game(config);
checkout docs here:
https://photonstorm.github.io/phaser3-docs/global.html#GameConfig
The 4th parameter to the Phaser.Game constructor is the parent container. If you leave it empty it will inject the canvas into the document body. If you give it a string, it will run a document.getElementById() on that string, and if found inject the canvas into there. If you provide it with an HTMLElement it will skip the ID check and inject the canvas into that element instead.
So in your case specifically I would suggest you create a div with an ID, then pass that ID into the constructor.
More details here: http://gametest.mobi/phaser/docs/Phaser.Game.html
Related
I'm trying to format an inline navigation, but the last link which has a class tied to a piece of javascript seems to be causing the entire link to become a block element rather than putting it inline with the rest of the links in the navigation.
I tried removing the class, changing the class to something else (not tied to any script) and it puts the link back in line, which is what leads me to believe it has something to do with the javascript it's tied to. I've also tried calling a.show in css to display it inline and inline-block to no avail. I feel like I'm missing a well know rule of thumb.
The <a href="#" class="show"> is on Line 20 and the <script> tag is on Line 25 of the HTML
CSS
#nameTag {
max-width: 800px;
min-width: 320px;
margin: 0 auto;
background-color: #FFFFFF;
-webkit-box-shadow: 2px 2px 2px 1px hsla(0,0%,0%,0.72);
box-shadow: 2px 2px 2px 1px hsla(0,0%,0%,0.72);
border-radius: 43px;
border: 2px solid #4B4949;
}
#tagTop{
width: 100%;
height: auto;
display:block;
color: #fff;
font-size:30px;
text-align: center;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom{
width: 100%;
height: 50px;
display: block;
color: #FFFFFF;
text-align: center;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom > a:link, a:visited{
color:#fff;
}
#container{
padding:20px
}
.miniNav{
text-align:center;
font-size:18px;
font-weight:600;
margin-bottom:10px;
}
.miniNav a:link,a:visited{
color:#0033AA;
text-decoration:none;
}
.miniNav a:hover,a:active{
color:#000;
}
HTML
<div id="nameTag">
<div id="tagTop">
<h3>HELLO</h3>
my name is
</div>
<div id="name">
<div class="show">
<img src="images/name.jpg" width="100%" alt="First slide image" class="center-block">
</div>
</div>
<div id="container">
<div class="miniNav">
Change Font
|
Download Graphic CV
|
Download Typed CV
|
<a class="show" href="#">Close CV</a>
</div>
</div>
<div id="tagBottom">
</div>
<script>
$("#container").hide();
$(".show").click(function() {
$("#container").slideToggle("slow");
});
</script>
</div>
UPDATE2
In order to prevent the jerking behavior when clicking the .hide and .show links, simply add event.preventDefault() to your jQuery function.
<script>
$("#container").hide();
$(".show, .hide").click(function(event) { // Pass the event object here
event.preventDefault(); // Then use the preventDefault() property
$("#container").slideToggle("slow");
});
</script>
UPDATE
I misunderstood what the question was, I believe that you wanted the toggle image inline with the other anchors. That would be more trouble than what it's worth. .show is in another div and nested. So just add an identical img inside .miniNav and make sure the other image disappears. Also, I used a background-image for the one inside .miniNav because it's easier to handle as a link. It's better if you look at the jQuery than for me to explain it. I also changed the "Close CV" link's class to .hide so it doesn't share styles and then added .hide to the jQuery in order to keep functionality.
The last link "Close CV" is ok as long as your #nameTag is # 550px wide, else the link will naturally wrap to the next line if less than 550px. If you make .miniNav and the anchors behave like table components, there will be no wrapping to the next line. Add display:table-row to .miniNav and display:table-cell to each anchor.
Changed padding so that links conform when #nameTag is compact. Removed | and added border-right: 1px solid blue;. To center the links, margin: 0 auto; display: table; was added to #container.
You could use percentages or ems instead of px for margins and padding so that your text will stay on one line consistently. That takes some experimenting so I'll leave you that to decide.
BTW, when designating selectors in CSS, if you have multiple selectors that apply to a ruleset, you need to be specific on each one.
Example
.miniNav a:hover,
a:active {
color: #000;
}
Anchors that are descendants of .mini-nav are black when hovered over / Any anchor that is active is black.
.miniNav a:hover,
.miniNav a:active {
color: #000;
}
Anchors that are descendants of .mini-nav are black when hovered over or is active.
Changes
#container {
padding: 10px 0px 15px 7px;
margin: 0 auto;
display: table;
}
.miniNav {
text-align: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
display: table-row;
}
.miniNav a,
.miniNav a:link,
.miniNav a:visited {
color: #0033AA;
text-decoration: none;
display: table-cell;
border-right: 1px solid blue;
padding: 0 7px;
}
...
.miniNav a:last-of-type {
border-right: 0px none transparent;
}
SNIPPET
$("#container").hide();
$(".show, .hide").click(function() {
$('.show').toggle();
$("#container").slideToggle("slow");
});
#nameTag {
max-width: 800px;
min-width: 550px;
margin: 0 auto;
background-color: #FFFFFF;
-webkit-box-shadow: 2px 2px 2px 1px hsla(0, 0%, 0%, 0.72);
box-shadow: 2px 2px 2px 1px hsla(0, 0%, 0%, 0.72);
border-radius: 43px;
border: 2px solid #4B4949;
}
#tagTop {
width: 100%;
height: auto;
display: block;
color: #fff;
font-size: 30px;
text-align: center;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom {
width: 100%;
height: 50px;
display: block;
color: #FFFFFF;
text-align: center;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom > a:link,
a:visited {
color: #fff;
}
#container {
padding: 10px 0px 15px 7px;
margin: 0 auto;
display: table;
}
.miniNav {
text-align: center;
font-size: 18px;
font-weight: 600;
margin: 0px auto 10px;
display: table-row;
}
.miniNav a,
.miniNav a:link,
.miniNav a:visited {
color: #0033AA;
text-decoration: none;
display: table-cell;
border-right: 1px solid blue;
padding: 0 7px;
}
.miniNav a:hover,
.miniNav a:active {
color: #000;
}
.miniNav a:last-of-type {
border-right: 0px none transparent;
}
a.img {
background: url(http://placehold.it/80x50/eea/e00?text=First=slide+image)no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nameTag">
<div id="tagTop">
<h3>HELLO</h3>
my name is
</div>
<div id="name">
<div class="show">
<a href="#">
<img src="images/name.jpg" width="100%" alt="First slide image" class="center-block">
</a>
</div>
</div>
<div id="container">
<div class="miniNav">
<a href="#" class='img'>First slide image</a>
Change Font
Download Graphic CV
Download Typed CV
<a class="hide" href="#">Close CV</a>
</div>
</div>
<div id="tagBottom">
</div>
</div>
It appears jQuery's slideToggle() function defaults to display:block, so you can use a callback to set it to display: inline-block manually, as explained in this answer from user black.
Your code would then be:
$("#container").hide();
$(".show").click(function() {
$("#container").slideToggle("slow", function() {
if ($("#container").is(':visible'))
$("#container").css('display','inline-block');
});
});
You'll also need to style your container as display: inline-block, unless I'm misunderstanding your question.
So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript' src="http://vaakash.github.io/jquery/easy-ticker.js"></script>
<div class="demo3">
<ul>
<li>what's causing the layout to break? Attempting to make a horizontal layout website ?</li>
<li>WordPress Mobify mobile theme, CSS</li>
<li>Gridview with Table.Rows.Count ==0 to show Footer row that include checkbox with imageurl cast</li>
<li>JS/jQuery - animated random name picker</li>
</ul>
</div>
<style>
.demof{
border: 1px solid #ccc;
margin: 25px 0;
}
.demof ul{
padding: 0;
list-style: none;
}
.demof li{
padding: 20px;
border-bottom: 1px dashed #ccc;
}
.demof li.odd{
background: #fafafa;
}
.demof li:after {
content: '';
display: block;
clear: both;
}
.demof img{
float: left;
width: 100px;
margin: 5px 15px 0 0;
}
.demof a{
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #06f;
}
.demof p {
margin: 15px 0 0;
font-size: 14px;
}
.demo3 {
font-family: Arial, sans-serif;
border: 1px solid #C20;
margin: 50px 0;
font-style: italic;
position: relative;
padding: 0 0 0 80px;
box-shadow: 0 2px 5px -3px #000;
border-radius: 3px;
}
.demo3:before {
content: "Latest News";
display: inline-block;
font-style: normal;
background: #C20;
padding: 10px;
color: #FFF;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
}
.demo3:after {
content: '';
display: block;
top: 0;
left: 80px;
background: linear-gradient(#FFF, rgba(255, 255, 255, 0));
height: 20px;
}
.demo3 ul li {
list-style: none;
padding: 10px 0;
}
</style>
<script type='text/javascript'>
$(function(){
$('.demo3').easyTicker({
visible: 1,
interval: 4000,
direction: 'up'
});
});
</script>
The text is scrolling up all ok but in the LatestNews i see all the time 4 lines all the lines of text instead of see each time line by line one line each time like in the demo page:
Demo Page
In the LatestNews demo example there is one line each time scrolling up.
What should i change and what cause that so there are 4 lines each time and not one like in the demo page ?
In your particular web-site that you linked at the time the padding as specified in the .demo3 style is set to 0, 0, 0, 80px.
That would usually be enough as you can see in this isolated demo, using your posted code.
Following an inspection of your linked site. The problem seems, that your site also imports another CSS file:
<link rel="stylesheet" type="text/css" href="/files/main_style.css?1398686941" title="wsite-theme-css">
That file contains all sort of styles, including a few with !important and that file seems to over-write or your CSS styles.
IF you open your site, open the debugger and find that <link...> line and delete it (from the console only) you will see your HTML will look fine. Mind you, the rest of your site will not.
I don't know how much influence you have over that file but to compensate without changing it change your padding from 80px to 115px (or what ever suits) in the .demo3 style, similar to this:
.demo 3{
...
padding: 0, 0, 0, 115px // changed from padding: 0, 0, 0, 80px
...
}
I tried the above in the console on your site and it seemed to do the trick.
Hello I am trying to keep the links centered of the tan margin. How do I get it centered to the tan margin? I've tried a few things but margins won't move.
Here is the website if you want to visually see the issue:
http://codepen.io/willc86/pen/hpFLe
I am not sure why links don't want to move when I use margin-left or margin-top
css is
#header{
background-color: tan;
width: 90%;
Height: 80px;
margin: auto;
margin-bottom: 30px;
text-align: center;
}
#header a {
margin: 40px;
border: 3px solid green;
}
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin-left: 30px;
}
#mcolumn {
width: 300px; border: 1px solid red; margin: auto;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
.clear {
clear: both;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#bx{
border: 3px solid green;
margin: auto;
width: 200px;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#margin{
margin: 30px;
}
and my html is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="header">
Facebook
Google
Yahoo
</div>
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="margin">
<div id="mcolumn"><p>mcolomn</p></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="box2">
<div id="margin">
<div id="bx">
<p> hello what is up
</div>
</div>
</div>
</body>
</html>
Add this to #header
#header {
....
line-height: 80px;
vertical-align: middle;
}
Also check the demo.
Note that this might give trouble if you want to lines of menu.
General tip : always add line-height equal to div's height to align your link in vertical middle position
line-height:80px; in #header a would do the job for you! :)
If you want to align the links vertically:
#header a {
...
line-height: 80px;
}
#header a {
border: 3px solid #008000;
display: inline-block;
margin: 0 40px;
position: relative;
top: 50%;
}
Note: the top: 50% somehow uses height and margin of parent.
You can also do it like this: create a div inside (I've called it links) which you can format away from your other div. The margins don't show because the text is inline, and you can't give inline text a top and bottom margin. Changing it to display: inline-block and position: relative allows you to change the place of the div (if you don't want to set line height). Top: 36% will centre it because this counts the margin (so you want half of 80/110 px, or 4/11 = ~36% (you can make this 50% by adding the margin to the object beneath).
HTML:
<div id="links"> Facebook
Google
Yahoo
</div>
CSS:
#header a {
border: 3px solid green;
margin-left: 40px;
margin-right: 40px;
}
#links {
display: inline-block;
position: relative;
top: 36%;
}
http://codepen.io/anon/pen/vbJkg
I have a page called project, in that page there are two grids, one called "imagesGrid" and the other one called "detailsBox", they are floating next to each other using (i.e. both has a width like 50% and display inline-block). I am trying to make the "detailsBox" to start scrolling with the page when the header reaches its top, and stop from scrolling when its bottom reaches the top of the footer. I am also trying to stop the function completely from working and set the "detailsBox" to be positioned as relative when the screen size is below 700px.
I have tried and experimented dozens of tutorials, like:
make div stick to the top of the screen and stop before hitting the footer and http://jsfiddle.net/FDv2J/3/ with no hope.
What is the best path to take to solve my problem? Here is a link to a live preview of the page: http://www.loaidesign.co.uk/portfolio ?project=Test_Project
And here is the HTML and the CSS, I don't have a working JavaScript script, and I tired the ones provided in the links above as well as many others from here, google and codepen, but can't seem to be able to make them work for me.
HTML:
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
<p>Website</p>
<img alt="Adonis Cars Rental website design" src="images/adonis-cars-website.jpg">
</div>
<div class="detailsBox">
<h3>Adonis Cars</h3>
<p>It's a luxuries cars rental agency based in Qatar</p>
<p>www.adoniscars.com
</p>
<p><strong>Skills:</strong> Web Design</p>
<p><strong>Date:</strong> 2012</p>
<p class="share icons"><strong>Share This Project On:</strong>
<br> <span>Facebook</span> <span>Twitter</span>
<!--Twitter Popup Script-->
<script type="text/javascript">
function popitup(url) {
newwindow = window.open(url, 'name', 'height=440,width=700');
if (window.focus) {
newwindow.focus();
}
return false;
}
</script>
</p>
<div> Go Back
<a class="scrollup">Scroll Up</a>
</div>
</div>
</div>
</div>
CSS:
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img {
border: 1px solid #EAEAEA;
margin-bottom: 10px;
display: block;
}
.imagesGrid img:last-of-type {
margin-bottom: 0;
}
.imagesGrid p {
border-top: 1px solid #EAEAEA;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
position: fixed;
top: 0;
width: 347px;
margin-top: 28px;
padding-left: 30px;
}
.detailsBox p {
border-bottom: 1px solid #EAEAEA;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p:first-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox a:hover {
color: #5575A6;
}
.detailsBox div {
background-color: #F5F5F5;
padding: 15px 0;
text-align: center;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
.detailsBox div a {
background-color: #EAEAEA;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover, .detailsBox div a:active {
color: #FFFFFF;
background-color: #5575A6;
}
.share.icons {
cursor: default;
}
.share.icons a {
vertical-align: middle;
background-color: #F5F5F5;
}
.share strong {
margin-right: 10px;
}
.share br {
display: none;
}
.scrollup {
display: none;
}
You might want to check out StickyFloat
It uses JS to achieve what you want. The problem you have is that you're trying to use CSS to conditionally do something, when really that's not what CSS is for
CSS "Float" VS Javascript
If you want the floated div to remain at a certain position all the time, that's okay. But CSS cannot differentiate between elements on the page. Here's the official spec:
fixed The element is positioned relative to the browser window
The problem is fixed is related to the browser window only, not other elements. JS, on the other hand, uses the DOM to create an array of elements on the page, which you can create conditions for. It'd highly recommend looking at StickyFloat, or the other "sticky" JS plugins :)