{"id":333,"date":"2009-02-04T05:27:22","date_gmt":"2009-02-04T11:27:22","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=333"},"modified":"2009-06-05T02:48:30","modified_gmt":"2009-06-05T08:48:30","slug":"new-plugin-scrollintoview","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2009\/02\/04\/new-plugin-scrollintoview\/","title":{"rendered":"New plugin <code>scrollIntoView<\/code>"},"content":{"rendered":"<p>One thing that bugged me about my <a href=\"http:\/\/bililite.nfshost.com\/blog\/2009\/01\/02\/new-ui-widgets-textpopup-and-hebrewkeyboard\/\"><code>textpopup<\/code> plugin<\/a> was that the popup would not necessarily be visible on screen. <a href=\"http:\/\/docs.jquery.com\/UI\/Datepicker\"><code>datepicker<\/code><\/a> moves the widget to a visible spot on screen, which I find very disconcerting. Ariel Flesler's <a href=\"http:\/\/flesler.blogspot.com\/2007\/10\/jqueryscrollto.html\"><code>scrollTo<\/code><\/a> was my inspiration, but it scrolls an element so that its top left corner is at the top left of the screen. I want to scroll as little as possible to have the element in its entirety visible. Thus <code>$('#myelement').scrollIntoView()<\/code>.<\/p>\r\n<p><a href=\"\/inc\/jquery.scrollintoview.js\">Download the code<\/a>.<\/p>\r\n<p><a href=\"\/blog\/blogfiles\/scrollintoviewtest.html\">See the demo<\/a>.<\/p>\r\n<!--more-->\r\n<h4><code>$.fn.scrollIntoView<\/code><\/h4>\r\n<p><code class=\"language-javascript\">$('selector').scrollIntoView(opts)<\/code> scrolls the first element matched into view, with the following options:<\/p>\r\n<pre><code><dl>\r\n<dt>padding {Boolean}<\/dt>\r\n<dd>true if the padding is to be scrolled into view as well as the content<\/dd>\r\n<dt>border {Boolean}<\/dt>\r\n<dd>true if the border is to be scrolled into view. If border is true, padding is set to true<\/dd>\r\n<dt>margin {Boolean}<\/dt>\r\n<dd>true if the margin is to be scrolled into view. If margin is true, border and padding are set to true<\/dd>\r\n<dt>animate options<\/dt>\r\n<dd>Any option that can be passed to <a href=\"http:\/\/docs.jquery.com\/Effects\/animate#paramsoptions\">$.fn.animate<\/a> such as duration, easing and complete can be used<\/dd>\r\n<\/dl><\/code><\/pre>\r\n<p>As a shortcut, it can be called as <code class=\"language-javascript\">$('selector').scrollIntoView(duration, easing, callback)<\/code> which is the same as <code class=\"language-javascript\">$('selector').scrollIntoView({duration: duration, easing: easing, complete: callback)<\/code>.<\/p>","protected":false},"excerpt":{"rendered":"One thing that bugged me about my textpopup plugin was that the popup would not necessarily be visible on screen. datepicker moves the widget to a visible spot on screen, which I find very disconcerting. Ariel Flesler's scrollTo was my inspiration, but it scrolls an element so that its top left corner is at the [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/333"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=333"}],"version-history":[{"count":7,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/333\/revisions"}],"predecessor-version":[{"id":822,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/333\/revisions\/822"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}