Как скрыть элемент в калькуляторе?

294

28 января 2018, 04:23

Элемент с надписью: "Сделано в конструкторе калькуляторов UCALC".

display: none; - не помогает.

Мой код.

<div class="uCalc_46859"></div> 
<script>  
  var widgetOptions46859 = { bg_color: "transparent" };  
  (function() {  
    var a = document.createElement("script"), h = "head";  
    a.async = true;  
    a.src = (document.location.protocol == "https:" ? "https:" : "http:") + 
      "//ucalc.pro/api/widget.js?id=46859&t="+Math.floor(new Date()/18e5);  
    document.getElementsByTagName(h)[0].appendChild(a)  
  })(); 
</script>

Answer 1

Без костылей не как, в теге iframe нельзя применять стили

но в данном случае можно сделать так:

https://codepen.io/anon/pen/OzKEbx

iframe{
  height: 370px !important;
  overflow: hidden;
}

обрежет блок по низу

Answer 2

Советую использовать placeholder + css из ответа DemoGosha:

Пример тут - CodePen

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
iframe{
  height: 370px !important;
  overflow: hidden;
}
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}
@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}
@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}
#myDiv {
  display: none;
  text-align: center;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">

<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
 <div class="uCalc_46859"></div>
</div>
<script>
var myVar;
function myFunction() {
    myVar = setTimeout(showPage, 3000);
}
function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
}
  var widgetOptions46859 = { bg_color: "transparent" }; 
  (function() { 
    var a = document.createElement("script"), h = "head"; 
    a.async = true; 
    a.src = (document.location.protocol == "https:" ? "https:" : "http:") +
      "//ucalc.pro/api/widget.js?id=46859&t="+Math.floor(new Date()/18e5); 
    document.getElementsByTagName(h)[0].appendChild(a) 
  })();
</script>
</body>
</html>