File size: 1,850 Bytes
3c8b4f7
a67ae61
48cb32a
 
a67ae61
9a5a10f
 
 
48cb32a
d6b8d19
48cb32a
 
 
 
d6b8d19
48cb32a
a67ae61
48cb32a
8ed5f8a
 
48cb32a
 
 
 
 
 
 
8ed5f8a
 
48cb32a
9a5a10f
48cb32a
d6b8d19
8ed5f8a
48cb32a
 
8ed5f8a
48cb32a
 
9a5a10f
48cb32a
 
8ed5f8a
 
3a238b7
 
48cb32a
 
ced1ff8
 
 
 
48cb32a
 
 
 
 
 
 
 
f4f6649
 
 
 
 
 
 
48cb32a
3a238b7
8ed5f8a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
# Cover {.unnumbered}

<!-- load dot lotti js code -->
<script src="https://unpkg.com/@dotlottie/player-component@1.0.0/dist/dotlottie-player.js"></script>


<!-- the riksha file is obtained through:https://lottiefiles.com/103030-rickshaw-from-pakistan
and https://lottiefiles.com/ranaadeelfarrukh -->
<dotlottie-player
  id="lotti_Main_Page"
  autoplay
  loop
  mode="bounce"
  src="./Data/7_Animation/Riksha.lottie"
  style="width: 100% height:90%">
</dotlottie-player>

<div id="iframe_Tornado" style="display:none;"></div>

<script>
function createIframe() {
    const iframe = document.createElement("iframe");
    iframe.src = "./Data/6_Html_Data/0_Viz/mPV_16.78.html";
    iframe.frameBorder = "0";
    iframe.width = "100%";
    iframe.height = "600";
    return iframe;
}

function hide_Riksha() {

    // get lottify riksha
    const player = document.getElementById('lotti_Main_Page');

    // get iframe container
    const content = document.getElementById("iframe_Tornado");

    // hide riksha
    player.style.display = "none";
 
    // show iframe container
    content.style.display = "block";
}

// wait until the whole page has loaded once
window.addEventListener("load", function() {
    console.log("whole page has loaded");

    // correct date
    para_Date = document.querySelector(".date");
    para_Date.textContent += " - Shawwal 17, 1444";

    // create and insert iframe
    const content = document.getElementById("iframe_Tornado");
    const iframe = createIframe();
    content.appendChild(iframe);

    // hide riksha and show iframe when iframe content has loaded
    iframe.addEventListener("load", function() {
        console.log("iframe has loaded");

        setTimeout(function() {
            // code to be executed after 2.3 seconds
            hide_Riksha();

            }, 3300);

    });
});
</script>