Javascript.RU

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

Нужно перемесить div элемент в перврначальное положение.
Здравствуйте! У меня возникла следующая проблема. Дело в том, что мне нужно сделать окно при нажатии на которое, показывалась бы форма, в которой можно связаться с консультантом. Я написал одну функцию, чтобы большое окно отодвигалось до маленького окна вниз и исчезало. Она работает. Теперь мне нужно сделать так, чтобы при нажатии на маленькое окно, большое окно выдвигалось бы обратно вверх в прежнее положение.
ниже я выложил код и gif анимацию в архиве. Буду благодарен если сможете чем-нибудь помочь!

CSS

#supportField{
height: 400px;
width: 300px;
display: block;
position: fixed;
top: 422px;
right: 30px;
}

#service {
border-top-right-radius: 20%;
width: 296px;
height: 60px;
background-color: rgb(48, 125, 246);
color: azure;
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
display: block;
}

h5 {
padding-top: 20px;

}


#form1 {

background-color: rgb(187, 187, 196);
width: 297px;
display: block;
}

#emptySpace {
width: 290px;
background-color: aliceblue;
width: 296px;
height: 230px;
display: block;

}

#messageBox {
width: 270px;
height: 70px;
display: block;
padding-left: 10px;
margin-left: 13px;
margin-bottom: 5px;



}

#sendButton {
background-color: rgb(48, 125, 246);
color: azure;
border-radius: 10%;
border-color: rgb(48, 125, 246);
display: block;
margin-left: 220px;
margin-bottom: 10px;

}


#hiddenField {
border-top-right-radius: 20%;
width: 297px;
height: 60px;
background-color: rgb(48, 125, 246);
color: azure;
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: fixed;
top: 756px;
right: 33px;
}

#hiddenField:hover {

background-color: rgb(19, 73, 158);
border-top-right-radius: 20%;
color: white;

}

HTML

<!-- Contact field -->

        <div id="hiddenField" onclick="moveUp()"><h5>Kontakta oss</h5></div>        


<div id="supportField">
    <button onclick="moveDown()">Сlose</button>
    <div id="service"><h5>Kontakta vår kundservice online</h5></div>
    <div id="emptySpace"></div>
  <form id="form1" action="#" method="#">
    <textarea id="messageBox" name="message" placeholder="Your message" rows="4" cols="40"></textarea>
    <button id="sendButton" type="submit" value="Skicka">Skicka</button>
  </form>
</div>


JS

//////////////////////////////////////////////Function doesn'works//////////////////////////////////////////////////


  function moveUp(){ 
    var elem = document.getElementById("supportField"); 
    document.getElementById("hiddenField").style.display = "none";  
    var pos = 761;
    var id = setInterval(frame, 1);
    function frame() {
      if (pos === 422) {
        clearInterval(id);
      } else {
        pos--; 
        elem.style.top = pos + 'px'; 
        document.getElementById("supportField").style.display = "block"; 
        document.getElementById("hiddenField").style.display = "none" 
        console.log(pos);
      }
     
    }
    return 0;
  }

  
//////////////////////////////////////////////Function works//////////////////////////////////////////////////
  
  
function moveDown() {
  var elem = document.getElementById("supportField");  
  var pos = 422;
  var id = setInterval(frame, 1);
  var id = setInterval(frame, 1);
  var id = setInterval(frame, 1);
  var id = setInterval(frame, 1);
  function frame() {
    if (pos === 761) {
      clearInterval(id);
      document.getElementById("supportField").style.display = "none";
    } else {
      pos++; 
      elem.style.top = pos + 'px'; 
      console.log(pos);
    }
  }
  return 0;
}


1.jpg

2.jpg
Вложения:
Тип файла: zip 3.gif.zip (1.12 Мб, 4 просмотров)

Последний раз редактировалось Darkgohn95, 13.11.2018 в 23:54.
Ответить с цитированием
  #2 (permalink)  
Старый 14.11.2018, 02:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Darkgohn95,
css!!!
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body{
    position: relative;
}

#supportField{
height: 400px;
width: 300px;
position: fixed;
bottom: -422px;
right: 30px;
transition: 1s;
}

#supportField.up{
bottom : 40px;

}

#service {
border-top-right-radius: 20%;
width: 296px;
height: 60px;
background-color: rgb(48, 125, 246);
color: azure;
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
display: block;
}

h5 {
padding-top: 20px;

}


#form1 {

background-color: rgb(187, 187, 196);
width: 297px;
display: block;
}

#emptySpace {
width: 290px;
background-color: aliceblue;
width: 296px;
height: 230px;
display: block;

}

#messageBox {
width: 270px;
height: 70px;
display: block;
padding-left: 10px;
margin-left: 13px;
margin-bottom: 5px;



}

#sendButton {
background-color: rgb(48, 125, 246);
color: azure;
border-radius: 10%;
border-color: rgb(48, 125, 246);
display: block;
margin-left: 220px;
margin-bottom: 10px;

}


#hiddenField {
border-top-right-radius: 20%;
width: 297px;
height: 60px;
background-color: rgb(48, 125, 246);
color: azure;
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: fixed;
bottom: 6px;
right: 33px;
transition: .3s .9s;
 }

#hiddenField.hide{
  transition-delay: 0s;
  transform: scale(0);
  opacity: 0
}

 #hiddenField:hover {

 background-color: rgb(19, 73, 158);
 border-top-right-radius: 20%;
 color: white;

 }
  </style>
  <script>
     //////////////////////////////////////////////Function doesn'works//////////////////////////////////////////////////


  function moveUp(){
   document.getElementById("supportField").classList.add("up");
    document.getElementById("hiddenField").classList.add("hide");
  }


//////////////////////////////////////////////Function works//////////////////////////////////////////////////


function moveDown() {
    document.getElementById("supportField").classList.remove("up");
    document.getElementById("hiddenField").classList.remove("hide");

}

  </script>
</head>

<body>
<!-- Contact field -->

        <div id="hiddenField" onclick="moveUp()"><h5>Kontakta oss</h5></div>


<div id="supportField">
    <button onclick="moveDown()">Сlose</button>
    <div id="service"><h5>Kontakta vår kundservice online</h5></div>
    <div id="emptySpace"></div>
  <form id="form1" action="#" method="#">
    <textarea id="messageBox" name="message" placeholder="Your message" rows="4" cols="40"></textarea>
    <button id="sendButton" type="submit" value="Skicka">Skicka</button>
  </form>
</div>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 15.11.2018, 00:50
Новичок на форуме
Отправить личное сообщение для Darkgohn95 Посмотреть профиль Найти все сообщения от Darkgohn95
 
Регистрация: 13.11.2018
Сообщений: 2

рони,
Спасибо большое за помощь!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
нужно, чтоб Div менялся в зависимости от размера картинки bazilio2010 Элементы интерфейса 7 10.10.2011 22:36
Drag-n-Drop - перетянуть элемент Jugo ExtJS 1 10.08.2011 19:10
Аjax запрос формирует div с изображениями, нужно показать после загрузки изображений Khmelevsky AJAX и COMET 2 13.09.2010 23:16
нужно создать много копий div ASM29A Элементы интерфейса 3 27.03.2010 20:22
Передать в функцию указание на элемент, из которой она вызвана AndreyLL Events/DOM/Window 3 30.11.2009 09:55