Is there a method to enable the summary tag in Internet Explorer 11, such as using an external library?
<details>
<summary>Here is the summary.</summary>
<p>Lorem ipsum dolor sit amet</p>
</details>
Appreciate your help.
Is there a method to enable the summary tag in Internet Explorer 11, such as using an external library?
<details>
<summary>Here is the summary.</summary>
<p>Lorem ipsum dolor sit amet</p>
</details>
Appreciate your help.
If you want to use the details and summary elements in Internet Explorer, you'll have to do some extra work because IE doesn't support them by default.
You can check if details and summary are supported using feature detection like this:
if (typeof HTMLDetailsElement === "undefined") {
// Not supported
}
If not supported, you can create and immediately remove these elements in order to style them:
document.createElement("details");
document.createElement("summary");
After that, add some CSS styling for these elements:
// Basic styling example
var style = document.createElement("style");
style.textContent =
"details > :not(summary) {\n" +
" display: none;\n" +
"}\n" +
"details.showing > :not(summary) {\n" +
" display: block;\n" +
"}\n";
document.querySelector("head").appendChild(style);
Additionally, since not all content within details defaults to display: block, you may need to customize the styling further. You can also consider adding visual cues like arrows for better consistency with other browsers.
It's important to place this code before the body element to prevent any unstyled content flashing on the page initially.
To handle user interactions, such as clicks and keypresses, for details elements, toggle a class based on the specific styling defined earlier:
// Rough event handling logic
document.addEventListener("click", detailsHandler);
document.addEventListener("keypress", detailsHandler);
function detailsHandler(e) {
if (e.type === "keypress" && [13, 32].indexOf(e.which || e.keyCode) === -1) {
return;
}
var el = e.target;
while (el && el.tagName !== "DETAILS") {
if (el.tagName === "BODY") {
el = null;
break;
}
el = el.parentNode;
}
if (el) {
el.classList.toggle("showing");
}
}
This code snippet doesn't necessarily have to be placed before body, but it might make organizational sense to keep it together with the initial setup.
Finally, remember to include tabindex="0" attributes on both details and summary elements to ensure they are accessible via keyboard navigation in IE:
<details tabindex="0">
<summary tabindex="0">This is a summary.</summary>
<p>bla bla bla</p>
</details>
Check out the live example below for an illustration of how to implement this workaround in your code:
<!-- In the head element -->
<script>
(function() {
if (typeof HTMLDetailsElement === "undefined") {
// Detect non-support and enable
document.createElement("details");
document.createElement("summary");
document.addEventListener("click", detailsHandler);
document.addEventListener("keypress",
detailsHandler);
var style = document.createElement("style");
style.textContent =
"details > :not(summary) {\n" +
" display: none;\n" +
"}\n" +
"details.showing > :not(summary) {\n" +
" display: block;\n" +
"}\n";
document.querySelector("head").appendChild(style);
}
function detailsHandler(e) {
if (e.type === "keypress" && [13, 32].indexOf(e.which ||
e.keyCode) === -1) {
return;
}
var el = e.target;
while (el && el.tagName !== "DETAILS") {
if (el.tagName === "BODY") {
el = null;
break;
}
el = el.parentNode;
}
if (el) {
el.classList.toggle("showing");
}
}
})();
</script>
<!-- End of in the head element -->
<!-- In body -->
<details tabindex="0">
<summary tabindex="0">This is a summary.</summary>
<p>bla bla bla</p>
</details>If you're dealing with IE11's lack of support for summary/detail elements, fear not! Here are a couple of polyfills that might help:
I am currently developing a program that aims to create 3D parametric shapes using webgl. The current code I have works successfully for rendering a sphere, but when I try switching the equations for a torus, only the upper half of the torus is being displ ...
Currently, I've integrated Prettier into my workflow, but I've encountered an issue with arrow functions in JavaScript. For example: arg => console.log(arg) However, Prettier automatically formats it as: (arg) => console.log(arg) This for ...
When using axios to make a post request in this code, a new username is posted, but there is an issue with retrieving the posted name from the API. How can I fix this problem to view my posted request? const App = () => { const [data, setData] = u ...
I'm new to Angular JS and I'm trying to figure out how to save an object into $rootScope in my application. However, when I try to make a post request without including the object from rootScope, it doesn't work as expected. Now, on a newly ...
I am using the react-grid-layout library to create a dynamic grid where each item is a paper component from the React Material UI. However, I encountered an issue while running the application. The browser displayed the error message: "TypeError: react__W ...
Currently experimenting with Next.js but encountering some challenges. Recently attempted to add react-hook-mousetrap and imported it as per usual: import useMousetrap from "react-hook-mousetrap"; However, this resulted in the following error: S ...
Experimenting with servlet calls through Ajax functionality using a simple program. A form consisting of a text box and a div with some text. The program takes input from the user, replaces the text inside the div tag. The form looks like this: <form& ...
Is there a way to have selenium wait for 3 minutes before refreshing the page until a specific element (in this case, the Download button) is found? I've attempted the code below, but it doesn't seem to be effective. Note: I am trying to upload ...
Two routes in my application share a controller, but one route requires data to be resolved before the view loads while the other does not. Here is an example of the routing segments: ... when('/users', { controller: 'UsersCtrl', ...
I am currently working on a multi-page form and using jQuery Validate to validate it. The user has four options: next, prev, save, submit. Save, next, and prev all save the current page within the form; whereas submit is similar to save, but triggers addi ...
Our usual approach involves creating a new Map like this: const hash = new Map() hash.set(key,value) To retrieve the information, we simply use: hash.get(specificKey) An advantage of using Map is that we have flexibility in choosing keys and values. Cur ...
Utilizing the dependency angular-chart.js in my angular project has allowed me to showcase data visualizations on my admin page. Recently, I decided to upgrade angular-chart.js to version 1.1 and Chart.hs to version 2.5 based on the README.md guidelines o ...
I am currently working on making a desktop-sized website responsive. However, I have encountered an issue where the CSS rule is being read by the browser but not executed, regardless of whether the media query rule is true or not. I have already included & ...
Could someone explain how to create a jQuery multiple image upload feature (uploading without refreshing the page after choosing a file, only displaying the image but not inserting it into a database), and submit additional form data along with all images ...
I am struggling to create a state provider that can handle multiple parameters. Is it possible to capture them as an object or array, or do I have to capture them as a string and then separate them? For example, this is my current provider: .state(' ...
When working with CSS, I encountered an issue with lag while loading 24 different mask images for a transition effect. To address this, I tried using a div called "preload" to cache the images and prevent lag on playback: <div class='trans' s ...
While working on my Angular application, I encountered an issue with designing a side list-group of recent blogs using Bootstrap 4. When the aspect ratio is changed to mobile view, the images resize and become smaller to fit into the div as the title lengt ...
I'm currently developing a date and time filter for a database. The goal is to query results only within a specific date range selected by the user in an input field. I've written some code, but it seems like something is missing because it' ...
When attempting to make my Jquery code more flexible, I decided to extract the selector and access it through a variable. However, despite creating variables for both selectors, neither of them seem to be functioning properly. I am confident that the issue ...
One of my Vue.js components features a modal view with various embedded references. <template> <div> <b-modal ref="modalDialog" > <b-row> <!-- document --> <b-col> &l ...