hlmod.hu

Magyar Half-Life Mód közösség!
Pontos idő: 2024.03.29. 03:01



Jelenlévő felhasználók

Jelenleg 209 felhasználó van jelen :: 1 regisztrált, 0 rejtett és 208 vendég

A legtöbb felhasználó (1565 fő) 2020.11.21. 11:26-kor tartózkodott itt.

Regisztrált felhasználók: Google [Bot] az elmúlt 5 percben aktív felhasználók alapján

Utoljára aktív
Ahhoz hogy lásd ki volt utoljára aktív, be kell jelentkezned.



Az oldal teljeskörű
használatához regisztrálj.

Regisztráció

Kereső


Új téma nyitása  Hozzászólás a témához  [ 4 hozzászólás ] 
Szerző Üzenet
 Hozzászólás témája: link in HTML
HozzászólásElküldve: 2018.08.27. 09:35 
Offline
GFX-Designer
Avatar

Csatlakozott: 2015.03.12. 15:06
Hozzászólások: 624
Megköszönt másnak: 199 alkalommal
Megköszönték neki: 78 alkalommal
Helló!
Szükségem lenne a következőre:
Adott egy szövegrész, és egy egyszerű html gomb. Mikor a gombra kattintok, a szövegrészben egy megadott bekezdésre gördül az ablak. Láttam már ilyet egy oldalon, de nem találom, hogy azzal mutassam be, de egy ilyen icon jelzi:
Kép

EDIT:
Egy ilyenre lenne szükségem, ami ebben is látható: https://github.com/twbs/bootstrap#table-of-contents

_________________
„Nem azért felejtünk el játszani, mert megöregszünk, hanem attól öregszünk meg, hogy elfelejtünk játszani.”

-MAXHACKED Website-
-HERViD Website-
► Spoiler mutatása


Hozzászólás jelentése
Vissza a tetejére
   
 Hozzászólás témája: Re: link in HTML
HozzászólásElküldve: 2018.08.27. 09:52 
Offline
Jómunkásember

Csatlakozott: 2015.11.29. 17:07
Hozzászólások: 375
Megköszönt másnak: 76 alkalommal
Megköszönték neki: 53 alkalommal
*GrafitY* írta:
Helló!
Szükségem lenne a következőre:
Adott egy szövegrész, és egy egyszerű html gomb. Mikor a gombra kattintok, a szövegrészben egy megadott bekezdésre gördül az ablak. Láttam már ilyet egy oldalon, de nem találom, hogy azzal mutassam be, de egy ilyen icon jelzi:
Kép

EDIT:
Egy ilyenre lenne szükségem, ami ebben is látható: https://github.com/twbs/bootstrap#table-of-contents

Hi.

Az első sorban az <i class=" az lesz az ikon, ami valószínűleg fontawesome css-ben szerepel. (A nevét sajnos nem tudom, de ha keresgélsz itt, akkor megtalálod)
  1. <a href="#valami"><i class="fa"></i>Szöveghez</a>
  2.  
  3. <div>
  4.   <p>
  5.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum accumsan felis. Ut semper turpis eget vehicula sagittis. Nam aliquet tincidunt nibh sit amet suscipit. Cras mollis nulla non enim scelerisque vulputate. Suspendisse hendrerit metus ac massa tincidunt, in elementum est vestibulum. Nunc egestas sed ligula et ultrices. Proin ante elit, pretium nec tincidunt eget, facilisis et felis.
  6.     <span id="valami"></span>
  7.      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum accumsan felis. Ut semper turpis eget vehicula sagittis. Nam aliquet tincidunt nibh sit amet suscipit. Cras mollis nulla non enim scelerisque vulputate. Suspendisse hendrerit metus ac massa tincidunt, in elementum est vestibulum. Nunc egestas sed ligula et ultrices. Proin ante elit, pretium nec tincidunt eget, facilisis et felis.
  8.   </p>
  9. </div>


A hozzászólást 1 alkalommal szerkesztették, utoljára Krisznitro 2018.08.27. 10:06-kor.

Hozzászólás jelentése
Vissza a tetejére
   
 Hozzászólás témája: Re: link in HTML
