ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Поменять два дива местами
19 сообщений из 19, страница 1 из 1
Поменять два дива местами
    #38485166
sayfer
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sayfer
Гость
Подскажите как можно поменять два дива местами ,средствами javascripta без использования каких либо библиотек.
Вот такая страничка:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<html>
<head>
<style type="text/css">
#left {float:left; width:50%;}
#right {float:right; width:50%;}
</style>
</head>
<body>
<input type='button' onclick='switch()' value='Поменять'>
<br>

<div id="left">
Левая колонка
</div>
<div id="right">
Правая колонка
</div>
</body>
</html>
...
Рейтинг: 0 / 0
01.12.2013, 18:50
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38485180
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
sayferкак можно поменять два дива местами
Какими именно местами ты собрался их менять?

Сначала покажи, что в итоге хочешь получить...
...
Рейтинг: 0 / 0
01.12.2013, 19:14
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38485209
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
автор, подключи еще один css
Код: html
1.
2.
3.
4.
<style type="text/css">
#left {float:right; width:50%;}
#right {float:left; width:50%;}
</style>
...
Рейтинг: 0 / 0
01.12.2013, 19:53
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38485212
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
sayfer,

так?
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
<html>
<head>
<style type="text/css">
#DIVleft {float:left; width:50%;}
#DIVright {float:right; width:50%;}
</style>
</head>
<body>
<input type='button' onclick='switchDIV()' value='Поменять'>
<br>
<div id="DIVleft">
Весь секрет адамантия в том, что если удалось получить этот необыкновенный сплав в жидкой форме его нужно хранить…подогретым.
Иначе он затвердеет... И его не разрушишь...</div>
<div id="DIVright">
Меч Серебряного Самурая, который отрубил когти из адамантия, не был раскаленным. Он заряжался какой-то энергией
</div>

<script>
function switchDIV() {
	var str_tmp = '';
	str_tmp = document.getElementById('DIVleft').innerHTML;
	document.getElementById('DIVleft').innerHTML = document.getElementById('DIVright').innerHTML;
	document.getElementById('DIVright').innerHTML = str_tmp;
}
</script>
</body>
</html>


З.Ы. Лучше избегать таких имен как left right switch
...
Рейтинг: 0 / 0
01.12.2013, 19:56
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38485216
Фотография Малыхин Сергей
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Малыхин Сергей
Участник
user89, ты не менял дивы местами ты обменял их содержимое =)
а автор просил поменять дивы местами )))
...
Рейтинг: 0 / 0
01.12.2013, 20:00
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38485238
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Малыхин Сергей,

аааа... Точно!
На основе решения, что предложил Паганель
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
<html>
<head>
<style type="text/css">
.MYleft {float:left; width:50%;}
.MYright {float:right; width:50%;}
</style>
</head>
<body>
<input type='button' onclick='switchDIV()' value='Поменять'>
<br>
<div id="DIVleft" class="MYleft">
Весь секрет адамантия в том, что если удалось получить этот необыкновенный сплав в жидкой форме его нужно хранить…подогретым.
Иначе он затвердеет... И его не разрушишь...</div>
<div id="DIVright" class="MYright">
Меч Серебряного Самурая, который отрубил когти из адамантия, не был раскаленным. Он заряжался какой-то энергией
</div>

<script>
function switchDIV() {
	document.getElementById('DIVleft').className = 'MYright';
	document.getElementById('DIVright').className = 'MYleft';
}
</script>
</body>
</html>
...
Рейтинг: 0 / 0
01.12.2013, 20:26
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38485323
sayfer
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sayfer
Гость
Спасибо всем кто откликнулся.
User89 ,мне и первый вариант подходит)))Второй вариант неподходит тем что,мне нужно что б при каждой нажатии менялись дивы местами,а не один раз(хотя я думаю можно через if-else,подправить под мои нужды код,но меня и первый вариант устраивает).

