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.