What is the best way to ensure that hashtag links function properly in Internet Explorer?

This guide provides step-by-step instructions on how to implement CSS3 modal windows. It is designed to function smoothly on Chrome and Firefox browsers, although Internet Explorer may have trouble loading links with hashtags.

  • Tutorial
  • Demo

The first link leads to the source code, but a copy has been included below for reference.

HTML

<html lang="en" >
    <head>
        <meta charset="utf-8" />
        ... (omitted for brevity)
</html>

CSS

    .main {
        background: #aaa url(../images/bg.jpg) no-repeat;
        width: 800px;
        ... (omitted for brevity)
    }
    .panel {
        background-color: #444;
        height: 34px;
        padding: 10px;
    }
    ... (omitted for brevity)
cssinternet-explorer-8modal-dialog

Answer №1

This issue with hashchange events in internet explorer is one that I've encountered before, prompting me to create this code snippet (compatible all the way down to IE7):

To alter the URL hash, be sure to add the class hash-modifier to any relevant elements.

JavaScript: 

$(function () {
        var hashchangeHandler = function () {
            switch (location.hash.replace(/^.*#/, '')) {
                case 'sign-up':
                    alert('signing up/opening sign-up modal');
                    break;
                case 'login':
                    alert('logging in/showing login modal');
                    break;
                default:
                    // perform default action

            }
        }

        BindHashChangeEventListener(hashchangeHandler);

        // Execute the initial hashHandler function upon document ready
        hashchangeHandler();
    });


    function BindHashChangeEventListener(hashHandler) {
        if (("onhashchange" in window) && !($.browser.msie)) {
            // Use jQuery's built-in hashchange event
            $(window).bind('hashchange', hashHandler);
        } else {
            // For IE and non-hashchange supporting browsers
            $('.hash-modifier').on('click', function () {
                setTimeout(hashHandler, 50);
            });
        }
    }

HTML:

<a href="#sign-up" class="hash-modifier">sign up</a>
<a href="#login" class="hash-modifier">login</a>

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

Using @media queries for mobile and desktop: preventing desktop from displaying mobile styles

I have been working on redesigning a website for mobile using only CSS. I set up media queries to deliver the appropriate CSS for desktop and mobile devices. However, I noticed that when resizing the browser to under 855 pixels, some of the mobile CSS is ...

htmlcssmobilemedia

Polyfill for the :nth-column CSS4 Grid-Structural pseudo-class

In my CSS grid layout, I want to include a margin in every even column. While the :nth-column pseudo-class would be ideal for this, it unfortunately won't be supported in the near future. Could anyone recommend any polyfills that I could utilize, or ...

csscss-selectorscss-gridpseudo-classpolyfills

linking ng-style through live html

I am encountering an issue with dynamic data stored in the database. When trying to apply a style to a div element retrieved from the server response, I am facing difficulties with implementing it using ng-style. If the data is static, everything works fi ...

javascriptcssangularjs

Reaching the highest achievable point for a stationary object positioned between two other stationary objects

Hey everyone, I'm facing an issue where I want my <div id="content" style="margin:0 auto;"><!--AJAX Loaded Content--></div> to fill the space between my <div id="header" style="position:fixed;top:0;width:100%;height:300px;"> ...

htmlcssmobileheightfixed

Alignment issues with CSS3 navigation bar

After conducting thorough research on this topic, I realized that I am not alone in facing this issue. Unfortunately, the solutions provided by others with the same question did not resolve my problem. I have carefully configured my links for navigation wi ...

css

Unable to get CSS Filter to function properly in Firefox

I'm having trouble with the CSS filter on my Firefox (15.0) browser. Here is the HTML code: <div class="google"> <img src="https://www.google.com/images/srpr/logo3w.png"> </div> And here is the CSS code: .google{ -moz ...

htmlcss

Utilize various animations on multiple background images within a singular class

I have a unique situation where I am using a single class called slider, but I need different types of animations for various images. Can someone please assist me in implementing this? Currently, all my images are using the same animation style, but I woul ...

htmlcssanimationsliderslideshow

How can I customize a CSS media class?

In my project, I am using a CSS library that includes the following class: @media only screen and (max-width: 480px) { .nav-tabs>li { margin-bottom:3px; } .nav-tabs>li, .nav-tabs>li>a { display:block !important; ...

htmlcss

CSS and Jquery HTML linking

Every time I update the HTML of an element dynamically using jquery.html(), the external CSS styles (except for those inherited from parent elements) are not applied to the elements. When I refer to external CSS, I am talking about styles that are not dire ...

jqueryhtmlcss

What is the best way to adjust the height of the second column downwards?

I am trying to achieve a 2-column layout with both columns at the same height. This is how it currently appears: And this is how I want it to be: Here is my code snippet: html { background-color: lightblue; font-family: Tahoma, Geneva, sans-serif ...

htmlcss

Utilize Flexbox to create ample space on the right side

Hi there, I've noticed that when I use display: flex, the right side of my row seems to have a slight gap. How can I go about fixing this issue? It's not very obvious in jsfiddle, but you can spot it using Firebug or a similar tool. Check out th ...

htmlcssflexbox

How can I update the cursor appearance when hovering over a disabled link within jQueryUI tabs to indicate that it is not clickable?

I have been working with jQuery UI tabs and I am encountering an issue. The app is correctly applying the CSS class .ui-state-disabled, which should prevent clicking on the link. However, the cursor does not change to default as intended. Despite trying di ...

jqueryhtmlcss

Issues with HTML5 video playback have been encountered on Chrome and Internet Explorer after hosting the video on a server. The video is in the MOV file format

On our teamVideo.html page, we are incorporating the HTML5 video tag to showcase a video file in .mov format that was captured using an iPhone. <video preload="none"> <source src="video/v1.mov"> </video> When the teamVideo.html page is ...

javascriptcsshtmlsharepointvideo

Changing the Background with jQuery When Scrolling Reaches a Specific Threshold

Currently, I am working on developing a website with horizontal scrolling capabilities. You can check out the DEMO at . In this demo, the scooter is featured as a fixed background image. My goal is to have the background image change to a different scoote ...

jquerycssbackground-image

Is it possible to vertically displace an element within a CSS Grid cell?

Here is the code snippet: .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); ...

htmlcss

The area available for clicking does not align correctly with the visible display of the div element

Is it possible to create clickable, animating sprites without relying on Flash? I want the sprites to show a bubble popup when clicked or touched, and then dismiss when the screen is clicked again. However, I'm facing an issue where the clickable area ...

htmlcsswebkitmobile-safariandroid-browser

How can I eliminate the black outline added to text by IE CSS filter?

Is there a way to add text-shadows to elements in IE without having a black outline around the text when it is not black? I know IE doesn't support text-shadow property but using filter: property gets pretty close. If anyone has any suggestions or so ...

htmlinternet-explorercss

Printing Strings in JavaScript IF Conditional Block

Hello there! I am looking for assistance with a JavaScript concept. Recently, I created some code where in the HTML file, there is a div element with an id of "GetID" where the string outputs are meant to be displayed. The JavaScript code looks something ...

javascripthtmlcss

Using margin on the body element in IE can cause unexpected values when using Jquery offset

I am currently working on positioning a contextMenu using jQuery's jquery.ui.position. The library I am utilizing for the ContextMenu is available at this link: https://swisnl.github.io/jQuery-contextMenu/demo My approach to positioning the ContextM ...

javascriptjqueryhtmlcsscontextmenu

Building a slider inspired by the design elements on the McDonald's website using jQuery

Hey there, I'm looking for assistance on how to design a slider like the one on (burgers slider). The functionality I'm aiming for is that when hovering over the left or right side of the slider, the images will smoothly slide in that direction. ...

jquerycssslider