Obtaining hyperlinks to encircle the sound button

Code 1:

If you notice, after clicking on the image, the audio button appears and plays without any surrounding links. How can I enable the links around the audio button in Code 1?

https://jsfiddle.net/7ux1s23j/29/

https://i.sstatic.net/75wlN.png

<style>
  .playButton {
    width: 266px;
    height: 174px;
  }
  
  .initial {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dds;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton.playing {
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    background-color: #000000;
    margin: 62px 0 0 108px;
    fill: #aaff00;
  }
  
  .links div {
    margin: 0 0 12px 0;
  }
  
  .links a {
    display: block;
    width: 50px;
    height: 50px;
    background-color: green;
    margin: -50px 0 0;
    transition: 0.5s ease-in-out;
  }
  
  a.x1 {
    margin: 0;
  }
  
  a.x2 {
    margin-left: 54px;
  }
  
  a.x3 {
    margin-left: 108px;
  }
  
  a.x4 {
    margin-left: 162px;
  }
  
  a.x5 {
    margin-left: 216px;
  }
  
  .links a:hover,
  .links a:active,
  .links a:focus {
    background: blue;
  }
  
  .scrl a:visited {
    background: orange;
    color: #000000;
  }
  
  .scrl a:hover {
    background: red;
  }
  
  .hide {
    display: none;
  }
  
  .links div:last-child {
    margin-bottom: 0;
  }

</style>


<div class="test hide">
  <div class="links">
    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>
  </div>
</div>

<div class="playButton">

  <div class="initial ">Links</div>

  <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

  <svg class="play hide " style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>
</div>

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

<script>
  (function iife() {
    "use strict";

    function playButtonClickHandler() {
      var button = document.querySelector(".playButton");
      var player = document.querySelector("#player");
      document.querySelector('.playButton .initial').style.display = 'none';
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton .play").style.display = "none";
        document.querySelector(".playButton .pause").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton .play").style.display = "inline-block";
        document.querySelector(".playButton .pause").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

Code 2:

In this version, there are links surrounding it once you click on the image.

https://jsfiddle.net/0yxvpa09/19/

https://i.sstatic.net/ExDJP.png

<style>
  .cover {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .links div {
    margin: 0 0 12px 0;
  }
  
  .links a {
    display: block;
    width: 50px;
    height: 50px;
    background-color: green;
    margin: -50px 0 0;
    transition: 0.5s ease-in-out;
  }
  
  a.x1 {
    margin: 0;
  }
  
  a.x2 {
    margin-left: 54px;
  }
  
  a.x3 {
    margin-left: 108px;
  }
  
  a.x4 {
    margin-left: 162px;
  }
  
  a.x5 {
    margin-left: 216px;
  }
  
  .links a:hover,
  .links a:active,
  .links a:focus {
    background: blue;
  }
  
  .scrl a:visited {
    background: orange;
    color: #000000;
  }
  
  .scrl a:hover {
    background: red;
  }
  
  .hide {
    display: none;
  }
  
  .links div:last-child {
    margin-bottom: 0;
  }
  .playButton {
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    fill: #aaff00;
    margin: -112px 0 0 108px;
  }
  
  .playButton.playing {
    background-color: #000000;
  }
</style>

<div class="cover">Links</div>

<div class="test hide">

  <div class="links">
    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>

      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>
  </div>
</div>


<div class="playButton hide">

  <svg class="play" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

  <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>
</div>


<script>
  (function iife() {
    "use strict";

    function hideClickedElement(evt) {
      var target = evt.target;
      target.classList.add("hide");
      document.querySelector(".test").classList.remove("hide");
      document.querySelector(".playButton").classList.remove("hide");
    }
    var cover = document.querySelector(".cover");
    cover.addEventListener("click", hideClickedElement, false);
  }());

</script>

How can I make the links appear around the audio button in Code 1?

javascriptcssaudiohtml5-audio

Answer №1

Here is a helpful workaround solution just for you!

I made the necessary fixes below:

.playButton.playing {
  ....
  margin: -112px 0 0 108px;
  ....
}

Additionally, you will need to determine at what condition the linksDiv should be displayed. 

document.getElementById("myLinkDiv").style.display='none';

or

document.getElementById("myLinkDiv").classList.add("hide");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving data from PHP MySql Query and importing it into JavaScript

Currently, I am in the process of developing a count-up timer for one of our office dashboards that tracks the time since the last incident or reset. There is a page dedicated to allowing senior admins to input a new timestamp. This timestamp then gets up ...

javascriptphpmysqljson

Deactivate the form fields using Ajax

Whenever I try to use this Ajax script for posting data and disablind the send-button along with all form fields, only the submit button gets disabled on click. What I actually want is to disable all the form fields as well. So, in order to achieve this, ...

javascriptjqueryajax

When trying to access the DOM from another module in nwjs, it appears to be empty

When working with modules in my nwjs application that utilize document, it appears that they are unable to access the DOM of the main page correctly. Below is a simple test demonstrating this issue. The following files are involved: package.json ... "ma ...

javascripttypescriptnode-webkitnwjs

Vue components are failing to appear in the live environment, however they function perfectly in the development environment

My Laravel Vue project runs smoothly in development, but on the live shared hosting server, the vue components are not displaying. However, the Laravel views function correctly with no errors in the console. I have already run npm run production to minif ...

javascriptvue.jsvue-componentlaravel-vue

Timing of Vue mounting and initialization phases

I am currently working on a component where I pass the reference to an internal element to the parent using defineExpose. In this example, I simply log the element, but in my actual project, I intend to manipulate it. SFC Playground // Comp.vue <scrip ...

javascriptvue.jsvuejs3

Determine the Total of Various Input Numbers Using JQuery

There are 3 input fields where users can enter numbers, and I want to calculate the sum of these numbers every time a user updates one of them. HTML <input class="my-input" type="number" name="" value="0" min="0"> <input class="my-input" type="n ...

javascriptjquery

Connect the CSS active state to a JavaScript event

.el:active{ background:red; } Is there a way to associate the above CSS active state with a JavaScript event, like this: $('.el').on('active', function(){ img.show(); }); I want the image to remain visible when el is presse ...

javascriptjquerycss

Are the files selected by the user not displaying properly in the URL?

I'm currently working on a project using PhoneGap where I am facing an issue with uploading files and adding all file names to the parameters. The desired format is: http://www.example.com/uplaod.html?file=file1,file2,file3 To achieve this, I have a ...

javascriptphpjqueryhtmlajax

The pagination styles in Bootstrap are refusing to be overwritten by custom CSS variables

Incorporating Bootstrap version 5.3.3, I have implemented a customized WordPress theme where I have specified a range of color overrides. The custom WordPress theme stylesheet is loaded last, following the Bootstrap stylesheet. At the beginning of my the ...

csswordpressbootstrap-5css-variables

Trigger the D3 component to re-render in React after a state change occurs in the parent component

My React project consists of two components written in TypeScript. The first component contains menus, and I am using conditional rendering to display different content based on user selection. <Menu.Item name="graph" active={activeItem ...

javascriptreactjstypescriptd3.js

Find the item that has a specific value in its sub-property

Information Models: public class Header{ public int Identifier; public int value; public bool anotherValue; public List<Trailer> trailers; } public class Trailer{ public int ID; public Language MyLanguage; public string ...

javascriptc#jqueryasp.net

Vertical scrollbar in iframe unexpectedly appears immediately after the submit button is pressed

I have designed a contact form that is displayed in an iframe within an overlay div. I have carefully adjusted the dimensions of this div to ensure that there are no scrollbars visible when the form initially appears. However, after filling out the form an ...

phpjavascripthtmlcssiframe

passport.js and express: TypeError - Router.use() must be given a middleware function, but instead received a ' + gettype(fn)

I encountered an error while using passport.js with Express.js TypeError('Router.use() requires a middleware function but got a ' + gettype(fn)) This issue arose from the following code: passport/local.js var LocalStrategy = require("passport ...

javascriptnode.jsexpresspassport.js

Create a dynamic menu dropdown with absolute positioning using React

I recently made the transition to React and now I am in the process of converting my old vanillaJS website into ReactJS. One issue I am facing is with a button that is supposed to trigger the opening of a dropdown menu. <button type="button&qu ...

javascriptcssreactjsnext.js

What makes AJAX take so much time to load?

Hey everyone, I’ve been working on compiling and sending some forms to a PHP file but I've been noticing that the process is quite slow. Even when I use var_dump in PHP to only display the POST values, it still takes a considerable amount of time co ...

javascriptphpjqueryajaxpost

Tips on preventing duplicate websocket clients in VueJS

Each time I access a component, it triggers the socket.on event. Additionally, there is a Vuejs button component as shown below. So when I emit to the 'socket.on('voice')' event in nodejs, the nodejs socket emits to the 'socket.on( ...

javascriptnode.jsvue.jswebsocket

Which is better for creating hover effects: CSS3 or JavaScript?

When hovering over a link, I want to highlight a specific picture and blur the rest. Here's my HTML code: <body> <div id="back"> <div id="one"></div> <div id="two"></div> </div> ...

javascripthtmlcss

Exploring the process of implementing smooth transitions when toggling between light and dark modes using JavaScript

var container = document.querySelector(".container") var light2 = document.getElementById("light"); var dark2 = document.getElementById("dark"); light2.addEventListener('click', lightMode); function lightMode(){ contai ...

javascripthtmlcssdarkmode

"electron-builder - initially designated for building app for Mac only, but now configured to build for both Mac

This is my first attempt at creating an electronjs app, so I may not have a full grasp on what I'm doing. I've been following the instructions on GitHub and also this guide from Medium. Here's a snippet of my package.json: { (package.jso ...

javascriptmacosnpmelectron-builder

Is it possible to utilize AngularJS ngAnimate to perform cross-fading transitions on list items?

I am currently exploring the ins and outs of angularJS with my simple message ticker example. This ticker displays messages by toggling the CSS display property of one of the li elements. <div id="ngtickerMessage" class="ngtickerMessage"> ...

cssangularjshtml-listsng-animate