CODEWITHSUNDEEP
jquery
Vex Silver
Vex Silver

Reputation: 137

Jquery scrolling image not working in IE

Simply put, I want an image to move up and down and not left and right. I found this bit of jquery and changed it to help myself and it works in chrome and firefox, but Lord help me with IE (like always).

Trying to make it to this: http://demo.rickyh.co.uk/css-position-x-and-position-y/ the middle one. Works in chrome and ffox just not IE 9

    /*js*/
$(document).scroll(function(){
var $this = $(this);
$(".natface").css('left', 114 - $this.scrollLeft());
});

/*css */
.natface{
position: fixed;
left: 114px;
width: 88px;
height: 93px;
z-index: -2;
}

This allows me to scroll up and down the page and have this image travel up and down, but when I make a window smaller and then scroll left to right, this makes it to where it won't scroll right and left. This isn't the case in IE sadly as even if I make the window smaller it still scrolls to the right when I scroll right.

If you can image a margin line box with an image that scrolls down the left side of it slightly over lapping it to look as if it's speaking into the text box. That is my intention.

I'm very new to all this as well so it's kinda of tough to know where I'm going wrong. Sorry first time jusing stackoverflow as well.

Upvotes: 3

Views: 517

Answers (1)

Jan
Jan

Reputation: 5827

EDIT: You totally changed the question and now I'm a bit confused. I think your problem with position fixed and IE might be because you're running in quirksmode. You need a strict doctype for position:fixed to work in IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Leaving my old answer in here too:

There's the CSS property position:fixed, but this property isn't supported on IE6 and iOS 4 I think.

position:fixed JSFiddle http://jsfiddle.net/DLeYv/1/

If you wanna use Javascript, something like this would make it scroll both horizontally and vertically:

$(".natface")
  .css('top', 114 + $this.scrollTop())
  .css('left', 100 + $this.scrollLeft());

This tells anything with the class .natface to scroll to the same amount of pixels as the window is scrolled (scrollTop) and then another 114 pixels down, and the same amount as scrolled left.

For this to work the .natface element needs to have a position of "absolute" and not be inside any other positioned elements (as in directly inside the <body> tag).

JSFiddle http://jsfiddle.net/DUnUm/2/

Upvotes: 1

Related Questions