HTML5/CSS3/advancedJavascript learning and programming logs - Page 4 - Computer Technical Help

Two Plus Two Forums Other Topics Computer and Technical Help

HTML5/CSS3/advancedJavascript learning and programming logs

Post Reply Subscribe

...

Page 4 of 12

1 2 3 4 5 6 7 8 9

Page 4 of 12

1 2 3 4 5 6 7 8 9

05-11-2011 , 04:49 PM

#76

clowntable

Carpal \'Tunnel

Join Date: Jun 2006 Posts: 45,557

If I'd involve a designer it would probably be just for colors and fonts not for layouting or anything more complex. Worst case scenario I'd just ask them to tell me what colors they think would work well here and there, what fonts I should use and manually fix the CSS.

Blueprint certainly looks like something I'll use and I've scribbled it down on my "reused tech" sheet for my next web project

Quote

$25m Guaranteed WPM on CoinPoker

Join the action now

Daily Rewards • Splash Pots • CoinRaces

05-11-2011 , 05:00 PM

#77

_dave_

_Pooh_Bah_

Join Date: Feb 2005 Posts: 13,154

piwik >>> google analytics.

Quote

05-12-2011 , 12:07 AM

#78

Neil S

King of the sidebar

Join Date: Sep 2004 Posts: 20,767

Quote:

Originally Posted by _dave_

piwik >>> google analytics.

Ooh I have to check in on that. I'm still in awstats land.

Edit: Oh, it uses a bug. It's not a log analyzer. Drat.

Quote

05-12-2011 , 02:29 AM

#79

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Ugh, so close, so desperate. I just have to go ahead and create individual divs. There is a 1/2 pixel break between the left and right, so this won't work.

short-cuts, fml.

Code:

span#kInv{
background-color: #DDDDDD;
border-style: none;
height: 22px;
padding-top: 2.8px;
padding-left: -1px;
}

The padding was to manipulate a <hr> and move it so that it was flush to the keys on the right side. Didn't work.

Quote

05-12-2011 , 02:55 AM

#80

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta chartype="utf-8">

<style type="text/css">

body{
width: 960px;
background-color:#FF0066;
}

header{
margin-left: 250px;
}

div#piano{
width: 175px;
height: 700px;
background-color: #DDDDDD;
border-width: 2px;
border-style: solid;
border-color: black;
margin-top: -50px;
color: black;
}

div#keysOne{
margin-top: -708px;
width: 75px;
height: 70px;
background-color: #DDDDDD;
}

div#keysTwo{
margin-top: 30px;
width: 75px;
height: 100px;
background-color: #DDDDDD;
}

div#keysThree{
margin-top: 33px;
width: 75px;
height: 60px;
background-color: #DDDDDD;
}

div#keysFour{
margin-top: 38px;
width: 75px;
height: 70px;
background-color: #DDDDDD;
}

div#keysFive{
margin-top: 62px;
width: 75px;
height: 70px;
background-color: #DDDDDD;
}

div#keysSix{
margin-top: 28px;
width: 75px;
height: 70px;
background-color: #DDDDDD;
}

span#p{
display: block;
height: 15px;
text-align: right;
}

span.k{
display: block;
width: 100%;
height: 15px;
background-color: black;
border-color: black;
border-style: solid;
margin-left: 0px;
margin-top: 12px;
margin-right: 0px;
margin-bottom: 0px;
}

a{
color: #FF0066;
}

a:hover{
color: blue;
}

</style>

</head>
<body>

<header>
</header>

<div id="piano">
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"><a>HOME</a></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"><a>BIO</a></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"><a>MUSIC</a></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"><a>LESSONS</a></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    
    <div id="keysOne">
        <span class="k"></span>
        <span class="k"></span>
    </div>

    <div id="keysTwo">
    
        <span class="k"></span>
        <span class="k"></span>
        <span class="k"></span>
    </div>
    
    <div id="keysThree">
        <span class="k"></span>
        <span class="k"></span>
    </div>
    
    <div id="keysFour">
        <span class="k"></span>
        <span class="k"></span>
        <span class="k"></span>
    </div>
    
    <div id="keysFive">
        <span class="k"></span>
        <span class="k"></span>
    </div>
    
    <div id="keysSix">
        <span class="k"></span>
        <span class="k"></span>
        <span class="k"></span>
    </div>
</div>

</body>
</html>

Quote

05-12-2011 , 04:18 AM

#81

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

Code:

div#keysOne{
margin-top: -708px;
width: 75px;
height: 70px;
background-color: #DDDDDD;
}

div#keysTwo{
margin-top: 30px;
width: 75px;
height: 100px;
background-color: #DDDDDD;
}

div#keysThree{
margin-top: 33px;
width: 75px;
height: 60px;
background-color: #DDDDDD;
}

div#keysFour{
margin-top: 38px;
width: 75px;
height: 70px;
background-color: #DDDDDD;
}

div#keysFive{
margin-top: 62px;
width: 75px;
height: 70px;
background-color: #DDDDDD;
}

div#keysSix{
margin-top: 28px;
width: 75px;
height: 70px;
background-color: #DDDDDD;
}

