Tag: JavaScript

En ny karrusel

Sådan kunne løsningen se ud, når du implementerer en karrusel fra W3 Schools i en “Tilpasset HTML” blok.

1 / 3

Caption Text

2 / 3

Caption Two

3 / 3

Caption Three

❮
❯

CSS, HTML & JavaScript

Herunder ser du indholdet i blokken "Tilpasset HTML":

<style>
    * {box-sizing: border-box}
    body {font-family: Verdana, sans-serif; margin:0}
    .mySlides {display: none}
    img {vertical-align: middle;}

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

    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
    }

    /* 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 {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .active, .dot:hover {
      background-color: #717171;
    }

    /* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }

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

    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
      .prev, .next,.text {font-size: 11px}
    }
    </style>
  <div>
    <div class="slideshow-container">

    <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="https://multimusen.dk/wp-content/uploads/witch-edited.jpeg" style="width:100%">
      <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="https://multimusen.dk/wp-content/uploads/superwoman-coder-edited.jpeg" style="width:100%">
      <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="https://multimusen.dk/wp-content/uploads/hugin-munin-2.jpeg" style="width:100%">
      <div class="text">Caption Three</div>
    </div>

    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

    </div>
    <br>

    <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
    </div>
</div>

    <script>
    let slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      let i;
      let slides = document.getElementsByClassName("mySlides");
      let dots = document.getElementsByClassName("dot");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      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";
    }
    </script>

Kilde: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

2. September 2024

How to Integrate JavaScript Libraries in WordPress
JavaScript libraries can add cool animations or parallax effects to a traditional webpage in HTML, CSS and JavaScript. Here you can learn how to do the same thing in the WordPress editor.

Case: Animate on Scroll (AOS)

Animate on Scroll is a populer animation library. In order to use the library on a single WP page or post you’ll have to load the CSS and JavaScript. Do this in a custom HTML block looking somewhat like this in the <head> section – or at least before the blocks you want to animate:
```
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
```
This will load the CSS. At the bottom of your page/post you’ll have to load the script in a custom HTML-block:
```
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
```
Now you can add the custom code, that will animate for instance an image. Let’s try this with my logo:

Now select the block in the List View. Click the kebab menu, and select “Edit as HTML“.

Now you can see the WP “markup”, and add whatever code you fancy. For instance if you want to flip the image you’ll need code around these lines:

In the HTML block add data-aos=”flip-up” to the image tag:
```
<figure class="wp-block-image size-full">

<img data-aos="flip-up" src="https://multimusen.dk/wp-content/uploads/cropped-cropped-multimusen-150-150-1.png" alt="" class="wp-image-9017"/>

</figure>
```
Now test the page. With a little luck the image will flip.

More Libraries

Now you should be able to integrate all kinds of JavaScript libraries to your pages and posts. Just remember to load the code in the correct position:
- Load CSS before the blocks you want to manipulate.
- Load the JavaScript as close to the bottom of your page as possible.
By your own research try to add effects to your pages and posts, such as:
- Parallax
- Animation
- even jQuery might work
- Bootstrap
- etc.
- et
- cetera
24. January 2023
Calculate Age

A JavaScript age calculator – when you need to know the exact age of a person.

If you want to use the age calculator as a web app then use this URI.

The code is based on this turotial from Tutorials Tonight.

14. December 2022
WordPress: wrap columns so that the right one gets on top on mobile devices
Normally WP will wrap the columns after a manner where the right one goes to the bottom om mobile devices. Here is a recipe:

Add a class to your column block

In additional classes add your class. In this case I added: petjReverse as my class.

style.css

Then add the this to your style.css:
```
/* Mobile, Tablet */
@media only screen and (max-width: 783px) {

   /* will stack reversed */
   .petjReverse {
	   flex-wrap: wrap-reverse !important;
   }
	
}
```
Save and update. If need be clear the cache in WordPress and your browser. That’s it.
9. December 2022
Adobe Animate and the OpenWeatherMap API
Part One: Adobe Animate and API

Do you want to fetch data from an API and use the data in your Adobe Animate CC creative work? Animate CC productions are made by JavaScript and HTML canvas. In theory getting data should work.

Let’s try!

OpenWeatherMap

The data from OpenWeatherMap is only available when you have a token. The first step is to create a user profile, and then to create a token. Then you can create the URL to fetch the weathere data.

Create a user profile on openweathermap

Above you see the API call. That’s the information we need in order to get data from the website. The data will be returned as JSON, but we can fetch the content and display it in Adobe Animate. You can create the string along these lines:
```
var weather = 'https://api.openweathermap.org/data/2.5/weather?q=YOUR-CITY-HERE&appid=ADD-YOUR-TOKEN-HERE';
```
The url will fetch data from the API in the form of JSON. The URL for the weather data is formed in the variable weather.

A JSON object from OpenWeatherMap.

The fetch() function will use the variable above, and that’s how we get the data for the JavaScript into the document:
```
fetch( weather ).then( ... etc ... );
```
Dynamic Texts

Now we have the data. Then we want to use the data in the design. Here we will work with Dynamic Text Fields.

Here the Dynamic Text Field is selected. In Propterties to the left it is named theCity. Now we can change the content dynamicly with JavaScript.

On the stage you see two Dynamic Textfields called theDescription and theCity. If you want to change the text of these fields you could do it like this:

_this.theCity.text = “Hello World”;

But we need the text from the API. If you check out the content of the weather data in the console, you can see, that the name of the city is:

data.name

The city name is added to the Dynamic Text Fiels like this:

_this.theCity.text = data.name;

If you use the Inspect Tool in the browsesr you will be able to create Dynamic text fields for all the data in the object from OpenWeatherMap.

The JavaScript

In the actions layer you can add your Vanilla Javascript. Here is the script I used:
```
/**
 * OpenWeatherMap API Demo
 * IMPORTANT
 * Don't use the code beautifier. It will ruin the => in the Js.
 **/

