Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.02.2016, 20:04
Новичок на форуме
Отправить личное сообщение для sprkl335 Посмотреть профиль Найти все сообщения от sprkl335
 
Регистрация: 11.02.2016
Сообщений: 8

Возврат параметра после клика
Нужно чтобы после клика происходило следующее
ZQTEspba054.jpg
и параметр
Код:
document.getElementById('body').style.top = '300px';
становился
Код:
document.getElementById('body').style.top = '52px';
и наоборот.
Помогите пожалуйста
Ответить с цитированием
  #2 (permalink)  
Старый 11.02.2016, 20:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sprkl335,
сделали бы полноценный макет а не картинки, достаточно менять класс classList.toggle, а не стиль
Ответить с цитированием
  #3 (permalink)  
Старый 11.02.2016, 20:35
Новичок на форуме
Отправить личное сообщение для sprkl335 Посмотреть профиль Найти все сообщения от sprkl335
 
Регистрация: 11.02.2016
Сообщений: 8

Как это можно тут сделать? Помоги пожалуйста
Ответить с цитированием
  #4 (permalink)  
Старый 11.02.2016, 20:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sprkl335,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #5 (permalink)  
Старый 11.02.2016, 20:48
Новичок на форуме
Отправить личное сообщение для sprkl335 Посмотреть профиль Найти все сообщения от sprkl335
 
Регистрация: 11.02.2016
Сообщений: 8

var body = document.getElementById("div1");
     body.classList.toggle("unslid");}

div.headr { z-index: 1;
	width:100%;
	background-color:#c2ccff;
	position: absolute;
	margin:-8px;
	position: fixed;
        height: 600px;
	padding: 0px;
	 z-index: 1;
	} 
    div.body{ z-index: 2 ; 
    background-color: #fff;
	position: absolute;
	top: 52px;
	margin-left:-8px;
	height: 100%;
	width: 100%;
    position: fixed;
	box-shadow:  0px -4px 5px 0px rgba(0,0,0,0.75); 
	}
	input.slide {
	position: absolute; 
	left:48%;
	top:37px;
	}
	slid {
	 background-color: #fff;
	 position: absolute;
	 top: 300px;
	 transition: 0.1s linear;
	 margin-left:-8px;
	 height: 100%;
	 width: 100%;
     position: fixed;
	 box-shadow:  0px -4px 5px 0px rgba(0,0,0,0.75); 
	}
	unslid {
	 background-color: #fff;
	 position: absolute;
	 top: 52px;
	 transition: 0.1s linear;
	 margin-left:-8px;
	 height: 100%;
	 width: 100%;
     position: fixed;
	 box-shadow:  0px -4px 5px 0px rgba(0,0,0,0.75); 
	}

<!DOCTYPE HTML> 
 <HTML> 
  <HEAD> 
   <style>
 
   </style>   
   <script>   
	
   </script>
   
  </head>
  <body> 
   <div class="headr"> 
    <b style=" position:absolute; margin-left:34%;"> Cirno is strongest </b>
    <input  id="slide" class="slide" type="image" src="https://psv4.vk.me/c414924/u331653025/docs/0ca38f6b8139/slid.png?extra=xCAy-_y2OTFVdecmOKN5GnsSQniOg8mc7_75hsVJt6jCZJu5MI_Mrl_LgQY-aqYD1Mqr036lAix_DIm72cH0tDCxdD8v4uiClKcO6oA1OkM148fP"width="2%" height="2%" outline="0px"> 
   </div>   
   <div id="body" class="body">   
   </div>
        
	
  </body>
 </html>
Ответить с цитированием
  #6 (permalink)  
Старый 11.02.2016, 20:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sprkl335,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .hot{
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
         position: absolute;
         top: 52px;
         transition: top .8s ease-in-out;
    }
     .hot.dn{
       top:300px
     }

  </style>

</head>

<body>
 <div class="hot">click me</div>
 <script>
 window.addEventListener('DOMContentLoaded', function() {
   var hot = document.querySelector('.hot');
   hot.addEventListener('click', function create() {
       hot.classList.toggle("dn")
   });
     });
 </script>
</body>

</html>
Ответить с цитированием
  #7 (permalink)  
Старый 11.02.2016, 21:03
Новичок на форуме
Отправить личное сообщение для sprkl335 Посмотреть профиль Найти все сообщения от sprkl335
 
Регистрация: 11.02.2016
Сообщений: 8

Нужно сделать это с кнопкой
Ответить с цитированием
  #8 (permalink)  
Старый 11.02.2016, 21:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sprkl335,
что у вас является кнопкой? на то клик и запишите как вариант
window.addEventListener('DOMContentLoaded', function() {
   var headr = document.querySelector('.headr'),
   body = document.querySelector('.body'),
   slide = document.querySelector('.slide');
   headr.addEventListener('click', function create() {
       body.classList.toggle("unslid");
       slide.classList.toggle("unslid");
   });
     });
Ответить с цитированием
  #9 (permalink)  
Старый 11.02.2016, 21:08
Новичок на форуме
Отправить личное сообщение для sprkl335 Посмотреть профиль Найти все сообщения от sprkl335
 
Регистрация: 11.02.2016
Сообщений: 8

Кнопка у нас вот
<input  id="slide" class="slide" type="image" src="https://psv4.vk.me/c414924/u331653025/docs/0ca38f6b8139/slid.png?extra=xCAy-_y2OTFVdecmOKN5GnsSQniOg8mc7_75hsVJt6jCZJu5MI_Mrl_LgQY-aqYD1Mqr036lAix_DIm72cH0tDCxdD8v4uiClKcO6oA1OkM148fP"width="2%" height="2%">
Ответить с цитированием
  #10 (permalink)  
Старый 11.02.2016, 21:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sprkl335,
так в строке 5 поменяйте headr на slide
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Действие после клика мыши 1n3gan jQuery 2 06.11.2013 15:11
Возврат значения функции после завершения анимации (затухания) grego jQuery 5 16.04.2013 22:25
Возврат фокуса к полю редактирования после закрытия Ext.MessageBox danik.js ExtJS 0 08.12.2012 12:07
функция внутри Live() срабатывает после второго клика Ad1r jQuery 7 09.08.2011 14:11
Не убирать кнопку после клика по ней. CompModdd jQuery 2 12.05.2009 02:13