Is there anything you would change about my code, and if so, what?

HTML & CSS
1

I’ve been working pretty hard on this and would like to know what you all think.

Basically I took out the flash audio, and replaced it with html5 audio instead. I added a cover, and a few other neat features also.I removed all the unnecessary display:blocks, and kept the ones I needed. Is there anything you think I should add to it? or anything you think I should change?

And the best part about it is that there’s virtually no slowdown to my page. With all the talk of everyone saying it would cause my page to not load fast, well, it’s loading super fast.

http://testpage23456.blogspot.com/

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

<div style="width:0;" onclick="myc=document.getElementById('mycase'); myc.style.display='block'; this.style.display='none'">

<div style="width: 256px; height: 330px; cursor: pointer; background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;text-align: center;">
 
<p style="font-family: 'Times New Roman'; font-size: 20px;color: #0059dd;line-height:73px;">[ ENJOY THE MUSIC]</p></div></div>

<div id="mycase" style="display: none;">

<div style="margin: 0;width: 50px; height: 50px; background-color:#00a0b0; color:#000000; border-top-left-radius:50px;"></div>

<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000; "></div>

<div style="margin: -50px 0 0 108px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></div>

<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841;color:#000000; "></div>

<div style="margin: -50px 0 0 216px; width: 50px; height: 50px;background-color:#edc951;color:#000000; border-top-right-radius:50px; "></div>

<div style="width:0;" onmouseover="myObject=document.getElementById('myObj'); 
myObject.style.display='block'; this.style.display='none'">

<div style="margin: 0; width: 83px; height:18px; border-top: 3px solid #0059dd;border-left: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-right: 3px solid #0059dd; background-color:#000000; border-top-left-radius:50px;border-bottom-left-radius:50px;"></div>

<div style="margin: -24px 0 0 89px;width: 88px; height:18px; border-top: 3px solid #0059dd;border-bottom: 3px solid #0059dd;background-color:#000000;"> </div>

<div style="margin: -24px 0 0 177px; width: 83px; height:18px; border-top: 3px solid #0059dd;border-right: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-left: 3px solid #0059dd;background-color:#000000; border-top-right-radius:50px;border-bottom-right-radius:50px;">

</div></div>

<div id="myObj" style="display: none;">

<div style="margin: 0;width: 83px; height:18px; border-top: 3px solid #0059dd;border-left: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-right: 3px solid #0059dd; background-color:#00ffff; border-top-left-radius:50px;border-bottom-left-radius:50px;">

<button id="playButton" style="border:none;cursor: pointer;background-color:transparent;color:blue;padding:14px 260px 8px 0;margin:0; " onmouseover="  
var player = document.getElementById('player').volume='1.0';
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
    playButton.style.padding = '14px 260px 8px 0';
    player.play();
  } else {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
    playButton.style.padding = '14px 260px 8px 0';
    player.pause();
  }">
 </button>

</div>

<div style="margin: -24px 0 0 89px; width: 88px; height:18px; border-top: 3px solid #0059dd;border-bottom: 3px solid #0059dd;background-color:#ffffff;">

</div>

<div style="margin: -24px 0 0 177px; width: 83px; height:18px; border-top: 3px solid #0059dd;border-right: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-left: 3px solid #0059dd;background-color:#ff00ff; border-top-right-radius:50px;border-bottom-right-radius:50px; ">
          
</div></div>

<a href="" target="_blank" style="display:block; margin: 0; cursor: pointer; width: 50px; height: 50px;background-color:#00a0b0;color:transparent;"
onmouseover="this.style.backgroundColor='#000000';
this.style.width='40px';this.style.height='40px';
this.style.border='thick solid #5cb378'"
onmouseout="this.style.backgroundColor='#00a0b0';
this.style.width='50px';this.style.height='50px';
this.style.border='none'">
</a>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 54px; width: 50px; height:50px; background-color:#6a4a3c;" onmouseover="this.style.backgroundColor='#badac5';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#6a4a3c'"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 108px; width: 50px; height: 50px;background-color:#cc333f;" onmouseover="this.style.backgroundColor='#b7ab9d';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#cc333f'"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841;" onmouseover="this.style.backgroundColor='#4679c7';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#eb6841'"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;" onmouseover="this.style.backgroundColor='#45bf21';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#edc951'"></a>

<div style="margin: 4px 0 0; width: 50px; height: 50px; background-color:#00a0b0; color:#000000;"></div>

<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></div>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 108px; cursor: pointer; width: 50px; height: 50px;background-color:#cc333f;color:transparent;"
onmouseover="this.style.backgroundColor='#ffffff';
this.style.width='18px';this.style.height='50px'
this.style.borderLeft='thick solid #00ffff';
this.style.borderLeftWidth='16px';
this.style.borderRight='thick solid #ff00ff'
this.style.borderRightWidth='16px'"
onmouseout="this.style.backgroundColor='#cc333f';
this.style.width='50px';this.style.height='50px';
this.style.border='none'">
</a>

