Autor | Zpráva | ||
---|---|---|---|
Koukal Profil * |
#1 · Zasláno: 19. 9. 2019, 14:51:56
Mám na stránce plovoucí div s tlačítkama uvnitř
div.floating { float:right;} // výše jsou další fieldsety <fieldset class=green> <legend>Čtvrtá část: Bližší zařazení slovíčka</legend> <Label title='Kam zařadit slovo. Některé položky lze zvýraznit pomocí příslušného tlačítka. Tlačítko slouží na přepínání barev.'>Bližší okruh:</Label> <div class=floating> <input type=button class="highlight1" id="servis" value="Služba" onclick="switchStyle('servis')"> <input type=button value="Tělo" onclick="switchStyle('body')"> <input type=button value="Místo" onclick="switchStyle('lokace')"> <input type=button value="Látka" title="Materiály a oblékání" onclick="switchStyle('materials')"> <input type=button value="Čas" onclick="switchStyle('time')"> <input type=button value="Stavba" onclick="switchStyle('build')"> <input type=button value="City" title="Emoce" onclick="switchStyle('city')"> <input type=button value="Vztahy" title="Komunikace" onclick="switchStyle('komunikace')"> </div> <p> // Níže pokračuje fieldset dlouhým seznamem radioboxů </fieldset> |
||
Kajman Profil |
#2 · Zasláno: 19. 9. 2019, 15:35:37
Pomocí css vlastnosti sticky, to půjde v nových prohlížečích i bez javascriptu...
Živá ukázka |
||
Koukal Profil * |
Tak to mě fungovat nebude protože já mám sice nový FF ale verzi 49.0.2 a XP novější nezvládnou. A podobně chci aby má stránka byla dostupná i pro lidi co používají starší OS nebo "starší" prohlížeč.
V tom FF to funguje, ale Chrome mám 49-0-26. Mohl bys pro mě prosím napsat nebo odkázat na univerzálnější funkci? Vždycky jsem bral ohled na starší uživatele, který moderní systém mít nemusí a právě ti starší lidi v důchodu jsou pro mě klíčoví uživatelé. |
||
Koukal Profil * |
Už jsem našel nějaký kód:
stickyjs.com ale ještě potřebuju vymyslet jak to udělat aby se to aktivovalo jen když je vidět ten správný fieldset Tak to funguje perfektně. |
||
Časová prodleva: 4 dny
|
|||
Koukal Profil * |
#5 · Zasláno: 23. 9. 2019, 07:36:00
sticky je nespolehlivý, začal jsem používat tohle:
/* STICKER BEGIN ! */ var stickyElement = $(".sticky"), stickyClass = "sticky-pin", stickyPos = stickyElement.offset().top, //Distance from the top of the window. stickyHeight; //Create a negative margin to prevent content 'jumps': stickyElement.after('<div class="jumps-prevent"></div>'); function jumpsPrevent() { stickyHeight = stickyElement.innerHeight(); stickyElement.css({"margin-bottom":"-" + stickyHeight + "px"}); stickyElement.next().css({"padding-top": + stickyHeight + "px"}); }; jumpsPrevent(); //Run. //Function trigger: $(window).resize(function(){ jumpsPrevent(); }); //Sticker function: function stickerFn() { var winTop = $(this).scrollTop(); //Check element position: winTop >= stickyPos ? stickyElement.addClass(stickyClass): stickyElement.removeClass(stickyClass) //Boolean class switcher. }; stickerFn(); //Run. //Function trigger: $(window).scroll(function(){ stickerFn(); }); /* STICKER END ! */ Css rules: .sticky { transition: ease .3s; } .sticky-pin { position: fixed; top: 0; } DemoDownload "Awesome Sticky Element Without Content Jumping" Jsem stáhl odtud: www.jqueryscript.net/tags.php?/Sticky |
||
Mlocik97 Profil |
Koukal:
jde to teda ohodne jednoduchšie function anchor() { var shift = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0); if (shift > 100) { $('<link>').appendTo('head').attr({ rel: 'stylesheet', href: 'anchor-style.css' }); } } window.onscroll = anchor; |
||
Kajman Profil |
#7 · Zasláno: 23. 9. 2019, 10:28:08
Mlocik97:
To je teda pěkně nesmyslný kód. |
||
Gray blogger Profil * |
#8 · Zasláno: 23. 9. 2019, 16:44:35
Mlocik97:
Pro mě je důležité že tenhle "Sticker" (jen pracovní pojmenování) je spolehlivý a jede mi dobře. Ten Sticky mi často nefungoval. |
||
Koukal Profil * |
#9 · Zasláno: 24. 9. 2019, 09:57:38
Jsem si nevšiml že jsem přihlášený na dvou různých oknech prohlížeče.
|
||
blaaablaaa Profil |
#10 · Zasláno: 24. 9. 2019, 10:03:09
Mlocik97:
Chvilka scrollování a na stránce máš tunu přidaných css. |
||
Mlocik97 Profil |
#11 · Zasláno: 24. 9. 2019, 11:11:45
blaaablaaa:
jo chyba tam odstranenie aj shift je menej 100 |
||
Koukal Profil * |
#12 · Zasláno: 24. 9. 2019, 12:11:32
Zjistil jsem že ten aktuální "Sticker" co používám na Ipad nejede. Ale i na Iphone se to chová divně, že třeba aktivuje nebo deaktivuje toolbar pozdě. To jsem začal ladit na Chromu.
|
||
Časová prodleva: 5 let
|
0