У меня еще такой вопрос,у меня Divright заполнен только картинками,как сделать что б при каждом нажатии,эти картинки менялись между собой местами в произвольном порядке??Я пробую с помощью масива,но чтото не выходит...(


Код: html
1.
2.
3.
4.
5.
6.
<div id="DIVright">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
</div>
...
Рейтинг: 0 / 0
01.12.2013, 22:54
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38485452
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
sayfer,

Смена картинки вперед-назад, массив
...
Рейтинг: 0 / 0
02.12.2013, 08:29
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38485538
sayfer
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sayfer
Гость
Там файлик не скачиваеться уже((
...
Рейтинг: 0 / 0
02.12.2013, 09:48
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38485543
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
sayferкак сделать что б при каждом нажатии,эти картинки менялись между собой местами в произвольном порядке?
Как вариант, генерить пару "кто" и "перед кем", потом этого "кто" вставлять "перед кем"...
Количество таких пар на твое усмотрение.
...
Рейтинг: 0 / 0
02.12.2013, 09:50
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38485560
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
sayferТам файлик не скачиваеться уже((Странно. Файл не на мусорообменнике, а непосредственно на SQL.RU ...
Только что нормально скачал. Прикрепляю в более коротком имени (англ. буквы)
...
Рейтинг: 0 / 0
02.12.2013, 10:01
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38486669
sayfer
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sayfer
Гость
Никак не получаеться,помогите плиз...
Я делаю как-то так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<html>
<style>
#DIVright {float:right; width:50%;}
</style>
<body>
<a  href="javascript:void(0)" onClick="javascript:func()">Изменить порядок изображение</a>
<div id="DIVright">
<img src="1.jpg" name="1">
<img src="2.jpg" name="2">

<img src="3.jpg" name="3">
<img src="4.jpg" name="4">
<img src="5.jpg" name="5">
</div>
<script type="text/javascript">
function func()
{
var test=new Array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg');
var count=test.length;
var random=Math.floor(Math.random()*count);
for (var i=0;i<5;i++)
{
	document.write("<img src="+test[random]+"/>);
}	
}
</script>
</body>
</html>
...
Рейтинг: 0 / 0
02.12.2013, 21:49
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38486684
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
кавычка
...
Рейтинг: 0 / 0
02.12.2013, 22:06
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38486690
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
sayfer,

???
Код: javascript
1.
document.write('<img src="+test[random]+"/>');
...
Рейтинг: 0 / 0
02.12.2013, 22:22
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38486705
sayfer
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sayfer
Гость
Чет да,незаметил,но всеравно когда нажимаю Изменить ,выводит так:

Как отсутствующие изображения и в левом верхнем углу,а нужно что б в правой колонке
...
Рейтинг: 0 / 0
02.12.2013, 22:37
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38486762
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
http://learn.javascript.ru/document-write
...
Рейтинг: 0 / 0
02.12.2013, 23:56
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38486793
sayfer
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sayfer
Гость
Тоесть метод document.write не подойдет для данной задачи,я правильно понял??
А ,какой подойте??
...
Рейтинг: 0 / 0
03.12.2013, 00:43
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38486893
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
sayferТоесть метод document.write не подойдет для данной задачи,я правильно понял??
Ну хоть что-то почитай прежде чем ваять...

авторdocument.write работает только на этапе загрузки страницы, его нельзя вызывать в ответ на какое-нибудь событие. Если document.write вызвать после того, как страница загрузилась, результат во всех браузерах будет примерно одинаков — пустая страница и, возможно, тот текст, который был выведен последним document.write. Поэтому даже не пытайтесь использовать его в ответ на какие-то действия пользователя, только на этапе загрузки страницы.
http://alljs.ru/articles/document-write
...
Рейтинг: 0 / 0
03.12.2013, 08:43
| Ответить | Цитировать | Написать  
Поменять два дива местами
    #38486896
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
sayferА ,какой подойте??
Смотря что тебе нужно делать...
...
Рейтинг: 0 / 0
03.12.2013, 08:49
| Ответить | Цитировать | Написать  
19 сообщений из 19, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Поменять два дива местами
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38485543&tid=1447602]:
 0ms
get settings:
 10ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 436ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 74ms
get tp. blocked users:
 2ms
others: 231ms
total:  787ms
созд. / загр.: 787ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]