Search Results

Search found 133 results on 6 pages for 'scrolltop'.

Page 1/6 | 1 2 3 4 5 6  | Next Page >

  • jQuery scroll div with scrollTop

    - by papermate
    I'm trying to scroll a div up or down when hovering over the respective arrows. I also want to be able to jump down the div when the buttons are clicked (think clicking the windows scroll arrows rather than dragging the scroll bar). The scrolling works but the jumping doesn't. scrollTop() keeps retuning 0. Here's the code: function startScrollContent() { if ($('.haccordion-opened').prev('.header').find('div').attr('title') != 'dontscroll' && $('.haccordion-opened span.arrow').length == 0) { $('.haccordion-opened').append('<span class="arrow down" style="position: absolute; bottom: 5px; left: 260px; font-size: 9pt;">&#9660;</span><span class="arrow up" style="position: absolute; bottom: 5px; left: 280px; font-size: 9pt;">&#9650;</span>'); $('.content span.arrow').hover(function() { direction = ($(this).hasClass('up')) ? '-=' : '+='; $('.content .padding').animate({scrollTop: direction + $('.content .padding').css('height')}, 5000); }, function() { $('.content .padding').stop(); }); $('.content span.arrow').click(function() { $('.content .padding').stop(); direction = ($(this).hasClass('up')) ? '-' : '+'; alert($('.content .padding').scrollTop()); //$('.content .padding').scrollTop($('.content .padding').scrollTop + direction + 100); }); } return; } How can I get the jump part working?

    Read the article

  • jQuery scrollTop - animation stucks at the end of moving

    - by mobsteady
    i use jquery the scrollTop function to get my scrolling smooth while switching between different anchors. first, here is the url the problem this is my jquery script "ziel" is just the german word for "target", just to let you know why this variable is called "ziel" $(document).ready(function() { $('a[href*=#]').bind("click", function(event) { event.preventDefault(); var ziel = $(this).attr("href"); $('#portraitcontent').animate({ scrollTop: $(ziel).offset().top }, 3000 , function (){location.hash = ziel;}); }); return false; }); so how do i get a smooth scrolling without that ugly jumping at the end of the animation? any ideas? i really don't know what to do. spending hours with that bitch! thanks for your advices!

    Read the article

  • scrollTop in defferent browers.

    - by zjm1126
    shortcut.add("up",function() { alert( document.body.scrollTop) if (document.documentElement&& typeof document.documentElement.scrollTop=='number'){ document.documentElement.scrollTop-=100 } else if (document.body) { document.body.scrollTop-=100 } }) shortcut.add("down",function() { if (document.documentElement&&typeof document.documentElement.scrollTop=='number' ){ document.documentElement.scrollTop+=100 } else if (document.body) { document.body.scrollTop+=100 } }) it can running in firefox,but not in chrome and safari thanks

    Read the article

  • Using jquery scrollTop to position absolute Div

    - by Tim
    Hello, I am trying to position an Absolute DIV using Jquery, depending on where the user is clicking on the page. At the moment this works just great $('#window').css('left', jsEvent.pageX); $('#window').css('top', jsEvent.pageY); This positions the element exactly where my mouse has clicked the screen... Until you scroll down that is. That is why I am trying to achieve something that will take the amount of pixels from the top of the page into account. I thought something like this... $('#window').css('top', jsEvent.pageY + scrollTop()); would do the trick, unfortunately it doesn't work. Any hints? Thanks, Tim

    Read the article

  • How to get scrollTop of page afer browser scrolled such page?

    - by Marco Demaio
    I know how to get the scrollTop of a page, I use this simple JS function (code copied around): function GetScrolledTop() { //I never work in IE quirkmode, I always use DOCTYPE as 1st line, so I don't need to test for document.body.scrollTop return self['pageYOffset'] || document.documentElement.scrollTop; } This works and my problem is the following: I tried to add it in the page onload event <body onload="alert(GetScrolledTop());"> On page load I get ZERO (which make sense), but the problem is that I get ZERO even if I scroll the page and then reload it without touching the scrollbar. It seems like the browser does: loads page calls my GetScrolledTop() (so obviously shows ZERO) then scrolls the page to where it was before. Do you know how to get the scolledTop after the step 3? I mean how to get the scrolledTop AFTER the browser scrolled the page? (maybe without using a timer) Thanks!

    Read the article

  • How to use scrollTop in jQuery when scrolling within a div?

    - by sharataka
    I am trying to get the scrollTop using jQuery to work when the content I am trying to scroll to is located in within a div. The current implementation doesn't do anything javascript <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script> $(document).ready(function (){ //$(this).animate(function(){ $('html, body').animate({ scrollTop: $("#test4").offset().top }, 2000); //}); }); </script> html <div class="row"> <div class = "span12"> <div class = "row"> <div class = "span2"> <div style="height:480px;font:12px Georgia, Garamond, Serif;overflow:auto;"> <div id = "test1">Test1</div> <div id = "test2">Test2</div> <div id = "test3">Test3</div> <div id = "test4">Test4</div> </div> </div> <div class = "row"> <div class = "span8"> Other content on the page </div> </div> </div> </div> </div>

    Read the article

  • Is there a problem with scrollTop in Chrome?

    - by Shaun
    I am setting scrollTop and scrollLeft for a div that I am working with. The code looks like this: div.scrollLeft = content.cx*scalar - parseInt(div.style.width)/2; div.scrollTop = content.cy*scalar - parseInt(div.style.height)/2; This works just fine in FF, but only scrollLeft works in chrome. As you can see, the two use almost identical equations and as it works in FF I am just wondering if this is a problem with Chrome? Update: If I switch the order of the assignments then scrollTop will work and scrollLeft won't. <div id="container" style = "height:600px; width:600px; overflow:auto;" onscroll = "updateCenter()"> <script> var div = document.getElementById('container'); function updateCenter() { svfdim.cx = (div.scrollLeft + parseFloat(div.style.width)/2)/scalar; svfdim.cy = (div.scrollTop + parseFloat(div.style.height)/2)/scalar; } function updateScroll(svfdim, scalar, div) { div.scrollTop = svgdim.cy*scalar - parseFloat(div.style.height)/2; div.scrollLeft = svgdim.cx*scalar - parseFloat(div.style.width)/2; } function resizeSVG(Root) { Root.setAttribute("height", svfdim.height*scalar); Root.setAttribute("width", svfdim.width*scalar); updateScroll(svgdim, scalar, div); } </script>

    Read the article

  • scrollLeft works but scrollTop doesn't work

    - by Xiao Jia
    I have the following HTML with CSS .container { overflow: scroll; } etc. <body> <div class="container"> <div id="markers"></div> <img id="map" src="/img/map.jpg"/> </div> </body> map.jpg is very large and I want to scroll to a fixed position like this: $(function(){ console.log($('.container').scrollTop()); $('.container').scrollTop(1000); console.log($('.container').scrollTop()); console.log($('.container').scrollLeft()); $('.container').scrollLeft(1750); console.log($('.container').scrollLeft()); }); scrollLeft works fine but scrollTop doesn't. Below is the console output. 0 0 0 1750 I've been searching for half an hour but still don't know how to fix it... UPDATE: CSS about .container #markers and #map .container { overflow: scroll; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; } #map { width: 5000px; max-width: 5000px; height: 2907px; max-height: 2907px; cursor: crosshair; } #markers { position: relative; top: 0; left: 0; width: 0; height: 0; margin: 0; padding: 0; }

    Read the article

  • jQuery scrollTop() doesn't seem to work in Safari or Chrome (Windows)

    - by Pointy
    I've got a simple setup to allow a "help"-style window to be loaded and scrolled to a particular point on the page. More or less the code looks like this: var target = /* code */; target.offsetParent().scrollTop(target.offset().top - fudgeValue); The target of the scroll and the fudge value are determined by a couple of hints dropped on the page, and I'm having no problems with that part of this mechanism anywhere. In Firefox and IE8, the above code works exactly like I want: the scrolled box (in this case, the page body) correctly scrolls the contained stuff to the right point in the window when it's told to do so. In Chrome and Safari, however, the call to scrollTop() apparently does nothing at all. All the numbers are OK, and the target refers to the right thing (and the offsetParent() is indeed the body element), but nothing at all happens. As far as I can tell from googling around, this is supposed to work. Is there something funny about the renderer under Safari and Chrome? This is jQuery 1.3.2 if that matters. Test page: http://gutfullofbeer.net/scrolltop.html

    Read the article

  • jQuery scrollTop not working in chrome but working in Firefox

    - by Maju
    I have used a scrollTop function in jquery for navigating to top. But strangely 'The smooth animated scroll' stopped working in safari and chrome(scrolling without smooth animation) after I made some changes. But it is working smoothly in Firefox. What could be wrong? Here is the jquery function i used, jQuery $('a#gotop').click(function() { $("html").animate({ scrollTop: 0 }, "slow"); //alert('Animation complete.'); //return false; }); HTML <a id="gotop" href="#">Go Top </a> CSS #gotop { Cursor: pointer; position: relative; float:right; right:20px; /*top:0px;*/ }

    Read the article

  • jQuery animating scroll top to 0 not working on Windows Phone

    - by cgoddard
    I have written a website which has a function that scrolls the users view to the top of the page. The call in question is: $('html,body').animate({scrollTop:0}, 150, 'swing'); This works fine on all desktop browsers, but on Windows Phone, it only scrolls the user up about 180 pixels, then stops. I have tried replacing the function with: $('html,body').scrollTop(0); It snaps to the top on desktops, but it scrolls to the top on the phone. I believe this need for Internet Explorer Mobile to try to smoothly animate the scrolling, and is causing the issue. If this is the case (or if not, could someone correct me), how can I override this function to get the animation to work? EDIT Although its not ideal, it does seem to work in a limited capacity, I have replaced the scroll code with this: $('html,body').animate({scrollTop:0}, 150, 'swing', function() { $('html,body').scrollTop(0); }); But it would be good to know if there is an option to disable the smooth scrolling in Mobile IE programatically.

    Read the article

  • $("body").scrollTop() doesn't update in safari

    - by Kristoffer Nolgren
    I'm working on a website: http://beta.projektopia.se/ the body has several background-images that are updated on scroll like this: $(document).ready(function(){ $(document).scroll(function(){ var scrollfactor=$("body").scrollTop()*0.2; var centerscrollpos =scrollfactor+613; var docheight = $(document).height(); var windowheight = $(window).height(); var bottompos = (docheight-980)-((docheight-windowheight)*0.2)+scrollfactor; var scrollpos = 'center '+scrollfactor+'px,center '+bottompos+'px, center '+ centerscrollpos+'px,center 0px'; $("body").css("background-position", scrollpos); }); }); Lots of calculations, but the important thing is that a scrollpos is created that should change the position of the background when you scroll, to create a parallax-effect. It works great in chrome, but in firefox, the variable scrollfactor, that is suppose to get the current scroll-position, doesn't update. ps, some people have this issue due to lack of correct doctype. I believe i have declared it correctly like this: <!DOCTYPE html>

    Read the article

  • scrollTop with jQuery

    - by Narcís
    I want a foot to be at the bottom of the page. But when the user makes the window smaller, the two divs come together, it would be better that begins the scroll and hides the foot. I don't know if I explain? I have the code life here: http://jsfiddle.net/mdAsn/ $(function(){ $(document).scroll(function(){ var topDistance = $('#foot').scrollTop(); if(topDistance >= 420){ $('#foot').css({position: 'absolute',bottom:'10px'}); } else{ $('#foot').css({position: 'absolute',top:'410px'}); } }); })

    Read the article

  • scrollTop issue on constant moving div

    - by joe
    I have a FLASH object that I mouse over which in turn calls the following function to scroll a div. It works but due to the constant high speed scrolling it would throw up NULLS. This in turn caused IE to open a new page through my FLASH ActionScript 2.0 I found that by creating the SC variable and throwing in the condition "if it exists" keeps FLASH from causing IE to open a new page. However, it still creates an error behind the scenes of "Object Required". Although my application works I do not want load up memory with errors. Any thoughts? var SC; function pP(PT){ SC=document.getElementById('P'+PT).offsetTop; if(SC){document.getElementById('CBOX').scrollTop=SC;} }

    Read the article

  • Fade out menu doesn't work in IE8

    - by user1787488
    I used this script in my website. But it doesn't work in IE8 or lower versions. Is it possible to work perfectly in all browsers? <script type="text/javascript" src="/web/upload/js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#header').stop().animate({'opacity':'0'},400); else $('#header').stop().animate({'opacity':'1'},400); }); $('#header').hover( function (e) { var scrollTop = $(window).scrollTop(); if(scrollTop != 0){ $('#header').stop().animate({'opacity':'1'},400); } }, function (e) { var scrollTop = $(window).scrollTop(); if(scrollTop != 0){ $('#header').stop().animate({'opacity':'0'},400); } } ); }); </script>

    Read the article

  • Is there a better method for scrolling a page (with jQuery) in Safari for iPhone (scrollTop doesn't

    - by Keeron
    Hi there, I am working on an iPhone version of a website, and I am using jQuery .animate() with the scrollTop attribute to scroll to different sections of the page. Something like so: $('html,body').animate({ scrollTop: distance }, 300); On regular web browsers, the scrolling starts from the current window position to the desired position. On the iPhone, the window jumps back to the top of the document before scrolling to the desired position. This is apparently the intended action, but the pages just don't look good with all that movement. Alternatively, on Google.com for the iPhone, when the autosuggest is activated, there is a nice simple scroll to show the autosuggest options below the search box. That's what I'd like to do...

    Read the article

  • How to determine if "html" or "body" scrolls the window.

    - by David Murdoch
    The code below is used to find the element that can be scrolled (body or html) via javascript. var scrollElement = (function (tags) { var el, $el, init; // iterate through the tags... while (el = tags.pop()) { $el = $(el); // if the scrollTop value is already > 0 then this element will work if ( $el.scrollTop() > 0){ return $el; } // if scrollTop is 0 try to scroll. else if($el.scrollTop( 1 ).scrollTop() > 0) { // if that worked reset the scroll top and return the element return $el.scrollTop(0); } } return $(); } (["html", "body"])); // do stuff with scrollElement...like: // scrollElement.animate({"scrollTop":target.offset().top},1000); This code works perfectly when the height of the document is greater than the height of the window. However, when the height of the document is the same or less than the window the method above will not work because scrollTop() will always be equal to 0. This becomes a problem if the DOM is updated and the height of the document grows beyond the height of the window after the code runs. Also, I generally don't wait until document.ready to set up my javascript handlers (this generally works). I could append a tall div to the body temporarily to force the method above to work BUT that would required the document to be ready in IE (you can't add a node to the body element before the tag is closed). For more reading on the document.ready "anti-pattern" topic read this. So, I'd love to find a solution that finds the scrollable element even when the document is short. Any ideas?

    Read the article

  • Save scrollbar Div, in a MasterPage

    - by Luis
    have got succesfull done it in the content pages, but in the masterpage, I am not able to done it. I tried this way, it was like I did for content pages. <script type="text/javascript"> // This Script is used to maintain Grid Scroll on Partial Postback var scrollTop; //Register Begin Request and End Request Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); //Get The Div Scroll Position function BeginRequestHandler(sender, args) { var m = document.getElementById('<%=PanelMenuLeft.ClientID%>'); m.scrollTop = scrollTop; } //Set The Div Scroll Position function EndRequestHandler(sender, args) { var m = document.getElementById('<%=PanelMenuLeft.ClientID%>'); m.scrollTop = scrollTop; } </script>

    Read the article

  • JQuery/JavaScript confusion with Previous and Next buttons.

    - by Anders H
    I've got some inherited JQuery code that isn't working as I'd think and I'm just not even sure what to research or look up next. The Problem: I've got a few DIVs within the HTML: a container, a "frame" and the content. If the content is longer than the frame, it's cut off using overflow:hidden and a Next - button appears. The next button works correctly. However, there's also a previous button with similar code, but it does not work as expected and just displays whenever the next button does. Whenever either button is hidden, it will not reappear again when navigating back through the "pages". When the I may be overlooking something in the code, but here it is in full. The HTML: <div id="draggable" class="ui-widget-content"> <div id="draggable-title" class="cufon">about</div> <a id="draggable-close" href="javascript:void(0);"><div class="close-img icon"></div></a> <div class="clear"></div> <div id="draggable-frame"> <div id="draggable-content"> </div> </div> <a id="prevContent" href="javascript:void(0);">&laquo; previous</a><a id="nextContent" href="javascript:void(0);">next &raquo;</a> </div> The JavaScript: $(function() { $("#draggable").draggable(); }); $(document).ready(function(){ $("#draggable-frame").scrollTop(0); $("#prevContent").click(function(){ $("#draggable-content").fadeOut("medium"); setTimeout("showPrev()", 250); if($("#draggable-frame").scrollTop()+$("#draggable-frame").height() >= $("#draggable-content").height()) { $("#prevContent").hide(); } $("#draggable-content").fadeIn("medium"); }); $("#nextContent").click(function(){ $("#draggable-content").fadeOut("medium"); setTimeout("showNext()", 250); if($("#draggable-frame").scrollTop()+$("#draggable-frame").height() >= $("#draggable-content").height()) { $("#nextContent").hide(); } $("#draggable-content").fadeIn("medium"); }); $("#draggable-close").click(function(){ $("#draggable").fadeOut("medium"); }); $("#prevContent").hide(); $("#nextContent").hide(); showContent("about"); $(".opener").click(function(){ $("#draggable-frame").scrollTop(0); $("#draggable").fadeIn("medium"); showContent($(this).attr("title")); }); }); // function showPrev() { $("#draggable-frame").scrollTop($("#draggable-frame").scrollTop() - $("#draggable-frame").height()); } // function showNext() { $("#draggable-frame").scrollTop($("#draggable-frame").scrollTop() + $("#draggable-frame").height()); } function showContent(title) { $("#draggable-title").html(title); $("#draggable-content").html($("#"+title).html()); Cufon.replace('.cufon', { fontFamily: 'cav', hover: true }); $("#nextContent").hide(); $("#prevContent").hide(); if($("#draggable-content").height() > $("#draggable-frame").height()) { $("#nextContent").show(); } if($("#draggable-content").height() > $("#draggable-frame").height()) { $("#prevContent").show(); } } Even just point me in the right direction to research would be a big help right now. Thank you.

    Read the article

  • Chrome 5 problem with scroll

    - by Parhs
    $(document).keydown(function (event) { if(event.keyCode==38 || event.keyCode==40) { var row; if(event.keyCode==40) row=$(row_selected).next(); if(event.keyCode==38) row=$(row_selected).prev(); if(row.length==0) { row=$(row_selected); } row_select( row ); var row_position_bottom=$(row).height() +$(row).offset().top; var doc_position=$(window).height() + $(window).scrollTop(); if(row_position_bottom >doc_position) $(window).scrollTop(row_position_bottom-$(window).height()); if($(row).offset().top < $(window).scrollTop()) $(window).scrollTop($(row).offset().top); return false; } }); Hello i used this code to select rows of my table...If the selection isnt visible page scrolls... It works great ,FIrefox,Internet Explorer,Safari, but not in chrome..... In Chrome 4 not the last version it worked great!!! The problem is that return false doesnt prevent the page from scrolling...

    Read the article

  • Does this incorporate JavaScript closures?

    - by alex
    In trying to learn JavaScript closures, I've confused myself a bit. From what I've gathered over the web, a closure is... Declaring a function within another function, and that inner function has access to its parent function's variables, even after that parent function has returned. Here is a small sample of script from a recent project. It allows text in a div to be scrolled up and down by buttons. var pageScroll = (function() { var $page, $next, $prev, canScroll = true, textHeight, scrollHeight; var init = function() { $page = $('#secondary-page'); // reset text $page.scrollTop(0); textHeight = $page.outerHeight(); scrollHeight = $page.attr('scrollHeight'); if (textHeight === scrollHeight) { // not enough text to scroll return false; }; $page.after('<div id="page-controls"><button id="page-prev">prev</button><button id="page-next">next</button></div>'); $next = $('#page-next'); $prev = $('#page-prev'); $prev.hide(); $next.click(scrollDown); $prev.click(scrollUp); }; var scrollDown = function() { if ( ! canScroll) return; canScroll = false; var scrollTop = $page.scrollTop(); $prev.fadeIn(500); if (scrollTop == textHeight) { // can we scroll any lower? $next.fadeOut(500); } $page.animate({ scrollTop: '+=' + textHeight + 'px'}, 500, function() { canScroll = true; }); }; var scrollUp = function() { $next.fadeIn(500); $prev.fadeOut(500); $page.animate({ scrollTop: 0}, 500); }; $(document).ready(init); }()); Does this example use closures? I know it has functions within functions, but is there a case where the outer variables being preserved is being used? Am I using them without knowing it? Thanks Update Would this make a closure if I placed this beneath the $(document).ready(init); statement? return { scrollDown: scrollDown }; Could it then be, if I wanted to make the text scroll down from anywhere else in JavaScript, I could do pageScroll.scrollDown(); I'm going to have a play around on http://www.jsbin.com and report back

    Read the article

  • How to retrieve the real height of a #div (including overflowed parts)

    - by Toni Michel Caubet
    The same way i use this to detect when user scolled down the whole page: $(window).scroll(function(){ var diff = $(window).scrollTop() + $(window).height() - $(document).height(); if ($(window).scrollTop() == $(document).height() - $(window).height() || (diff < 5 && diff > -5)){ console.log('yay!'); } }); I wanted to do the same inside a dialog, I am trying like this: $('#dialog').dialog(); $('#dialog').scroll(function(){ var scroll = $('#dialog').scrollTop(); var height = $('#dialog ul').outerHeight(true); if(scroll == height){ $('#dialog').css('background','#999'); }else{ console.log('scrolltop is '+scroll+' and height is: '+height); } }) DEMO: http://jsfiddle.net/AgFXz/ The problem i guess is that i am not retrieving the whole #dialog size but the visible (CSS Defined property) size.. How can i know when user scrolled till the end of the dialog's scroll? Thanks!!

    Read the article

1 2 3 4 5 6  | Next Page >