// get this as a global var
var _this = this;

// Openweather API string
var weather = 'https://api.openweathermap.org/data/2.5/weather?q=Aarhus&appid=ADD-YOUR-TOKEN-HERE';

// get the weather data via query URI
fetch(weather).then( response=>{
	
	return response.json();

}).then(data => {

	// JSON data to the console for inspection
	console.log(data);

	// add the weadther description,texts or images to theDescription
	_this.theDescription.text = data.weather[0].description;
	_this.theCity.text = data.name;

}).
catch (err => {
	// Do something for an error here
	console.log('There was an error.');
});
```
Now you can test the production. Use the inspection tool in order to use the data from the JSON object in Dynamic Text Fields.

So that’s what it takes if you want to create an Adobe Animate production that can display data from OpenWeatherMap’s API. Of course you can work in a similar manner with other API’s and JSON objects.

Display the Weather Forecast in WordPress

In order to show your work in WordPress, you can use an iframe. Upload your production to a folder on your server. Then add am iframe along these lines:
```
<iframe src="https://yoursite.net/yourFolder/weather.html" height="480" frameborder="0" style="overflow=hidden;"></iframe>
```
When you upload your work you’ll need the HTML, JavaScript file and the images/ folder – of course with the images in the folder. You don’t need the .fla file, since it’s for production only, but I would recommend to put it there anyway. If you want to change anything, you’ll know where it is.

Resources
- OpenWeatherMap
- Adobe Animate
11. November 2020
The image registration point
On at JavaScript canvas the registration point is the top left corner.

So in hit detection you have to calculate the x-position, the image width and height. In layout you should be able to figure out where to plage the images, and illustrations.
- Y = “up / down”
- X = “left / right”
( I tend to forget this … )

The image registration point.
13. February 2015