Using a Javascript on .lasso page
- 1 Messages
- Collapse All
- Expand All
- Subscribe
Jul 23
Duane Hannan Using a Javascript on .lasso page
Jul 23, 2018; 12:20
Duane Hannan
Using a Javascript on .lasso page
I’m designing a new web page (and learning html/css) and I want to include an images slide show on the page. The code, which includes some Javascript, comes from a copy/paste from w3schools.com <http://w3schools.com/>. Their code works fine on a simple .html page, but when I add some simple lasso search-a-database-and-show-the-results code and switch the page’s suffix to .lasso, the slide show images disappear.
Sorry about my novice-ness, but does anyone have any suggestions? It’s pretty clear that lasso doesn’t want to process the java code on the page. I’ve tried putting the slide show <script> stuff in the body at the bottom, which w3schools.com <http://w3schools.com/> suggests, in the head, and in the .css file. All no go. I’ve tried changing <script> to <script type="text/JavaScript”> and putting it in the head and where w3schools.com <http://w3schools.com/> suggest (at the end of the body). All no go.
Below is the page’s code.lasso
Much appreciated,
Duane Hannan
WWG Schools
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* 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;
}
@-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>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/MenuBand.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/MenuBand.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/MenuBand.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<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>
[inline:-search, -database='xxxxxxx', -table='xxxxxxxx', -sortfield='EventDate', -sortorder='descending', -maxrecords=3]
[records]
[field:'Event'] [field:'School']<br>
[/records]
[/inline]
</body>
</html>
#############################################################
This message is sent to you because you are subscribed to
the mailing list Lasso Lasso@lists.lassosoft.com
Official list archives available at http://www.lassotalk.com
To unsubscribe, E-mail to: <Lasso-unsubscribe@lists.lassosoft.com>
Send administrative queries to <Lasso-request@lists.lassosoft.com>
Sorry about my novice-ness, but does anyone have any suggestions? It’s pretty clear that lasso doesn’t want to process the java code on the page. I’ve tried putting the slide show <script> stuff in the body at the bottom, which w3schools.com <http://w3schools.com/> suggests, in the head, and in the .css file. All no go. I’ve tried changing <script> to <script type="text/JavaScript”> and putting it in the head and where w3schools.com <http://w3schools.com/> suggest (at the end of the body). All no go.
Below is the page’s code.lasso
Much appreciated,
Duane Hannan
WWG Schools
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* 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;
}
@-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>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/MenuBand.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/MenuBand.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/MenuBand.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<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>
[inline:-search, -database='xxxxxxx', -table='xxxxxxxx', -sortfield='EventDate', -sortorder='descending', -maxrecords=3]
[records]
[field:'Event'] [field:'School']<br>
[/records]
[/inline]
</body>
</html>
#############################################################
This message is sent to you because you are subscribed to
the mailing list Lasso Lasso@lists.lassosoft.com
Official list archives available at http://www.lassotalk.com
To unsubscribe, E-mail to: <Lasso-unsubscribe@lists.lassosoft.com>
Send administrative queries to <Lasso-request@lists.lassosoft.com>
Jul 23
Jolle Carlestam Re: Using a Javascript on .lasso page
Jul 23, 2018; 19:26
Jolle Carlestam
Re: Using a Javascript on .lasso page
Jul 23
Lists Re: Using a Javascript on .lasso page
Jul 23, 2018; 12:28
Lists
Re: Using a Javascript on .lasso page
Jul 23
Jolle Carlestam Re: Using a Javascript on .lasso page
Jul 23, 2018; 19:31
Jolle Carlestam
Re: Using a Javascript on .lasso page
Jul 23
Duane Hannan Re: Using a Javascript on .lasso page
Jul 23, 2018; 12:41
Duane Hannan
Re: Using a Javascript on .lasso page
Jul 23
Steffan Cline Re: Using a Javascript on .lasso page
Jul 23, 2018; 10:47
Steffan Cline
Re: Using a Javascript on .lasso page
Jul 23
Andreas Steinmann Re: Using a Javascript on .lasso page
Jul 23, 2018; 20:10
Andreas Steinmann
Re: Using a Javascript on .lasso page
Jul 23
Duane Hannan Re: Using a Javascript on .lasso page
Jul 23, 2018; 14:03
Duane Hannan
Re: Using a Javascript on .lasso page
Jul 23
Kevin Bice Re: Using a Javascript on .lasso page
Jul 23, 2018; 14:13
Kevin Bice
Re: Using a Javascript on .lasso page
Search
Thread Keywords
No keywords defined. Log in to define appropriate keywords
Lasso Programming
This site manages and broadcasts several email lists pertaining to Lasso Programming and technologies related and used by Lasso developers. Sign up today!