I'm making an implementation of Conway's Game of Life.
For the GUI I'm creating a web, and I'd like to show a table with responsive square cells, no matter the number of cells. Any help?
Here I show what I've done:
HTML
function createBoard(heigh, width){
console.log("Executing function");
var table,row,options,cell;
table=document.getElementById("board");
for (var i=0; i<heigh;i++){
row=document.createElement("tr");
for (var j=0;j<width;j++){
cell=document.createElement("td")
cell.id= "cell-"+i+"-"+j;
cell.classList.add("cell","death")
//cell.addEventListener("click",changeCellClass(cell.id,"death"))
cell.onclick=function(){changeCellClass(this,"death")};
//cell.onmousedown=function(){changeCellClass(this,"death")};
cell.onmouseover=function(){this.style.backgroundColor="yellowgreen"};
cell.onmouseleave=function(){this.style.backgroundColor="darkcyan"};
//cell.addEventListener("click",console.log(cell.id))
row.appendChild(cell);
}
table.appendChild(row)
}
}
function changeCellClass(cell,currentClass){
console.log(cell.id)
console.log(currentClass)
cell.classList.remove(currentClass)
if(currentClass=="death"){
cell.classList.add("live")
currentClass="live"
cell.style.backgroundColor="yellowgreen";
cell.onmouseover=function(){this.style.backgroundColor="darkcyan"};
cell.onmouseleave=function(){this.style.backgroundColor="yellowgreen"};
console.log(cell.id+" 've changed to live")
}else{
cell.classList.add("death")
currentClass="death"
cell.style.backgroundColor="darkcyan";
cell.onmouseover=function(){this.style.backgroundColor="yellowgreen"};
cell.onmouseleave=function(){this.style.backgroundColor="darkcyan"};
console.log(cell.id+" 've changed to death")
}
cell.onclick=function(){changeCellClass(this,currentClass)};
}
createBoard(50,50);
table{
height: 70%;
width: 70%;
margin-right: auto;
margin-left: auto;
border: 1px black;
border-collapse:collapse
}
td {
border: 1px solid black;
}
.death{
background-color:darkcyan;
}
.live{
background-color: yellowgreen;
}
p{
text-align: justify;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Conway's Game of Life</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.10/brython.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.10/brython_stdlib.min.js"></script>
<script src="index.js" defer></script>
<!-- -->
<!--<script src="http://localhost:8000/Game/Web/index.py" type="text/python" defer></script>-->
<link rel="stylesheet" href="index.css">
</head>
<body onload="brython(1)">
<h1 id=test>Conway's Game of Life</h1>
<p>The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970.
It is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input.
One interacts with the Game of Life by creating an initial configuration and observing how it evolves.
It is Turing complete and can simulate a universal constructor or any other Turing machine.
</p>
<table id="board">
</table>
<h2>Rules</h2>
<p>
<ul>
<li>Any live cell with two or three live neighbours survives.</li>
<li>Any dead cell with three live neighbours becomes a live cell.</li>
<li>All other live cells die in the next generation. Similarly, all other dead cells stay dead.</li>
</ul>
</p>
<h2>Patterns</h2>
<h3>Still life</h3>
<h3>Oscillators</h3>
<h3>Spaceships</h3>
</body>
</html>
I've look for a lot of sites and haven't found nothing suitable for this problem (the solution I've found are for a particular height or width in cells, not something that adapats)
Have you looked at using GRID e.g.
.gameboard{
display:grid;
grid-template-rows:repeat(50, 1fr);
grid-template-columns: repeat(50,1fr)
grid-gap:3px;
height:70%;
}
.death{
background-color:darkcyan;
}
.live{
background-color: yellowgreen;
}
HTML
<div class = "gameboard">
<div class="live"><div>
....
<div class="death"><div>
<div class="live"><div>
...
<div class="live"><div>
</div>
Well, after doing some look into, I've a solution suitable for my problem: using jquery.
function windowReszie(){
var size =$("td").width();
$("td").height(size);
}
Then add this fuction on window's resize event and it is done
$(window).on('resize', function(){windowReszie()});
Related
EDITED: I am showing the whole code instead
I know this is probably a really simple question, but I am somewhat new at HTML5 and CSS coding. The problem I am encountering is that I have one line of text I wish to edit individually from the other paragraphs, so I am using a Div ID. The problem is, CSS is linked right to text, but when I add CSS to the div, it won't edit. It's all on a separate sheet, and CSS works for everything else besides the Div. Here is the HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<title>Codetopia - Learn to Code</title>
<link href="externalfile:drive-be6fc3227f0f52098e01c434b3f53296322df648/root/Coding/main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lemonada" rel="stylesheet">
</head>
<body>
<h1><i>CODETOPIA</i></h1>
<h1>Learn to Code the <i>Fun</i> Way</h1>
<img src="http://www.rouzell.net/wp-content/uploads/2016/01/html_css.png" alt="HTML 5 and CSS3 Image"/>
<p>Explore the world of code through this interective course for ages 7-12.</p>
<p></p>
<h2>Why Codetopia?</h2>
<p>Codetopia presents a playful, fun, academic atmosphere for young children to discover. <br /> Here are some of the benefits:</p>
<ul>
<li><b><i>100% free</b></i> for everyone at any age</li>
<li>Learn through an interactive storyline</li>
<li>Simple to follow steps</li>
<li>Color-coded text</li>
</ul>
<img src="https://edsurge.imgix.net/uploads/post/image/7747/Kids_coding-1456433921.jpg" alt="Coding for Kids"/>
<!--<img src="http://codeteachers.com/wp-content/uploads/2016/03/kids-coding.png
" alt="Coding for Kids"/> is optional image-->
<h2>How it works</h2>
<p>The teaching process is extremely unique and flexible. Children start with being introduced to a fictional story, that they can read. Throughout the story, certain issues or missions will be needed where the child then will be taught the basis of coding to help the characters. <br /> Here is more in detail:</p>
<ol>
<li>Follow Lee and Madison's numerous interactive adventures</li>
<li>Learn and develop basic coding skills to help the twins throughout the story</li>
<li>Put your skills to the test to complete each mission and story</li>
<div id="join">
<p><b>Join the Codetopia Adventure today!</b></p>
</div>
<!-- Pic of the twins here? Make sure to resize it -->
</ol>
</body>
</html>
* {
font-family: Georgia,Times,serif;
background-color: White;
}
h1 {
text-decoration: none;
font-size: 42px;
color: rgba(46,139,87,0.9);
font-family:'Lemonada',cursive;
line-height: 1em;
}
h2 {
text-decoration: none;
font-size: 24px;
background-color: SeaGreen;
color: White;
margin-right: 1100px;
font-style:italic;
text-align:center;
font-family:'Lemonada',cursive;
}
p, li {
font-size: 18px;
line-height: 1.5em;
}
li {
color: rgb(37,232,98);
#join p {
color: SeaGreen;
}
#join p b {
color: SeaGreen!important;
}
as you can see in the doc you are giving color to that DIV not giving color to the child p or b tag of parent div which is based on identifier so how you can gave separate color to text based on ID:
#join p {
color: SeaGreen;
}
<div id="join">
<p><b>Join the Codetopia Adventure today!</b></p>
</div>
if you want your child elements to herit their parents attributes, use !important.
b, p
{
color: inherit !important;
}
To expand on these answers, the reason why you need to specify #join p is that CSS rules "cascade" by specificity. I assume you have another style rule for p which is considered more specific.
Another option would be to change your p color rule to a body color rule.
you must assign the code to "p" such as this:
#join p{
color: red !important;
}
in your css you missing one "}" before #join, and the second problem is that SeaGreen is not acceptable, so i change it to red.
First of all many thanks for this page, it has been helping me a lot! But at this point I have a question where I cannot find an answer that fits what I want (maybe it cannot be achieved the way I am doing it).
I want to have a link with a static image, and when the user moves the cursor over the link I want an animated gif to play (the anim gif is set to not loop, so it only plays once). And when the user moves out go back to the static image and if the user goes in again, the gif should play again from the beginning.
I am using html5 combined with CSS to create my web (which I am using to learn at the same time). I did programing in the past with C++ and similar, but never on a web context.
So far this is what I tried:
CSS:
.img-acu
{
float: left;
width: 450px;
height: 264px;
background:transparent url("acu.gif") center top no-repeat;
}
.img-acu:hover
{
background-image: url("acusel.gif");
}
HTML:
But nothing at all appears :(
The weird thing is, I used this same example with two static images (png format) and it worked fine, but for some reason with the animated gif it doesn't want to work.
The I tried this:
CSS:
#test
{
width: 450px;
height: 264px;
background-image: url("acu.gif");
background-repeat: no-repeat;
background-position: left;
margin-left: 75px;
}
#test:hover
{
background-image: url("acusel.gif");
}
HTML:
<div id="test"></div>
And that works perfectly, it is just the link doesn't work and when the animated gif reaches the last frame, it never resets (unless I reload the page).
Do you know if there is any way to achieve this properly in HTML5 + CSS? should I use javascript or php?
I would really appreciate any help!
Thanks a lot!!
That can be achieved by use a static image and your gif image(Hey, that how 9gag do it!)
A basic script could be somthing like that:
<img id="myImg" src="staticImg.png" />
<script>
$(function() {
$("#myImg").hover(
function() {
$(this).attr("src", "animatedImg.gif");
},
function() {
$(this).attr("src", "staticImg.jpg");
}
);
});
</script>
Hopefully this simple way can help someone:
<img class="static" src="https://lh4.googleusercontent.com/-gZiu96oTuu4/Uag5oWLQHfI/AAAAAAAABSE/pl1W8n91hH0/w140-h165-no/Homer-Static.png"><img class="active" src="https://lh4.googleusercontent.com/i1RprwcvxhbN2TAMunNxS4RiNVT0DvlD9FNQCvPFuJ0=w140-h165-no">
Then add the following CSS:
.static {
position: absolute;
background: white;
}
.static:hover {
opacity: 0;
}
This should hopefully help some people. I got the code from a codepen and decided some stack overflow users may find it helpful. If you would like to view the original codepen, visit here: CodePen
The approach you took did not work because CSS will not change the background on < a >. Solving this can be done entirely with vanilla JS + HTML. The trick is to place:
<div class="img-acu">
inside of:
(insert here)
All that's left is to have CSS target the div. That way, you can set the static background, which then changes on :hover
Here's a fiddle showing this in action (or you can fiddle with this: https://jsfiddle.net/lyfthis/yfmhd1xL/):
.img-acu
{
float: left;
width: 250px;
height: 132px;
background:transparent url("https://i.imgur.com/7r91PY3.jpeg") center top no-repeat;
background-size: 125%;
}
.img-acu:hover
{
background-image: url("https://media.giphy.com/media/QMkPpxPDYY0fu/giphy.gif");
}
<!-- Don't do this:
-->
<div>
<div>Click on image below to go to link:</div>
<a href="https://www.google.com" title="ACU Project link">
<div class="img-acu"></div>
</a>
</div>
Try this if you are OK to use canvas:
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
.canvas {position:absolute;z-index:1;}
.gif {position:absolute;z-index:0;}
.hide {display:none;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("gif");
ctx.drawImage(img, 0, 0);
}
$(document).ready(function() {
$("#wrapper").bind("mouseenter mouseleave", function(e) {
$("#canvas").toggleClass("hide");
});
});
</script>
</head>
<body>
<div>
<img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">
<canvas id="canvas" class="canvas" width="400px" height="328px">
Your browser does not support the HTML5 canvas tag.
</canvas>
<div id="wrapper" class="wrapper"></div>
</div>
</body>
</html>
I'm trying to get the title hot rods to line up with the navigation, and the photo to float right and line up with the text content below it as well as the title and navigation to the left of it. I also need to get the navigation bar to extend the length of the photo until the text content. (as shown in the picture)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ysette Ortiz – Assignment 01</title>
<link href="rod_styles.css" rel="stylesheet" type="text/css">
</head>
<div id="body">
<body>
</br>
<div id="container">
<div id="nav">
<nav>
<div id="h1">
<h1> HOT RODS! </h1>
</div>
<ol>
<li>Home</li>
<li>Rods</li>
<li>Lifestyle</li>
</ol>
<div id="image"><img src="Images/duece.jpg" width="500" height="323" alt=""/></div>
</nav>
</div>
<div id="Content"><p>Hot rods are typically American cars with large engines modified for linear speed. The origin of the term "hot rod" is unclear. One explanation is that the term is a contraction of "hot roadster," meaning a roadster that was modified for speed. Another explanation is that the mufflers were exposed and thus there was a "hot rod" or hot muffler neck when the vehicle was running. Open roadsters were the cars of choice to modify because they were light. Hot Rod may also refer to the connecting rods, cam, or pushrods inside the engine or to the exposed frame rails of such an automobile. To me, the American hot rod is a thing of beauty created by artisans who use steel, rubber, and glass as their canvas.
</p>
</div>
</div>
</br></br></br></br></br></br>
</body>
</html>
//css------>
#charset "UTF-8";
#body{ background-image:url(Images/road_and_mountain.jpg);
background-size:cover;
}
#container {
width: 804px;
margin: 0 auto;
}
#nav ul, li{
font:Verdana;
width: 200px;
font-size:1.3em;
border-style:solid;
border-width: 1px;
list-style: none;
background-color: rgba(255,255,255,1.00);
}
#h1{
background-color:rgba(0,0,0,1.00);
color:rgba(255,255,255,1.00);
width: 200px;
}
#Content{
width:804px;
font:times new roman;
background-color: rgba(255,255,255,1.00);
border-style:solid;
border-width:2px;
padding-top:10px;
padding-left:20px;
padding-right:20px;
}
#image container{
width:604px;
float:right;
border-style:solid;
border-width: 1px;
}
If you want to keep them aligned in same line then you should give all their blocks same display i.e. Display: inline-block. Inline block will align all your elements in single line.
You can also add different width to them if you wish to do that.
Try this.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ysette Ortiz ? Assignment 01</title>
<link href="rod_styles.css" rel="stylesheet" type="text/css">
</head>
<div id="body">
<body>
</br>
<div id="container">
<div id="nav">
<nav>
<div id="h1" style = "display:inline-block">
<h1> HOT RODS! </h1>
</div>
<ol style = "display:inline-block">
<li style = "display:inline-block">Home</li>
<li style = "display:inline-block">Rods</li>
<li style = "display:inline-block">Lifestyle</li>
</ol>
<div style = "display:inline-block" id="image"><img src="Images/duece.jpg" width="500" height="323" alt=""/></div>
</nav>
</div>
<div id="Content"><p>Hot rods are typically American cars with large engines modified for linear speed. The origin of the term "hot rod" is unclear. One explanation is that the term is a contraction of "hot roadster," meaning a roadster that was modified for speed. Another explanation is that the mufflers were exposed and thus there was a "hot rod" or hot muffler neck when the vehicle was running. Open roadsters were the cars of choice to modify because they were light. Hot Rod may also refer to the connecting rods, cam, or pushrods inside the engine or to the exposed frame rails of such an automobile. To me, the American hot rod is a thing of beauty created by artisans who use steel, rubber, and glass as their canvas.
</p>
</div>
</div>
</br></br></br></br></br></br>
</body>
</html>
I've been using Polymer for a website redesign. I want to display an image that is bound to an element as a background-image. A fairly simple task, but unfortunately I'm having some issues.
I made a running sample of the code for easy testing: click me.
<polymer-element name="album-card" attributes="image">
<template>
<style>
:host{
display: block;
position: relative;
background-color: #99182c;
width: 200px;
}
.description{
padding: 10px;
color: white;
}
.circular{
width: 200px;
height: 200px;
background: url({{image}}) no-repeat;
background-color:green;
}
</style><link rel="stylesheet" href="default_styles.css">
<paper-shadow z="{{shadowValue}}" animated="true"></paper-shadow>
<div class="album-header" vertical layout>
<paper-ripple class="recenteringTouch" fit></paper-ripple>
<div class="circular">
<!--<img src="{{image}}" />--><!-- this does work -->
</div>
<div class="description">
<content select="h2"></content>
<content select="h4"></content>
</div>
</div>
</template>
<script>
Polymer('album-card');
</script>
</polymer-element>
The issue is in the css styling. For some reason the image doesn't diplay in the following line: background: url({{image}}) no-repeat;. However, when using {{image}} in the body somewhere else (in the <div class="circular">, the image does display.
Replacing the {{image}} inside the styling with the direct link also works.
What am I doing wrong?
This looks like a bug. The {{}} are being interrupted literally instead of being parsed by the template engine. Replacing them with [[]] one time bindings works: http://jsbin.com/yocokire/4/edit
However, you should avoi using data-binding inside of <style> if possible (see https://github.com/Polymer/polymer/issues/270#issuecomment-24683309). There are perforamnce concerns and issues under the polyfill. Instead, use a style attribute on the element and do your binding there: http://jsbin.com/riqizige/1/edit
Right now I have two HTML classes and a CSS file. One HTML file is used for writing HTML code and another one is for putting large text/paragraph. Now I want to reference that HTML file (which includes a big paragraph) into my main html file.
How could it be done?
Is it a good practice?
Or is there any alternative way to do that?
The code I wrote:
main.html:
<!--
All the html code will go in this file. This is the main core file of any website.
-->
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<!--<img src="bricks.JPG" alt="blue bricks" width="300" height="1000">-->
<style type="text/css">
</style>
</head>
<body>
<h1 id="style_header">Welcome to my green world!</h1></div>
<div id="menu_area" >
<div id="home">HOME</div><br /><br /><br />
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />
</div>
<p id="paragraph_home">paragraph.</p>
<!-- I want to call the home.html class here so that the paragraph is shown in my homepage under the home menu.-->
<div id="footer">Developed by Jabir Al Fatah</div>
</body>
</html>
main_design.css:
/*
All the css properties will go in this file. CSS properties design the site to look it prettier.
*/
#style_header {
background-color:blue;
text-align:center;
padding:20px;
margin:-8px;
border:4px solid red;
}
#paragraph_home{
text-align:center;
display:inline-block;
width:300px;
vertical-align:top;
}
#menu_area {
border:4px solid red;
margin:-8px;
background-color:#FFD700;
padding-top:30px;
margin-top:4px;
height:600px;
width:150px;
display:inline-block;
vertical-align:top;
}
body {
background-image:url(green.JPG);
background-repeat:no-repeat;
}
#footer {
background-color:blue;
margin:-8px;
border:2px solid red;
text-align:center;
}
#home {
font:bold 20px Tahoma;
text-align:left;
}
#about_me {
font:bold 20px Tahoma;
text-align:left;
}
#gallery {
font:bold 20px Tahoma;
text-align:left;
}
#contact_me {
font:bold 20px Tahoma;
text-align:left;
}
#my_diary {
font:bold 20px Tahoma;
text-align:left;
}
#blog {
font:bold 20px Tahoma;
text-align:left;
}
home.html
<!--
The text I want to add in the home link will go here. As soon as an user
loads the page will be able to see the paragraph. This paragraph should also be shown when the user clicks on Home menu.
-->
<!--
Now, basically I want to call this class in my "main.html" class. how to do that?
The reason I want to do that because I really don't like this giant paragraph in my "main.html" class.
-->
<p id="paragraph_home">I was born in a beautiful small village <!--Just an example paragraph-->
of.......
The villagers were relatively peaceful, almost free from crime
and sadness, besides they were very merciful and happy. The
reason I was born there is long long time ago my father’s
pre-generations were settled in the region. To live for his
own, my father had to move in a new village. Our new home was
just a kilometer away from my grandfather’s place. I came to
hear many legendary tales about that piece of land where our
current home is located. People use to say that there was
jungle and some evil’s residence long time ago. From our
village, some seniors of mine saw some shocking scenery with
monster shape in that bush. By the time my father cut the
jungle to settle residence. My father was a school teacher.
And my mom is a homemaker. I am the fourth child of my parents.
Among five siblings, my only and one sister is the second child.</p>
[NOTE: I want that all of my paragraph or text should appear next to the menu area and below the heading.]
HTML out of the box doesn't support this. You would need to use a dynamic language like PHP or ASP.NET. You would need to store your text in a variable, and call that on your main page. Here is a PHP example of how I accomplished this a while back:
First you would store your paragraph in another PHP file, lets call it paragaph.php.
//paragraph.php
var myParagraph = '<p>your paragraph text here</p>';
Lets call the main file index.php
//index.php
//Put your include statement in your <head> tag
<?php include('paragraph.php'); ?>
//And this would be your paragraph
<p id="paragraph_home">paragraph.</p>
<?php echo myParagraph; ?>
<div id="footer">Developed by Jabir Al Fatah</div>
The only catch is you will need something like WAMP installed on your computer to test this because browsers dont support PHP. They needs server side processor to create the HTML for them.
Good luck!
The iframe option works well, but there is a new method (requires a bit of work)
Using web components it would look like this:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
You are going to want to include backwords support via jquery so I'd recommend taking a look at this guys tutorial:
Web Components Tutorial
Good Luck!
Assuming I understood your problem correctly, I see two possible approaches:
client-side: load your "home.html" via an ajax call (downside of this approach is the dependence upon javascript, which the user may have decided to disable)
server-side: different server-side technologies (php, asp.net, etc.) have some sort of include mechanism
I tend to go with the 2nd approach because it doesn't rely on the presence of javascript, but it's your call.
Here's some resources:
jquery ajax | jquery load | php include