Afficher et masquer des éléments en JS ?

Signaler
-
Messages postés
32070
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 avril 2021
 -
Salut,
J'entreprends actuellement un projet, qui est de recréér macOS Big Sur en ligne.

Pouvez-vous m'aider ? Je n'arrive pas à afficher et fermer les fenêtres...

Merci d'avance !

Pour info, voici mon code : 
<!DOCTYPE html>
	<head>
		<link rel="shortcut icon" type="image/png" href="favicon.png"/>
		<title>Online Big Sur</title>
		<link rel="icon" type="image/png" href="favicon.png" />
		<script type="text/javascript" src="date.js"></script>

<!--css-->

	<style>
		@font-face {

		     font-family: 'SF UI Display Ultralight';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Ultralight'), url('sf-ui-display-ultralight-58646b19bf205.woff') format('woff');

		     }
    

    
		@font-face {
		     font-family: 'SF UI Display Thin';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Thin'), url('sf-ui-display-thin-58646e9b26e8b.woff') format('woff');
		     }
    

    @font-face {
    font-family: 'SF UI Display Light';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Light'), url('sf-ui-display-light-58646b33e0551.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Medium';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Medium'), url('sf-ui-display-medium-58646be638f96.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Semibold'), url('sf-ui-display-semibold-58646eddcae92.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Bold';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Bold'), url('sf-ui-display-bold-58646a511e3d9.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Heavy'), url('sf-ui-display-heavy-586470160b9e5.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Black';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Black'), url('sf-ui-display-black-58646a6b80d5a.woff') format('woff');
    }


			body {
			background-color: white;
			font-family: "SF UI Display Regular", "Arial", "sans-serif";
			color: white;
			background-image: url(wallpaper.jpg);
			background-attachment:fixed;
			cursor: url('cursor.png');
			overflow: hidden;
			padding: 0px;
			margin: 0px;
			}
			.taskbar {
			width:300px;
			height:60px;
			font-family:"SF UI Display";
			justify-self: bottom;
			margin: 10px;
			border-radius: 16px;
			background-color: #FFFFFFCF;
			}
			.center {
				position: fixed;
				display: flex;
				place-items: center;
				bottom: 0;
				width: 100%;
				justify-content: center;
			}
			.menu {
				text-shadow: 0px 3px 3px #00000055;
				background-color: #ADE5FF66;
				top: 0;
				justify-self:top;
				font-family: "SF UI Display Bold";
			}
			#draggable {
				width: 800px;
				height: 200px;
				background-color: white;
				border-radius: 8px;
			}
  			#draggable p {
				cursor: move; }
			iframe {
				border: 0px white;
				border-radius: 8px;
			}
			.time-indications {
				float: right;
			}
			</style>
		</head>

<!--html-->

	<html>
	<body>
		<div class="menu"><img src="blink.png" height=1px width=30px>Finder<img src="blink.png" height=1px width=30px>File<img src="blink.png" height=1px width=30px>Edit<img src="blink.png" height=1px width=30px>View<img src="blink.png" height=1px width=30px>Go<img src="blink.png" height=1px width=30px>Help<div class="time-indications">Mardi 19 novembre<img src="blink.png" height=1px width=15px>09:41</div></div>
		<center><div class="center"><div class="taskbar"><img src="calculator.png" height=60px><img src="settings.png" height=60px><img src="calender.png" height="60px"><a href="notes.html" onClick="openWin(this.href);return false"><img src="notes.png" height="60px"></a><img src="safari.png" height="60px"></div></div></center>
		<div id="draggable" class="ui-widget-content">
			<p class="ui-widget-header"><iframe src="notes.html" width=800px height=180px></iframe></p>
		  </div>
	</body> 
</html>

<!--javascript-->

<script type="text/javascript">
	function openWin(url){
		document.getElementById(draggable).style.display = block;
	}
}
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>

  <script>
  $( function(){
	$( "#draggable" ).draggable({ cancel: "p.ui-widget-header" });
    $( "div, p" ).disableSelection();
  } );
</script>

1 réponse

Réponse 1 / 1
Messages postés
32070
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 avril 2021
 3 395
Bonjour
Tu as très certainement des erreurs qui sont signalés dans la console de ton navigateur.
rien que la première ligne de code javascript, il manque des côtes autour de l'id.
De plus, merci de préciser le langage, ici, HTML dans les balises de code afin que l'on ait la coloration syntaxique et la numérotation des lignes de code.
Répondre Posez votre question