# Help in adding Html with Css and Javascript

**URL:** <https://community.thunkable.com/t/help-in-adding-html-with-css-and-javascript/590775>\
**Category:** Questions about Thunkable X\
**Created:** [May 31, 2020, 2:45am UTC](https://community.thunkable.com/t/help-in-adding-html-with-css-and-javascript/590775 "2020-05-31T02:45:18Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![adbonds007z5obui](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@adbonds007z5obui](https://community.thunkable.com/u/adbonds007z5obui)\
**Post date:** [May 31, 2020, 2:45am UTC](https://community.thunkable.com/t/help-in-adding-html-with-css-and-javascript/590775/1 "2020-05-31T02:45:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [May 31, 2020, 6:24am UTC](https://community.thunkable.com/t/help-in-adding-html-with-css-and-javascript/590775/2 "2020-05-31T06:24:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![adbonds007z5obui](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@adbonds007z5obui](https://community.thunkable.com/u/adbonds007z5obui)\
**Post date:** [May 31, 2020, 7:06am UTC](https://community.thunkable.com/t/help-in-adding-html-with-css-and-javascript/590775/3 "2020-05-31T07:06:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [May 31, 2020, 9:12am UTC](https://community.thunkable.com/t/help-in-adding-html-with-css-and-javascript/590775/4 "2020-05-31T09:12:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [May 31, 2020, 9:13am UTC](https://community.thunkable.com/t/help-in-adding-html-with-css-and-javascript/590775/5 "2020-05-31T09:13:58Z")

</div>

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/](https://x.thunkable.com/projects/5ed376e686515550ed6044eb/project/properties/designer/)

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 11:28am UTC](https://community.thunkable.com/t/help-in-adding-html-with-css-and-javascript/590775/6 "2024-11-08T11:28:51Z")

</div>


