vanillaMoveBlocks/index.html at master · JavaScriptUtilities/vanillaMoveBlocks · GitHub

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
<!DOCTYPE HTML>
<html lang="en-EN">
    <head>
    <meta charset="UTF-8" />
    <title>Vanilla Move Blocks</title>
    <script src="js/script.js"></script>
    <script src="js/vanilla-moveblocks.js"></script>
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    </head>
    <body>
        <h1>Vanilla Move Blocks</h1>
        <p>The block is automagically moved to a different (defined)position when changing resolutions.</p>

        <div class="script-visible">&lt;div
    data-vmbtargets='{&quot;768&quot;:&quot;.mobile-here&quot;, &quot;1024&quot;:&quot;.tablet-here&quot;}'
    data-vmbwrapperclassname='wrapper-block'
    id=&quot;myblock&quot;&gt;
    content is here
&lt;/div&gt;</div>
        <script class="script-visible" contenteditable>window.domReady(function scrollanimdomready(){
    // Default block
    new vanillaMoveBlocks(document.getElementById('myblock'));

    // Block with arguments
    new vanillaMoveBlocks(document.getElementById('myblock2'),{
        targets: {"768":".mobile-here", "1024":".tablet-here"}
    });
});
</script>
        <h2>Desktop here</h2>
        <div id="myblock" data-vmbtargets='{"768":".mobile-here", "1024":".tablet-here"}'>content is here</div>
        <div id="myblock2">content is here too</div>
        <h2>Tablet here</h2>
        <div class="tablet-here"></div>
        <h2>Mobile here</h2>
        <div class="mobile-here"></div>
    </body>
</html>