Wysuwany formularz z prawej strony

pytanie zadane 21 lutego 2017 w JavaScript przez DariuszH Gaduła (3,100 p.)
edycja 21 lutego 2017 przez ScriptyChris

Witam. Można o rade odnośnie jquery ? Chodzi o to by formularz wysuwał się z prawej strony. Biblioteki jquery juz są wgrane :)

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="www.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="www.css" type="text/css" />
    <script src="www.js"></script>
</head>

    
    
    
<body>
  
<div class="menu"> 
        <div class="formularz"> 
            <form action="logowanie.php" method="post" id="loginForm">
         
                <label for="email" style="color:white;">e-mail :</label><input type="email" name="email" id="email"  required></label></br>

                <label for="haslo" style="color:white;">hasło :</label><input type="haslo" name="haslo" id="haslo" required></label>
            
        <input type="submit" value="Zaloguj" style="position:relative;top:2vh; left:44.5%;">
  
        </form>   
     </div>  
</div> 
    
            
</div>
              
<div class="main">
    
    

    
</div>




<div class="footer"></div>

   
</body>

          </html>

body{
  
width:100%;
height:auto;
padding:0;
margin:0;
}

.menu{

width:100%;
height:18.5vh;
background-color:black;
   
}

.formularz{
  float: right;
  height: 13.5vh;
  margin-top: 2vh;
  margin-right: 2vh;
}

input:not([type='submit']){
  float: right;
}
input[type='submit']{
display: block;
margin-left: 32%;
}
 
label{
  line-height: 200%;
  padding: 0 10px;
}


.main{
  
width:100%;
height:100vh;
background-color:#3299CC;

}

.footer{
    width:100%;
height:20vh;
background-color:black;
    
}

komentarz 21 lutego 2017 przez imklau Nałogowiec (42,090 p.)

kody wstawiamy w specjalne bloczki do tego przeznaczone

komentarz 21 lutego 2017 przez DariuszH Gaduła (3,100 p.)

Wiem, Jakoś mi nie wgrało. Pierwszy blok html działa prawidłowo, Kiedy chciałem drugi raz css wprowadzic w blok, też nic to nie dało.

1 odpowiedź

odpowiedź 21 lutego 2017 przez Łukasz Sitnik Początkujący (380 p.)

Witam,

Formularz ma się wysuwać automatycznie po załadowaniu strony, czy może po kliknięciu w coś albo może Pana koncepcja jest jeszcze inna? Poproszę o więcej szczegółów.

komentarz 21 lutego 2017 przez DariuszH Gaduła (3,100 p.)

Automatycznie po załadowaniu strony

komentarz 21 lutego 2017 przez DariuszH Gaduła (3,100 p.)

z prawej strony :)

komentarz 21 lutego 2017 przez Łukasz Sitnik Początkujący (380 p.)

Najpierw należy dodać kod w CSS:

form {
  position: relative;
  left: 230px;
}

Pierwsza własność określa sposób pozycjonowania elementu form. Będzie on ruchomy tylko wtedy, gdy wartość będzie ustawiona na "relative". Druga własność określa wyjściowe położenie elementu form, czyli poza ekranem.

Po ustawieniu CSS można przystąpic do napisania kodu w jQuery:

        $(document).ready(function() {
          $("form").animate({left: "-5px"}, 300, "linear");
        });

Po pobraniu elementu form za pomocą $ stosujemy na nim metodę animate(), przy pomocy której zmieniamy w CSS własność left z 230px na -5px, dzięki temu formularz wjedzie w pole widzenia użytkownika. Następnie po przecinku podany jest czas animacji, który wynosi 300 milisekund oraz rodzaj animacji. To wszystko.Mam nadzieję, ze pomogłem.

komentarz 21 lutego 2017 przez DariuszH Gaduła (3,100 p.)

Problem w tym że przy zmniejszaniu okna przeglądarki skaczą napisy nad okienka formularzy, a nie powinno tak być

komentarz 21 lutego 2017 przez Łukasz Sitnik Początkujący (380 p.)

Niestety niczego takiego nie mogę zreprodukować w moich przeglądarkach. Sprawdzam zarówno w najnowszej wersji Mozilli jak i Chrome. Etykietki e-mail i hasło (jeśli o te napisy Panu chodzi) są na swoich miejscach, czyli przed polami input przy każdym rozmiarze okna. Może Pan pokazać jak to wygląda u Pana?