Форум

sprkl335 · #1 (**permalink**) 11.02.2016, 20:04

Нужно чтобы после клика происходило следующее
ZQTEspba054.jpg
и параметр

Код:

document.getElementById('body').style.top = '300px';

становился

Код:

document.getElementById('body').style.top = '52px';

и наоборот.
Помогите пожалуйста

рони · #2 (**permalink**) 11.02.2016, 20:12

sprkl335,
сделали бы полноценный макет а не картинки, достаточно менять класс classList.toggle, а не стиль

sprkl335 · #3 (**permalink**) 11.02.2016, 20:35

Как это можно тут сделать? Помоги пожалуйста

рони · #4 (**permalink**) 11.02.2016, 20:41

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

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

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

sprkl335 · #5 (**permalink**) 11.02.2016, 20:48

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

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>

sprkl335 · #7 (**permalink**) 11.02.2016, 21:03

Нужно сделать это с кнопкой

рони · #8 (**permalink**) 11.02.2016, 21:05

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");
   });
     });

sprkl335 · #9 (**permalink**) 11.02.2016, 21:08

Кнопка у нас вот

<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

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

Форум

Справочник

Discord чат

Курсы javascript