Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    81
    Thanks
    13
    Thanked 3 Times in 3 Posts

    DIV top is into my window screen 20% .. do this???

    I'm having an issue with some simple math I think??! I'm trying to figure out when a div's top,left position on my page is 20, 50, 33% (or whatever really) into my window view, to trigger .. ANYTHING! lol .. I don't know if anyone has run into that before. It's a mind bender at the moment.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Can you give more details? Are you animating the div?
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    81
    Thanks
    13
    Thanked 3 Times in 3 Posts
    YEP!, I'm actually trying to animate elements inside the div
    Code:
    <div class="figures_animimation_start_or_end">
                <div class="stuff_to_b_animated">
                    depending on what percent my parent is on your screen, I animate
                </div>
             </div>
    the div could be positioned anywhere on a page as well. and other instances of it , so I have to start
    Code:
     var $container = $('.figures_animimation_start_or_end'); 
              var top_of_object = $container.offset().top;
              var top_of_window = $(window).scrollTop();
              var bottom_of_window = $(window).scrollTop() + $(window).height();
    if (top_of_object <= bottom_of_window && top_of_object >= top_of_window){console.log('in view')}
    but I need to figure out when the top_of_object is say, 30% into the window view.
    Last edited by joanzn; 04-19-2013 at 08:47 PM.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Try this:
    Code:
    var percents = {
        '20' : Math.round(bottom_of_window * 0.2),
        '33' : Math.round(bottom_of_window * 0.33),
        '50' : Math.round(bottom_of_window * 0.2)
    }
    
    if (top_of_object <= percents['20']) {
        console.log('in 20% view')
    }
    else if (top_of_object <= percents['33']) {
        console.log('in 33% view')
    }
    else if (top_of_object <= percents['50']) {
        console.log('in 50% view')
    }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    81
    Thanks
    13
    Thanked 3 Times in 3 Posts
    I'm actually going to have this as a user input in a WYSIWYG system, so it's actually an input for % for each instance of the 'widget'. but that gives me a good idea
    for the HTML:
    Code:
    <div class="figures_animimation_start_or_end" data-enteredPercent="random % entered in the GUI side of this app. We'll pretend '20' was entered for here">
                <div class="stuff_to_b_animated">
                    depending on what percent my parent is on your screen, I animate
                </div>
             </div>
    Code:
    var $inputPercent = $('.figures_animimation_start_or_end').data('enteredPercent');
             var $percent = Math.round(bottom_of_window  - (bottom_of_window * $inputPercent)); 
    // gives the actual number value and not the percent value :)
    I've tried this but it's still not working. my start point being top_of_object entering bottom_of_window. but I'm trying to change bottom_of_window to be (bottom_of_window - (bottom_of_window * $inputPercent)) .. I'm going to keep playing with it and will prolly end up needing to make my "bottom_of_window" var dynamic to the % provided I think?
    Last edited by joanzn; 04-22-2013 at 05:44 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •