Expanding a div element onClick always expands the same div element

Viewed 216

I have three divs containing three separate charts on a page and I would like to expand one to fullscreen on click.

I am targeting a class in the div i'd like to expand (.container-expand) and also a class on the button (.toggle_fullscreen) so that no matter which button is clicked that element will expand, example below.

$('.toggle_fullscreen').on('click', function(){
    // if already full screen; exit
    // else go fullscreen
    if (
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
    ) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    } else {
        element = $('.container-expand').get(0);
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }
});

With the button being;

<button type="button" class="btn btn-sm btn-white toggle_fullscreen">Go Fullscreen</button>

And the container being;

 <div class="card container-expand" id="chart1">

2 example divs to show layout

<div class="card col-md-6 border container-expand">
    <div class="dropdown show ">
        <button type="button" class="btn btn-sm btn-white toggle_fullscreen">Go Fullscreen</button>
        <a class="btn btn-sm btn-white" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false"><i class="fa fa-download"></i></a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a style="margin-left: 10px" href="#" id="download1" download="ChartImage1.jpg"></i>save as
                image</a>
            <button class="dropdown-item" onclick="saveAsPDF1()">save as pdf</button>
            <a class="dropdown-item" href="#">export charts as excel</a>
        </div>
    </div>
    <h4 class="chartTitle">This is chart 1</h4>
    <canvas class="chart1" id="chart1" width="400" height="200"></canvas>
</div>

<div class="card col-md-6 border container_expand">
    <div class="dropdown show">
        <button type="button" class="btn btn-sm btn-white toggle_fullscreen">Go Fullscreen</button>
        <a class="btn btn-sm btn-white" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false"><i class="fa fa-download"></i></a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a style="margin-left: 10px" href="#" id="download2" download="ChartImage2.jpg"></i>save as
                image</a>
            <button class="dropdown-item" onclick="saveAsPDF2();">save as pdf</button>
            <a class="dropdown-item" href="#">export charts as excel</a>
        </div>
    </div>
    <h4 class="chartTitle">This is Chart 2</h4>
    <canvas class="chart2 container-expand" id="chart2" width="400" height="200"></canvas>
</div>

The outcome i'm getting is that it is always the same div that expands to fullscreen. e.g I click fullscreen on chart 3 and chart 1 will expand. Same for Chart 2.

Prior to pushing to a branch, this worked fine with each chart and it's div expanding to full screen properly and then, didn't, so I think my understanding of what is happening is off.

I'm still learning, and I'm aware i could get this to work by repeating the code and changing the id's so they're unique, but I'd like to learn some understanding from this.

Any help is appreciated.

1 Answers

You could do as follows:

$('.toggle_fullscreen').on('click', function(e){
    var element;
    
    // if already full screen; exit
    // else go fullscreen
    
    if (document.fullscreenElement || ... ) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    } else {
        /**
         * based on your current event target `e`,
         * find the .container-expand belonging to the current .dropdown box
         **/
         
        element = $(e).parent().parent().find('.container-expand');

        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }
});
Related