Instead of having this, I think it's better to do this:

Code:

.keys
{
width: 75px;
height: 70px;
background-color: #DDD;
}

.key1{
margin-top: -708px;
}

.key2{
margin-top: 30px;
}

.key3{
margin-top: 33px;
}

.key4{
margin-top: 38px;
}

.key5{
margin-top: 62px;
}

.key6{
margin-top: 28px;
}

Then select like this:

Code:

<div class="keys key3"></div>

You remove repeating code and it's a bit neater

Quote

05-12-2011 , 05:21 PM

#82

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

Yep, a lot of people forget about the "cascading" in CSS. There are some quirks with IE6 when using multiple classes but there's solutions out there to make it work. There's pretty much no reason not to take advantage of them.

Quote

05-12-2011 , 05:24 PM

#83

anononon

Guest

Posts: n/a

Quote:

Originally Posted by Neil S

Ooh I have to check in on that. I'm still in awstats land.

Edit: Oh, it uses a bug. It's not a log analyzer. Drat.

Awstats is still legit for log parsing IMO. I use it regularly.

Quote

05-12-2011 , 05:30 PM

#84

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

I still use awstats sometimes while having GA setup. It's good for getting a quick summary.

Quote

05-12-2011 , 06:25 PM

#85

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

I usually do cascading class > id instead of class > class. Actually, this is the first time I have done class > class.

I also changed the color of <hr> and added a finger cursor to the <a> and that should do it for this particular experiment.

I just decided to add an outset border property to the black keys, but I am not sure how much I like the look.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta chartype="utf-8">

<style type="text/css">

body{
width: 960px;
background-color:#FF0066;
}

header{
margin-left: 250px;
}

div#piano{
width: 175px;
height: 700px;
background-color: #DDDDDD;
border-width: 2px;
border-style: solid;
border-color: black;
margin-top: -70px;
color: black;
float: left;
}

div.keys{
width: 75px;
background-color:
height: 70px
margin-top;
}

div.keysOne{
margin-top: -708px;
height: 70px;
}

div.keysTwo{
margin-top: 30px;
}

div.keysThree{
margin-top: 45px;
}

div.keysFour{
margin-top: 45px;
}

div.keysFive{
margin-top: 45px;
}

div.keysSix{
margin-top: 45px;
}

span#p{
display: block;
height: 15px;
text-align: right;
padding-right: 5px;
}

span.k{
display: block;
width: 100%;
height: 15px;
background-color: black;
border-color: black;
border-style: solid outset solid solid;;
margin-left: 0px;
margin-top: 12px;
margin-right: 0px;
margin-bottom: 0px;
}

section{
margin-left: 250px;
background-color: #FF0099;
border-style: ridge;
border-color: #FF0099

}

a{
cursor: pointer;
color: #FF0066;
}

a:hover{
color: blue;
}

hr{
color: #EEEEEE;
}

</style>

</head>
<body>

<header>
<img src="x" />
</header>

<div id="piano">
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"><a>HOME</a></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"><a>BIO</a></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"><a>MUSIC</a></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"><a>LESSONS</a></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"><a>CONTACT</a></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    
    <div class="keys keysOne">
        <span class="k"></span>
        <span class="k"></span>
    </div>

    <div class="keys keysTwo">
    
        <span class="k"></span>
        <span class="k"></span>
        <span class="k"></span>
    </div>
    
    <div class="keys keysThree">
        <span class="k"></span>
        <span class="k"></span>
    </div>
    
    <div class="keys keysFour">
        <span class="k"></span>
        <span class="k"></span>
        <span class="k"></span>
    </div>
    
    <div class="keys keysFive">
        <span class="k"></span>
        <span class="k"></span>
    </div>
    
    <div class="keys keysSix">
        <span class="k"></span>
        <span class="k"></span>
        <span class="k"></span>
    </div>
</div>

<section>
<audio controls="controls">
  <source src="x.ogg" type="audio/ogg" />
  <source src="x.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</section>


</body>
</html>

Quote

05-12-2011 , 06:30 PM

#86

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