<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></div>

<div style="margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;"></div>

<div style="margin: 4px 0 0; width: 50px; height: 50px; background-color:#00a0b0; color:#000000;"></div>

<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></div>

<div style="margin: -50px 0 0 108px; width: 50px; height: 50px; background-color:#cc333f; color:#000000;"></div>

<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></div>

<div style="margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;"></div>

<div style="margin: 4px 0 0; width: 50px; height: 50px; background-color:#00a0b0; color:#000000;"></div>

<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></div>

<div style="width:0;" onclick="myObject=document.getElementById('myObj2');
myObject.style.display='block'; this.style.display='none'">

<div style="margin:-50px 0 0 108px; width: 50px; height:50px;  cursor: pointer; background-color:#cc333f;">

</div></div>

<div id="myObj2" style="display: none;">

<button id="playButton2" style="display:block;margin:-50px 0 0 108px; width:50px; height:50px; border:none; cursor: pointer; background-color:#000000;" onclick="  
var player = document.getElementById('player2').volume='1.0';
var button = document.getElementById('playButton2');
  var player = document.getElementById('player2');
  if (player.paused) {
    playButton2.style.backgroundColor = '#000000';
    playButton2.style.border = 'thick solid blue';
    player.play();
  } else {
    playButton2.style.backgroundColor = '#cc333f';
    playButton2.style.border = 'none';
    player.pause();
  }">
 </button>
</div>

<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></div>

<div style="margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;"></div>

<div style="margin: 4px 0 0; width: 50px; height: 50px; background-color:#00a0b0; color:#000000;border-bottom-left-radius:50px;"></div>

<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></div>

<div style="margin: -50px 0 0 108px; width: 50px; height: 50px; background-color:#cc333f; color:#000000;"></div>

<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></div>

<div style="margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951;color:#000000; border-bottom-right-radius:50px;"></div></div>

<audio id="player" preload="none" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>

<audio id="player2" preload="none" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>
2

About what?

862×928 52.3 KB

3

The whole code from top to bottom. Everything.

4

I believe you already know the answer to this question. So long as you’re happy with it though, I’m not sure others’ opinions will be of the slightest concern to you.

4 Likes
5

You mean about all those ridiculous inline styles?

2 Likes
6

It’s not clear what it’s meant to do (and with JS disabled, it does nothing).

It’s not keyboard accessible (and probably also not screen-reader accessible).

There are no clear controls.

It has a row of boxes which inexplicably open the same page in a new tab/window,

It has a box which displays as pink/white/blue striped on hover, which suggests it should have a function related to the similarly-coloured bar above it, but instead it, too, just opens another tab.

(That’s without looking at the code. You know what I think about the antiquated coding techniques you insist upon using. There is no point in me repeating myself for you to ignore it again.)

2 Likes
7

It should be playing music, did you have your volume on?

8

I have no audio card in my computer and no speakers.
Does it do anything else?

1 Like
9

I know what it’s meant to do; I’ve been watching you playing with this code in multiple versions for some time now.

I’m pointing out how this would appear to a first-time visitor to your page, with no previous information about it.

1 Like
10

I made one with play pause and stop on it.

11

…which you are not using in the current code.

1 Like
12

I’ve made different variations of it.

13

Yes. And I’ve commented on the version you linked to above, as requested.

Off-Topic
I understand experimenting with changing and adapting your code. I don’t understand getting other people to write multiple different versions for you, and then ignore all advice and go back to using the poorer versions.

1 Like
14

The time the person has their speakers on and they put their mouse over it, music will start playing. It’ll surprise them.

15

It might well do. And supposing they happen to be somewhere quiet, like a hospital waiting room, or next to a sleeping baby? After that lovely “surprise”, how do they know how to turn it off? In those circumstances, most people will leave the page and never return. Even without those circumstances, I would leave a page and never return if it played music I could find no way to stop.

And yes, before you explain it to me, I do know that mousing over the same bar will stop it, but that is not immediately clear.

I’m trying to get you to look at your page from the point of view of a visitor.

3 Likes
17

These are what you’re talking about.

18

Could you not also access their webcam at the minute the sound plays and upload the resulting image to social media. That would be really cool also.:angry:

5 Likes
19

Ooh yes - mystery meat navigation, where we have to run our mouse over every possible activation area before we can start using it.

Some examples can be found at http://www.webpagesthatsuck.com/mysterymeatnavigation.html

4 Likes
20

It takes a certain je ne sais quoi to receive all the advice asasass has had about his coding and ignore the lot!

1 Like
21

Detailed explanation, together with suggested approaches to resolve the problem.

http://webaim.org/techniques/javascript/eventhandlers