CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3871
user3871

Reputation: 12718

Position elements relative to another element

I'm trying to append duplicates of letters beneath the main letter when I hover over them...

And then dynamically/gradually move the letters down till they reach the bottom of the browser.

My issue is that the location of all the appended letters (spans) just update as a group when I hover over the next letter, which is happening on the left. What I want is on the right:

enter image description here

Code:

I'm using jsLettering ($(".title").lettering();) to break up each letter in<h1 class="title">2014</h1> into separate spans

so 2014 would be

<span class="char1">2</span>
<span class="char2">0</span>
<span class="char3">1</span>
<span class="char4">4</span>

Then on hover of each span, I'm trying to create and append a copy of the letter to $('.fallingLetters'), then make the letters animate down towards the bottom.

HTML snippet:

        <div class="row">
            <div class="col-md-12"><h1 class="title">2014</h1></div>
            <div class="fallingLetters"></div>
        </div>

JavaScript snippet:

        $("h1 span").mouseenter(function () {       
            var 
                letter = $(this).text(),
                val = $(this);

            $('.fallingLetters').append("<span>" + letter + "</span>");

            $('.fallingLetters span').css({"position" : "absolute"});
            $('.fallingLetters span')css({"left" : val.position().left+100});                                                           
            $('.fallingLetters span').css({"top" : val.position().top+150});        
        });

         setInterval(function(){ 
            moveSpans();
         }, 100);
    });

    function moveSpans() {
        $(".fallingLetters span").each(function (index, val) {  
            if ($(".fallingLetters span").length > 30) {        
                $(".fallingLetters").empty();
            }
            $(val).css("top","+=5");                                    
        });
    }

Upvotes: 1

Views: 815

Answers (3)

Mathias
Mathias

Reputation: 5672

It is hard to tell what kind of effect you really want to achieve so I am guessing a bit. I did the fiddle before the HTML was posted but it should be easily adapted with your classes.

Let me know if this is kind of what you are looking for: jsFiddle

JavaScript

$(function () {
    $("h1 span").mouseenter(function () {
        var letter = $(this).clone(),
            parent = $(this).parent();
        parent.append(letter);

        letter.css({
            "position": "absolute",
            "left": $(this).position().left,
            "top": parent.height()
        });
        letter.animate({"top": $(window).outerHeight()}, 5000, "linear", function() {
            $(this).remove();
        });
    });    
});

HTML 

<h1>
    <span>2</span><span>0</span><span>1</span><span>4</span>
</h1>

CSS

body {
    margin: 0;
    font-family: sans-serif;
    font-size: 32px;
}
h1 {
    margin: 0;
}
h1 > span {
    position: relative;
}

Upvotes: 2

KittMedia
KittMedia

Reputation: 7466

You have to do something like that in the HTML:

<div class="lineOne">
    <span>2</span>
    <span>2</span>
</div>
<div class="lineTwo">
    <span>0</span>
    <span>0</span>
</div>
<div class="lineThree">
    <span>1</span>
    <span>1</span>
</div>
<div class="lineFour">
    <span>4</span>
    <span>4</span>
</div>

Then just make .lineOne as position: relative; and the span elements position: absolute;. Then the absolute positions of the span elements are relative to the div container. So you can change the position relative to the container. With little tweaks it should do what you want to achieve.

Upvotes: 0

user3446496
user3446496

Reputation: 361

When you set the position of the falling letter to 'absolute', the letter no longer takes up space on the page, so the val.position().left will be the same for all the letters - that's why they're stacking on top of one another. You have two options: 1. Set the positions of the letters manually and individually, that way you can space them out properly. 2. wrap the four spans that hold the letters in a single 'div' element and then animate the position of the div that holds all four letters.

Upvotes: 0

Related Questions