This is a read-only archive of the old Scratch 1.x Forums.
Try searching the current Scratch discussion forums.

#1 2013-04-06 15:19:17

Devloper123
Scratcher
Registered: 2011-11-27
Posts: 100+

Help learning JavaScript+CSS

I need some help learning CSS+JS For CSS I'm trying to style a button into a block image and for JS I need some help with creating a loading bar.
Sorry my skills are bad  sad
But I'm ok with HTML,CSS,JS  smile

Last edited by Devloper123 (2013-04-06 15:20:14)


http://i45.tinypic.com/2jafczs.gifAnd Dev! Sign up on this forum!i like the  tongue  emoticon

Offline

 

#2 2013-04-06 15:36:47

GeonoTRON2000
Scratcher
Registered: 2009-12-24
Posts: 1000+

Re: Help learning JavaScript+CSS

I can't post code since I'm on my phone, but for the button use a background image.
For the progress bar, use background colors and sizes of two different HTML elements.


http://i.imgur.com/BAEgGDL.png

Offline

 

#3 2013-04-06 15:44:33

Devloper123
Scratcher
Registered: 2011-11-27
Posts: 100+

Re: Help learning JavaScript+CSS

Can you post code using your computer/laptop?


http://i45.tinypic.com/2jafczs.gifAnd Dev! Sign up on this forum!i like the  tongue  emoticon

Offline

 

#4 2013-04-06 21:15:35

nXIII
Community Moderator
Registered: 2009-04-21
Posts: 1000+

Re: Help learning JavaScript+CSS

Use <progress> for the loading bar.


nXIII

Offline

 

#5 2013-04-07 03:21:25

LS97
Scratcher
Registered: 2009-06-14
Posts: 1000+

Re: Help learning JavaScript+CSS

nXIII wrote:

Use <progress> for the loading bar.

Let me just clarify that this is an HTML5 element that wasn't yet supported in HTML 4 and XHTML 1.

Offline

 

#6 2013-04-07 04:49:10

Devloper123
Scratcher
Registered: 2011-11-27
Posts: 100+

Re: Help learning JavaScript+CSS

nXIII wrote:

Use <progress> for the loading bar.

You can But i'm trying to make a player using JS.And anyway this html5 page is Designed for 3DS and iOS


http://i45.tinypic.com/2jafczs.gifAnd Dev! Sign up on this forum!i like the  tongue  emoticon

Offline

 

#7 2013-04-07 10:18:34

nXIII
Community Moderator
Registered: 2009-04-21
Posts: 1000+

Re: Help learning JavaScript+CSS

LS97 wrote:

nXIII wrote:

Use <progress> for the loading bar.

Let me just clarify that this is an HTML5 element that wasn't yet supported in HTML 4 and XHTML 1.

It's didn't exist in HTML4, so of course it wasn't supported….

If it's designed for iOS, you'll have to do something else, though.


nXIII

Offline

 

#8 2013-04-07 11:48:23

GeonoTRON2000
Scratcher
Registered: 2009-12-24
Posts: 1000+

Re: Help learning JavaScript+CSS

Devloper123 wrote:

Can you post code using your computer/laptop?

Ok, back on my laptop.

Button
CSS

Code:

#button {
  background-image: url('images/button.png');
}

Obviously you'll need to change that to your liking.
HTML

Code:

<button id="button">MyTextHere</button>

You can use any type of button you like, just set the id to button.

Progress Bar
(I'm going to do this in HTML4)
JS

Code:

function setProgressBar(percentage) {
  percentage = percentage/100;
  var progress = document.getElementById('progress');
  var progressBar = document.getElementById('progressBar');
  progress.style.width = (percentage*parseInt(progressBar.style.width))+"px";
}

CSS

Code:

#progress {
  width: 0px;
  height: 14px;
  background-color: blue;
}

#progressBar {
  width: 100px;
  height: 16px;
  background-color: white;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

Also change to your liking.

HTML

Code:

<div id="progressBar"><span id="progress" /></div>

I might have gotten my syntax a little messed up since I haven't tested it, but try it.


http://i.imgur.com/BAEgGDL.png

Offline

 

#9 2013-04-07 13:22:25

Devloper123
Scratcher
Registered: 2011-11-27
Posts: 100+

Re: Help learning JavaScript+CSS

thanks ill give credit


http://i45.tinypic.com/2jafczs.gifAnd Dev! Sign up on this forum!i like the  tongue  emoticon

Offline

 

Board footer