Move DIV to align with selected DIV via hyperlink click

Question

This is the HTML:

<tbody>
    <tr>
        <td>
            <div class="tcd-body-main" style="margin-bottom:5px; padding:0; border:0; background-color:transparent;">
                <div>
                    <form action="/search/" method="get">
                        <input type="text" name="q" placeholder="Search The Chef’s Directory" class="tcd-top-search-field-2" value="Beef">
                        <input type="submit" value="Search" class="button-orange">
                    </form>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="tcd-body-main">
                <h1>You searched for: <strong>Beef</strong></h1><p class="tcd-search-rows">26 profiles found</p>

                <div class="tcd-search-result" data-type="profile" data-id="c2d119d4ba36c35a3ea4caed8d3b01df55306e26">
                    <a href="/profile/c2d119d4ba36c35a3ea4caed8d3b01df55306e26/" class="tcd-search-result-link">
                        <div class="name">Two Run Farm</div>
                    </a>
                </div>

                <div class="tcd-search-result" data-type="profile" data-id="271da7f3354e2aeb253655c129b62e27de93c003">
                    <a href="/profile/271da7f3354e2aeb253655c129b62e27de93c003/" class="tcd-search-result-link">
                        <div class="name">The Royce</div></a>
                </div>

                <div class="tcd-search-result" data-type="profile" data-id="9800f757070278dfe6cf03552b4fd1ea3fa6a09c">
                    <a href="/profile/9800f757070278dfe6cf03552b4fd1ea3fa6a09c/" class="tcd-search-result-link">
                    <div class="name">EBLEX</div></a>
                </div>
            </div>
        </td>
    </tr>
</tbody>

FIG 1

FIG 2

Here is the HTML for the result div:

<div class="tcd-body-right media-portal" id="tcd-search-portal">
    <h1>
        <a href="/view/c2d119d4ba36c35a3ea4caed8d3b01df55306e26/">Two Run Farm</a>
    </h1>
    <h2>USA</h2>
    <h3>Farms</h3>
    <p>
        <a href="/view/c2d119d4ba36c35a3ea4caed8d3b01df55306e26/">Click here to go to the profile</a>
    </p>
</div>

When I click a hyperlink, I want the div shown on FIG 1 to move down to the selected link i.e. The end result in FIG 2. Is there an easy way to accomplish this? I'm guessing some form of jQuery?

Answer 1

I Found a solution:

$(document).ready(function(){
$(".tcd-search-result-link").click(function(){
    var id = $(this).parent().attr('data-id');

    var find = $("div").find("[data-id='" + id + "']");

    var position = find.position();

    //$( "#testingparagraph" ).text( "left: " + position.left + ", top: " + position.top);

    $('#tcd-search-portal').css('top', position.top);

});

This takes the attribute data - data-id and aligns the media portal (the right div) to the selected link, increase usability on mobile devices.

Thanks for commenting and answering

Answer 2

<table>
    <tbody>
        <tr>
            <td style="width: 50%;">
                <div class="tcd-body-main" style="margin-bottom: 5px; padding: 0; border: 0; background-color: transparent;">
                    <div>
                        <form action="/search/" method="get">
                            <input type="text" name="q" placeholder="Search The Chef’s Directory" class="tcd-top-search-field-2" value="Beef">
                            <input type="submit" value="Search" class="button-orange">
                        </form>
                    </div>
                </div>
            </td>
            <td rowspan="2" style="vertical-align: top;" id="right_content">
                <div class="tcd-body-right media-portal" id="tcd-search-portal">
                    <h1>
                        <a href="/view/c2d119d4ba36c35a3ea4caed8d3b01df55306e26/">Two Run Farm</a>
                    </h1>
                    <h2>USA</h2>
                    <h3>Farms</h3>
                    <p>
                        <a href="/view/c2d119d4ba36c35a3ea4caed8d3b01df55306e26/">Click here to go to the profile</a>
                    </p>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="tcd-body-main">
                    <h1>You searched for: <strong>Beef</strong></h1>
                    <p class="tcd-search-rows">26 profiles found</p>

                    <div class="tcd-search-result" data-type="profile" data-id="c2d119d4ba36c35a3ea4caed8d3b01df55306e26">
                        <a href="#" class="tcd-search-result-link">
                            <div class="name">Two Run Farm</div>
                        </a>
                    </div>

                    <div class="tcd-search-result" data-type="profile" data-id="271da7f3354e2aeb253655c129b62e27de93c003">
                        <a href="#" class="tcd-search-result-link">
                            <div class="name">The Royce</div>
                        </a>
                    </div>

                    <div class="tcd-search-result" data-type="profile" data-id="9800f757070278dfe6cf03552b4fd1ea3fa6a09c">
                        <a href="#" class="tcd-search-result-link">
                            <div class="name">EBLEX</div>
                        </a>
                    </div>

                    <div class="tcd-search-result" data-type="profile" data-id="c2d119d4ba36c35a3ea4caed8d3b01df55306e26">
                        <a href="#" class="tcd-search-result-link">
                            <div class="name">Two Run Farm</div>
                        </a>
                    </div>

                    <div class="tcd-search-result" data-type="profile" data-id="271da7f3354e2aeb253655c129b62e27de93c003">
                        <a href="#" class="tcd-search-result-link">
                            <div class="name">The Royce</div>
                        </a>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $("a.tcd-search-result-link").click(function () {
        $('#right_content').css({ 'vertical-align': 'bottom' });
    });
</script>

Answer 3

You should try using .position() or .offset() from the jQuery library. Once you click on the hyperlink (.click()), you need to get the position in PX from the top. Eighter from the top of the page .offset() or the top of the parent element .position(). Then you could give the element you want to move down a margin-top or a top with .css(), depending on your css formatting.

You can look up all those functions in the jQuery API: http://api.jquery.com/