Unable to display an image element in fullscreen within a modal that is already fullscreen

I am facing an issue with my modal that is designed to occupy the full width and height of a browser. Inside this modal, there is an image enclosed within a div along with some other elements. My goal is to make the image go full screen in the browser, akin to how a YouTube video behaves in full screen mode. I tried implementing the full screen API using a button but unfortunately, it does not seem to work.

$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus();
});

$('#dicomModal').on('shown.bs.modal', function() {
  $('#myInput').focus();
});

$(document).ready(function() {
  $(".js-example-basic-single").select2();
});

$(function() {
  $('#datetimepicker8').datetimepicker({

  });
});

$(function() {
  $('#datetimepicker1').datetimepicker({

  });
});


var myImage = document.getElementById('myImage');
var dicomFull = document.getElementById('dicomFull');

if (dicomFull) {
  dicomFull.addEventListener('click', function() {
    if (myImage.requestFullscreen) {
      myImage.requestFullscreen();
    } else if (myImage.webkitRequestFullscreen) {
      myImage.webkitRequestFullscreen();
    } else if (myImage.mozRequestFullScreen) {
      myImage.mozRequestFullScreen();
    } else if (myImage.msRequestFullscreen) {
      myImage.msRequestFullscreen();
    }

  });
}
.dicomv {
  &__mods {
    overflow: hidden !important;
  }
  &__items {
    display: inline-block;
    margin-right: 1rem;
  }
  &__navbar {
    width: 100%;
    border-radius: 0;
    min-height: 60px;
    margin: 0;
    top: 0;
    position: fixed;
    z-index: 80;
  }
  &__next {
    padding: 1rem;
    margin-top: 1rem;
    color: map-deep-get($colors, "background", "base");
    background-color: map-deep-get($colors, "background", "bg-col");
    &: hover {
      color: map-deep-get($colors, "background", "base");
      background-color: map-deep-get($colors, "background", "bg-col");
    }
    &:focus {
      color: map-deep-get($colors, "background", "base");
      background-color: map-deep-get($colors, "background", "bg-col");
    }
  }
  &__fs {
    padding: 1rem;
    margin-top: 1rem;
    color: map-deep-get($colors, "background", "base");
    background-color: map-deep-get($colors, "button", "btn-col");
    &: hover {
      color: map-deep-get($colors, "background", "base");
      background-color: map-deep-get($colors, "button", "btn-col");
    }
    &:focus {
      color: map-deep-get($colors, "background", "base");
      background-color: map-deep-get($colors, "button", "btn-col");
    }
  }
  &__container {
    position: relative;
    height: 100vh;
    margin: 0;
    float: left;
  }
  &__button {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
    margin-top: -3.5rem;
    color: map-deep-get($colors, "background", "base");
  }
  &__wid {
    width: 100% !important;
    margin-bottom: 0 !important;
    @media (min-width: 768px) {
      margin: 0 auto !important;
    }
  }
  &__mod {
    &--d {
      top: 0 !important;
      @media (min-width: 768px) {
        margin: 0 auto !important;
      }
    }
  }
}
#viewArea {
  margin-left: 0px;
  max-width: 100%;
  background: map-deep-get($colors, "font", "para")
}
.viewport {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute
}
.imageViewer {
  height: 100%;
}
.viewportWrapper {
  width: 100%;
  height: 100%;
  position: relative;
  color: white;
  display: inline-block;
  background-color: black;
}
.viewer {
  width: 100%;
  height: 100%;
}
.dicom-sidebar-container {
  width: 240px;
  height: 100vh;
  border-right: 1px solid #a1a1a1;
  float: left;
  overflow-y: auto;
}
.dicom-main-container-with-sidebar {
  width: calc(100% - 240px);
}
.dicom-main-container-without-sidebar {
  width: 100%;
}
//
.dicom-sidebar {
  /*margin: 0;*/
}
.panel-heading {
  padding: 2px 8px;
}
.panel-container {
  margin-left: 1rem;
  border: 1px solid #ccc;
}
.dicom-sidebar-panel {
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  overflow-y: auto;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.dicom-sidebar-panel-body {
  padding: 0 10px 100px 10px;
  overflow-y: auto;
}
.dicom-sidebar-row {
  margin-right: 0;
}
.dicom-sidebar-drawer {
  margin-left: -240px;
}
.dicom-sidebar-inner-box {
  width: 110px;
  padding-left: 3px;
  margin: 1rem 0;
  z-index: 100;
  float: left;
}
.dicom-sidebar-inner-box:nth-child(even) {
  padding-left: 6px;
}
:-webkit-full-screen {
  width: 100%;
  height: 100%;
}
:-moz-full-screen {
  width: 100%;
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="dialog" class="modal dicomv__mods" id="dicomModal" style="z-index: 1050; display:">
  <div class="modal-dialog modal-lg dicomv__wid">
    <div class="modal-content"></div>
    <div id="" class="dicomv">
      <div class="navbar navbar-default dicomv__navbar">
        <div class="dicom-navbar-container">

          <ul class="">

            <li class="dicomv__items">
              <a href="#">
                <button type="button" class="btn btn-default dicomv__fs" id="dicomFull" name="button">View FullScreen</button>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div id="viewArea" class="row">
        <div id="dicom_loadbar"></div>
        <div class="dicom-sidebar-container panel panel-default dicom-sidebar-panel">
          <div class="panel-heading">
          </div>
          <div class="panel-body dicom-sidebar-panel-body">

          </div>
        </div>

        <div class="dicomv__container dicom-main-container dicom-main-container-with-sidebar" id="myImage">

          <div id="myImage">
            <img src="http://images.newseveryday.com/data/thumbs/full/27419/570/0/0/0/macbook-pro.jpg" id="" alt="" />

          </div>

        </div>
      </div>
    </div>
  </div>
</div>
</div>

javascriptjqueryhtmlcss

Answer №1

For your image to scale and fill the container when you go full screen, ensure that it has a width of 100%. Although this might not be your final code, here's an example:

if(dicomFull){
dicomFull.addEventListener('click',function(){
  if(myImage.requestFullscreen){
    myImage.requestFullscreen();
  }else if (myImage.webkitRequestFullscreen) {
    myImage.webkitRequestFullscreen();
  }else if (myImage.mozRequestFullScreen) {
    myImage.mozRequestFullScreen();
  }else if (myImage.msRequestFullscreen) {
    myImage.msRequestFullscreen();
  }
  $("#myImage img").css("width", "100%");

});
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Selecting list items using the up and down keys in JavaScript/jQuery

As the search terms dynamically populate a list of items, I am looking for a way to make the list items selectable/focused using the up/down keys and hide the dropdown with ESC key. <form> <div> <div class="field"> & ...

javascriptjquerybootstrap-5popper.js

What is the best way to add prefixes to my SCSS style sheets?

After attempting to add prefixes to my scss files, I came across the autoprefixer tool. However, I discovered that it only supports CSS files. Is there a way to utilize autoprefixer with scss files? Here are the commands for Autoprefixer: npm install post ...

javascripthtmlcssangularsass

The error message "TypeError: Trying to access properties of an undefined object (reading '800')" is being displayed

Every time I launch my application, I encounter the error message: "TypeError: Cannot read properties of undefined (reading '800')". import React, { useState } from 'react'; import { Menu, MenuItem, Avatar, Box, ThemeProvider} ...

javascriptreactjsmaterial-ui

Dynamically load scripts in angularJs

Having multiple libraries and dependencies in my angularjs application is posing a challenge as I want to load them all using just one script, given that three apps are utilizing these dependencies. Currently, I have this custom script: var initDependenci ...

javascriptangularjs

Establishing an RSS feed (Google shopping) for an online store built on Vue-storefront

I recently launched a Vue-storefront based online store and now I'm looking to set up Google Shopping ads using an RSS feed for my products. However, I've encountered an error message saying "Unexpected token < in JSON at position 0" when tryi ...

javascriptnode.jsvue.jsrssvue-storefront

How can I troubleshoot the issue of not receiving a response while attempting to upload an image using Postman with my Cloudinary-Express API?

Currently developing a backend nodejs/express API to upload image files to Cloudinary, encountering an error during testing with Postman. Below is the backend code: app.post( '/api/upload/:id', asyncHandler(async (req, res) => { try { ...

javascriptnode.jsexpresspostmancloudinary

Having difficulty interpreting the json data retrieved from the specified url

<html> <body> <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <script> $(document).ready(function () { $.ajax({ type: 'GET& ...

javascriptajaxjson

jQuery Validate not triggering remote action method

I am currently working with ASP.NET MVC4, jQuery Validate, and jQuery Validate unobtrusive. Among the elements on my form, there is only one element that requires validation. The rest of the elements do not need to be validated. Specifically, I have a tex ...

jqueryasp.net-mvcasp.net-mvc-3asp.net-mvc-4jquery-validate

Module is absent in JavaScript but present in TypeScript

As I delve into coding a vscode extension by following a tutorial, I encountered an issue with importing in my server.ts file. The directory structure looks like this: ...

javascripttypescriptnpmvisual-studio-codevscode-extensions

Load Bootstrap 4 Modal with Ajax

I recently upgraded from Bootstrap 3 to Bootstrap 4.1 Within my applications, I utilize ajax loaded modals. In the layout, I have: <div class="modal fade" id="myModalToFillInfo" tabindex="-1" role="dialog" aria-labelledby="myModalToFillInfoLabel" ari ...

javascriptjqueryhtmlajaxbootstrap-4

What is the top JavaScript library for compressing and adding files for transfer to an API?

In the process of developing a Vue.js application, I am facing the task of zipping data into files, adding them to a zip folder, and then sending the zip folder to an API. After researching, I found two options - Zip and JSZip, but I'm uncertain about ...

javascriptvue.jsvuejs2zipjszip

Creating a realistic typewriter effect by incorporating Code Block as the input

I am looking to add a special touch to my website by showcasing a code segment with the Typewriter effect. I want this code block not only displayed but also "typed" out when the page loads. Unfortunately, I have been unable to find a suitable solution s ...

javascriptreactjstypescriptnext.js

Vue 3: Leveraging Functions Within Mutations.js in Vuex Store to Enhance Functionality

In my mutations.js file, I have encountered a situation where one function is calling another function within the same file. Here's an example of my code: export default { async addQuestionAnswer(state, payload) { alert(payload); this.update ...

javascriptvue.jsvuejs3vuex

Trouble arises when accessing GET form in php/Ajax

I am in the process of creating a dynamic website. At the top, I have an input form that, when submitted, should display the output from an asynchronous request to a PHP page using echo to show what was submitted. Unfortunately, it's not functioning ...

javascriptphpjqueryhtmlajax

How can you modify Jquery show_hide so that the page automatically scrolls to the bottom of the concealed field when the button is clicked?

On my website, there is a button that reveals a map when clicked. The button is visible when the page loads, but once clicked, the map slides open and goes out of sight since the page loads at the top as usual. My goal is to have the page automatically scr ...

javascriptjquery

The astonishing font-icon animation feature is exclusively functional on code-pen

I have a problem with a font-icon animation code. When I run it on my local server, the animation doesn't work. It only works on http://codepen.io/TimPietrusky/pen/ELuiG I even tried running it on http://jsfiddle.net/qjo7cf3j/ @import url(http: ...

cssfont-awesome

My HTML files are not getting bundled by Webpack

Despite including dependencies for HTML loaders in my Angular 2 application, webpack is not bundling my HTML files along with the rest of the files it generates. I have tried using both "html-loader" and "html-webpack-plugin," but to no avail. My webpack ...

htmlangularjsangularwebpackwebpack-html-loader

Can the renderWith function of a column in angular-datatables retrieve a value from a promise?

Can I trigger a call to a service or filter that retrieves a promise from the renderWith() function of a column? When I attempt this, the result always appears as "[object Object]". vm.dtInstance = {}; vm.dtOptions = DTOptionsBuilder.fromFnPromise(MySe ...

javascriptangularjspromisedatatables

I am interested in creating a design where two DIVs are layered on top of each other with one having transparency, allowing visibility through to the background DIV. This can be achieved using a combination of

Looking to enhance the visual appeal of my website, I decided to incorporate a background image within a div. To add more depth and creativity, I am now striving to overlay a semi-transparent black box on top of the image. This overlay will not only allo ...

htmlcss

script code to limit selection of dates within a predefined range

I'm seeking assistance to limit my customers from selecting a date beyond 10 days in advance. Although I previously had a code that functioned properly when there were more than 10 days left in the current month, it is now ineffective. This is becaus ...

htmltypescriptgoogle-apps-scriptdatepicker