Just another tip (stop me if I'm being really annoying) is I also wrote like this for a long time:

Code:

margin-left: 0px;
margin-top: 12px;
margin-right: 0px;
margin-bottom: 0px;

But it really is a lot clearer to write:

Code:

margin: 12px 0 0 0;

imo!

Quote

05-12-2011 , 06:38 PM

#87

Neil S

King of the sidebar

Join Date: Sep 2004 Posts: 20,767

It's clearer if you have ingrained in your mind which is which. Works for me, but i can imagine some might have a hard time!

Quote

05-12-2011 , 06:40 PM

#88

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

Separate margin/border declarations was ingrained in me for many years, but you never go back

Quote

05-12-2011 , 06:43 PM

#89

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

I agree with you actually. It's more that it has been several months since I used anything in CSS, so I wanted to be sure I kept the information straight.

But, surprisingly, you missed:

background-color:

Yes, without a value.

I also realized that I should have placed something in the header, like words, when I copy/pasted the refined code.

Quote

05-12-2011 , 09:47 PM

#90

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

So, a new project: beating heart.

Two ways to do this:

<blink><img><blink> over <img>, which is a solution, though abysmal.

The other option, since I want to kind-a-sorta animate: javascript.

Thinking a for loop, but I don't know how to toggle the images so that it constantly repeats. This should get messy/interesting.

Yes, the code will be horribly obfuscated. I guess I am sort of approaching everything from obfuscate to minimize. Not sure how impractical this is in coding practice.

Quote

05-12-2011 , 10:02 PM

#91

TheIrishThug

Pooh-Bah

Join Date: Jan 2005 Posts: 5,223

The other option would be to just make a gif that does exactly what you want.

There is no reason to do some weird JavaScript or use a tag that started out as a joke.

Quote:

... At some point in the evening I mentioned that it was sad that Lynx was not going to be able to display many of the HTML extensions that we were proposing, I also pointed out that the only text style that Lynx could exploit given its environment was blinking text. We had a pretty good laugh at the thought of blinking text, and talked about blinking this and that and how absurd the whole thing would be. [...] Saturday morning rolled around and I headed into the office only to find what else but, blinking text. It was on the screen blinking in all its glory, and in the browser. How could this be, you might ask? It turns out that one of the engineers liked my idea so much that he left the bar sometime past midnight, returned to the office and implemented the blink tag overnight. He was still there in the morning and quite proud of it. Source

Quote

05-12-2011 , 10:08 PM

#92

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

This idea (hopefully) leads me to do some really cool stuff, including the small projects I proposed a few pages back. But I have to start of easy.

Unless you would rather me create a bunch of pop-up ads?

Quote

05-12-2011 , 10:49 PM

#93

TheIrishThug

Pooh-Bah

Join Date: Jan 2005 Posts: 5,223

I am in favor of learning by doing. But I guess I just think of it in terms of doing a bigger projects that ends up including a bunch of little things you pick up along the way. Then, when you are done, you have something in your portfolio that shows some complexity, rather than a bunch of tiny tech demos.

Quote

05-13-2011 , 01:30 AM

#94

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

If you have any ideas, feel free to post them.

Quote

05-13-2011 , 06:00 AM

#95

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Apparently, I am too ****ing stupid to place an image into a canvas without having another image outside of the canvas.

I tried so many goddam codes tonight, my ****ing head is going to explode. (why w3fools thinks mozDoc is good...)

No, placing the script in the body doesn't change a damn thing. What the hell is going on here?

Code:

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="utf-8">

<script type="text/javascript">
function drawHeart() {
  var canvas = document.getElementById("beatingHeart");
  var context = canvas.getContext("2d");
  var heart = document.getElementById("heart");
  context.drawImage(heart, 0, 0);
}
window.onload = drawHeart;

</script>

</head>
<body>

<img id="heart" src="http://i218.photobucket.com/albums/cc208/davidtoomey/heart.jpg" width="33" height="33">

<canvas id="beatingHeart" width="960" height="600"></canvas>



</body>
</html>

Quote

05-13-2011 , 06:07 AM

#96

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

This probably isn't it but might be, have you tried closing your image tag:

<img id="heart" src="http://i218.photobucket.com/albums/cc208/davidtoomey/heart.jpg" width="33" height="33" />

Best plan would be to step through the code (if you are on Chrome use the developer tools) and set a breakpoint and monitor values. It will help you pinpoint the problem better.

Quote

05-13-2011 , 06:14 AM

#97

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

No, that don't work.

I suspect it's the same issue as what happened with attempting to layer images. Probably limited with what I can do with text editing and viewing in the web window. Not sure if the image file names get binked when they are so long and supported externally.

Quote

05-13-2011 , 06:23 AM

#98

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

When you debug it what is the value of 'heart' just before you insert it?

Quote

05-13-2011 , 06:58 AM

#99

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Line 11 and 12 show img#heart.jpg on mouse over, if that is what you are asking. The values basically match up to what i would like to see them as.

To be honest, I don't know how to debug at all, so I'll stop bs-ing an answer.

Quote

05-13-2011 , 07:14 AM

#100

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

Learning how to debug is great, not bs great, actually great if you learn how and it should only take 10-20 mins to learn in chrome.

Download chrome, open your page and press Ctrl+Shift+J

Click on the scripts tab, and find then line

Code:

var heart = document.getElementById("heart");

Click on the line number, a blue square should appear around it. This is a break point, which means when the code executes it will pause at this point. Now reload the page, and the page will 'hang' on that line. A small red arrow will appear letting you know where it is in the script.

Hold your mouse over the variables for a second and an info popup will come up showing you information about the variable.

It will be useful for you, because you should be able to learn information about the variables you've assigned and you can rule them out one by one as being the cause of the problem.

Quote

$25m Guaranteed WPM on CoinPoker

Join the action now

Daily Rewards • Splash Pots • CoinRaces

Page 4 of 12

First

1 2 3 4 5 6 7 8 9

Last

Post Reply Subscribe

...

Page 4 of 12

First

1 2 3 4 5 6 7 8 9

Last