Animate the position of div elements with Mootools

Asked

Viewed 136 times

1

How do I change the position of a div after loading the page? That is, having two div’s that after loading the page one appears on the right and the other on the left, this using Mootools.

The closest example is this (but here with jQuery).

<style type="text/css">
  .home_visit_extend1
  {
    margin-top: -20px;
    position:absolute;
    width:100%;
    height:60px;
    background:#00B9F2;
  }
  .home_visit_extend2
  {
    margin-top: 40px;
    position:absolute;
    width:100%;
    height:500px;
    background: url(homevisit_bg.jpg);
  }
  .home_visit_extend3
  {
    margin-top: 500px;
    position:absolute;
    width:100%;
    height:auto;
    background:none;

  } 

  .home_visit_menu
  {
    width:900px;
    margin: 0 auto;
  }  
  .home_visit_content
  {
    width:900px;
    margin: 0 auto;
  }
  #hove_visit_content_left, #hove_visit_content_right {
    display: inline-block;    
    padding: 20px;   
  }  
  .home_visit_content_left_in
  {
    width:auto;
  }
  .hove_visit_content_right_in {
    width:450px;    
  }  

  .home_visit_icones{
    width:880px;
    margin: 0 auto;
    text-align:center;
  }
  .home_visit_icone_left{
    width:130px;
    height:130px;
    float: left;
    background:url(home_ico_circle_left.png) #FFFFFF;
    border-radius:89px; 
    border:6px solid #FFF;
    -moz-box-shadow: 0 0 22px #000000;
    -webkit-box-shadow: 0 0 22px #000000;
    box-shadow: 0 0 22px #000000;   
  }
  .home_visit_icone_middle{
    width:130px;
    height:130px; 
    margin:0 auto;
    display:inline-block;
    background:url(home_ico_circle_middle.png) #FFFFFF;
    border-radius:89px; 
    border:6px solid #FFF;
    -moz-box-shadow: 0 0 22px #000000;
    -webkit-box-shadow: 0 0 22px #000000;
    box-shadow: 0 0 22px #000000;   

  }
  .home_visit_icone_right{
    width:130px;
    height:130px;  
    float:right;
    background:url(home_ico_circle_right.png) #FFFFFF;
    border-radius:89px; 
    border:6px solid #FFF;
    -moz-box-shadow: 0 0 22px #000000;
    -webkit-box-shadow: 0 0 22px #000000;
    box-shadow: 0 0 22px #000000;   

  }

</style>

 <div class="home_visit_extend1">
    <div class="home_visit_menu">
           <ul>
                  <li cLass="home_visit_menu_li">
                       Home
                  </li>
                  <li cLass="home_visit_menu_li">
                  </li>
                  <li cLass="home_visit_menu_li">
                  </li>
                  <li cLass="home_visit_menu_li">
                  </li>
           </ul>
        <a class="menu_core_mini core_mini_auth" href="/login/return_url/64-Lw%3D%3D">
            <?php echo $this->translate('Sign In') ?>
        </a>
    </div>
</div>

<div class="home_visit_extend2">
    <div class="home_visit_content">
        <div id="hove_visit_content_left">
            <div id="hove_visit_content_left_in">
                <img src="homevisit_connection.png" border="0" style="margin-top:50px;" />
            </div>      
        </div>
        <div id="hove_visit_content_right">
        teste direito
        </div>
    </div>
</div>

<div class="home_visit_extend3">
    <div class="home_visit_icones">
        <div class="home_visit_icone_left">
        </div>
        <div class="home_visit_icone_middle">
        </div>
        <div class="home_visit_icone_right">
        </div>
    </div>
</div>
javascript mootools

  • Hi, Bruno, welcome to [en.so]. You even tried to implement some demo of Mootools? The cool thing is you try first and bring here some specific problem you have with the code. The [Ask] tab has more details.

  • I don’t even know how to start.

  • The link to the manual I put above has this version in Jsfiddle: http://jsfiddle.net/api/post/mootools/1.4/dependencies/more/

  • That is, you have to be able to mount an HTML that loads the necessary scripts and includes the Moo startup commands. If you cannot mount an HTML, there is no point in explaining how to change the position of the div.

  • Then it shows your code and explains its difficulty (it’s just [Edit] the question), it’s much easier to offer help seeing your current stage of programming.

  • It’s complicated to publish the code :/

  • Is that how it is? Thank you

  • I did a review. In order to be able to work here as Stacksnippet or in Jsfiddle, I would have to take that <?php ... ?>. It seems you have no need for the solution you seek.

  • Jsfiddle (and similar) are pretty cool for mocking code blocks. I ran a simulation with your code and as you can see it doesn’t work very well: http://jsfiddle.net/pw5ph87s/ . Anyway, MT is not my specialty, good luck!

  • 1

    @Brunoserrano I put an answer following the link I had at the beginning, when he asked the question. I see now that changed the question. I will edit my answer but I want to ask first: is this your code or will change again to more exact?

  • the home page is not ready yet, so I must change the code. But I’m going to do tests with the example that dear friend Sergio left down after I leave the feedback.

  • @Sergio, I was the one who insisted that he show his own code instead of showing a foreign example made in jQuery.

Show 7 more comments

1 answer

2


To do this with Mootools can do so:

var posts;
window.addEvent('domready', function () {
    posts = $$('.post');
})

window.addEvent('scroll', function (e) {
    var altura = window.getScroll().y;
    posts.each(function (post) {
        if (post.getPosition().y > altura + 200) return;
        post.setStyle('opacity', 1).tween('left', '0px');

    });
});

jsFiddle: http://jsfiddle.net/coa9njjt/

Also note the CSS:

.post {
    text-align: center;
    opacity: 0;
    left: -1000px;
    position: relative;
}

When the page loads I cache all posts. // posts = $$('.post');

Then every call from the event scroll I will check the position of the scroll and compare with the position of each post within the cycle each(). 

    var altura = window.getScroll().y;
    posts.each(function (post) {
        if (post.getPosition().y > altura + 200) return;
        // aqui o código para as divs que devem estar visíveis
        // e/ou vão ser animadas
    });

If the condition is checked then put the opacity back and animate with Tween.

post.setStyle('opacity', 1).tween('left', '0px');

  • I will do tests with this example after I leave the feedback. Thank you very much.

  • @Brunoserrano se explicar qual is the div in your code that comes from the left and which comes from the right I can change the answer to be more exact.

  • The one on the left is home_visit_icone_left and the one on the drt is home_visit_icone_right. Thank you very much

  • @Brunoserrano ok. And want to show with scroll as in the link that gave?

  • @Brunoserrano here is an example: http://jsfiddle.net/tw0cjq0n/

  • 1

    here ta the final result sunk sharingwm.com Thank you very much. Thank you very much

  • @Brunoserrano good! If you want you can change the effect type, like: el.set('tween', {transition: 'bounce:out'});, to make Check like it had the link you sent. I am very involved in Mootools, if you have more problems ask here in pt or :) By the way if the answer helped you can mark as accepted.

  • 1

    It has helped and much. Thanks again very much. it is already accepted.

Show 3 more comments

Browser other questions tagged javascript mootools

You are not signed in. Login or sign up in order to post.