I need to run a script in all browsers except versions of IE below 9. The conditional statement for IE looks like this:
<!--[if gt IE 8]>
JavaScript code goes here
<![endif]-->
However, this code will only execute in IE9 and not in any other browser.
Is there a way to combine multiple conditional statements, such as:
<!--[if gt IE 8 OR !IE]>
Run JavaScript code here
<![endif]-->
To create a conditional comment, you can use the following syntax:
<!--[if gte IE 9]><!-->
<script></script>
<!--<![endif]-->
Conditional comments come in two forms: one where the entire block is commented out for all browsers (as shown in your initial example) and another where only the "condition" is commented out (like the code provided above).
This means that non-IE browsers will see the <script></script> outside of comments, while IE versions before 9 will parse the comments and know to ignore that HTML.
It is recommended to utilize feature detection instead of relying on conditional comments. For instance, Microsoft's documentation states that Internet Explorer 10 will completely disregard any conditional comments within your script, such as this:
<!--[if IE]>
This content is ignored in IE10.
<![endif]-->
To address this issue, you can implement the following workaround:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
However, it is important to note that this should not be considered a permanent solution.
When you want to combine conditional statements, logical operators come in handy. For instance, you can use something like [if (gt IE 5)&(lt IE 7)] or [if (IE 6)|(IE 7)]. More details on this can be found here.
It may seem confusing to use conditional statements to comment out content. However, it’s a common practice among developers. You can follow the notation I’m familiar with, and there are additional examples on quirksmode available here:
<!--[if IE]>
According to the conditional comment, this is IE<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment, this is not IE<br />
<!-- <![endif]-->
The syntax mentioned has been endorsed in MS specifications, offering features like custom version vector detection. It's worth noting that IE10 might be detected as a non-IE browser, so treat it accordingly (hopefully without encountering any significant quirks that would necessitate using conditional statements in the first place).
If you're looking for some assistance, this page might be of help:
Here are some specific details:
For those wanting to target non-IE browsers, try using this code snippet:
<!--[if !IE]><!-->
<h1>You are NOT using Internet Explorer</h1>
<!--<![endif]-->
To target a combination of non-IE browsers and a specific version of IE:
<!--[if IE 6]><!-->
<h1>You are using EITHER Internet Explorer version 6<br />
OR a non-IE browser</h1>
<!--<![endif]-->
<h1>You are using
<!--[if IE 6]>IE6 and not <!-->
a non-IE browser
<!--<![endif]--></h1>
Hey there! I'm diving into the world of JavaScript and AJAX for the first time, and I could really use some guidance on a particular issue. I'm looking to implement a feature where the user is notified whenever there is a change in a value of a ...
When I implemented the .toggle() functionality in jQuery on the content, I encountered a problem where clicking on the "read more" button caused the text link to disappear and the first paragraph to become invisible. Below is the jQuery code snippet: $( ...
Currently, I have been working on constructing a complex view that requires multiple functionalities. To ensure proper organization, I have divided it into various custom components. I don't want to go into great detail, but I have managed to make it ...
My webpage has a white footer set at 30px in height. However, when I scroll down the page, the footer expands and overlaps with the text part (a div with a light grey background). Can you help me figure out what's causing this issue and how to fix it? ...
I am facing an issue where I have a large array that is being loaded into a ul list using ng-repeat in Angular. The loading of the list takes too long and I want to display a loader while it's loading, but hide it only when the ul list is fully render ...
If you're curious about the code, take a look here! Here are some of the issues I'm facing: The div doesn't toggle to hide when clicked on itself, only when another one is clicked. (UPDATE: it actually won't toggle at all) When t ...
I have extensively researched this issue, including reading numerous StackOverflow questions, but I am still unable to find a solution. My problem involves retrieving the 'id' attribute value of an HTML 'a' element with jQuery when the ...
When registering users in my application, I save their username, password, and JWT generated token in MONGO DB. Upon successful login with the correct credentials, I respond with the stored token. In the client-side controller, I utilize local storage to s ...
My challenge involves utilizing the flat() method in a TypeScript script. In my tsconfig.json file, I have set the target to es2017 and defined an interface for the input variable. However, I keep encountering this error message: Property 'flat' ...
Currently, I am unit testing an Angular controller that relies on a Rails Resource factory to manage data exchange with a Rails application. Specifically, POST requests are handled by calling a method on the model, like so: $scope.resource.update().then(s ...
I am struggling to create lists that seamlessly flow together to showcase data. I am using the following website as a reference: I have examined the style sheet thoroughly but I cannot figure out how they are achieving this effect. I am hoping someone can ...
I have developed a small quiz application where, after answering questions, I display a progress bar. The issue I am facing is with the styling of the progress bar. I have set up two div elements for this purpose - one as the parent element (id = "progress ...
I'm facing an issue with transforming the parent-child relationship in my data structure. Currently, it looks like this: { "id": 7, "name": "Folder 1", "parent_folder": null, "folders": ...
Is it possible to merge these 3 functions together for a seamless data stream display in individual divs? How should I approach this? The AJAX request does not retrieve the users' first, middle, or last names under response.users but rather response. ...
I'm facing an issue where the radio buttons on my HTML page change sizes when zooming in or out on Firefox only (this doesn't happen in Chrome). At the default size of 100%, they look like this. When the page is zoomed in beyond 100%, the radio ...
Hey there, I've been successfully using the jquery galleria plugin, but now I'm looking to add some custom content and links that will display in the center of the image. Is it possible to achieve this with galleria? Your insights would be greatl ...
I have recently developed a custom API using an Azure Function built with NodeJS. This API incorporates an HTML interface that allows users to upload and download files from Azure Storage containers using SAS tokens. However, I now need to enhance the func ...
Feeling stuck.. I have a JSON file with some data and I need to manipulate it. Take a look at my JSON structure: [{ "method": "GET", "path": "/", "aliases": "", "name": "rootPath", "handler": "generatedApps/avion01/actions.HomeHandler" }, { "method": "GET ...
My attempt to direct my chrome driver to the correct CSS locator in order to refine the search only to Facebook pages is proving to be a challenge. When inspecting the element, the HTML code is as follows: https://i.sstatic.net/8XVPs.png I decided to manu ...
I'm currently working on a small application that has both a sidebar menu and a header menu. My goal is to have all items in these menus toggle the visibility of content in one main window or page. When a button is clicked, I want it to show the corre ...