Реализация Soundcloud iframe в проблеме с bootstrap4 - PullRequest
Новая
       17

Реализация Soundcloud iframe в проблеме с bootstrap4

0 голосов
/ 21 июня 2019

Посетите веб-сайт Итак, сначала большое спасибо всем, кто поможет! Я очень новичок, поэтому я надеюсь, что буду достаточно ясен.

Я создаю свой сайт с помощью начальной загрузки. Это музыкальный сайт лейбла. Я в конце. Но у меня это появляется в моей консоли

Uncaught DOMException: не удалось выполнить createPattern для CanvasRenderingContext2D: аргумент image является элементом canvas с шириной или высотой 0.

Так что я много копался в этом и обнаружил, что он не работает, или я не уверен, что просто не понимаю.

Я действительно очень много перепробовал, и список будет очень длинным! Но важная вещь, которая сработала, это когда я помещаю все iframes из любого «контейнера», тогда он работает PER-FEC-TLY. Нет больше красных сообщений в моей консоли. Теперь я чувствую себя немного глупо, потому что я не знаю, что делать, и я не понимаю, "почему это не работает в контейнере?" Эта проблема замедляет работу сайта ...

вот список вещей, которые я пробовал: - Пробовал со всеми типами контейнеров, предоставляемых Bootstrap. - Попробовал вставку, предоставленную Bootstrap. - Отключено в основном все, переключаясь между моим JS и CSS. Все возможно и невозможно. - Поставьте 0 для отступа и маржинального класса из Bootstrap.

Ну, я считаю, что контейнерная вещь - это ключ, потому что, я еще слишком новичок, чтобы понять, и я хотел бы понять это ... 

<div class="container premiere text-left shadow p-3 mb-5 bg-white rounded" style="height: 100%;">
  <div class="row">
    <div class="col-md-6">
      <img src="../images-min/divagar-min.jpg" class="card-img" alt="...">
    </div>
    <div class="col-md-6 premiere-text">
      <h5>Analog Advisory</h5>
      <p>Cloud One by Divagar</p>
      <p>Released on November 30th 2018 Exclusive Bandcamp.</p>
      <iframe scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/532472661&color=%23000000&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&show_artwork=false"></iframe>
    </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 21 июня 2019

Итак, вот решение!Наконец я обнаружил (я очень горд, ха-ха). Это был дисплей, а вот код, который имитирует (если можно так сказать) дисплей: нет.Так что я могу сохранить все свое поведение в безопасности.Я надеюсь, что это поможет некоторым другим :) 

.page {
	/* display: none;
	opacity: 0; */
  position: absolute;
  top: 0;
  left:0;
  width:0;
  height:0;
  overflow: hidden;
  visibility: hidden;
}

.page.current{
	/* display: block;
	opacity: 1; */
  position: inherit;
  width:100%;
  height:100%;
  overflow: visible;
  visibility: visible;
}

// TRANSITION BETWEEN PAGES NAVBAR TOP
$(function(){
  let request = window.location.hash;

  if(request == "#home" || request == "#releases" || request == "#artists" || request == "#partners" || request == "#about-us"){
    $(".page.current").removeClass("current");

    $(".page").eq(0).addClass("current");
  }

  $("#navbar .nav-clic").on("click", function(){
    // var speed = 800;
    let i = $("#navbar .nav-clic").index(this);
    $(".page.current").animate({opacity: 0, marginLeft:500}, 800, function(){
      $(this).removeClass("current");
      $('.page').eq(i).animate({opacity:1, marginLeft: 0}, 1000).addClass("current");
      // $(window).scrollTop(0);
    });
  });
});

Мир, ура и до скорой встречи :)

0 голосов
/ 21 июня 2019

Итак, я нашел второе решение.

Первое - вынуть из любого контейнера iframe, поставить его на позицию: абсолютную и играть с верхом, слева и т. Д.Мне это не нравится.

Второй, я нашел его здесь >>> Часть решения

Проблема в том, что у меня есть некоторые CSS.Если вы проверяете мой сайт, между страницами возникает эффект.Сдвиньте и исчезните влево, а новая страница скользит справа и постепенно. Я сделал это с помощью приведенного ниже фрагмента кода, и дисплей убивает все.

Но когда я снимаю дисплей, страница как бы смешана и испорчена, но у меня в консоли только 3 сообщения вместо 37!Эти три, я думаю, взяты из моей первой страницы ... 

// TRANSITION BETWEEN PAGES NAVBAR TOP
$(function(){
  let request = window.location.hash;

  if(request == "#home" || request == "#releases" || request == "#artists" || request == "#partners" || request == "#about-us"){
    $(".page.current").removeClass("current");
    $(".page").eq(0).addClass("current");
  }

  $("#navbar .nav-clic").on("click", function(){
    let i = $("#navbar .nav-clic").index(this);
    $(".page.current").animate({opacity: 0, marginLeft:500}, 800, function(){
      $(this).removeClass("current");
      $('.page').eq(i).animate({opacity:1, marginLeft: 0}, 1000).addClass("current");
    });
  });
});
.page {
	display: none;
	opacity: 0;
}

.page.current{
	display: block;
	opacity: 1;
}
<section id="home" class="page current">
</section>

<section id="releases" class="page">
</section>

<section id="artists" class="page">
</section>

<section id="partners" class="page">
</section>

<section id="about-us" class="page">
</section>

Поэтому, если вы заходите на веб-сайт, когда вы находитесь на первой странице, это как страница приветствия, а когда вы нажимаете, прокручиваете вниз итак далее ... я сделал это с этим кодом.Я думаю, что я как-то связан с $ ('# home) .hide () поверх кода ...

Есть идеи?

// TRANSITIONS BETWEEN INDEX PAGE AND HOME PAGES

$(document).ready(function(){

  $('#index').show();
  $('#navbar').hide();
  $('#home').hide();
  $('footer').hide();

  $("#index a").on("click", function(event){

    $("#index").css("position", "static");
    $('#navbar').slideDown(1400);
    $('#home').fadeIn(1000);

    if (this.hash !== "") {

      event.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 1400, function(){

        window.location.hash = hash;

        $('#index').hide();
        $('footer').show();

      });
    }
  });
});
...