HozzászólásElküldve: 2018.08.27. 10:05 
Offline
GFX-Designer
Avatar

Csatlakozott: 2015.03.12. 15:06
Hozzászólások: 624
Megköszönt másnak: 199 alkalommal
Megköszönték neki: 78 alkalommal
Igen, valami ilyesmi, csak picit csinosabbra gondoltam hogy az ikon is meg jelenik, mint ami itt látható:
https://github.com/twbs/bootstrap#table-of-contents

_________________
„Nem azért felejtünk el játszani, mert megöregszünk, hanem attól öregszünk meg, hogy elfelejtünk játszani.”

-MAXHACKED Website-
-HERViD Website-
► Spoiler mutatása


Hozzászólás jelentése
Vissza a tetejére
   
 Hozzászólás témája: Re: link in HTML
HozzászólásElküldve: 2018.08.27. 10:07 
Offline
Jómunkásember

Csatlakozott: 2015.11.29. 17:07
Hozzászólások: 375
Megköszönt másnak: 76 alkalommal
Megköszönték neki: 53 alkalommal
*GrafitY* írta:
Igen, valami ilyesmi, csak picit csinosabbra gondoltam hogy az ikon is meg jelenik, mint ami itt látható:
https://github.com/twbs/bootstrap#table-of-contents

Első hozzászólásomat szerkesztettem :)

EDIT5:
jQuery-vel oldottam meg. Amikor a h1-re húzod a kurzort, akkor megjelenik az a kis ikon, amely a divre hivatkozik.
Ikon méretet CSS-ben tudod módosítani.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>Page Title</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <style>
  9.         .icon {
  10.             height:12px;
  11.             width: 12px;
  12.             opacity: 0;
  13.         }
  14.         .hover {
  15.             opacity: 1;
  16.         }
  17.        
  18.     </style>
  19.    
  20.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  21. </head>
  22. <body>
  23.     <div class="container-fluid">
  24.         <div class="break" style="height:10vh;"></div>
  25.     <div id="elso">
  26.         <h1><a href="#elso"><img src="icon.png" class="icon" /></a> Első</h1>
  27.         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime eius eum architecto dolorem ipsam rem, vero, cupiditate ipsum praesentium totam sint exercitationem hic libero expedita temporibus est nisi quasi odit.</p>
  28.     </div>
  29.     <div class="break" style="height:50vh;"></div>
  30.     <div id="masodik">
  31.         <h1><a href="#masodik"><img src="icon.png" class="icon" /></a> Második</h1>
  32.         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime eius eum architecto dolorem ipsam rem, vero, cupiditate ipsum praesentium totam sint exercitationem hic libero expedita temporibus est nisi quasi odit.</p>
  33.     </div>
  34.     <div class="break" style="height:100vh;"></div>
  35. </div>
  36. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  37. <script>
  38.     $('h1').hover(
  39.         function() {
  40.             $('.icon').addClass( "hover" );
  41.         },
  42.         function() {
  43.             $('.icon').removeClass( "hover" );
  44.         }
  45.     );
  46. </script>
  47. </html>

Ők köszönték meg Krisznitro nek ezt a hozzászólást: *GrafitY* (2018.08.27. 11:12)
  Népszerűség: 2.27%


Hozzászólás jelentése
Vissza a tetejére
   
Hozzászólások megjelenítése:  Rendezés  
Új téma nyitása  Hozzászólás a témához  [ 4 hozzászólás ] 


Ki van itt

Jelenlévő fórumozók: nincs regisztrált felhasználó valamint 2 vendég


Nyithatsz új témákat ebben a fórumban.
Válaszolhatsz egy témára ebben a fórumban.
Nem szerkesztheted a hozzászólásaidat ebben a fórumban.
Nem törölheted a hozzászólásaidat ebben a fórumban.
Nem küldhetsz csatolmányokat ebben a fórumban.

Keresés:
Ugrás:  
Powered by phpBB® Forum Software © phpBB Limited
Magyar fordítás © Magyar phpBB Közösség
Portal: Kiss Portal Extension © Michael O'Toole