Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wysuwany slider facebook
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
lukasheek88
15.01.2013, 19:27:49
Witam, mam wysuwany slider facebooka.
Chciałbym aby ten slider wysuwał się po najechaniu na przycisk facebook a nie tak jak teraz jest, czyli zbliżenie myszki do przycisku na odległość kilkunastu pikseli wysuwa slider.

Czyli reasumując, wysuwanie slidera uruchomione jest tylko po najechaniu przycisku facebook.

Oto kod strony:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Wysuwany Like Box - www.blog.klocus.pl</title>
  5. <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  6. <meta content="..." name="description" />
  7. <meta content="..." name="keywords" />
  8. <style>
  9. body {
  10. 	margin: 0;
  11. 	padding: 0;
  12. }
  13.  
  14. /* glowny div z like box'em */
  15. #like-box {
  16. 	position: fixed;
  17. 	z-index: 99;
  18. 	top: 50px;  /* jego polozenie od gory */
  19. 	left: -296px; /* szerokosc wygenerowanego boxa + 4px obramowania */
  20. 	-webkit-transition: left 0.5s ease-out;
  21. 	-moz-transition: left 0.5s ease-out;
  22. 	-o-transition: left 0.5s ease-out;
  23. 	transition: left 0.5s ease-out;
  24. }
  25.  
  26. /* wysuniecie like box'a */
  27. #like-box:hover {
  28. 	left: 0px;
  29. }
  30.  
  31. /* zewnetrzna ramka boxa */
  32. #like-box .outside {
  33. 	position: relative;
  34. 	z-index: 1;
  35. 	background: #3b5999;
  36. 	padding: 2px;
  37. 	min-width: 1px;
  38. 	float: left;
  39. }
  40.  
  41. /* wewnetrzne tlo boxa */
  42. #like-box .inside {
  43. 	position: relative;
  44. 	z-index: 2;
  45. 	background: #fff;
  46. }
  47.  
  48. /* pasek z logo FB */
  49. #like-box .belt {
  50. 	position: relative;
  51. 	z-index: 0;
  52. 	-webkit-transform: rotate(90deg); /* obrot o 90 stopni */
  53. 	-moz-transform: rotate(90deg); /* wiec wysokosc zamienia sie z szerokoscia */
  54. 	-o-transform: rotate(90deg); /* obrot o 90 stopni */
  55. 	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* obrot o 90 stopni dla IE */
  56. 	float: left;
  57. 	width: 100px; /* wysokosc */
  58. 	height: 40px; /* szerokosc */
  59. 	padding: 7px 0px 0px 20px;
  60. 	margin: 50px 0px 0px -55px;
  61. 	background: #3b5999;
  62. 	color: #fff;
  63. 	font-weight: bold;
  64. 	font-family: Verdana;
  65. 	font-size: 16px;
  66. 	-webkit-border-radius: 6px;
  67. 	-moz-border-radius: 6px;
  68. 	border-radius: 6px;
  69. }
  70.  
  71. #banner {
  72. 	margin: 0 auto;
  73. 	width: 450px;
  74. 	height: 50px;
  75. 	margin-top: 30%;
  76. }
  77. </style>
  78. </head>
  79. <body>
  80.  
  81. <!-- WYGENEROWANY KOD NR 1 -->
  82. <div id="fb-root"></div>
  83. <script>(function(d, s, id) {
  84.   var js, fjs = d.getElementsByTagName(s)[0];
  85.   if (d.getElementById(id)) return;
  86.   js = d.createElement(s); js.id = id;
  87.   js.src = "http://connect.facebook.net/pl_PL/all.js#xfbml=1";
  88.   fjs.parentNode.insertBefore(js, fjs);
  89. }(document, 'script', 'facebook-jssdk'));</script>
  90. <!-- KONIEC WYGENEROWANEGO KODU NR 1 -->
  91.  
  92. <!-- DIV Z LIKE BOX'EM -->
  93. <div id="like-box">
  94. 	<div class="outside">
  95. 		<div class="inside">
  96. 			<!-- WYGENEROWANY KOD NR 2 -->
  97. 			<div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="292" data-height="405" data-show-faces="true" data-stream="false" data-header="false"></div>
  98. 			<!-- KONIEC WYGENEROWANEGO KODU NR 2 -->
  99. 		</div>
  100. 	</div>
  101. 	<div class="belt">Facebook</div>
  102. </div>
  103. <!-- KONIEC DIVA Z LIKE BOX'EM -->
  104.  
  105. </body>
  106. </html>
