Добро пожаловать, Гость. Пожалуйста, выберите Вход или Регистрация
Привет.лв Главная Справка Поиск Вход Регистрация
Privet.lv/forum / Веб-мастерам / Html верстка / Спойлер
(Модератор: Ramzies) ‹ Предыдущая тема | Следующая тема ›
Страниц: 1 2 
Печать Bookmark and Share
Удалить этот блок рекламы?
Удали рекламу
Спойлер (Прочитано 19780 раз)
[Наёмник][Санёк]
Никем не отмечен
*
Вне Форума

 Наёмный убийца :)

Сообщений: 7

Пол: male
Спойлер
25.11.2011 :: 22:41:26  
Помогите,я начинающий в этом деле с яваскриптом неразу не сталкивался,и хотелось бы подробно узнать как через яваскрипт сделать чтобы спойлер при нажатии выезжал влево, а при закрытии возращался на свое исходное положение
ну вот я сделал наброски както так
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!

потом при нажатии выезжает на 735 пикселей влево
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!

и впоследствии плавненько открывается спойлер
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!


можно ли так сделать?!

или может через цсс,вот только тогда и сэмпл на то как прописывать сам спойлер!

Заранее спасибо если найдётся кто сможет мне помочь! Улыбка
Наверх
 
 
Цени того, кто рядом
Не тот кто в далеке, кажется рядом,
Как кажется луна в реке
Можно искать всю жизнь того, кто был под боком, потом молиться и просить вернуть назад все Богом
  IP записан
Ramzies
Администратор
*****
Вне Форума

 Все что случается
имеет причину.

Сообщений: 2633
Даугавпилс, Валмиера.
Пол: male
Re: Спойлер
Ответ #1 - 25.11.2011 :: 23:07:13  
Если вы новичек в этом, вы начали с достаточно трудных задач. Предлога вам сейчас сделать html макет вашего рисунка. А с выезжанием я помогу позже.

Сделать то что вы нарисовали вам будет проще используя CSS3. Здесь вы можете сделать прозрачные и закругленные формы: Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!



Вышлите потом ссылку или вопросы того что у вас получилось я помогу вам дальше.
Наверх
 
 
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
[Наёмник][Санёк]
Никем не отмечен
*
Вне Форума

 Наёмный убийца :)

Сообщений: 7

Пол: male
Re: Спойлер
Ответ #2 - 25.11.2011 :: 23:12:47  
Ну тоесть на том сайте что ты дал мне нужно собрать по частям то что я хочу да?
Наверх
 
 
Цени того, кто рядом
Не тот кто в далеке, кажется рядом,
Как кажется луна в реке
Можно искать всю жизнь того, кто был под боком, потом молиться и просить вернуть назад все Богом
  IP записан
Ramzies
Администратор
*****
Вне Форума

 Все что случается
имеет причину.

Сообщений: 2633
Даугавпилс, Валмиера.
Пол: male
Re: Спойлер
Ответ #3 - 25.11.2011 :: 23:15:59  
Тот сайт тебе поможет сделать прозрачные и закругленные формы твоих элементов.
Наверх
 
 
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
[Наёмник][Санёк]
Никем не отмечен
*
Вне Форума

 Наёмный убийца :)

Сообщений: 7

Пол: male
Re: Спойлер
Ответ #4 - 25.11.2011 :: 23:19:11  
Ясно я просто думал что можно сделать это уже с готовыми картинками на прозрачном фоне...
Наверх
 
 
Цени того, кто рядом
Не тот кто в далеке, кажется рядом,
Как кажется луна в реке
Можно искать всю жизнь того, кто был под боком, потом молиться и просить вернуть назад все Богом
  IP записан
Ramzies
Администратор
*****
Вне Форума

 Все что случается
имеет причину.

Сообщений: 2633
Даугавпилс, Валмиера.
Пол: male
Re: Спойлер
Ответ #5 - 25.11.2011 :: 23:32:31  
Полностью готовое решение именно того что ты хочешь я в интернете не видел.

Первое что приходил в голову это Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!

Но опять же там не совсем то что тебе нужно, необходимо допиливать. Лучше все с нуля написать.


Изменено:
Цитата:
Ясно я просто думал что можно сделать это уже с готовыми картинками на прозрачном фоне...

Я тебя наверное не так понял. Ты хочешь использовать те уже нарисованные тобою рисунки в проекте? Не стоит этого делать. Улыбка Воспользуйся тем сайтом что я давал выше.
Наверх
 
 
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
[Наёмник][Санёк]
Никем не отмечен
*
Вне Форума

 Наёмный убийца :)

Сообщений: 7

Пол: male
Re: Спойлер
Ответ #6 - 25.11.2011 :: 23:51:21  
ну само содержание спойлера чтоб выподал так
Код:
.bord
{
 font-size:18px; color:#FFF;
 border:color: rgba(255, 255, 255, 1);;
 text-align:center;
 background:#575757;
 padding:20px 20px 20px 20px;
 -moz-border-radius: 5px;
 -webkit-border-radius:5px;
 border-radius: 5px;
}
.bord
{
 border:solid 3px;
    color: rgba(255, 255, 255, 0.5);
 -moz-border-radius-topleft: 5px;
 -moz-border-radius-topright:5px;
 -moz-border-radius-bottomleft:5px;
 -moz-border-radius-bottomright:5px;
 -webkit-border-top-left-radius:5px;
 -webkit-border-top-right-radius:5px;
 -webkit-border-bottom-left-radius:5px;
 -webkit-border-bottom-right-radius:5px;
 border-top-left-radius:5px;
 border-top-right-radius:5px;
 border-bottom-left-radius:15px;
 border-bottom-right-radius:15px;
}

