Home/ Questions/Q 8692821
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T00:24:00+00:00

So I want to achieve this: http://superdit.com/2010/12/25/moving-element-to-random-position-inside-a-container/ I think my .js code should be

  • 0

So I want to achieve this:
http://superdit.com/2010/12/25/moving-element-to-random-position-inside-a-container/

I think my .js code should be alright, still the “heart” animates outside the #pageWrap (my container). What is wrong?

Link to my site: http://carlpapworth.com/htmlove/fumbling.html

EDIT: Actually I have 2 problems with this, the second being that the hover-action only takes place once, after the first “hover-animation-effect” it stops working. PLZ help 🙂

HTML:

<body>
<header>

<div id="headerTitle"><a href="index.html">&lt;html<span class="heart">&hearts;</span>ve&gt;</a>
            </div>
            <div id="help">
                <h2>?</h2>
                <div id="helpInfo">
                    <p>The name of the puzzle should lead u to success!</p>
                </div>
            </div>
        </header>
    <div id="reward">
        <div id="rewardContainer">
            <div id="rewardBG" class="heart">&hearts;
            </div>
            <p>OMG, this must be luv<br><a href="index.html" class="exit">x</a></p>
        </div>
    </div>  
    <div id="pageWrap">
        <div id="goal">
            <a href="#reward" class="heart">&hearts;</a>
        </div>  
    </div> <!-- END Page Wrap -->
    <footer>
        <div class="heartCollection">
            <p>collect us if u need luv:<p>
            <ul>
                <li><a id="collection1">&hearts;</a></li>
                <li><a id="collection2">&hearts;</a></li>
                <li><a id="collection3">&hearts;</a></li>
                <li><a id="collection4">&hearts;</a></li>
                <li><a id="collection5">&hearts;</a></li>
                <li><a id="collection6">&hearts;</a></li>
            </ul>
        </div>
        <div class="credits">with love from Popm0uth ©2012</div>
    </footer>

</body>

Css

body{
    overflow: hidden;
    }


#pageWrap{
padding: 20px 20px 100px 20px;
position: relative;
width: 100%;
height: 700px;
text-align: center;
display: block;
}

header{
position: fixed;
width: 100%;
height: 60px;
margin: 0 auto;
left: 0px;
background: url(../images/bg.png) solid;
z-index: 2000;
display: block;
}

#goal{
position: relative;
width: 100px;
height: 100px;
left: 50%;
top: 25%;
margin-left: -100px;
padding: 30px;
display: block;
}

a.heart{
font-size: 80px;
text-align: center;
display: block;
}

footer{
position: fixed;
bottom: 0px;
padding: 10px; 
width: 100%;
height: 100px;
background: /*url(../images/bgFooter.png)*/ #dddddd;
z-index: 2000;
}

JS:

$(document).ready(function() {
function randomFromTo(from, to){
            return Math.floor(Math.random() * (to - from + 1) + from);
}

            /* get container position and size
             * -- access method : cPos.top and cPos.left */
            var cPos = $('#pageWrap').offset();
            var cHeight = $(window).height() - $('header').height() - $('footer').height();
            var cWidth = $(window).width() - $('header').width() - $('footer').width(); 

            // get box padding (assume all padding have same value)
            var pad = parseInt($('#goal').css('padding-top').replace('px', ''));

            // get movable box size
            var bHeight = $('#goal').height();
            var bWidth = $('#goal').width();

            // set maximum position
            maxY = cPos.top + cHeight - bHeight - pad;
            maxX = cPos.left + cWidth - bWidth - pad;

            // set minimum position
            minY = cPos.top + pad;
            minX = cPos.left + pad;

            // set new position         
            newY = randomFromTo(minY, maxY);
            newX = randomFromTo(minX, maxX);


        $('#goal').mouseenter(function() {
            $(this).stop(true,true).animate({
                left: newY,
                top: newX
                });
        });
});








    /*
    function randomFromTo(from, to){
            return Math.floor(Math.random() * (to - from + 1) + from);
        }

    function moveRandom {
            /* get container position and size
             * -- access method : cPos.top and cPos.left
            var cPos = $('#pageWrap').offset();
            var cHeight = $('#pageWrap').height();
            var cWidth = $('#pageWrap').width();

            // get box padding (assume all padding have same value)
            var pad = parseInt($('#pageWrap').css('padding-top').replace('px', ''));

            // get movable box size
            var bHeight = $('#goal').height();
            var bWidth = $('#goal'+id).width();

            // set maximum position
            maxY = cPos.top + cHeight - bHeight - pad;
            maxX = cPos.left + cWidth - bWidth - pad;

            // set minimum position
            minY = cPos.top + pad;
            minX = cPos.left + pad;

            // set new position         
            newY = randomFromTo(minY, maxY);
            newX = randomFromTo(minX, maxX);

            $('#goal').animate({
                top: newY,
                left: newX
                }, 500, function() {
            });
        }   
*/
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t have to specify the #pageWrap height and width. You have to calculate it depending on the window size.

    Replace this:

    var cHeight = $('#pageWrap').height();
var cWidth = $('#pageWrap').width();

    with that:

    var cHeight = $(window).height() - $('header').height() - $('footer').height();
var cWidth = $(window).width() - $('header').width() - $('footer').width();

    Don’t you see something strange here? 

    left: newY, 
top: newX

    should be 

    left: newX, 
top: newY

    and everything will come in place 🙂

    EDIT:

    The onmouseover event is not signaled once, it is handled each time when mouse overs the area, but you just initialize the final destination point once in the begining of your code. So the moving object stays at the same place.

    Finally you should modify your script as follow:

    $(document).ready(function() {

  function randomFromTo(from, to){
     return Math.floor(Math.random() * (to - from + 1) + from);
  }

  $('#goal').mouseenter(function() {

    var cPos = $('#pageWrap').offset();
    var cHeight = $(window).height() - $('header').height() - $('footer').height();
    var cWidth = $(window).width();

    // get box padding (assume all padding have same value)
    var pad = parseInt($('#goal').css('padding-top').replace('px', ''));

    // get movable box size
    var bHeight = $('#goal').height();
    var bWidth = $('#goal').width();

    // set maximum position
    maxY = cHeight - bHeight - pad;
    maxX = cWidth - bWidth - pad;

    // set minimum position
    minY = cPos.top + pad;
    minX = cPos.left + pad;

    // set new position
    newY = randomFromTo(minY, maxY);
    newX = randomFromTo(minX, maxX);


    $(this).animate({
            left: newX,
            top: newY
    });
  });
});
    • 0