HTML5/CSS3/advancedJavascript learning and programming logs
05-22-2011
, 06:39 AM
05-24-2011
, 05:52 AM
This is about the dumbest thing ever created on the web. But at least it wasn't able to be done a few years back. 
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload=function(){
var c= document.getElementById('thisCanvas');
var ctx=c.getContext('2d');
ctx.moveTo(100, 300);
ctx.bezierCurveTo(50, 50, 300, 50, 300, 100);
ctx.bezierCurveTo(10, 50, 300, 50, 300, 300);
ctx.bezierCurveTo(50, 50, 300, 50, 300, 200);
ctx.strokeStyle="blue";
ctx.stroke();
};
</script>
</head>
<body>
<canvas id="thisCanvas" width="400" height="400">
Your browser does not support the canvas element.
</canvas>
</body>
</html>
Last edited by daveT; 05-24-2011 at 05:53 AM.
Reason: hell, yeah, it's going on the website!
05-25-2011
, 07:00 PM
Many interesting things to discover:
- Just because it renders correctly while building the page offline doesn't mean that it won't render as a Picasso once it is uploaded to the actual site. I have no idea why that happened.
- I saved my file with a different name last night. I kept on changing things and pressing refresh but nothing changed. I figured there was something going on, so I open the file itself and find that it shows up as empty on the page. Very strange. Maybe the computer was getting tired.
The solution to what I thought of was pretty easy. In order to create a multi-column drop-down list:
The issue is of course, that this does not work in IE. It does, but it doesn't render as a nice grid like it would on all the other browsers.
So, how does the forum feel about:
Apparently this is controversial?
-------------------------------
Starting working on a subdomain of the site. This subdomain is focused on music composers, musicians, etc.
The page layout will be pretty simple, and I am going to use the same CSS for each page. At the bottom of each page, there is going to be a form so that users can leave a comment. I am thinking that I will use XML for this since I don't want to go through and learn PHP or something to get all this working.
Not sure which construct I should use to tie the pages to the XML document:
xForms seems like it is only supposed to be used for the XHTML, but I can't see why that wouldn't work with HTML5.
XSLT/xQuery/xPath is another option. xQuery seems like it can work with SQL databases as well, but I am not sure if a comment field is really appropriate material for databases.
Ideally, I would like to automate the responses so that they post, plus receive an email whenever someone does leave a comment.
Just realized that this is a tall order.
- Just because it renders correctly while building the page offline doesn't mean that it won't render as a Picasso once it is uploaded to the actual site. I have no idea why that happened.
- I saved my file with a different name last night. I kept on changing things and pressing refresh but nothing changed. I figured there was something going on, so I open the file itself and find that it shows up as empty on the page. Very strange. Maybe the computer was getting tired.
The solution to what I thought of was pretty easy. In order to create a multi-column drop-down list:
Code:
#hardPianoNav li ul ul{
margin-left: 60px;
margin-top: -192px;
}
So, how does the forum feel about:
Code:
<!--[if IE]> <--![endif]>
-------------------------------
Starting working on a subdomain of the site. This subdomain is focused on music composers, musicians, etc.
The page layout will be pretty simple, and I am going to use the same CSS for each page. At the bottom of each page, there is going to be a form so that users can leave a comment. I am thinking that I will use XML for this since I don't want to go through and learn PHP or something to get all this working.
Not sure which construct I should use to tie the pages to the XML document:
xForms seems like it is only supposed to be used for the XHTML, but I can't see why that wouldn't work with HTML5.
XSLT/xQuery/xPath is another option. xQuery seems like it can work with SQL databases as well, but I am not sure if a comment field is really appropriate material for databases.
Ideally, I would like to automate the responses so that they post, plus receive an email whenever someone does leave a comment.
Just realized that this is a tall order.
05-26-2011
, 12:39 AM
I completed my first drop-down list. I figured out the logic behind the Google coding and reworked it a little bit. Here is the main code with the main stylesheet. Alas: works in all browsers but Opera?
Doing some search, SO linked to this site: http://rafael.adm.br/css_browser_selector/
but it doesn't appear to work.
As far as doing this style of drop-down list, it is much easier to just create a hidden div, but I wondered if this would work. The answer appears to be not really.
the code:
the css:
Doing some search, SO linked to this site: http://rafael.adm.br/css_browser_selector/
but it doesn't appear to work.
As far as doing this style of drop-down list, it is much easier to just create a hidden div, but I wondered if this would work. The answer appears to be not really.
the code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ii- Music T.O.C.</title>
<link rel="stylesheet" href="musicNorm.css" media="Screen" />
<!--[if IE]>
<link rel="stylesheet" href="musicIE.css" media="Screen" />
<![endif]-->
</head>
<body>
<h1>big words, obv</h1>
<div id="hardPianoNav">
<ul>
<li><a href="#">Main Articl</a></li>
<li id="subArt">Subarticles by Musician:
<ul>
<li><a href="#">Alkan</a></li>
<li><a href="#">Albeniz</a></li>
<li><a href="#">Balakirev</a></li>
<li><a href="#">Barlow</a></li>
<li><a href="#">Barret</a></li>
<li><a href="#">Bartok</a></li>
<li><a href="#">Boulez</a></li>
<li><a href="#">Bussotti</a></li>
<ul>
<li><a href="#">Ferneyhough</a></li>
<li><a href="#">Finnissy</a></li>
<li><a href="#">Fox</a></li>
<li><a href="#">Godowsky</a></li>
<li><a href="#">Henselt</a></li>
<li><a href="#">Hoban</a></li>
<li><a href="#">Ligeti</a></li>
<li><a href="#">Mareaux</a></li>
<ul>
<li><a href="#">Martino</a></li>
<li><a href="#">Prokofiev</a></li>
<li><a href="#">Ravel</a></li>
<li><a href="#">Rzewski</a></li>
<li><a href="#">Scelsi</a></li>
<li><a href="#">Scriabin</a></li>
<li><a href="#">Skalkottas</a></li>
<li><a href="#">Sorabji</a></li>
<ul>
<li><a href="#">Shostakovich</a></li>
<li><a href="#">Xenakis</a></li>
<li><a href="#">Zimmerman</a></li>
</ul>
</ul>
</ul>
</ul>
</li>
</ul>
</div>
</body>
</html>
Code:
body{
width: 960px;
}
#hardPianoNav li{
list-style: none;
}
#hardPianoNav li a{
display: block;
width: auto;
text-decoration: none;
color: #0000FF ;
}
#hardPianoNav li a:hover{
color: #FF0066;
}
#hardPianoNav ul li#subArt{
list-style: none;
cursor: pointer;
text-decoration: none;
background-color: #0000FF ;
width: 10em;
height: 1.5em;
border: 2px outset #CCCCCC;
color: white;
}
#hardPianoNav ul li#subArt li a{
background-color: #CCCCCC;
width: 5.5em;
border: .3em outset #000033;
}
#hardPianoNav li ul{
display: none;
}
#hardPianoNav li:hover ul{
display: block;
width: 100px;
}
#hardPianoNav li ul ul{
margin-left: 3.5em;
margin-top: -14em;
}
05-27-2011
, 05:24 PM
05-27-2011
, 08:28 PM
Same stylesheet, different rendering:
Obviously, one looks better than the other (no logo for me, lol).
The only reason I can think of why this happens is because they are each opening into different subdomains and the server is interpreting them differently.
The other issue is equally confounding: when I view the better-looking page on a larger screen, the header turns into a Picasso. The ugly header stays in perfect shape.
The solution I thought of is:
-- create a css reset with different settings.
or
-- change the header completely.
But architecturally, I want the opening page on each subdomain to look the same, so that when you toggle back and forth, the only thing that changes is the content, not the header.
Obviously, one looks better than the other (no logo for me, lol).
The only reason I can think of why this happens is because they are each opening into different subdomains and the server is interpreting them differently.
The other issue is equally confounding: when I view the better-looking page on a larger screen, the header turns into a Picasso. The ugly header stays in perfect shape.
The solution I thought of is:
-- create a css reset with different settings.
or
-- change the header completely.
But architecturally, I want the opening page on each subdomain to look the same, so that when you toggle back and forth, the only thing that changes is the content, not the header.
05-28-2011
, 12:41 AM
But seriously, pink and yellow?