Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]Pomoc w zrobieniu efektu na stronie za pomocą jQuery
michuwsh
post
Post #1





Grupa: Zarejestrowani
Postów: 51
Pomógł: 0
Dołączył: 1.03.2016

Ostrzeżenie: (0%)
-----

Witam koledzy i koleżanki,

Potrzebuje waszej pomocy przeszukałem dziś całe internety i nic nie znalazłem ciekawego. A mianowicie chodzi mi o przygotowanie efektu. Po kliknięciu w guzik rozwiń heading h1 ma przesunąć się w górę a pod nim ma być pokazany akapit który jest domyślnie ukryty.

Wygląda to tak w kodzie :
Kod
<div class="content">

<h1>Jakiś tam nagłówek </h1>
<a href="#">rozwin</a>
<p style="display: none;"> jakies tam lore ipsum itp .... </p>


</div>


Fajnie było by tez zmienić tekst rozwiń po rozwinięciu na zwiń ale to już szczegół.

Licze na waszą pomoc.

Ten post edytował michuwsh 25.10.2017, 22:10:16
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
viking
post
Post #2





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

Naprawdę nic nie znalazłeś? No patrz.
https://developer.mozilla.org/en-US/docs/We..._CSS_animations
http://api.jquery.com/slidetoggle/


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
michuwsh
post
Post #3





Grupa: Zarejestrowani
Postów: 51
Pomógł: 0
Dołączył: 1.03.2016

Ostrzeżenie: (0%)
-----

Witam, utworzyłem coś takiego, ale mam problem bo gdy kliknę nagłówek idzie do góry ale jak po raz drugi kliknę na przycisk to nagłówek nie wraca do pierwotnego miejsca. Po za tym nadal nie wiem jak zmienic przycisk rozwin po kliknięciu na zwin. Domyślam się że trzeba tu jakiegos if napisać ale kompletnie nie wiem jak za to się zabrać. Pomocy.
Kod
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
    $("#paragraf").hide();
    $("#rozwin").click(function(){
    
        $("#paragraf").slideToggle("slow");
        $("#heading").css("margin-top","50px");
    });
});
</script>

<style>
h1 {
margin-top: 150px;
text-align: center;
}
</style>
</head>
<body>


<h1 id="heading">tytuł jakiś</h1>
<a id="rozwin">rozwin</a>
<p id="paragraf" >Jest dostępnych wiele różnych wersji Lorem Ipsum, ale większość zmieniła się pod wpływem dodanego humoru czy przypadkowych słów, które nawet w najmniejszym stopniu nie przypominają istniejących. Jeśli masz zamiar użyć fragmentu Lorem Ipsum, lepiej mieć pewność, że nie ma niczego „dziwnego” w środku tekstu. Wszystkie Internetowe generatory Lorem Ipsum mają tendencje do kopiowania już istniejących bloków, co czyni nasz pierwszym prawdziwym generatorem w Internecie. Używamy zawierającego ponad 200 łacińskich słów słownika, w kontekście wielu znanych sentencji, by wygenerować tekst wyglądający odpowiednio. To wszystko czyni „nasz” Lorem Ipsum wolnym od powtórzeń, humorystycznych wstawek czy niecharakterystycznych słów.</p>

</body>
</html>
Go to the top of the page
+Quote Post
viking
post
Post #4





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <script>
  2. $(function(){
  3.     $("#paragraf").hide();
  4.     var show = $("#paragraf").is(':visible');
  5.     $(".toggle").on('click', function() {
  6.         show = !show;
  7.         var text = show ? 'ukryj' : 'pokaż';
  8.         show ? $("#heading").addClass('show') : $("#heading").removeClass('show');;
  9.         $(this).text(text);
  10.         $("#paragraf").slideToggle("slow");
  11.  
  12.     });
  13. });
  14. </script>
  15.  
  16. <style>
  17. h1 {
  18. margin-top: 150px;
  19. text-align: center;
  20. }
  21. h1.show {
  22. margin-top: 50px;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27.  
  28.  
  29. <h1 id="heading">tytuł jakiś</h1>
  30. <a id="rozwin" class="toggle">rozwin</a>
[HTML] pobierz, plaintext


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
michuwsh
post
Post #5





Grupa: Zarejestrowani
Postów: 51
Pomógł: 0
Dołączył: 1.03.2016

Ostrzeżenie: (0%)
-----

Dzięki za gotowy kod smile.gif Jednak nie do końca jeszcze on działa kiedy zwijam akapit nagłówek h1 nie wraca do pierwotnej wysokości 150px tylko pozostaje na 50px. Chyba trzeba było by dodać zdarzenie not visible lub coś takiego .
Go to the top of the page
+Quote Post
viking
post
Post #6





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

To ciekawe bo u mnie działa. Zresztą jakieś pierdoły byś sam mógł poszukać.


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
michuwsh
post
Post #7





Grupa: Zarejestrowani
Postów: 51
Pomógł: 0
Dołączył: 1.03.2016

Ostrzeżenie: (0%)
-----

Tak masz racje przepisywałem kod a nie kopiowałem zapomniałem dodać do znaczników <style> tego : h1.show {
margin-top: 50px;
}

Dziękuje bardzo za pomoc smile.gif
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 14:38
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn