Internet Explorer doesn't support Property or Method

[Mr Initial Man]

I'm getting the following error from IE:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MSN Optimized;US)
Timestamp: Sun, 29 Apr 2012 19:49:29 UTC


Message: Object doesn't support this property or method
Line: 31
Char: 2
Code: 0
URI: file:///F:/Book_XHTML/Scripting/get_block_el.js

Line 31-42 of that file is this:

    if(
        (($el.nodeName.toLowerCase()  == 'img') && ($el.parentNode.nodeName.toLowerCase()  == 'a')) ||
        (
            ($el.nodeName.toLowerCase()  == 'div') && 
            ($el.parentNode.hasAttribute('class')) && 
            ($el.parentNode.getAttribute('class').indexOf('sample') === 0) && 
            ($el.getAttribute('class') == 'ln01')
        )||
        (($el.nodeName.toLowerCase()  == 'div') && ($el.parentNode.hasAttribute('class')) && ($el.parentNode.getAttribute('class').indexOf('samp01') > -1) && ($el.getAttribute('class') == 'ln01'))
    ){
        $el = $el.parentNode.parentNode;
    } 

On another page, the error is:

Webpage error details

Message: Object doesn't support this property or method
Line: 62
Char: 2
Code: 0
URI: file:///F:/Book_XHTML/Scripting/get_block_el.js

The lines in that context are

    var $orig_el_name = $elem.nodeName.toLowerCase() + (($elem.hasAttribute('class'))?('.' + $elem.getAttribute('class').replace(/\s/g,'.')):''); 

On a third, it is

Message: Object doesn't support this property or method
Line: 37
Char: 3
Code: 0
URI: file:///F:/Book_XHTML/Scripting/clckevnt.js

