greensock div scrolling

Hello, I am looking for a way to scroll my scene with Greensock

I found this, but I can't get it to work

http://greensock.com/forums/topic/6056-scrolling-the-page-up-and-down-with-greensock-js/

my code work when I use the .animate method

sym.getComposition () .getStage ().$('#Stage').animate ({scrollTop: 500}, 5000); Ok

with

TweenMax.to (window, 3, {scrollTo: {y:300}});}}) does not

or

TweenMax.to ($(window), 3, {scrollTo: {y:300}});}}) does not

any solution?

And with a Yoyo action, that would be fantastic!

Thank you

I use the example given at GreenSock.com, and here's what I got.  Here is an example: greenSock.scrollto.zip - Box

I used a container for rectangles and set it to automatic overflow.

I added the following code to the button to scroll to box7 on which I added the class box7.

I hope this helps.

var container = sym.$('container');

SYM. $("bouton") .bind ('click', {id: ".box7"}, scroller);

function scroller (event) {}

var scrollYPos = $(event.data.id) may () .top;

Event.preventDefault ();

TweenLite.to (tank, 2, {scrollTo: {y: scrollYPos}, x: 0 ease: Power4.easeOut})

}

Tags: Edge Animate

Similar Questions

  • Div scrolling in the observer of Android does not

    I have a HTML file containing a div with height: 100px and overflow: auto.

    I can scroll the div when I open this HTML file in the browser (for example, chromium) on my Android device.

    However, when I import the HTML file in an article published in my folio (or as an overlay of web in the article) the viewer Android prevents me from scrolling. She catwalked for iOS.
    I tried the two DPS v29 and v31 on a Nexus 7 (2012) and Samsung Gallexy tab 2.10 and I tried to add iscroll.js

    I wonder if it is possible to enable scrolling in the observer of Android.


    My HTML file:

    <! doctype html >

    < html >

    < head >

    < meta charset = "UTF-8" >

    < title > Untitled Document < /title >

    < / head >

    < body >

    < div style = "border: 2px solid;"  padding: 4px; Width: 200px; height: 100px; overflow: auto; ' > '.

    1 < br / >2 < br / >3 < br / >4 < br / >5 < br / >6 < br / >7 < br / >8 < br / >9 < br / >10 < br / >

    < / div >

    < / body >

    < / html >

    Hello

    Please try with the content viewer 31.1 we published today. 31.1 view web content changes to improve the handling of the gesture. Let me know if you still see issues.

    Thank you

    Dave

  • Move the scroll bar in the scroll of the DIVs for IFRAMES FF8 cause to blanch for 5 to 10 seconds. Help!

    I was running FF7 without problems and to give birth to 8.0. I have a web application that I developed that has type jQuery modal popup windows (which are actually the IFRAMEs), and in those I have lists of the boxes that are scrolling DIVs. The forms appear normal, but when I take a scroll bar and begin to move, all other texts in the IFRAME (but not inside the div scroll) goes blank for about 5 seconds. He then returns to normal, whether or not I took out the scroll bar. FF8 I restarted in safe mode, and this behavior occurs. If I start normally, but disable all plugins and supplements, the problem occurs, so I think it probably has something to do with themes. I tried several different themes rather than the default, but he still had the problem.

    Normal appearance
    Aspect when I move a scroll bar

    Any help that anyone can give me would be much appreciated. It is a production application, and we have a lot of FF users!

    Thanks, Jim

    Try turning off hardware acceleration.

    • Tools > Options > advanced > General > Browsing: "use hardware acceleration when available.

    If disable hardware acceleration works then check if there is an update available for your graphics display driver.

  • IPad/Iphone scrolling questions on form

    My client would like to for customers to fill out a registration form on iPad and iPhone, but it is very difficult to scroll.  If I'm really light with my fingers I kind of can do but he would never use a form - too frustrating.

    Any ideas on how to make it easier to use?  I use Expert to shape for the real form.

    Thank you very much!

    Tammy

    Site: www.frankfordtennis.com

    Tennis Wellington online registration

    The div scroll bars are not easy to use on any device - particularly mobile.

    You need to remove the overflow and the height from your CSS properties.

    #content {}

    height: 580px;

    Width: 764px;

    text-align: left;

    margin: 0px auto auto 0px;

    float: left;

    background: url('images/bcgrnd_content.gif') repeat-y 0% 0% scroll #FFF;

    overflow: auto;

    padding-left: 30px;

    padding-right: 30px;

    }

    Nancy O.

  • Having a class of scrolling for an entire project.

    Hello

    I use blitmask of greensock and scrolling in a project Air iOS, and wonder what the best way is to set up so you can have a class of central scroll that all classes can add clips to.

    It is possible to have a model global var that holds the movieclip you want to scroll? That is to say a class sends one of his moveiclips to the global var, and the global var distributes one even to your ScrollBar class, which removes the current MC it scrolls and injects the other from the model?

    Or I'll get a new instance of the ScrollBar class in every class that needs scrolling?

    See you soon

    I think you're right that LoginController is in the wrong place for this. When I asked on the final goal, I meant more conceptually what you trying to accomplish with this wheel. Without more information that goes to the heart of who and also more info on how your Classes are actually interrelated, I still can't you give a better application than sending an event customized with the MovieClip in it.

    However, I think that there is a smell of bad design on it - why the hell these controllers seen references to these MovieClips, they are not to show? There must be some deeper 'something' on how these could be made/managed without this awkwardness. Where are these components that you add to the wheel, when they are not in the scroll?

    In the absence of type only of information, I can only give you an example of my first implementation (it is true that sort of shit) suggestion.

    public interface {IEventBusClient}

    public function get eventBus (): IEventDispatcher;

    public function set eventBus(value:IEventDispatcher):void;

    }

    SerializableAttribute public class MovieClipEvent extends Event {}

    SEND_TO_SCROLLER:String = "sendToScroller"; static const pubis

    public var movieClip:MovieClip;

    public void MovieClipEvent (type: String, mc:MovieClip) {}

    Super (true false, type,);

    movieClip = mc;

    }

    Override public function clone (): Event {}

    return new MovieClipEvent (type, movieClip);

    }

    }

    / public class SomeController implements IEventBusClient {}

    protected var _eventBus:IEventDispatcher;

    public function get eventBus (): {IEventDispatcher

    Return _eventBus;

    }

    public function set {eventBus(value:IEventDispatcher):void}

    _eventBus = value;

    }

    protected function invokeScroller(e:SomeEventType):void {}

    If (_eventBus & someMovieClip) {}

    _eventBus.dispatchEvent (new MovieClipEvent (MovieClipEvent.SEND_TO_SCROLLER, someMovieClip);

    }

    }

    }

    / public class ScrollerController implements IEventBusClient {}

    protected var _eventBus:IEventDispatcher;

    protected var _scroller:ActualGreenSockTypeGoesHere;

    public function get eventBus (): {IEventDispatcher

    Return _eventBus;

    }

    public function set {eventBus(value:IEventDispatcher):void}

    If (_eventBus! = value) {}

    If {(_eventBus)

    _eventBus.removeEventistener (MovieClipEvent.ADD_TO_SCROLLER, updateScroller);

    }

    _eventBus = value;

    If {(_eventBus)

    _eventBus.addEventistener (MovieClipEvent.ADD_TO_SCROLLER, updateScroller);

    }

    }

    protected function updateScroller(e:MovieClipEvent):void {}

    remove the old clip from whatever the said api greensock

    var mc:MovieClip = e.movieClip;

    If {(mc)

    Add movieclip to scroller using greensock api

    }

    }

    }

    You can then define eventBus on instances of those Classes, to the list of display or an event dispatcher that you make to the purposes of the provision of communication. I would like to have a separate event dispatcher which serves as a communication backbone in space 'data' (and I mean here the model classes and controller), but I also sometimes fills this variable with a reference to the display list or a more local event bus, according to what I am doing - the thing that makes this extremely powerful technique is that you can get great flexibility, fair, based on what opposes you pass as the event bus.

    I think I made this suggestion before, but in case I don't have, you can consider using RobotLetg, since it can automate the process of delivery of these references.

  • Question of div bg image

    Why doesn't the image of this div scroll, only the text of the div scrolls?

    {.maindiv_scroll}

    Max-width: 812px;

    overflow: scroll;

    background-image: url(images/scrollbgnew.jpg);

    background-repeat: no-repeat;

    margin left: 138px;

    height: 1176px;

    border-top: 1px solid #F4ECC5;

    }

    http://www.milesfunerals.com/useful-addresses.php

    In a modern browser, you can get the bottom to scroll by adding the following to your style rule:

    background-attachment: local;

    However, it does not work in old browsers. For compatibility between browsers, you need to add the background image to a separate div and nest scrolling content in its own div inside.

  • Difficulty in div background image

    Hello

    I did a lot of research on this subject and answers os tons were developed, yet, none has solved my problem so far.

    I'm doing the background image in a div that will be fixed when I scroll vertically.

    Have a model manufactured, in which the only editable div is the rightdiv. (in red, to be easier)

    Here is my code

    CSS

    {body
    margin-top: 0px;
    margin-bottom: 0px;
    background-position: Center;
    background-image: url (.. / Images/bgdr.jpg);
    background-repeat: no-repeat;
    }


    {#wrapper}
    height: 875px.
    Width: 1000px;
    margin-right: auto;
    left margin: auto;
    background-repeat: no-repeat;

    #header {}

    background-repeat: no-repeat;

    Clear: none;

    float: none;

    height: 214px;

    Width: 1000px;

    background-image: none;

    position: relative;

    padding-top: 10px;

    {#leftDiv}
    Clear: none;
    float: left;
    height: 500px;
    Width: 245px;
    position: relative;
    text-decoration: none;
    }

    {#rightDiv}
    Clear: none;
    float: right;
    height: 484px;
    Width: 755px;
    position: relative;
    overflow: auto;
    }

    #footer {}
    height: 100px;
    Width: 1000px;
    Clear: both;
    position: relative;
    padding-bottom: 20px;
    }

    And here is my HTML code

    <!-InstanceBeginEditable name = "RightDiv"->

    < div id = "rightDiv" style = "background-image: url(Images/informacao.png)" >

    < / div >

    <! - InstanceEndEditable - >

    Well, it's that on Internet Explorer 9, the background image repeats vertically when I scroll vertically. On Chrome it will stay fixed on parchment (and that's what I want).

    I tried to add style = "" background-attachment: fixed ", but that branding will match difficulty itself relatively to the entire page, not the div only." In addition, she repeats 4 times for oocupy the screen. I can solve that by "no-repeat", but it is always attached to the browser page, not of the div.

    I tried to solve this problem for days... Help would be very appreciated.

    Funny is that this only happens in IE9... Chrome works perfectly.

    After a little research, I found it's actually "mode of operation" in Internet Explorer, all versions. A fixed background image goes out the window of the browser for positioning.

    The work around is to place a div container around the div scrolling. Place the background image in this div without css positioning container or an attachment and turn off a background image or color in div scrolling.

    Something like that...

    your content here

  • Dead of the page scroll bar

    Hi all

    I have developed the model for a Joomla site using dreamweaver and have hit a problem. The content of the pages on the site are entered through joomla and of course length pages vary depending on the volume of content. The pages have a color background and there is a central div with a white background, which is where the content sits. The problem is that on certain pages of the white central column does not go as far to the bottom of the page in the form of content. I can adjust the height of the div so that the white goes far enough for the longest page, but it is obviously way too long to the shorter page.

    I had the white to change the pitch with the content by using the following code:

    {#bkgd}

    width: 100%;

    height: 100%;

    background-color: #006666;

    position: fixed;

    overflow: scroll;

    }

    #wrap {}

    background-color: #FFF;

    overflow: inherit;

    min-size: 100%;

    }

    However, that leaves me with a dead on the side of the Central div scroll bar which is obviously not desirable.

    Is there a way for the Central tag to dynamically change its height without leaving slider in place?

    Thank you in advance for your help!

    Nils

    #wrap {}

    min-width: 760px;

    Max-width: 960px;

    text-align: left;

    Auto margin: 0;

    background-color: #FFF;

    padding-top: 5px;

    padding-right: 10px;

    border-right: 3px solid # 6 0;

    border-left: 3px solid # 6 0;

    overflow: hidden;

    }

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

  • How can I place a text box on the other in the left column of my head?

    Greetings! Below, you will find something that I worked on a link. Now I have to change the left side of the header that contains the text box "Hiring" in a box on top of each other using the same amount of space. I also need to make these 2 boxes pop out when you click them but only one at a time. How can I place a text over another box using the same amount of space without any screwing? I could also use some help getting these images that say 'HIRE' and 'FIELD NEWS' inside boxes instead of above them.

    Thank you in advance. http://www.bestmarketingnames.com/xbanneredit.php

    Despite the CF McBlob comments that I share, I'll try to answer your question immediately. Just add this new markup above your other div scroll like this:

  • NavBar?

    Link to the site - myairtravels.cu.cc

    As you can see on the navigation bar of the active page in this case, the home button has an orange background color to show that it is on the page (see the home button in the navigation bar)

    However when I switch to the other pages, he acts as the home button is active as the color of the button is still orange

    that is, if you visit this page myairtravels.cu.cc/ContactUs.html

    As you can see the home button is still orange.

    How can I do for the active real "page displays orange background color in the buttons on the navigation bar?

    This is the code I think who should drugues in the html template, I created:

                <!-- horizontal navigation -->  
                <div id="nav1"> 
                  <ul>
                    <li id="current" style="border:none">
                    <a href="../index.html" shape="rect">Home</a>
                    </li>
                    <li>
                    <a href="../Flights.html">Flights</a>
                    </li>
                    <li>
                      <a href="../Hotels.html" shape="rect">Hotels</a>
                    </li>
                    <li>
                      <a href="../BookNow.html" shape="rect">Book Now</a>
                    </li>
                    <li>
                      <a href="../Login.html" shape="rect">Login</a>
                    </li>
                  </ul> 
                </div>  
                <!-- end horizontal navigation 
    

    It's the style.css sheet

    html {
              background: #d0d0d0;
              margin:0 0 0 -1px;
              padding:0; 
              overflow-Y: scroll;
    }
    
    
    
    
    body {
              padding:0;
              margin :0;
              display:table; 
              width:100%; 
    }
    
    
    
    
    body {
              color:#656565;
              font-family: 'Trebuchet MS', sans-serif;
              font-size: 13px;
              font-style: normal;
              font-weight: normal;
              text-transform: normal;
    }
    
    
    p {
              letter-spacing: normal;
              line-height: 1.7em;
    }
    
    
    
    
    h1 {
              color:#000066;
              font-size:18px;
              margin:20px 0 5px 0;
              clear:both;
    }
    
    
    
    
    a:link, a:visited {
              color:#2887A2;
              text-decoration:none;
    }
    
    
    
    
    a:hover {
              color:#003366;
              text-decoration:underline;
              text-align: left;
    }
    
    
    #wrapper {
              background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px;
              margin:0 auto ;
              width:100%;
    }
    
    
    body {
              background-color:#d0d0d0;
    }
    
    
    #wrapper {
              border-top: 1px solid #ffffff;
    }
    
    
    
    #bg {
              margin:0 auto;
              padding:0;
              background:transparent ;
              background-image:url(images/css/hat.jpg);
               background-repeat:no-repeat; 
              background-position: center top ;
    }
    
    
    
    
    
    
    #header {
              margin: 0 auto;
              min-height:25px;
              height: 25px;
              width: 800px;
    }
    
    
    
    #page {
              background: transparent url(images/css/page-bg.jpg ) no-repeat center top;
    }
    
    
    
    
    
    
    
    #container {
              margin:0 auto;
              width:800px;
    }
    
    
    
    
    #banner {
              margin: 0 auto;
              height:170px;
              width:100%;
    }
    
    
    
    
    
    #nav1 {
              height:30px;
              margin:0 auto ;
              text-align:center;
    }
    
    
    #nav1 ul {
              display:table;
              margin:0 auto;
              padding:0;
              list-style-type:none;
              position:relative;
              height:30px;
              text-transform:uppercase;
              font-size:11px;
              font-family:Arial,sans-serif;
    }
    
    
    
    
    #nav1 ul li {
              display:block;
              float:left;
              margin:0;
              padding:0;
              background:transparent url('images/css/hmenu.jpg') repeat-x top left;
              border-left:1px solid #1e5184;
    
    
    }
    
    
    
    
    #nav1 ul li a {
              display:block;
              float:left;
              color:#f8e833;
              text-decoration:none;
              padding:0px 50px ;
              line-height:30px;
              font-weight:bold;
    }
    
    
    
    
    #nav1 ul li a:hover, #nav1 li#current a {
              color:#ffffff;
              background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;
    }
    
    
    
    
    #content {
              width:784px;
              margin:0 auto;
              min-height:800px;
    }
    
    
    #footerWrapper {
              margin:0 auto;
              height:150px;
              padding:0;
              background:transparent url( images/css/footerWrapper-bg.jpg ) no-repeat scroll center top;
    }
    
    
    
    
    #footer {
              margin:0 auto;
              padding:0;
              width:800px;
              height:70px;
    }
    
    
    
    
    #footer {
              color:#FFFFFF;
              text-align:left;
    }
    
    
    #footer a:link, #footer a:visited {
              color:#FFFFFF;
    }
    
    
    
    
    #footer a:hover{
              color:#ffb508;
              text-decoration:none;
    }
    
    
    
    #right {
              width:200px;
              padding:10px 20px 20px 20px;
              float:right;
    }
    
    
    
    
    #center {
              width:500px;
              padding:10px 20px 20px 20px;
              float:left;
              font-family: Arial, "Trebuchet MS", Verdana;
              color: #003366;
    }
    
    
    
    #content p {
              margin-top:10px;
    }
    
    
    
    
    
    #sidebar ul.vmenu {
              list-style: none;
              text-align: left;
              margin: 7px 0px 8px 0px;
              padding: 0;
              text-decoration: none;
              border-top: 1px solid #595959;
    }
    
    
    
    
    #sidebar ul.vmenu li {
              list-style: none;
              padding: 4px 0 4px 0px;
              margin: 0 2px;
              border-bottom: 1px solid #595959;
              text-align: center;
    }
    
    
    
    
    
    
    #sidebar ul.vmenu li a {
              text-decoration: none;
              color:#2887A2;
    }
    
    
    
    
    #sidebar ul.vmenu li a:hover {
              color:#29A294;
              text-align: left;
    }
    
    
    
    
    #sidebar ul.vmenu ul { margin: 0 0 0 5px; padding: 0; }
    #sidebar ul.vmenu ul li { border: none; }
    
    
    
    
    a img {
              border:none;
    } 
    
    
    
    
    .clear {
              clear: both;
              display: block;
              overflow: hidden;
              visibility: hidden;
              width: 0;
              height: 0;
    }
    
    
    div.scroll {
    background-color:#666666
    width:500px;
    height:750px;
    overflow-y:scroll;
    }
    
    
    
    
    #wrapper #bg #page #container #content #right #sidebar table tr td {
              color: #FFFFFF;
              text-align: left;
    }
    #wrapper #bg #page #container #content #center #welcome #ImageSlideShow .article .story .content {
              font-family: Arial, "Trebuchet MS", Verdana;
    }
    
    

    My apologies, the element selector must be

    GRAMPS

  • CF offers an alternative to frames?

    I have a web application, where we need an illustration to be fixed at the top of the screen, and then rank after rank of database results, providing information that references the drawing at the top of the screen.

    My boss has asked if there is a way to fix this illustration at the top of the screen and scroll through the database results in a window. IMAGES are obviously not the best thing to do, due to usability problems. In addition, < DIV > scrolling is a bit hit and miss

    I was wondering if Coldfusion offers something to solve this problem? If this isn't the case, I'd be open to ideas from anyone?

    Oh beautiful

  • Color of police present in the Design tab, but not when viewed or downloaded

    This has been me angry the last days and I can't seem to find any info on this subject. I found a site, but they want you to pay a subscription to view the answers. Basically, my question is, when creating a site that I can see the police of colors in the Design tab, but when I download or even look at the page in IE 7 or Firefox the font color is the default value of the page, not what is described in my code (attached) CSS. I'll admit I'm trying a new style of page. I normally do a shell and use iFrames for content, but I wanted to be more search engine friendly so I use Div scrolling layers instead. I don't think that's the question, but I could be wrong. Any help explaining why this is happening and how to fix it would be greatly appreciated.

    I fixed it. The problem came from a library that I had on the page. I had 3 different styles, he listed, and one of them was style 3 then he drew the color and the make-weight of one as apposed to the style 3 in my CSS of the page. I went to my library and renamed the 3 different numbers and bingo, my policy is that showing red when downloaded.

  • anchors and safari

    I found a solution supposed to and applied to this page, but it doesn't seem to fix the problem. I'm inserting in the wrong place?

    It's page, I tried to fix

    http://www.Anna-Callahan.com/Tim/paper/collages/foliage.htm

    This is the place where I found the solution

    http://blog.deconcept.com/2005/03/25/Safari-and-links-to-elements-in-overflow-auto-content

    This script is on a link to an anchor in a scrolling div.
    Safari and links to content to overflow: auto
    There is a link to an example on this page...

    http://blog.deconcept.com/code/overflowsafari/overflowsafari.html

    .. .or the four example links to content in the scroll box.

    You have not contained in a div scrolling on this page but are simply
    link to the page that spawned the largest collage image of the
    original page "thumbnail".

  • Firefox please add a webkit for styling the div overflow scroll bars? Chrome has and they spend you upward.

    Firefox still leaves us the div overflow style scroll bars. Chrome and they are passing firefox upward! Do you think that one day before I got to the old code, they will add a webkit for styling the div overflow scroll bars?

    I see this question is about 7 years old I saw first, he asked in 2005

    Hello, this is a mainly managed by the community support forum is probably not the right place for the characteristics of the request (we are unable to implement all the features & devs read here).

    Please use https://input.mozilla.org/feedback for either your reactions or if you think that it is a missing feature in the browser file a bug at bugzilla.mozilla.org.

  • code to set a vertical scroll bar of a div element.

    Hi........

    I'm looking for the code for a vertical scroll bar. I studied various documents and implemented with CSS overflow: auto.  It does not work and looking again I stuck with webkit-scrollbar in Github, it works very well with the whole body and not the div element...      Someone at - it a code or a guide where to find the code.

    Simply by adding the code scroll bar added to the css of the page automatically as it when/where ever necessary. I don't have to attach it to a particular element.

    : {scrollbar - webkit -
    Width: 15px;
    }

    Many style options available: http://css-tricks.com/9130-custom-scrollbars-in-webkit/

Maybe you are looking for

  • Fan of 7214nr HP DV6 Envy stop working!

    Hello I have a HP DV6 Envy 7214-nr. It is a nice laptop. recently the fan stop working. I mean his work at first boot and then its only funtion to speed very very slow and barly... .barly you can hear it working. not like some months ago. usually, I

  • formatting

    my computer laptop modul is 14-b051TU win 8 hp (ORG). The warranty is already window expired.my have problem and cannot be taken over the system. Convert the file GPT format MBR format I do install, I format the laptop for win 7, his race, but in the

  • Security updates will not be installed

    I have 2 updates security update for 2007 microsoft office which will not install system. KB969679 and KB969679. I worked with HP for repair. They could not help. I have windows vista on my computer. I can't download books on tape and when I play any

  • My gesture control function does not work correctly there on and off automatically

    My gesture control function does not work correctly there on and off automatically

  • (KB2467175) installs successfully but is available again

    Original title: Re-install an update already installed? My computer tells me that I have a "major update" described as "Security Update for Microsoft visual C ++ 2005 Service Pack 1 Redistributable Package (KB2467175). Whenever I install it (successf