Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Javascript] Efekt jak ..
Forum PHP.pl > Forum > Przedszkole
motyl-pl
Cześć,
Czy byłby w stanie ktoś przybliżyć mi, w jaki sposób mogę zrobić efekt taki jak tu:
http://cargocollective.com/favorites ?

Chodzi mi konkretnie o opis obok zdjęcia, że spada do nowego projektu, później kolejny się ładuje i też spada.
Nie mam zielonego pojęcia jak to ugryźć.
Proszę o pomoc, dzięki!
com
Podpowiedź to za to odpowiada:
  1. <style type="text/css">
  2. .rail_background, .project_rail, .feed_header, .cargo_link, #search_form { left: 940px; }
  3. .project_content { margin-left: 235px; }
  4. .project_bottom { display: none; }
  5. #left_rail #search_form { position: relative; top: auto; left: auto; bottom: auto; }
  6.  
  7. <div style="position: fixed; top: 0; left: 0; bottom: 0; width: 200px; z-index: 1; background: #f2f2f2;"></div>
  8. <script type="text/javascript">
  9. var networkFilterVisible = 0;
  10. $(document).ready(function() {
  11. $(".project_rail").each(function(){
  12. $(".tags", this).addClass("design_template").prepend("Design template:<br/>");
  13. });
  14.  
  15. if ($(".view_tag_info b").length != 0) {
  16. $(".show_network_menu").before("Filtered by ").text($(".view_tag_info b").text());
  17. $(".view_all_tag").show();
  18. }
  19.  
  20. if ($(".entry").length == 0 && $(".search_results").length == 0){
  21. $("#content_container").prepend('<div style="margin-left: 430px; border-top: 0; padding-top: 0;" class="entry"><br><br>No sites with this design template have been Showcased yet. <a href="http://cargocollective.com/favorites">View all</a></div>');
  22. }
  23.  
  24. $(".tag_nav_menu #col_1 a:first").addClass("top_left");
  25. $(".tag_nav_menu #col_2 a:first").addClass("top_right");
  26. $(".tag_nav_menu #col_2 a:last").addClass("bottom_right");
  27. $(".tag_nav_menu #col_1 a:last").addClass("bottom_left");
  28.  
  29. $(".show_network_menu").click(function() {
  30. networkFilterVisible = 1;
  31. $(".tag_nav_menu").toggle();
  32. });
  33.  
  34. $(document).click(function() {
  35. if(networkFilterVisible == 1){
  36. networkFilterVisible = 0;
  37. } else {
  38. $(".tag_nav_menu").hide();
  39. }
  40. });
  41.  
  42. $(document).click(function() {
  43. if(networkFilterVisible == 1){
  44. networkFilterVisible = 0;
  45. $(".tag_nav_menu").hide();
  46. $(".network_down").text("");
  47. $(".show_network_menu").removeClass("active");
  48. } else {
  49.  
  50. }
  51. });
  52. });
  53. $(document).bind("paginationComplete", function(e, dataObj) {
  54. $(".project_rail").each(function(){
  55. if(!$(".tags", this).hasClass("design_template")) {
  56. $(".tags", this).addClass("design_template").prepend("Design template:<br/>");
  57. }
  58. });
  59. });


Pokombinuj sam, możesz się na tym opierać tongue.gif Nikt Ci tego przecież za darmo nie napisze bo frajerów nie ma biggrin.gif
motyl-pl
Nie chce nic za darmo tylko o wskazanie ścieżki, kod analizowałem tam nie tylko w pliku głownym tylko też załączonymi javascriptami ale nic mi to nie dało dlatego tu pisze.
Qss
coś na podstawie tego
http://jsfiddle.net/4TfTF/232/

głównie chodzi o to że jeśli zescrollujesz body lub html na tyle ile wynosi offsetTop tego napisu zaczynasz przytrzymywać go w position:fixed.
Jeśli osiągnie pewną wartość to wyłączasz position:fixed

ale position:fixed nie polecam bo dużo zależy od rozdzielczości preferuje powiększać np margin-top
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.