Help in adding Html with Css and Javascript

Questions about Thunkable
1

Hello everyone I was adding html code in webviewer with css and js but it didn’t work.
Here’s my inlined html code, it’s a simple slideshow -

data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>    
<head>
<style>
 * {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  max-height: 250px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: left;
}



/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 100%;
  border-radius: 5px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

img {
  border-radius: 5px 5px 5px 5px;
  max-height: 250px;
  object-fit:cover;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
</head> 

<body>
<div class="slideshow-container"> 
<div class="mySlides fade"> 
<div class="card">   
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width:100%">   <div class="text">caption1</div> 
</div> </div>  
<div class="mySlides fade"> 
<div class="card">   
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" style="width:100%">   
<div class="text">Caaption 2</div> 
</div> </div>  </div> 
<br>  <div style="text-align:center">   
<span class="dot"></span>    
<span class="dot"></span>  
</div> 

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>

After this I tried external src for css and js but that also seems broken. Please help me to run this html.

2

Hello,

You need to get rid of all single-line comments.

See a more reliable way to exchange data between App and WebViewer using WebViewer.postMessage

1 Like
3

Thanks @actech but removing single-line comments didn’t helped. But I found my html code with external css and js is working in Kodular Webview but not in Thunkable cross platform.
Here’s that code -
<head> <link rel="stylesheet" type="text/css" href="http://rounded.000webhostapp.com/csss/1.css"> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="card"> <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width:100%"> <div class="text">caption1</div> </div> </div> <div class="mySlides fade"> <div class="card"> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" style="width:100%"> <div class="text">Caaption 2</div> </div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> </div> <script src ="http://rounded.000webhostapp.com/csss/1.js"></script> </body>
Is there any difference on both webviews.

4

Does not work on Android? The fact is that Data URI doesn’t work in apps installed on iOS, so I left examples of working with Data URI in my demo application, but I recommend using a different mechanism.

I’ll look at your code

5

The problem is that your first code doesn’t work in the browser. First, you need to make sure that the code works in the browser. But you secont code run in browser.

Try this Example

data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/><script>alert("Hello")</script>

check your example

https://x.thunkable.com/projects/5ed376e686515550ed6044eb/project/properties/designer/

1 Like