Переместите DIV, чтобы выровнять его с помощью гиперссылки.

0

Это 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 Chefs 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>

Фиг.1 Изображение 174551

Фиг.2 Изображение 174551

Вот HTML для результата 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>

Когда я нажимаю гиперссылку, я хочу, чтобы div, показанный на фиг.1, перемещался вниз к выбранной ссылке, т.е. конечный результат на фиг. 2. Есть ли простой способ выполнить это? Я предполагаю какую-то форму jQuery?

Теги:
vertical-alignment

3 ответа

0
Лучший ответ

Я нашел решение:

$(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);

});

Это берет данные атрибута - идентификатор данных и выравнивает медиа-портал (правый div) с выбранной ссылкой, повышает удобство использования на мобильных устройствах.

Спасибо за комментирование и ответ

Поделиться
3 
<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 Chefs 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>
Поделиться
  • 0
    есть ли у jsfiddle шанс показать его работоспособность?
0

Вы должны попробовать использовать .position() или .offset() из библиотеки jQuery. Когда вы нажмете на гиперссылку (.click()), вам нужно получить позицию в PX сверху. Истребитель из верхней части страницы .offset() или вершина родительского элемента .position(). Затем вы можете указать элемент, который хотите переместить вниз по margin-top или top с помощью .css(), в зависимости от вашего форматирования css.

Вы можете найти все эти функции в API jQuery: http://api.jquery.com/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню