| Autor | Zpráva | ||
|---|---|---|---|
| Anonymni Profil * |
#1 · Zasláno: 16. 5. 2018, 09:48:16
Tvořím takový plánek hospody, kde jsem chtěl udělat popisky jednotlivých sekcí přes hover pomocí javascriptu. Vše funguje dobře do té doby kdy se web přepne na mobilní verzi a změní se tam pozicování, které mi popisek uplně ustřelí do stran.
Zkusil jsem vytvořit jednoduchý příklad codepen.io/anon/pen/xjaeLM Problém mám s částí $(document).mousemove(function(e) {
$('#info-box').css('top', e.pageY - $('#info-box').height() - 30);
$('#info-box').css('left',e.pageX - ($('#info-box').width()) / 2);
}).mouseover();Myslel jsem si, že bude stačit přepsat e.pageY a e.pageX na $('#obrazek'), ale bohužel to nefunguje podle mého očekávání a info box se potom přilepí staticky na jedno místo. Chtěl jsem dosáhnout toho, aby se souřadnice pro infobox nevypočítávala od strany celé stránky, ale od strany SVG, což jsem si myslel že by mělo pomoct. Jde to nějak ošetřit, aby to nebylo na mobilu rozhozené? |
||
| Kajman Profil |
#2 · Zasláno: 16. 5. 2018, 12:31:24
Vlastnosti top a left se aplikují vůči nejbližšímu předku, který má position jinou než static.
Nejjednodušší bude dát #info-box do body. Nebo můžete prvku, kterému občas měníte position na absolute, dát výchozí position relative. Pak stačí v tomto výpočtu odečíst jeho offsety. btw: A to máte k mobilu připojenou myš? |
||
| Anonymni Profil * |
#3 · Zasláno: 17. 5. 2018, 15:53:56
Díky za tip, ale bohužel to takto nemůžu udělat. Bude to na Wordpressu a nemám tam přístup to takto moc editovat.
Příklad jsem ještě trochu přepsal codepen.io/anon/pen/GdwZwM Jde to nějak udělat, aby se souřadnice začali psát od šedého rámečku .obal a ne od stran stránky? |
||
| Kajman Profil |
#4 · Zasláno: 17. 5. 2018, 16:10:58
Odečtete offset prvku .obal.
|
||
| Anonymni Profil * |
#5 · Zasláno: 17. 5. 2018, 16:20:56
Už mě to taky tak napadlo, bohužel na to upnutí to takto snadno nefunguje, pozice je úplně rozhozená. viz codepen.io/anon/pen/GdwZwM
|
||
| Kajman Profil |
#6 · Zasláno: 17. 5. 2018, 21:47:49
Stále nemáte výchozí styl umožňující pozicování potomků dle obalu:
.obal {position:relative}$(document).mousemove(function(event) {
$('#info-box').css('top', (event.pageY - $(".obal").offset().top) - $('#info-box').height() - 30 );
$('#info-box').css('left',(event.pageX - $(".obal").offset().left) - ($('#info-box').width()) / 2 );
}).mouseover();Pokud tam bude víc .obalů, nebo opravdu nemůžete přidat ten výchozí styl, tak offset nejbližšího nestatického předka by mohl být něco jako var offset=$('#info-box').parents().filter(function(){return this.style.position!='static'}).first().offset()||{left:0,top:0};Ale stále mi přijde nejjednodušší dát #info-box jednou javascriptem na konec body, abyste nemusel ten offset řešit. |
||
|
Časová prodleva: 5 let
|
|||
0