Выводить содержимое блока в другом месте страницы

[White_S]

Подскажите есть такая необходимость вывести содержимое блока в другом месте страницы. Ну т.е. не в том порядке как это есть в коде. Для примера, описание категории стандартно над списком товара, хочу чтобы в коде было так же, а визуально показывалось ниже списка товаров. Должно быть решение, но я не нашел. Спасибо.

 

[Otto]

Приводи пример страницы, скриншоты, код... Больше инфы. надо... Так тебе никто не поможет...
Причём тут JavaScript, у тебя что через него выводятся список категории? Проще создать 2 блока, и через массив как хочешь так и выводи...

 

[warg]

как вариант скрыть блок где не нужно показывать с помощью display:none,
и заполнить нужный контейнер чем то наподобие такого (jQuery) :
$("div.target-container").html($("div.source-container").html());

другой способ, более "красивый" - переместить DOM элемент в дереве:
$("div.source-container").detach().appendTo('div.target-container')

div использовался в качестве классического примера, элемент естественно может быть любым другим.

 

[mff4]

Используйте Firebug для Firefox. Найдите слой с нужным вам содержимым, узнайте его css класс или id, далее смотрите что там в css для него прописано. Очень кстати удобно.

 

[freet]

Недавно сам решал подобную задачу.. Задача была следующая - разместить div с иконками социальных сетей возле каждого h1.
Решение было найдено следующее:

<!-- Социальные кнопки -->
<div class='yashare-auto-init' data-yashareL10n='ru' data-yashareType='none' data-yashareQuickServices='vkontakte,facebook,odnoklassniki,moimir,moikrug'></div>

<script type="text/javascript">
$(document).ready(function(){
  $('.yashare-auto-init').insertAfter('h1').css("display", "block");
});
</script>
<!-- /Социальные кнопки -->

Соответствующие стили:

.yashare-auto-init {
float: right;
margin-top: -50px;
position: relative;
z-index: 1000;
display:none;
}
h1 {float: left; width: 100%;}

Div с кнопками размещен под футером и скрыт.. Но во время загрузки документа блок размещается возле h1 и делается видимым.
Этот метод решает озвученную задачу - вывести содержимое блока в другом месте страницы.

Если рассмотреть пример - описание категории стандартно над списком товара, хочу чтобы в коде было так же, а визуально показывалось ниже списка товаров.
Тем-же методом можно поставить блок после списка товаров:

$('.div_opisanie_kategorii').insertAfter('.div_spisok_tovarov');

 

[White_S]

Извините что долго не отвечал, вот задача

вот сайт

как вариант скрыть блок где не нужно показывать с помощью display:none,
и заполнить нужный контейнер чем то наподобие такого (jQuery) :
$("div.target-container").html($("div.source-container").html());

другой способ, более "красивый" - переместить DOM элемент в дереве:
$("div.source-container").detach().appendTo('div.target-container')

div использовался в качестве классического примера, элемент естественно может быть любым другим.

На сколько я понимаю source-container - содержит искомые данные (картинку),а target-container - это пустой контейнер в который перемещаем. Можно пример простенький кода?

Недавно сам решал подобную задачу.. Задача была следующая - разместить div с иконками социальных сетей возле каждого h1.
Решение было найдено следующее:

<!-- Социальные кнопки -->
<div class='yashare-auto-init' data-yashareL10n='ru' data-yashareType='none' data-yashareQuickServices='vkontakte,facebook,odnoklassniki,moimir,moikrug'></div>

<script type="text/javascript">
$(document).ready(function(){
  $('.yashare-auto-init').insertAfter('h1').css("display", "block");
});
</script>
<!-- /Социальные кнопки -->

Соответствующие стили:

.yashare-auto-init {
float: right;
margin-top: -50px;
position: relative;
z-index: 1000;
display:none;
}
h1 {float: left; width: 100%;}

Div с кнопками размещен под футером и скрыт.. Но во время загрузки документа блок размещается возле h1 и делается видимым.
Этот метод решает озвученную задачу - вывести содержимое блока в другом месте страницы.

Если рассмотреть пример - описание категории стандартно над списком товара, хочу чтобы в коде было так же, а визуально показывалось ниже списка товаров.
Тем-же методом можно поставить блок после списка товаров:

$('.div_opisanie_kategorii').insertAfter('.div_spisok_tovarov');

Скажите, а можно использовать не тег заголовка, как в данном случае, а класс элемента?

 

[freet]

Скажите, а можно использовать не тег заголовка, как в данном случае, а класс элемента?

Да, конечно.. Справедливы следующие записи: 'div' - тег, '.content' - класс, '#content' - id

Натолкнулся на неплохие статьи на эту тему:
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

 

[SteelRat]

если речь о jQuery, то в примере
$('.div_opisanie_kategorii') - div_opisanie_kategorii - это как раз класс

 

[White_S]

пытаюсь переместить p class="tags" вот код

script type="text/javascript">
$(document).ready(function(){
  $('.tags').insertAfter('.aft12').css("display", "block");
});
</script>

но не пашет, вот страница Для просмотра ссылки Войди или Зарегистрируйся ни кто не может подсказать в чем проблема?

 

[freet]

Вставка объекта внутрь объекта:
$('.tags').appendTo('.aft12').css("display", "block");
$('.tags').appendTo('.aft12').css({"display" : "block", "top" : "0"});
Вставка объекта после объекта:
$('.tags').insertAfter('.aft12').css("display", "block");
$('.tags').insertAfter('.aft12').css({"display" : "block", "top" : "0"});

Перемещение объекта внутрь объекта:
$('.tags').detach().appendTo('.aft12').css("display", "block");
$('.tags').detach().appendTo('.aft12').css({"display" : "block", "top" : "0"});
Перемещение объекта после объекта:
$('.tags').detach().insertAfter('.aft12').css("display", "block");
$('.tags').detach().insertAfter('.aft12').css({"display" : "block", "top" : "0"});

не пашет, вот страница Для просмотра ссылки Войди или Зарегистрируйся ни кто не может подсказать в чем проблема?

Попробуй разместить скрипт в конце страницы.