Autor Zpráva
Anonymni
Profil *
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
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 *
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
Odečtete offset prvku .obal.
Anonymni
Profil *
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
Stále nemáte výchozí styl umožňující pozicování potomků dle obalu:
.obal {position:relative}
a js si zkuste opravit
$(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.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: