Question

I am making a simple game in jQuery. I am having trouble turning the spider image to north east. I have it working fine with north west but for some reason north east does not seem to be working. Here is my init code:

// JavaScript Document
function init(){

    angel = $('<img class="spider">').attr({
        'src': 'img/spider.png'
    }).css({
        width: "125px",
        height: "125px;",
        'position': 'absolute',
        top: -10,
        left: -10
    });

    //append it to body
    $(document.body).append(angel);

    //start dreaming
    do_dream();
} 

Here is my part of the code that is responsible for turning it north east or north west. Like I said earlier, north west seems to work perfectly fine but when the same code is used for turning it north east, it does not work.

// turn north west
     if (parseInt(dream.css('top')) < parseInt(angel.css('top')) && parseInt(dream.css('left')) < parseInt(angel.css('left'))) { 
         $('.spider').attr('src', 'img/spider_nw.png'); 
     }

    // turn north east
     if (parseInt(dream.css('top')) < parseInt(angel.css('top')) && parseInt(dream.css('right')) < parseInt(angel.css('right'))) { 
         $('.spider').attr('src', 'img/spider_ne.png'); 
     }

Answer 1

“Right” isn’t working, because the CSS attribute for right is set to “auto”. You have to calculate the right offset, using (replace your current right-compare expression by this):

(dream.parent().width() - dream.width() - dream.offset().left) <
(angel.parent().width() - angel.width() - angel.offset().left)