Mamy sobie oto kod poniżej. Pytanie: jak zbadać przesunięcie pionowe dziecka w rodzicu, bez znajomości jak wygląda rodzic, tzn.: jak zaimplementowany on jest za pomocą CSS. Tzn. mając dziecko, to można policzyć to przesunięcie, ale za pomocą JavaScript.
<div id="rodzic" style="overflow:auto;width:100px;height:100px;">
<div id="dziecko" style="width:200px;height:200px;">
<span class="link_wewnętrzny">
<span class="'komunikat_ukryty">Oto jest komunikat 1</span>
<a href="https://www.onet.pl">Oto jest link 1</a>
</span>
<span class="link_wewnętrzny">
<span class="'komunikat_ukryty">Oto jest komunikat 2</span>
<a href="https://www.onet.pl">Oto jest link 2</a>
</span>
</div></div>
Jak zmodyfikować poniższy skrypt, aby uwzględniał, co chcemy zrobić, tzn. jak przesuwamy suwak, to komunikat też ma się przesuwać, a nie być na stałym miejscu!
function KomunikatInfo(id,komunikat,left,top,font,animation_name){
var body_wszystkie=document.getElementsByTagName('body');
if(!body_wszystkie){return;}
var body=body_wszystkie[0];
if(!body){return;}
var id_animation=document.getElementById('id_animation_komunikatów');
if(id_animation){body.removeChild(id_animation);}
var div=document.createElement('div');
div.position="absolute";
var left_id=id.offsetLeft;
var top_id=id.offsetTop;
var bodycontent = document.getElementById('bodyContent');
if(!bodycontent){return;}
var leftbodycontent=bodycontent.offsetLeft;
var topbodycontent=bodycontent.offsetTop;
div.style.left=(parseInt(leftbodycontent+left_id+left*font)).toString()+'px';
div.style.top=(parseInt(topbodycontent+top_id+top*font)).toString()+'px';
div.style.position="absolute";
div.style.width="max-content";
div.style.height="max-content";
div.style.fontSize=font+'px';
div.style.fontVariant="normal";
div.style.fontStyle="normal";
div.style.fontWeight="normal";
div.style.lineHeight="1.2em";
div.style.backgroundColor="#ffc";
div.style.border="1px solid #db4";
div.style.padding="4px";
div.style.opacity="0";
div.style.zIndex="-1";
div.style.animationName=animation_name;
div.style.animationDuration="5s";
div.style.animationDelay="0s";
div.id="id_animation_komunikatów";
div.innerHTML=komunikat;
div_element=body.appendChild(div);
var widthbodycontent=bodycontent.offsetWidth;
var id_komunikat_right=left_id+left*font+div.offsetWidth;
var marginesRight=4;
if(widthbodycontent<id_komunikat_right-marginesRight){
var roznica_offsetow=id_komunikat_right-widthbodycontent;
div_element.style.left=(parseInt(leftbodycontent+left_id+left*font-(roznica_offsetow)-marginesRight)).toString()+'px';
}
}
function UsunKomunikat(){
var body_wszystkie=document.getElementsByTagName('body');
if(!body_wszystkie){return;}
var body=body_wszystkie[0];
if(!body){return;}
var id_animation=document.getElementById('id_animation_komunikatów');
if(id_animation){body.removeChild(id_animation);}
}
function WyswietlKomunikat(){
var klasa_link_wewnetrzny=document.getElementsByClassName('link_wewnętrzny');
for (var i=0;i<klasa_link_wewnetrzny.length;i++){
var poszczegolna_klassa=klasa_link_wewnetrzny[i];
var komunikat_ukryty=poszczegolna_klassa.getElementsByClassName('komunikat_ukryty');
if(!komunikat_ukryty){return;}
if(komunikat_ukryty.length==0|| komunikat_ukryty.length>1){return ;}
var jedyny_komunikat_ukryty=komunikat_ukryty[0];
klasa_link_wewnetrzny[i].removeChild(jedyny_komunikat_ukryty);
var komunikat=jedyny_komunikat_ukryty.innerHTML;
var a_tag=poszczegolna_klassa.getElementsByTagName('a');
if(!a_tag){return;}
if(a_tag.length==0|| a_tag.length>1){return ;}
a_tag[0].setAttribute("onMouseOver","KomunikatInfo(this,'"+komunikat+"',0,-2,14,'link_wewnętrzny_info')");
a_tag[0].setAttribute("onMouseOut","UsunKomunikat()");
}
}
$(WyswietlKomunikat);