I need someone to look over this code for me

asasass · November 3, 2017, 4:41am

Are there any improvements or adjustments I should make to this code?

<style>
  #container {
    background-color: black;
    position: relative;
    width: 260px;
    height: 194px;
    padding: 0;
    border: 3px solid #0059dd;
  }
  
  #img1,
  #img2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  #img1 {
    clip-path: circle(85px at center);
  }
  
  #grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    cursor: pointer;
    background-color: transparent;
    ;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }
  
  .button div {
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }

</style>

<div id="container">
  <img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
  <img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.png">
  <div id="grad">


    <div id="playButton4" style="position:relative;width: 260px; height: 194px;cursor: pointer;" onclick=" 
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
button.querySelector('.play').style.display='none';
button.querySelector('.pause').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

      <div class="button">
        <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
        </div>
        <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
        </div>
      </div>
    </div>
  </div>
</div>

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

Paul_Wilkins · November 3, 2017, 4:44am

There is an illegal closing source tag there for a start, which you should see on jsfiddle highlighted in red when you scroll down the page.

asasass · November 3, 2017, 4:45am

Anything else, any adjustments I should make to it?

Paul_Wilkins · November 3, 2017, 4:47am

Linters are highly useful to determine easy things that need to be fixed up.

Dirty markup provides a useful place in which HTML, CSS, and JavaScript can be separately linted.

asasass · November 3, 2017, 4:49am

Should I do this?

  .playButton4 div {
    position: relative;
    width: 260px;
    height: 194px;
    cursor: pointer;
  }

asasass · November 3, 2017, 4:51am

I think I mean this?

    #playButton4 {
    position: relative;
    width: 260px;
    height: 194px;
    cursor: pointer;
  }

asasass · November 4, 2017, 2:57am

I have a question for you.

Where should this be placed?

<div id="container">
  <svg width="260" height="194">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="97" r="85" fill="orange"></circle>
      </clippath>
    </defs>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/4HJbzEq.png"></image>
  </svg>
  <div id="grad">

Before or after this?

Here:

    <div id="playButton4" onclick=" 
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
button.querySelector('.play').style.display='none';
player.play();
} else {
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

Here:

asasass · November 4, 2017, 3:04am

1.)

<div id="container">
  <svg width="260" height="194">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="97" r="85" fill="orange"></circle>
      </clippath>
    </defs>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/4HJbzEq.png"></image>
  </svg>
  <div id="grad">
</div>

    <div id="playButton4" onclick=" 
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
button.querySelector('.play').style.display='none';
player.play();
} else {
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

      <div class="button">
        <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
        </div>
        <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
        </div>
      </div>
    </div>
  </div>
</div>

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

2.)

    <div id="playButton4" onclick=" 
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
button.querySelector('.play').style.display='none';
player.play();
} else {
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

<div id="container">
  <svg width="260" height="194">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="97" r="85" fill="orange"></circle>
      </clippath>
    </defs>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/4HJbzEq.png"></image>
  </svg>
  <div id="grad">
</div>

      <div class="button">
        <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
        </div>
        <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
        </div>
      </div>
    </div>
  </div>
</div>

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

ZooKeeper · November 4, 2017, 3:05am

The JavaScript in the onclick attribute should REALLY be in an external script not jam packed into the attribute. Jamming all that into the attribute is lazy, dirty, and poorly executed. The ideal way to hook up dom events with JavaScript handlers is to use an external script completely separating the structure (html) from the behavior (js).

asasass · November 4, 2017, 3:06am

That’s how I’m doing it. Believe me, it’s way cleaner than what it used to look like.

asasass · November 4, 2017, 3:17am

I think it’s 2.)

Like this?

playButton4
Image container
button

or am I wrong, and tell me why I’m wrong.

asasass · November 4, 2017, 3:31am

I just realized something.

I don’t need a container.

I can do it like this, right?

<style>
  #playButton4 {
    position: relative;
    border: 3px solid #0059dd;
    width: 260px;
    height: 194px;
    cursor: pointer;
    background-color: black;
  }
  
  #grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }
  
  .button div {
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }

</style>

<div id="playButton4" onclick=" 
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
button.querySelector('.play').style.display='none';
player.play();
} else {
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

  <svg width="260" height="194">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="97" r="85" fill="orange"></circle>
      </clippath>
    </defs>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/4HJbzEq.png"></image>
  </svg>

  <div id="grad"></div>


  <div class="button">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
    </div>
  </div>
</div>

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

asasass · November 4, 2017, 4:06am

Can, and should any of this be put into style?

And what would that look like?
Meaning, how would I do that?

  <svg width="260" height="194">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="97" r="85" fill="orange"></circle>
      </clippath>
    </defs>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/4HJbzEq.png"></image>
  </svg>

system · February 3, 2018, 11:08am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Adjusting clickable area JavaScript html	24	6672	January 30, 2018
Can someone make this in html for me please HTML & CSS	108	3917	May 7, 2017
If I were to put 2 of these on a page, it would look like JavaScript	114	4393	February 20, 2018
I'm trying to get one image to look like the other HTML & CSS	2	516	August 31, 2019
Can someone show me this code working inside jsfiddle minus the javacript? HTML & CSS	2	1357	January 1, 2018

I need someone to look over this code for me

Related topics