JavaScript – Change multiple divs when selecting an element from DropDown List

I have this code that slices a picture and then simulates a folding effect. I have multiple flyers to test it on and and a dropdown list containing the names of the flyers. When I select a flyer, I want to change the picture that folds. I have tried something but doesn’t work because in my code every slice is another picture.

Can somebody help me with this one?

Here is the code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Accordion Fold</title>
    
    

    <script>

        var img = new Image();
        img.src = 'Flyer1pag1.png';

        function selectPicture(form) {
            var myindex = Pictures.dropPic.selectedIndex;
            if (Pictures.dropPic.options[myindex] != "0") {
                window.onload(Pictures.dropPic.options[myindex].value, target = "view");
            }
        }
        
        function scaleSize(maxW, maxH, currW, currH) {

            var ratio = currH / currW;

            if (currW >= maxW && ratio <= 1) {
                currW = maxW;
                currH = currW * ratio;
            } else if (currH >= maxH && ratio > 1) {
                currH = maxH;
                currW = currH / ratio;
            }

            return [currW, currH];
        }

        img.onload = function () {

            var imgWidth = this.width;
            var imgHeight = this.height;
            var newSize = scaleSize(800, 800, imgWidth, imgHeight);
            imgWidth = newSize[0];
            imgHeight = newSize[1];

            var Dim_View = document.querySelectorAll(".view");
            for (var i = 0; i < Dim_View.length; i++) {
                Dim_View[i].style.width = imgWidth + "px";
                Dim_View[i].style.height = imgHeight + "px";
                Dim_View[i].style.perspective = imgWidth * 0.7 + "px";
            }

            var Dim_Slice = document.querySelectorAll(".slice");
            for (var i = 0; i < Dim_Slice.length; i++) {
                Dim_Slice[i].style.width = imgWidth / 4 + "px";

            }
            var Poz_s1 = document.querySelectorAll(".s1");
            for (var i = 0; i < Poz_s1.length; i++) {
                Poz_s1[i].style.backgroundPositionX = '0px';
                Poz_s1[i].style.backgroundPositionY = '0px';
            }
            var Poz_s2 = document.querySelectorAll(".s2");
            for (var i = 0; i < Poz_s2.length; i++) {
                Poz_s2[i].style.backgroundPositionX = +imgWidth * 0.75 + "px";
                Poz_s2[i].style.backgroundPositionY = '0px';
            }
            var Poz_s3 = document.querySelectorAll(".s3");
            for (var i = 0; i < Poz_s3.length; i++) {
                Poz_s3[i].style.backgroundPositionX = +imgWidth * 0.5 + "px";
                Poz_s3[i].style.backgroundPositionY = '0px';
            }

            var Poz_s3 = document.querySelectorAll(".s3");
            for (var i = 0; i < Poz_s3.length; i++) {
                Poz_s3[i].style.backgroundPositionX = +imgWidth * 0.5 + "px";
                Poz_s3[i].style.backgroundPositionY = '0px';
            }
            var Poz_s4 = document.querySelectorAll(".s4");
            for (var i = 0; i < Poz_s4.length; i++) {
                Poz_s4[i].style.backgroundPositionX = +imgWidth * 0.25 + "px";
                Poz_s4[i].style.backgroundPositionY = '0px';
            }
        }

    </script>

    <style>
        .view {
            position: relative;
        }


            .view .slice {
                height: 100%;
                z-index: 100;
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                -o-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-transform-origin: left center;
                -moz-transform-origin: left center;
                -o-transform-origin: left center;
                -ms-transform-origin: left center;
                transform-origin: left center;
                -webkit-transition: -webkit-transform 1s ease-in-out;
                -moz-transition: -moz-transform 1s ease-in-out;
                -o-transition: -o-transform 1s ease-in-out;
                -ms-transition: -ms-transform 1s ease-in-out;
                transition: transform 1s ease-in-out;
                -webkit-backface-visibility: visible;
                -moz-backface-visibility: visible;
                -o-backface-visibility: visible;
                -ms-backface-visibility: visible;
                backface-visibility: visible;
            }

            .view s1, .view .s2, .view .s3, .view .s4 {
                -webkit-transform: translate3d(100%,0,0);
                -moz-transform: translate3d(100%,0,0);
                -o-transform: translate3d(100%,0,0);
                -ms-transform: translate3d(100%,0,0);
                transform: translate3d(100%,0,0);
            }

            .view:hover .s1 {
                -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,60deg);
                -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,60deg);
                -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,60deg);
                -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,60deg);
                transform: translate3d(100%,0,0) rotate3d(0,1,0,60deg);
            }

            .view:hover .s2 {
                -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-70deg);
                -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-70deg);
                -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-70deg);
                -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-70deg);
                transform: translate3d(100%,0,0) rotate3d(0,1,0,-70deg);
            }

            .view:hover .s3 {
                -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,70deg);
                -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,70deg);
                -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,70deg);
                -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,70deg);
                transform: translate3d(100%,0,0) rotate3d(0,1,0,70deg);

            }

            .view:hover .s4 {
                -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-65deg);
                -moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-65deg);
                -o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-65deg);
                -ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-65deg);
                transform: translate3d(100%,0,0) rotate3d(0,1,0,-65deg);
            }
    </style>
</head>
<body>
    <form name="Pictures">
        <select name="dropPic" onchange="selectPicture(this.Pictures)">
            <option value="Flyer1pag1.png">Flyer 1</option>
            <option value="Flyer2pag1.png">Flyer 2</option>
            <option value="Flyer3pag1.png">Flyer 3</option>
        </select>
    </form>
    <div id="view" class="view">
        <div class="slice s1" style=" background-size:cover;">
            <div class="slice s2" style=" background-size: cover;">
                <div class="slice s3" style=" background-size: cover; ">
                    <div class="slice s4" style=" background-size: cover; ">
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>


Source: html

Leave a Reply