CODEWITHSUNDEEP
javascriptjqueryfirefoxxhtml
Scott Baker
Scott Baker

Reputation: 10443

jQuery difficulties in FireFox & XHTML

I have recently made the switch from HTML to XHTML... don't get me started on the "why" - let's just say it wasn't an option. Anyhoo...

This function worked fine in IE and FF when I was HTML, but now with XHTML I get the following error in FF:

heightElement is undefined

now here is the statement where I define heightElement

function revBars(isEFBOutput, isIXPPreview) {
  if (!isIXPPreview) isIXPPreview = false;
  var heightElement =
    $('<div id="resizeDetectingElement" style="position:absolute; left:-9999999px height:1em;">&#160;</div>')
      .prependTo('body')
      .get(0);
  heightElement.currentHeight = heightElement.offsetHeight;  // FireBug says the error is here.
  insert();
  window.onresize = refresh;
  setInterval(
    function() {
        if (heightElement.currentHeight != heightElement.offsetHeight) {
            heightElement.currentHeight = heightElement.offsetHeight; refresh();
        }
    }, 500);

function insert() {
    var px = "px";
    var color = (document.styleSheets[0].href.match("ftidStyleDay")) ? "black" : "white";
    $revMarks = $('.RevMark').removeClass('RevMark').addClass('UnMarked');
    if (!$revMarks.length) $revMarks = $('.UnMarked');
    $revMarks.each(function() {
        $('<div class="RevBar" />').css({
            'background-color': color,
            'width': '2px', 'position': 'absolute',
            'left': (isEFBOutput && !isIXPPreview ? '.25em' : '-.75em'),
            'height': this.offsetHeight,
            'top': offset(this) + px
        }).prependTo('body');
    });
}

function refresh() { $('.RevBar').remove(); insert(); }

function offset(obj) {
    var top = 0;
    if (obj.offsetParent) {
        do {
            top += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    if (document.all && (!isEFBOutput || (isEFBOutput && isIXPPreview))) top -= 15;
    return top;
}

}

any ideas why this is throwing an error in XHTML in FF? It still works in IE.

EDIT: Again, this code worked perfectly in FF and IE until I switched to XHTML. Firefox still creates a DOM for XHTML, right?

Upvotes: 0

Views: 629

Answers (1)

Elzo Valugi
Elzo Valugi

Reputation: 27866

I rewrote some of your example, as you have errors and is incomplete with function calls that are not in the example:

$(document).ready( function(){
    function revBars(isEFBOutput, isIXPPreview){
        var test = "<div id=\"someElement\">whatever</div>";
        $('body').prepend(test).get(0);
        var heightElement = $('#someElement');
        console.log( heightElement);
    }
    revBars();
});

At this point the heigthElement exists and the div is added to DOM. Please provide correct problems in order to get them solved.

UPDATES

//var heightElement = $('<div id="resizeDetectingElement">whatever</div>').prependTo('body').get(0); 
// this statement doesn't work
var heightElement = $('body').prepend('<div id="resizeDetectingElement">whatever</div>'); 
// this does
console.log(heightElement);

This is basically the same as first example.

The request that you made is to add a div before the element body and then get the first element of the body. The prependTo already returns the matched items so the get was irelevant. And you are attaching an element before the body so is normal that your variable will be empty.

Try my code and remove the downvote as not to many people had this kind of patience with your supercode.

UPDATE 2 This is an usage example for prepend() and prependTo().

<html>
<head>
    <script type="text/javascript" src="../lib/jquery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready( function(){
        $("#test_A").prepend('<div id=\'test_B\'>B</div>');
        $("#test_C").prependTo( $('#test_A'));
        var x = $('<div id="resizeDetectingElement">D</div>').prependTo('body').get(0);
        console.log( x ); // returns the div
        $(x).append('some text'); //works
    });
</script>
</head>
<body>
<div id='test_A'>A</div>
<div id='test_C'>C</div>
</body>
</html>

I hope this will help to make your code work. USE $(heightElement) not just heightElement which is the div not the jQuery object.

Upvotes: 1

Related Questions