вроде чето похоже
Наверх
 
 
Цени того, кто рядом
Не тот кто в далеке, кажется рядом,
Как кажется луна в реке
Можно искать всю жизнь того, кто был под боком, потом молиться и просить вернуть назад все Богом
  IP записан
Ramzies
Администратор
*****
Вне Форума

 Все что случается
имеет причину.

Сообщений: 2633
Даугавпилс, Валмиера.
Пол: male
Re: Спойлер
Ответ #7 - 26.11.2011 :: 00:06:05  
Осталось сделать html код и соединить твой сделанный CSS.
Выложи потом ссылку на html того что у тебя получилось. Потом расскажу о JavaScript и как заставить твою форму выезжать с угла страницы.
Наверх
 
 
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
[Наёмник][Санёк]
Никем не отмечен
*
Вне Форума

 Наёмный убийца :)

Сообщений: 7

Пол: male
Re: Спойлер
Ответ #8 - 26.11.2011 :: 01:34:56  
ну вот страница Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
в css прописанно все

вот еще коечто я изудил из спойлера который ставится автоматом на укозе Код:
<!--uSpoiler-->
<div class="uSpoilerClosed" id="uSpoilerYC6eD0">
<div class="uSpoilerButBl">
<input type="button" class="uSpoilerButton" onclick="if($('#uSpoilerYC6eD0')[0])
{if ($('.uSpoilerText',$
('#uSpoilerYC6eD0'))[0].style.display=='none')
{$('.uSpoilerText',$('#uSpoilerYC6eD0'))[0].style.display='';
$('.uSpoilerButton',$('#uSpoilerYC6eD0')).val
('Закрыть спойлер');$
('#uSpoilerYC6eD0').attr('class','uSpoilerOpened');}else {$('.uSpoilerText',$('#uSpoilerYC6eD0'))[0].style.display='none';$('.uSpoilerButton',$
('#uSpoilerYC6eD0')).val('Открыть спойлер');$('#uSpoilerYC6eD0').attr('class','uSpoilerClosed');}}" value="Открыть спойлер">
</div>
<div class="uSpoilerText" style="display:none;">
<!--ust-->
<div class="bord">
Ну вот както так только не емняется картинка кнопки самого спойлера
</div>
<!--/ust-->
</div>
</div>
<!--/uSpoiler-->

потом я в css файле попробовал прописать
Код:
.uSpoilerButton
{
     width:675px;height:25px;
  
}
.uSpoilerClosed
{
 width:675px;height:25px;
 background: url (http://dnevnik.ucoz.lv/spoiler/1.png);

}
.uSpoilerOpened
{
  
 width:675px;height:25px;
 background: url (http://dnevnik.ucoz.lv/spoiler/2.png);

}
.uSpoilerButBl
{
 width:675px;height:25px;
 background: url (http://dnevnik.ucoz.lv/spoiler/3.png);
}
и он начинал растягиватся а вот стиль самого uspoilerbutton не менялся,как был стандартной так и остался
Наверх
 
« Последняя редакция: 26.11.2011 :: 04:00:52 от [Наёмник][Санёк] »  
Цени того, кто рядом
Не тот кто в далеке, кажется рядом,
Как кажется луна в реке
Можно искать всю жизнь того, кто был под боком, потом молиться и просить вернуть назад все Богом
  IP записан
Ramzies
Администратор
*****
Вне Форума

 Все что случается
имеет причину.

Сообщений: 2633
Даугавпилс, Валмиера.
Пол: male
Re: Спойлер
Ответ #9 - 26.11.2011 :: 09:13:48  
Я тебя просил сделать вот такую страницу, с подобным html, css кодом.

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!


Он тебе понятен?
Наверх
 
 
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
[Наёмник][Санёк]
Никем не отмечен
*
Вне Форума

 Наёмный убийца :)

Сообщений: 7

Пол: male
Re: Спойлер
Ответ #10 - 26.11.2011 :: 10:17:19  
Ну да понятен
Наверх
 
 
Цени того, кто рядом
Не тот кто в далеке, кажется рядом,
Как кажется луна в реке
Можно искать всю жизнь того, кто был под боком, потом молиться и просить вернуть назад все Богом
  IP записан
Ramzies
Администратор
*****
Вне Форума

 Все что случается
имеет причину.

Сообщений: 2633
Даугавпилс, Валмиера.
Пол: male
Re: Спойлер
Ответ #11 - 26.11.2011 :: 10:36:38  
Значит сделай у себя такую страницу. Осталось эту форму сделать немного меньше и сдвинуть в правый угол. С этим я после обеда помогу.
Наверх
 
 
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
Страниц: 1 2 
Печать Bookmark and Share
Privet.lv/forum / Веб-мастерам / Html верстка ‹ Предыдущая тема | Следующая тема ›
www.privet.lv

Privet.lv/forum » Powered by YaBB 2.2.3 (fix)!
YaBB © 2000-2012. Все права защищены. Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge