Button appears superimposed

Asked

Viewed 145 times

0

I am adding buttons to add music to the favorites, but this button is only appearing in the first songs, it does not appear in the others below, it seems that the buttons are superimposed... But I can’t find the problem... I’m using css and js...

CSS:

/* --- BOTOES PARA O SEE MORE --- */

    .option-btn1 {
        position: absolute;
        display: inline;
        top: 50px;
        z-index: 10000;
    }


    .option-btn1 .btn-add-fav i {
        position: relative;
        left: 40px;
        top: 165px;
        font-size: 200%;
        color: #000;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        z-index: 10000;
    }



    .option-btn1 .btn-add-fav i:hover {
        color: #74C8D2;
        z-index: 10000;
    }

JS:

$(".see-more-btn").click(function(){
            let singles=[];
            $(".div-pesquisa").hide();
            $("#more-music").show();
            $("#more-music .row h3").html("You searched for " + response.artists[0].name);
            $(".see-more-music").empty();
            $(".see-more-music").html('<li><button class="go-back-btn" type="button" name="button" id="your-playlist" onclick="backArtist()"><i class="ion-ios-arrow-back" ></i>GO BACK</button></li>');
            url="http://musicbrainz.org/ws/2/artist/"+ response.artists[0].id +"?inc=releases&fmt=json";
            url=encodeURI(url);
            //alert(url);
            $.get(url,function(response,status){
              if (status=='success') {
                for (result of response.releases) {
                  //alert(result.id);
                  var album = result.id;
                  let titulo = result.title;
                  url="http://musicbrainz.org/ws/2/release/"+album+"?inc=recordings+media&fmt=json";
                  url=encodeURI(url);
                  $.get(url,function(response,status){
                    if (status=='success') {
                      let aux=0;
                      for (music of response.media[0].tracks) {
                        for (var i = 0; i < singles.length; i++) {
                          if (singles[i]==music.title) {
                            aux=1;
                            break;
                          }
                        }
                        if (aux==1) {
                          break;
                        }else{
                          singles[i+1]=music.title;
                        }

                      $(".see-more-music").append($("<li>").append($("<figure>").addClass("music-img").append($("<div>").addClass("option-btn1").append($("<div>").addClass("btn-add-fav").append($("<i>").addClass("ion-ios-add").click(function(){
                        addFav(response.items[0].snippet.title);
                      })))).append($("<i>").addClass("ion-ios-play-circle")).append($("<div>").addClass("info-music").append($("<h6>").html(music.title).css("color","#FFF"))).click(function(){
                        $("#more-music").hide();
                        $(".player").show();
                        let url ="https://www.googleapis.com/youtube/v3/search?q="+music.title+"song&maxResults=1&part=snippet&key="+youtubeAPIKey;
                        url=encodeURI(url);
                        $.get(url,function(response,status){
                          if (status=='success') {
                            $(".player iframe").attr("src", "https://www.youtube.com/embed/"+response.items[0].id.videoId).css("border", "0").css("width", "100%").css("height", "100vh");
                          }
                        });
                      })));
                    }
                  }
                });
              }
            }
          });
        });

RESULT: inserir a descrição da imagem aqui

Thank you!!

  • 1

    Missing the HTML entry.

  • No html! I just append the Divs in js.

  • 1

    In the first lines of the function there is: response.artists[0].name that is not set anywhere, only then in Ajax... this results in error.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.