Which is a better code and why?

Design & UX
,
1

Code 1 Uses:

 <svg width="260" height="194">
    <defs>
      <clipPath id="circleView">
        <circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange"></circle>
      </clipPath>
    </defs>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png"></image>
  </svg>

Code 2 Uses:


<style>
  #img1,
  #img2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  #img1 {
    border-radius: 25% / 70%;
  }
</style>

  <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">

Code 1

<style>
  #container1 {
    position: relative;
    background-color: black;
    width: 260px;
    height: 194px;
    padding: 0;
    border: 3px solid #0059dd;
  }
  
  #grad1 {
    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);
  }
  
  #playButton1 {
    position: relative;
    width: 260px;
    height: 194px;
    cursor: pointer;
  }
  
  .button1 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="container1">
  <svg width="260" height="194">
    <defs>
      <clipPath id="circleView">
        <circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange"></circle>
      </clipPath>
    </defs>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png"></image>
  </svg>
  <div id="grad1">

    <div id="playButton1" onclick=" 
var button = document.getElementById('playButton1');
var player = document.getElementById('player1');
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="button1">
        <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="player1" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
</audio>

Code 2

<style>
  #container2 {
    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 {
    border-radius: 25% / 70%;
  }
  
  #grad2 {
    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);
  }
  
  #playButton2 {
    position: relative;
    width: 260px;
    height: 194px;
    cursor: pointer;
  }
  
  .button2 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="container2">
  <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="grad2">

    <div id="playButton2" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
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="button2">
        <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="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
</audio>
2

personally, I would not use either. :unhappy:

Your coding is too convoluted for my delicate taste. :wonky:

Check out the attachment to a see a simplified version. :winky:

asasass-player.zip (96.0 KB)

coothead

2 Likes
3

I don’t understand what code you used?

Can you place the code so I can see it?


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>audio player</title>

<link rel="stylesheet" href="css/screen.css" media="screen">

</head>
<body> 

 <div class="button"></div>

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

 <script src="scripts/player.js"></script>

</body>
</html>
4

???

You do know how to download a zip file to your local drive and unzip it don’t you?

1 Like
5

Hi there asasass,

the attachment, when first opened, contains this item…

  • the asasass-player folder

The asasass-player folder, when opened, contains these items…

  • css folder.
  • images folder.
  • scripts folder.
  • index.html file.

The css folder, when opened contains…

  • the screen.css file.

The images folder, when opened contains…

  • the button-bg.jpg file.

The scripts folder, when opened contains…

  • the player.js file.

The screen.css file, when opened, has this code…


body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

.button {
    width: 16.626em;
    height: 12.5em;
    background-image: url(../images/button-bg.jpg);
    cursor: pointer;
 }

.pause {
    background-position: 0 -12.5em;
 }

#player {
    position: absolute;
    left: -999em;
 }

The button-bg.jpg file, when opened, looks like this…

The player.js file, when opened, has this code…

 (function(d) {
   'use strict';

   var button = d.querySelector( '.button' );
   var player = d.getElementById( 'player' );

       button.addEventListener( 'click', 
          function() {
             if ( player.paused ) {
               button.classList.add( 'pause' );
               player.play();
               } 
              else {
               button.classList.remove( 'pause' );
               player.pause();
         }
       },false);

 }(document));

The index.html file, when opened has this code…

<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>audio player</title>

<link rel="stylesheet" href="css/screen.css" media="screen">

</head>
<body> 

 <div class="button"></div>

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

 <script src="scripts/player.js"></script>

</body>
</html>

Finally, double clicking the index.html file, will open the page to your view. :winky:

coothead

6

How would I put that into jsfiddle?

7

In the same way that you put images into jsfiddle. :winky:

https://jsfiddle.net/L3zhzfuh/10/

What is this fixation with jsfiddle, do you not have a site of your own? :wonky:

coothead

1 Like
8

I use blogger, codepen, jsfiddle, .htnl, a bunch.

9

I don’t put in codes the same way you do, you’re way more advanced than me.

10

Why?

Separating ths CSS and the Javascript from the
HTML is actually something that you should have
taken on board from the outset.

Doing it that way means that the code that I supply
can be used directly on a site. :sunglasses:

Of course, the raison d’être of jsfiddle and it’s ilk is
still totally beyond my meager comprehension. :unhappy:

coothead

1 Like
11

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