IE8 V8 Not Changing Class for a Dom Element Despite Js Function Changing the Element Attribute

IE8 v8 not changing class for a DOM element despite JS function changing the element attribute

I would try to use jquery and basically have all the keys lowercased and have css class

.Upper {text-decoration:uppercase; }

than the following code should work

$('.shift').click(function(){ 
    $('.key').toggleClass('Upper');
});

Actually i have almost the same stuff, but not with text decoration property, and IE8 do update appearance of DOM elements on toggleClass
Probably otherwise you should look what jQuery do on toggleClass in order to make it cross browser

Class isn't added on page load

Looking at your page, you are trying to find a link on the page using the page segment of the url.

When you use http://www.foxteam.net/index.php your code is able to pickup the acnhor with href set to 'index.php'. However when you use the url http://www.foxteam.net/ the page segment is blank and hence $("ul#main-menu li a[href^='"+currentPHP+"']") is not matching any link.

Replace the current document load script in your page with this one:

$(document).ready(function(){
        var i = document.location.href.lastIndexOf("/");
        var currentPHP = document.location.href.substr(i+1);
        $("ul#main-menu li a").removeClass('active');
        var link = $("ul#main-menu li a[href^='"+currentPHP+"']");
        if(link.length < 1) {
            link = $("ul#main-menu li a:first");
        }
        link.addClass('active');
});

For IE issue: Try this (not tested)

$(document).ready(function(){
        var i = document.location.href.lastIndexOf("/");
        var currentPHP = document.location.href.substr(i+1);
        $("ul#main-menu li a").removeClass('active');
        var link = $("ul#main-menu li a[href^='"+currentPHP+"']");
        if(currentPHP.length < 2 || link.length < 1) {
            link = $("ul#main-menu li a:first");
        }
        link.addClass('active');
});

Replacing multiple occurrences of text with jQuery in IE8

If you are just trying to modify the class list would it be possible just to directly set the class names from inside your each loop?

$("td.t-header").each(function() {
    this.className = "t-header rr-header rr-header-text";
});

Another solution using Jqueries toggle class is listed here:

https://stackoverflow.com/a/2576780/2511885

IE throwing JavaScript TypeError but not on chrome

Ok, so after quite a bit of trial and error I found out what the issue was and was able to solve it.

The code was breaking an line 104 of ajax_cart.js which had this block of code:

$$('.block-cart').each(function (el){
  el.replace(mini_cart_txt);
  //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});

This piece of prototype.js was searching the DOM for the .block-cart div to replace it with the HTML set in it's mini_cart_txt variable. It uses the Prototype $$() Method method to search the DOM and return all elements with the .block-cart class, it then iterates over each of them and replaces their content with the mini_cart_txt variable.

The issue was that our theme's HTML was modified and now included two div's with the .block-cart div.

<div class="f-right block-cart span5">
    <div class="f-left block-cart header_cart margin-left20">[OMITTED CODE FOR BREVITY]</div>
    <div class="f-right checkout-button">[OMITTED CODE FOR BREVITY]</div>    
</div>

Also the HTML in mini_cart_txt variable naturally also had two .block_cart classes, whereas in the original theme there was only one div with a class of .block-cart.

<div class="f-right block-cart span5">
    <div class="f-left block-cart header_cart margin-left20">[CODE WITH SUB_TREE CHANGES OMMITED]</div>
    <div class="f-right checkout-button"></div>
</div>

<script type="text/javascript">[OMITTED CODE FOR BREVITY]</script>

This was what was causing the exception in IE but not in Chrome. I'm not certain why Chrome skipped past this exception. Perhaps Chrome replaced the first .block-cart div and then did not continue to replace the second .block-cart div which was a child of the first one, whereas IE was running into a kind of loop which caused an exception.

Anyway I was able to fix the issue by removing the block-cart class name from the the child div of the first block-cart div.

<div class="f-right block-cart span5">
    <div class="f-left header_cart margin-left20">[OMITTED CODE FOR BREVITY]</div>
    <div class="f-right checkout-button">[OMITTED CODE FOR BREVITY]</div>    
</div>

what exactly is the DOM? and what is an object as taken from the DOM?

Is document the DOM

Short answer

Yes, in the sense that it is the root of it.

Slightly longer answer

The Document Object Model (DOM) is what the browser exposes to the JavaScript runtime to allow JavaScript code to manipulate the page (its nodes and associated metadata). document is one part of the DOM.

How can the DOM have JavaScript properties

Short answer

They don't.

Slightly longer answer

The DOM is not actually managed in JavaScript (yet). It is typically managed by a separate engine altogether, written in a lower-level language like C++ or Rust (in the case of Mozilla's Servo project). The JavaScript runtime is also written in a lower-level language (again, C++ is most likely) and certain attributes of the DOM are exposed to the JavaScript runtime as if they were native JavaScript objects. The fact that they are not makes all kinds of interesting things possible ... and generally make it so that these DOM objects do not always behave as you would expect "real" JavaScript objects to behave (for example typeof querySelectorAll in IE 8 returns "object", not "function" as one would reasonably expect).

---

Related Topics