JQuery :: Animate With ScrollTop Does Not Work In IE
Feb 15, 2011
I am migrating a site from prototype/scriptaculous to jQuery, and I am encountering a lot of problems with animations in IE. I should start by asking that in scriptaculous, none of these animations require special CSS or tricks for IE (like getting rid of position absolute or anything like that), but this seems to be the case for almost every animation I do in jQuery - is there a list somewhere of all the little hacks and tricks people need to do to get these animations to work in IE? I have re-implemented a few hundred of these animations (mostly crossfades, sliding up and down, highlights), and not a single one worked in IE with the original CSS from the scriptaculous version (in most cases, the other browsers would). In most cases this has to do with absolute positioning. Is it possible jQuery 1.4.4 (the version I am working with) just has massive problems or something because my impression was this library was supposed to be easier to work with, not inordinately more difficult... I just find it hard to believe everyone else is having this many issues with it.
In any event, one thing I can't find any fix for anywhere, is animating the scrollTop of an element (NOT the whole page, which seems to be what everyone else wants to do). I have a div with overflow:hidden, and two buttons underneath which allow the user to scroll through the div (a real scrollbar in this context would not look good or be very useful in comparison).
I ported the code over from scriptaculous, and it works just fine in all normal browsers. Here is the version that would animate scrolling up:
Tested in Firefox/Chrome/Safari just fine right off the bat. But in IE, it just waits and then calls my callback, setting the scrollTop correctly at the end but not actually animating. It's not totally failing, in the sense that the scrolling does happen, and the callback does fire, but it should animate, and I don't really see any reason why it wouldn't. I have set position on the div and all wrapping divs to relative, and static, and set the display value, set the zoom value, widths, heights, everything, but this div will not animate as it scrolls at all in IE only (this is all IE's - 6, 7, and 8). I also tried isolating the div on its own page, removing nearly all the content (leaving text so it will have something to scroll through), practically no CSS outside of width, height, and overflow, and again - does not work in IE only (works in all other browsers without fail).
View 1 Replies
ADVERTISEMENT
Aug 7, 2010
I want to hide a map until it's needed, then when a button is clicked, load the map then scroll to it.Here's my experimentHere's what I'm using:
<div id="themap" class="themap c2">
<br />
<script type="text/javascript">
[code]....
View 4 Replies
View Related
Dec 4, 2010
I've been trying to implement a smooth scrolling animation in my page, which works fine in firefox and IE8 (haven't tested any older versions yet). But doesn't seem to work in google chrome (and probably safari either I guess). I have 4 divs on my page, positioned absolutely 2 by 2, only one div should be visible at a time, so the body has gotten an overflow:hidden. When an anchor-link to one of those divs is clicked the javascript gets its position,then scrolls towards it. etting the position works, but the scrolling does not work in chrome.
Now, when I remove 'overflow: hidden' from the body element, the scrolling does work in chrome, but of course adds the scrollbars which I don't want.
[Code]...
View 1 Replies
View Related
Sep 8, 2011
cannot get my first scrollTop to work. What am I doing wrong
<script type="text/javascript"> $(document).ready(function () { alert("got here"); $('#slidetoggle_mini_chapter_0').click(function () { alert("got here"); $('#slidetoggle_mini_chapter_0').scrollTop(300); }); }); </script> <p id="slidetoggle_mini_chapter_0" >Show - 0</p>
it gets inside the click but does nothing with the scrollbar at all.
View 4 Replies
View Related
May 4, 2010
What is the jquery equivalent of document.body.scrollTop / document.documentElement.scrollTop
View 11 Replies
View Related
Sep 29, 2009
The animation works, but the callback function (alert) doesn't get called.[code]
View 2 Replies
View Related
Sep 23, 2009
Some issues with jquery animate. im trying to create a navigation menu that apon mouseover, the background image animates with a negative y value. apon mouseout, the div will animate the background position back to zero. Simple enough ay? thats what i thought. When i roll over the divs with the bg image, they do not animate, it appears like a simple background change. in other words, there is no tween or movement, just ...new position.
INCLUDES
JQUERY
CSS
HTML
As i said, the animate property will not MOTION or TWEEn in the YAXIS, it will however as i tried animate in the XAXIS. got me stumped and at deadlock.
View 6 Replies
View Related
Apr 10, 2011
Animate doesnt seem to work with zindex. I dont see anywhere this is mentioned on the animate() page.
$("#myelement").animate({zIndex: 10})
.animate({opacity: 1), 1000);
Opacity is affected but not zIndex. I can change zIndex the normal way though:
$("#myelement").css('zIndex', '10');
View 9 Replies
View Related
Apr 6, 2011
I'm trying to move a div with the animate(); Method but doesn't work with the top css property
this is the method that I use
$('.btnControls').click(function(){
$(".itemContainer").animate({top:"200px"});
});
Which is the reason for doesn't work.?
View 2 Replies
View Related
Aug 2, 2010
I've used this plugin before and it worked just fine on all browsers. But on this assignment, it does not work on Safari. [URL] I am trying to get the banners at the bottom to animate. I don't understand why its not working
View 2 Replies
View Related
May 16, 2011
I cant get the scrollbar to animate to 500px, onload.
Here is a link to my page...[url]
<script type="text/javascript">
View 5 Replies
View Related
Jun 2, 2010
I have a toggle animation which puts the area I want to show to the user in view, ones that animation has played I want to animate several other objects on the page. I have the code to animate one object by using the callback function in animate. But is it possible to animate several objects in the callback function?. this is the code I have so far
$(document).ready(function(){
$(".navigaat").toggle(function(){
$(".mover").animate({left: '0px' }, 'slow',"", function() { $(".blok").animate( { fontSize:"160px" } , 1000 )});
[code]....
View 4 Replies
View Related
Nov 19, 2011
I use the wonderful .animate() method to create a "parallax website". It's still in developpement, but you can see the result : www.ohnewgarden.fr My problem : When you are at the very right, the animate effect reset my left property before animating. Which is weird is that this "reset" is applied only to two layers, without any sense. I'm going crazy !
So if someone could help me, it will be very nice ! It's probably my code which is wrong, but I can't see the mistake.
[Code]...
I said for my defense, I have tried to remove .stop(), tried to change parameters of .stop(), tried to reset (like there) the left property with a .css() method, and I have also tried to animate with "+=" (like there), but nothing works. If you follow to the link I gave, you could see very easily by clicking on "Contact" and after animation by clicking on "Accueil".
View 2 Replies
View Related
Dec 6, 2011
I have following code to have a scroll animation effect. The cod eis triggered e.g. by a click.[code]...
The problem is, that the browser (tested in FF, Chrome, IE9) just jumps to the scroll target, no effect is viewable. I googled the code in different places, everybody else seems to have no probs with it.
Any ideas what I'm missing here?
View 1 Replies
View Related
May 18, 2010
I am able to get the page to scroll using something like this
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: rw_X, scrollLeft: rw_Y},2000);
I was hoping to be able to target the animate element by using something like this
document.body Is this not possible? What are some targets that allow you to scroll the page (the position of the scroll bars)?
View 2 Replies
View Related
Oct 14, 2010
I'm making this page: [URL] and i want that the menu bar (#menup) be in 100% opacity when .ScrollTob is 0, and 10% when is more than 1. I have this:
$(function(){
$(window).scroll(function() {
if(.scrollTop = 0) {
$("#menup").css("opacity", "1");
}
else(.scrollTop >= 1) {
[Code]....
View 4 Replies
View Related
Nov 16, 2010
So im basically using a link, to scroll through a series of divs to select the correct one.Ie click on happy, and scrolls to 'happy' div, However, the scroll seems to not go to what its linked to, but scrolls to the third div in the list.
[Code]...
View 7 Replies
View Related
Aug 10, 2009
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-
[code]....
View 2 Replies
View Related
May 18, 2009
I have to use scrollTop and scrollHeight properties, but on jQuery object it returns `undefined`.
Is there any method to get this property from jq object?
It doesn't matter, but my object looks like this:
View 2 Replies
View Related
Mar 25, 2011
I have this bit of jQuery:
$(document).ready(function() {
$('article').click(function(e) {
e.stopPropagation();
[code]....
It works in Chrome, but not Firefox or IE.[URL]
View 2 Replies
View Related
Dec 23, 2010
scrollTop with offset is working - but I get an annoying screen flash occasionally that seems to be the very top of my page.
View 2 Replies
View Related
Aug 19, 2010
I don't know if this is a browser bug. I positioned a div at the bottom of the page just underneath the viewport, calculating it with $(document).height() and animate it to bottom:0, works great even when scrolling, cause of updating with the scroll-event. But when I reload this page or scroll down a bit the original position value was used, so it animates to the original viewport value.
View 1 Replies
View Related
Dec 27, 2011
I have a div that has a negative top margin and a negative right margin. The right margin is because I want to have the div slide onto the page from the right. The top margin is because without it my page height is the height of the visible elements plus the height of the off-screen div.On a button click, I move the div down and then animate it onto the screen from the right. On button click again, I animate the div to the right, off the screen, and then move it up. I also toggle its width & padding so it will appear to grow/shrink as it moves on/off screen. At least that's what I am trying to do. The animation onto the screen looks good, but going off the screen, it appears to happen intantaneously, instead of animatedDoes anyone know how I can fix this?
$(".addPanels").live("click", function(){//now and in the future, show the add panels menu
var thisAddPanelsMenu = $(this).parent().prev(".addPanelsMenu");//get the addPanelsMenu
if(thisAddPanelsMenu.length) {//if the addPanelsMenu exists
[code]....
View 2 Replies
View Related
Apr 13, 2004
function menuDown() {
panel = document.all.panelCategories;
panel.scrollTop += 85;
}
is there a more crossbrowser way to set scrollTop?
View 1 Replies
View Related
Apr 7, 2005
Developing a heavily scripted site which involves a number of scrollable divs.
At times it is necessary to use javascript to control the scroll positions of said divs.
In all but one of the target browsers, setting the scrollTop property works fine. Under IE 5.2 Mac, which, alas, the site needs to support, it does not.
Any one know whether this is even possible in said browser?
View 2 Replies
View Related
May 7, 2007
Im using javscript to show a simple pop up where a user clicks on a page.
the code looks something like this:
var ie=document.all;
var nn6=document.getElementById&&!document.all;
function showBx(e){
bx = document.getElementById('tipbox').style;
bx.visibility='visible'
ty = document.body.scrollTop;
bx.left = nn6 ? e.clientX : event.clientX;
bx.top = nn6 ? ty + e.clientY : ty + event.clientY;
return false;
}
I however find out that document.body.scrollTop doesnt work on IE (works on Opera). Any suggestions/recommendations?
View 1 Replies
View Related