[HTML] pobierz, plaintext
SpiJay
26.01.2013, 18:36:01
Nie zbyt się przyglądałem obracaniu elementów w CSS, ale z tego co zdążyłem zaobserwować, to nawet po obróceniu o te Twoje 90 stopni,
szerokość jest czytana mimo wszystko ta z "width" a nie po obróceniu z "height". Bo w przypadku gdy obracasz o 90st, szerokość wówczas ustawiasz w "height" i odwrotnie w width.

position: absolute;
right: -70px;

I po problemie.

Pozdrawiam,
SpiJay.com

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Wysuwany Like Box - www.blog.klocus.pl</title>
  5. <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  6. <meta content="..." name="description" />
  7. <meta content="..." name="keywords" />
  8. <style>
  9. body {
  10. 	margin: 0;
  11. 	padding: 0;
  12. }
  13.  
  14. /* glowny div z like box'em */
  15. #like-box {
  16. 	position: fixed;
  17. 	z-index: 99;
  18. 	top: 50px;  /* jego polozenie od gory */
  19. 	left: -296px; /* szerokosc wygenerowanego boxa + 4px obramowania */
  20. 	-webkit-transition: left 0.5s ease-out;
  21. 	-moz-transition: left 0.5s ease-out;
  22. 	-o-transition: left 0.5s ease-out;
  23. 	transition: left 0.5s ease-out;
  24. }
  25.  
  26. /* wysuniecie like box'a */
  27. #like-box:hover {
  28. 	left: 0px;
  29. }
  30.  
  31. /* zewnetrzna ramka boxa */
  32. #like-box .outside {
  33. 	position: relative;
  34. 	z-index: 1;
  35. 	background: #3b5999;
  36. 	padding: 2px;
  37. 	min-width: 1px;
  38. 	float: left;
  39. }
  40.  
  41. /* wewnetrzne tlo boxa */
  42. #like-box .inside {
  43. 	position: relative;
  44. 	z-index: 2;
  45. 	background: #fff;
  46. }
  47.  
  48. /* pasek z logo FB */
  49. #like-box .belt {
  50. 	position: absolute;
  51. 	right: -70px;
  52. 	z-index: 0;
  53. 	-webkit-transform: rotate(90deg); /* obrot o 90 stopni */
  54. 	-moz-transform: rotate(90deg); /* wiec wysokosc zamienia sie z szerokoscia */
  55. 	-o-transform: rotate(90deg); /* obrot o 90 stopni */
  56. 	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* obrot o 90 stopni dla IE */
  57. 	float: left;
  58. 	width: 100px; /* wysokosc */
  59. 	height: 40px; /* szerokosc */
  60. 	padding: 7px 0px 0px 20px;
  61. 	margin: 50px 0px 0px -55px;
  62. 	background: #3b5999;
  63. 	color: #fff;
  64. 	font-weight: bold;
  65. 	font-family: Verdana;
  66. 	font-size: 16px;
  67. 	-webkit-border-radius: 6px;
  68. 	-moz-border-radius: 6px;
  69. 	border-radius: 6px;
  70. }
  71.  
  72. #banner {
  73. 	margin: 0 auto;
  74. 	width: 450px;
  75. 	height: 50px;
  76. 	margin-top: 30%;
  77. }
  78. </style>
  79. </head>
  80. <body>
  81.  
  82. <!-- WYGENEROWANY KOD NR 1 -->
  83. <div id="fb-root"></div>
  84. <script>(function(d, s, id) {
  85.   var js, fjs = d.getElementsByTagName(s)[0];
  86.   if (d.getElementById(id)) return;
  87.   js = d.createElement(s); js.id = id;
  88.   js.src = "http://connect.facebook.net/pl_PL/all.js#xfbml=1";
  89.   fjs.parentNode.insertBefore(js, fjs);
  90. }(document, 'script', 'facebook-jssdk'));</script>
  91. <!-- KONIEC WYGENEROWANEGO KODU NR 1 -->
  92.  
  93. <!-- DIV Z LIKE BOX'EM -->
  94. <div id="like-box">
  95. 	<div class="outside">
  96. 		<div class="inside">
  97. 			<!-- WYGENEROWANY KOD NR 2 -->
  98. 			<div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="292" data-height="405" data-show-faces="true" data-stream="false" data-header="false"></div>
  99. 			<!-- KONIEC WYGENEROWANEGO KODU NR 2 -->
  100. 		</div>
  101. 	</div>
  102. 	<div class="belt">Facebook</div>
  103. </div>
  104. <!-- KONIEC DIVA Z LIKE BOX'EM -->
  105.  
  106. </body>
  107. </html>
[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.