| 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: 6 let
|
|||
0