Détecter quand un DIV est complétement à gauche de son div parent

Version imprimable

25/10/2019, 15h17
amateurprg

Détecter quand un DIV est complétement à gauche de son div parent

Salut ;)

Comment peut-on connaitre le left et le width d'un div dont ces deux valeurs sont en % ?

Car à l'intérieur de ce div j'ai un autre div qui change de position vers la gauche, et je voudrais détecter quand il sort du cadre de son DIV parent.

Peut-être que je dois m'y prendre autrement pour détecter la sortie du div interne ?
Pour le moment j'utilise la position X (left) du div interne que je teste si elle est inférieure à "-1000" (si je met moins ça me plie le div interne qui a une certaine largeur fixe au départ) mais en comparant à "-1000" ça met trop de temps pour que le div interne reparte d'un coup à sa position de départ (à droite, caché).
25/10/2019, 16h14
SpaceFrog

Code:

getComputedStyle()

Ouais;
A l'ancienne, je ferais ça (mais j'ai pas tout compris de tes paramètres et pourcentages...)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 
 
<title>...</title> 
<head>
 
<style type="text/css">
</style>
 
</head>
<body>
 
 
<div id="cadre">
<div id="cadre2">mobile</div>
</div>
 
<script type="text/javascript">
 
window.addEventListener("load",()=>{
 
        let lft=100;
        const c=document.getElementById("cadre");
        const c2=document.getElementById("cadre2");
        c.style.cssText="position:relative;left:10%;width:20%;background:yellow;overflow:hidden;";
        c2.style.cssText="text-align:center;font-size:20px;font-weight:bold;position:relative;left:100%;background:red;width:30%";
        setInterval(()=>{
                if(lft>-parseInt(c2.style.width)){
                        lft-=1;
                }
                else{
                        lft=100;
                };
                c2.style.left=lft+"%";},
                50)},
                false)
        
</script>
</body>
 
</body>
</html>

25/10/2019, 16h45
amateurprg

Merci beaucoup à tous les deux pour votre aide !

je m'en vais tester tout ça ;)
25/10/2019, 17h35
amateurprg
Super, le plus simple pour moi a été d'utiliser la fonction "getComputedStyle()"
ça, plus une fonction pour supprimer "px" du résultat et ça m'a fait 6 lignes de code ;)

J'ai étudié aussi le code javatwister pour apprendre ;)

Merci beaucoup pour votre aide, c'est super l'entraide ;)

je place en résolu !

EDIT : Pour suprimer "px" j'ai utilisé
Code:

1 2 var depart=getTheStyle('divparent'); depart=depart.replace("px","");
Voilà, pour info.