Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Wysuwany Panel Logowania
Forum PHP.pl > Forum > Przedszkole
Lolek151
13.12.2011, 00:21:55
Witam korzystałem z tego Skryptu
Wstawiłem wszystko co jest napisane w moja stronę i wszystko prawie działa tylko się nie wysuwa sad.gif
index.php
[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. 	$('#login-toggle').click(function() {
  4. 		$('#login-content').slideToggle(300, function() {
  5. 		$("#login-toggle p").toggle();
  6. 		});
  7. 	});
  8. });
  9. </script>
  10. </head>
  11. <body>
  12. <div id="naglowek">
  13.  
  14. <?php include('tpl/naglowek.php') ?>
  15. </div>
  16. <!– Wysuwany panel logowania jQuery START–>
  17. <div id="login">
  18.  <div id="login-slide">
  19.   <div id="login-content">
  20.       <form action="/" method="post">
  21.       <input type="text" class="field" name="login" value="Nazwa użytkownika…" onfocus="if (this.value == 'Nazwa użytkownika…') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Nazwa użytkownika…';}" />
  22.       <input type="password" class="field" name="haslo" />
  23.       <input type="submit" class="submit" name="submit" value="Zaloguj mnie" />
  24.     </form>
  25.     <div class="linki">
  26.       <a href="#">Zapomniałeś hasła?</a> | <strong><a href="#">Zarejestruj się</a></strong>
  27.     </div>  
  28.   </div>
  29.  </div>
  30.  <div id="login-toggle">
  31.   <p>Zaloguj się</p>
  32.   <p style="display: none;"><img class="close" src="img/close.png" alt="" />Ukryj panel</p>
  33.  </div>
  34. </div>
  35. <!– Wysuwany panel logowania jQuery KONIEC–>
[PHP] pobierz, plaintext

A tak css 
[CSS] pobierz, plaintext 
  1. }
  2. #logo a {color:#dd9c04; text-decoration:none;}
  3. #logo a:hover {color:#d9c900; text-decoration:none; border-bottom:0px;}
  4. .like {
  5. display:block;
  6. float:left;
  7. padding-top:24px;
  8. padding-left:20px;
  9. }
  10. .slogan {
  11. display:block;
  12. float:right;
  13. padding-top:18px;
  14. color:#fff;
  15. font-size:22px;
  16. }
  17. /* Wysuwany panel logowania jQuery START*/
  18. #login {
  19.  width: 100%;
  20.  top: 0;
  21.  position: absolute;
  22.  z-index: 999;
  23.  margin: 0;
  24.  padding: 0;
  25. }
  26.  
  27. #login a {
  28.    color: #ffffff;
  29. }
  30.  
  31. #login a:hover {
  32.    color: #616161;
  33. }
  34.  
  35. #login-slide {
  36.  width: 100%;
  37.  margin: 0 auto;
  38.  padding: 0;
  39.  background: #3b3b3b;
  40.  border-bottom: 1px solid #ffffff;
  41. }
  42.  
  43. #login-content {
  44.  width: 600px;
  45.  height: auto;
  46.  margin: 0 auto;
  47.  padding: 13px;
  48.  display: none;
  49. }
  50.  
  51. #login-content p {
  52.  margin: 0;
  53.  padding: 0;
  54. }
  55.  
  56. #login-toggle {
  57.  width: 174px;
  58.  height: 41px;
  59.  background: url(../img/btn.png) no-repeat;
  60.  margin: 0 auto;
  61.  padding: 0;
  62.  z-index: 999;
  63.  text-align: center;
  64.  color: #ffffff;
  65.  text-shadow: 1px 1px 1px #a20b1b;
  66.  line-height: 37px;
  67.  font-weight: bold;
  68.  cursor: pointer;
  69.  display: block;
  70.  text-decoration: none;
  71. }
  72.  
  73. #login-toggle:hover {
  74.  color: #41070d;
  75.  text-shadow: 1px 1px 0px #ee4557;
  76. }
  77.  
  78. #login-toggle p {
  79.  margin: 0;
  80.  padding: 0;
  81. }
  82.  
  83. .field {
  84.  width: 200px;
  85.  border: solid 1px #303030;
  86.    float: left;
  87.    margin: 0px 6px 0px 0px;
  88.    padding: 9px 13px;
  89.  background: #ffffff;
  90.  color: #343434;
  91.  background: -webkit-gradient(linear, left top, left 25, from(#ffffff), color-stop(4%, #eeeeee), to(#ffffff));
  92.  background: -moz-linear-gradient(top, #ffffff, #eeeeee 1px, #ffffff 25px);
  93.  -moz-border-radius: 5px;
  94.  -webkit-border-radius: 5px;
  95.  
  96.  
  97. }
[CSS] pobierz, plaintext

Ktoś wie co może byc nie tak ? ohmy.gif

Shinji
13.12.2011, 09:02:34
Zacznijmy od upewnienia się czy masz w ogóle zaimportowaną bibliotekę jquery:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.