Not even the same file! (BTW, lines 37 - 50 are thus: )

        if(
            ($el_list[$ii].nodeName.toLowerCase() != 'div') ||
            (
                ($el_list[$ii].nodeName.toLowerCase()  == 'div') && 
                ($el_list[$ii].hasAttribute('class')) && 
                (
                    (/ln[0-9][0-9]/.test(SlctrClass($el_list[$ii])))||
                    (/samp[0-9]/.test(SlctrClass($el_list[$ii])))||
                    (SlctrClass($el_list[$ii]) == 'code_header')||
                    (SlctrClass($el_list[$ii]) == 'code_subheader')||
                    (/subh[0-9]/.test(SlctrClass($el_list[$ii])))
                )
            )
        ){ 

What is going on?

[Mr Initial Man]

BTW, here's a link to one of the pages. It's showing up in older versions of IE.

http://mrinitialman.com/Books/HTML/C.../JS-Style.html

[bionoid]

Just a mention but the older versions of IE do not like unnecessary trailing commas, eg:

var $retrn = {
	selector:$selector,
	brk_el:$ret_el,
	orig_el:$elem,
	brk_el_nm:$ret_el_name,
	orig_el_nm:$orig_el_name,
}

I got a few error reports in several places about them.

[Mr Initial Man]

Right. I forgot to upload a fixed script with that, but problems remained. *Uploads.* Now that my sloptastically sloppy coding has been fixed, let's get to the mysterious problem.

[bionoid]

Ok, in IE7 I get stopped here because it doesn't support "hasAttribute":

if(
	(($el.nodeName.toLowerCase()  == 'img') && ($el.parentNode.nodeName.toLowerCase()  == 'a')) ||
	(
		($el.nodeName.toLowerCase()  == 'div') && 
		($el.parentNode.hasAttribute('class')) && 
		($el.parentNode.getAttribute('class').indexOf('sample') === 0) && 
		($el.getAttribute('class') == 'ln01')
	)||
	(($el.nodeName.toLowerCase()  == 'div') && ($el.parentNode.hasAttribute('class')) && ($el.parentNode.getAttribute('class').indexOf('samp01') > -1) && ($el.getAttribute('class') == 'ln01'))
){
	$el = $el.parentNode.parentNode;
}

I've never used it, so I found this: http://help.dottoro.com/ljmaaqaf.php

In IE8 it then complains about "addEventListener":

for(var $i = 0; $i < $break_els.length; $i++){
	(function(num) {
		$break_els[num].orig_el.addEventListener('mousedown',function(e) {adjustIMGLink(e,$break_els[num]); } ,false); 
		$break_els[num].orig_el.addEventListener('click',function(e) {checkClick(e,$break_els[num]); } ,false); 
	}($i));
}

In older versions of IE you need to use the "attachEvent" function. http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx

[Mr Initial Man]

Well, that's informative. Thank you. :-)

[Mr Initial Man]

This is the setup of click events that I worked out:

function adjustIMGLink($evnt, $elem){
    var $a_el = $elem.orig_el.parentNode;
    if(($elem.orig_el.nodeName.toLowerCase()  == 'img') && ($a_el.nodeName.toLowerCase() =='a')){
        if(!$a_el.getAttribute('j_href')){$a_el.setAttribute('j_href', $a_el.getAttribute('href'));}
        if(($evnt.shiftKey) && (($evnt.ctrlKey && !$evnt.altKey) || (!$evnt.ctrlKey && $evnt.altKey))){$a_el.removeAttribute('href');} 
            else {$a_el.setAttribute('href', $a_el.getAttribute('j_href'));}
    }
}

function checkClick($evnt, $elem){
    if($evnt.ctrlKey && $evnt.shiftKey && !$evnt.altKey){
        addBreak($evnt, $elem);
    }
    if($evnt.altKey && $evnt.shiftKey && !$evnt.ctrlKey && $elem.orig_el.nodeName.toLowerCase()  == 'img'){
        SizeCSS($evnt, $elem);
    }
}
var $el_names = new Array(
    'img',
    'div',
    'h2',
    'h3',
    'h4',
    'h5',
    'h6',
    'p',
    'li',
    'dt',
    'tr',
    'caption'
);
var $break_els = new Array();

for(var $i = 0; $i < $el_names.length; $i++){
    var $el_list = document.getElementsByTagName($el_names[$i]);
    for(var $ii = 0; $ii < $el_list.length; $ii++){
        if(
            ($el_list[$ii].nodeName.toLowerCase() != 'div') ||
            (
                ($el_list[$ii].nodeName.toLowerCase()  == 'div') && 
                ($el_list[$ii].getAttribute('class') || $el_list[$ii].className) && 
                (
                    (/ln[0-9][0-9]/.test(SlctrClass($el_list[$ii])))||
                    (/samp[0-9]/.test(SlctrClass($el_list[$ii])))||
                    (SlctrClass($el_list[$ii]) == 'code_header')||
                    (SlctrClass($el_list[$ii]) == 'code_subheader')||
                    (/subh[0-9]/.test(SlctrClass($el_list[$ii])))
                )
            )
        ){
            $break_els.push(GetSelector($el_list[$ii]));
        }
    }
}

for(var $i = 0; $i < $break_els.length; $i++){
    (function(num) {
        if(window.addEventListener){
            $break_els[num].orig_el.addEventListener('mousedown',function(e) {adjustIMGLink(e,$break_els[num]); } ,false); 
            $break_els[num].orig_el.addEventListener('click',function(e) {checkClick(e,$break_els[num]); } ,false); 
        } else {
            $break_els[num].orig_el.attachEvent('mousedown',function(e) {adjustIMGLink(e,$break_els[num]); }); 
            $break_els[num].orig_el.attachEvent('click',function(e) {checkClick(e,$break_els[num]); }); 
        }
    }($i));
} 

Here's a sample page:

http://mrinitialman.com/Books/HTML/C.../JS-Style.html

Control-shift clicking a paragraph or header (except h1) bring up a dialogue that gives some control of page breaks. Alt-shift clicking an image allows the user to control the size of that image.

Unfortunately, control-clicking an image causes Opera to try to save the image (unless it's the child element of an <a> element), and Internet Explorer 8 (the oldest version I have), these special click commands do nothing. What would you advise so that the page-break and image-size adjustment tools I created for these pages are available even to those with older browsers?

[Mr Initial Man]

Welp, I think I've got something workable--at least as far back as IE 8.

var $keynum = 1;
var $as = document.getElementsByTagName('a');
var $imgas = {
    set:false,
    els:new Array()
}
for(var $i = 0; $i < $as.length; $i++){
    if($as[$i].firstChild.nodeType == 1 && $as[$i].firstChild.nodeName.toLowerCase() == 'img'){
        $as[$i].setAttribute('j_href', $as[$i].getAttribute('href'));
        $imgas.els.push($as[$i]);
    }
}


document.onkeyup = function(){
    if($imgas.set){
        for(var $i = 0; $i < $imgas.els.length; $i++){
            $imgas.els[$i].setAttribute('href', $imgas.els[$i].getAttribute('j_href'));
        }
        $imgas.set = false;
    }
    $keynum = 1;
}
document.onkeydown = SetKey;
function SetKey(e){
    $keynum = (window.event)?event.keyCode:e.keyCode;
    if(($keynum == 80 || $keynum == 73) && !$imgas.set){
        for(var $i = 0; $i < $imgas.els.length; $i++){
            $imgas.els[$i].removeAttribute('href');
        }
        $imgas.set = true;
    }
}


function checkClick($elem){
    if($keynum == 80){
        addBreak($elem);
    }
    if($keynum == 73 && $elem.orig_el.nodeName.toLowerCase()  == 'img'){
        SizeCSS($elem);
    }
}
var $el_names = new Array(
    'img',
    'div',
    'h2',
    'h3',
    'h4',
    'h5',
    'h6',
    'p',
    'li',
    'dt',
    'tr',
    'caption'
);

var $break_els = new Array();

for(var $i = 0; $i < $el_names.length; $i++){
    var $el_list = document.getElementsByTagName($el_names[$i]);
    for(var $ii = 0; $ii < $el_list.length; $ii++){
        if(
            ($el_list[$ii].nodeName.toLowerCase() != 'div') ||
            (
                ($el_list[$ii].nodeName.toLowerCase()  == 'div') && 
                ($el_list[$ii].getAttribute('class') || $el_list[$ii].className) && 
                (
                    (/ln[0-9][0-9]/.test(SlctrClass($el_list[$ii])))||
                    (/samp[0-9]/.test(SlctrClass($el_list[$ii])))||
                    (SlctrClass($el_list[$ii]) == 'code_header')||
                    (SlctrClass($el_list[$ii]) == 'code_subheader')||
                    (/subh[0-9]/.test(SlctrClass($el_list[$ii])))
                )
            )
        ){
            $break_els.push(GetSelector($el_list[$ii]));
        }
    }
}

for(var $i = 0; $i < $break_els.length; $i++){
    $break_els[$i].orig_el.onclick = function($i){return function(){
        checkClick($break_els[$i]); 
    }}($i);
} 

Thanks for your heads-up.