18008 sujets

Questions générales et questions de débutants

[Résolu] Problème de css

Bonjour les Smiley ki wi !

J'ai un soucis avec mon css.. J'ai piqué un script JavaScript dans le forum (étant incapable de le faire moi même) pour faire apparaitre une div dans un iframe. ça marche un peu près.. Smiley smile

Ma div qui apparait ne veut pas le faire si dans ces propriétés css je lui mets un || position:absolute; || Si je passe manuellement par une position relative (la div apparait) et que je la remet en absolute elle reste affichée. Smiley confus

Nom d'un Kiwi, mais quel est ce pépin qui reste coincé ? Smiley lol 

function afficher_cacher(id) {
	if(document.getElementById(id).style.visibility=="hidden") {
		document.getElementById(id).style.visibility="visible";
	} else {
		document.getElementById(id).style.visibility="hidden"; 
	}
	return true;
}

#zoom {
	left: 7.5%;
    position: absolute;
    width: 85%;
    z-index: 50;
}



<IFRAME SRC="" NAME="cadre1" WIDTH="100%" HEIGHT="870px" style="border:none;"></IFRAME>


<a class="GreenPink" href="" onclick="javascript:afficher_cacher('zoom');" target="cadre1">Bouton</a>

Modifié par blond1n (01 Aug 2017 - 09:25)
Modérateur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<iframe SRC="https://forum.alsacreations.com" id="zoom" NAME="cadre1" WIDTH="100%" HEIGHT="870px"></IFRAME>


<a class="GreenPink" href="#" target="cadre1">Bouton</a>
</body>
</html>




#zoom{
            position: absolute;
            left: 50%;
            top: 50%;
        }




window.addEventListener('DOMContentLoaded', function(){
        document.querySelector('.GreenPink').addEventListener('click', function(e){
            var $iframe = document.getElementById('zoom'),
                visibilityIfframe = window.getComputedStyle($iframe).getPropertyValue('visibility');

            $iframe.style.visibility = visibilityIfframe === "hidden" ? "visible" : "hidden";

            e.preventDefault();
        });
    });

Modifié par niuxe (02 Aug 2017 - 16:59)
Salut Niuxe,

Merci d'avoir passé du temps pour me donner quelque chose .. Smiley smile Je viens de tester..

- J'ai modifier le css pour voir apparaitre l'élément sur toute la largeur. J'ai rajouté visibilty:hidden, sans l'id="zoom" est affichée.

#zoom {
	position: absolute;
	left:0;
	top: 0;
	visibility: hidden;
	width:100%;
	z-index:11;
}


- Pour le bouton, j'en ai deux, un qui récupère le href="" et qui le charge dans l'iframe, celui n'a pas l'air de fonctionner entièrement. Quand je clique dessus le href charge bien mais l'id.zoom ne passe pas en visibility, malgré la bonne .class "iframeBtn" (modifié dans le JavaScript). Le deuxième bouton qui est une croix qui permet de fermer l'id.zoom marche. Il modifie bien l' id.zoom à chaque clique, hidden=visibility. 


<a class="GreenPink iframeBtn" href="http://www.siteCible/laPageCible.html" target="cadre1">Voir la page</a>

<div id="zoom">
		<div class="BtnFermerIframe iframeBtn">
			<a href="">&#x274C;</a>
		</div>
			<iframe id="" SRC="" NAME="cadre1" WIDTH="100%" HEIGHT="870px" 
style="border:none;"></IFRAME>
	</div>

Modifié par blond1n (03 Aug 2017 - 10:32)
Modérateur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #zoom{
            position: absolute;
            left: 50%;
            top: 50%;
            
            visibility: hidden;
        }
    </style>
</head>
<body>

<iframe src="https://forum.alsacreations.com" id="zoom" name="cadre1" width="100%" height="870px"></iframe>

<a href="#" class="loadFrame">charge contenur</a>

<a class="GreenPink" href="#" target="cadre1">masque/montre</a>

<script>
    var $iframe = document.getElementById('zoom'),
        page_externes = [
            "https://www.alionet.org/content.php"
        ];
    window.addEventListener('DOMContentLoaded', function(){
        document.querySelector('.GreenPink').addEventListener('click', function(e){            
            visibilityIfframe = window.getComputedStyle($iframe).getPropertyValue('visibility');

            $iframe.style.visibility = visibilityIfframe === "hidden" ? "visible" : "hidden";

            e.preventDefault();
        });

        document.querySelector('.loadFrame').addEventListener('click', function(e){
            $iframe.src = page_externes[0];
            e.preventDefault();
        });
    });
</script>
</body>
</html>

Modifié par niuxe (04 Aug 2017 - 14:28)
Merci encore Niuxe pour ce code.. Smiley cligne

N'ayant pas réussi à comprendre comment il marchait, je tripatouille sans vraiment savoir ce que je fais. Sans trouver de solution. . Smiley biggol Je suis bien agacé de ne pas savoir programmer.. Smiley bawling Smiley fache j'ai trouvé il y a 5min un code qui utilise dialog de Jquery pour faire ce que je souhaite.

J'aurai préféré un truc plus cool.. genre une <div> qui apparait entre deux <div> de façon sympas comme sur le site de la loitravail mais bon étant incapable de faire ça je renonce à perdre des journées dessus.. Smiley sweatdrop Comme si j'essayais de jouer du Jimmy hendrix sans savoir me servir d'une guitare.. . Absurde Smiley rolleyes

Désolé de t'avoir fait perdre du temps même si c'est gratuit l'entraide sur les forums.. .
Modifié par blond1n (09 Aug 2017 - 18:59)
Sujet clos
Aller à