0
divを別のブログに執筆するつもりですが、動作しません。私はそれを水平にだけ中心に置くことができます。しかし、垂直には機能しません。私は多くの方法でそれをやろうとしましたが、まだ働いていません。私はmyDIVがZPのdivdivを縦横に中心合わせする
here is the whole code :
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/*styling here*/
#myDIV {
border: 1px solid black;
margin-bottom: 10px;
width: 500px;
height: 300px;
box-sizing: border-box;
border: solid #000 2px;
background-color: #FF9966;
text-align: center;
resize: both;
overflow: auto;
margin: 0 auto;
position: relative;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.myDIV1 {
background-color:#33FF99;
}
.avatar {
width : 20px;
height : 20px;
}
.ZP {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
overflow: hidden;
background-color: #ccc;
}
.ZE {
position: fixed;
width: 500px;
height: 100px;
background-color: #73AD81;
overflow: hidden;
border-radius: 20px 20px;
border: 2px solid #965D31;
}
.ZE1 {
display: block;
top: 0;
left: calc(50% - 250px);
transform: rotate(180deg);
}
.ZE2 {
top: 0;
left: calc(85% - 250px);
transform: rotate(180deg);
}
.ZE3 {
top: calc(50% - 50px);
left: calc(100% - 300px);
transform: rotate(270deg);
}
.ZE4 {
top: calc(100% - 100px);
left: calc(85% - 250px);
transform: rotate(0deg);
}
.ZE5 {
top: calc(100% - 100px);
left: calc(50% - 250px);
transform: rotate(0deg);
}
.ZE6 {
top: calc(100% - 100px);
left: calc(15% - 250px);
transform: rotate(0deg);
}
.ZE7 {
top: calc(50% - 50px);
left: -200px;
transform: rotate(90deg);
}
.ZE8 {
top: 0;
left: calc(15% - 250px);
transform: rotate(180deg);
}
</style>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--The above library(/socket.io/socket.io.js) will be generated by socket.io module of server -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="ZonePartage.js"></script>
<script src="ZoneCollaborative.js"></script>
<script src="Constante.js"></script>
<script src="ZoneEchange.js"></script>
<script src="Artifact.js"></script>
<script src="Serveur.js"></script>
<script src="User.js"></script>
</head>
<body id = view>
<script>
$(function() {
$("#myDIV").draggable();
});
</script>
<div class="content" >
</div>
<script type="text/javascript">
var socket = io.connect('/');
socket.on('connection', function() {
alert('Le serveur de ZP a un message pour vous : ');
})
//you can replace localhost with your public domain name too!!
socket.on("message",function(artefact){
/*
When server sends data to the client it will trigger "message" event on the client side , by
using socket.on("message") , one cna listen for the ,message event and associate a callback to
be executed . The Callback function gets the dat sent from the server
*/
console.log("Message from the server arrived")
artefact = JSON.parse(artefact);
console.log(artefact); /*converting the data into JS object */
$('#myDIV').append('<div > <h1>'+artefact.title+' </h1> <h2> '+artefact.message+'</h2> </div>'); /*appending the data on the page using Jquery */
});
socket.on("image",function(image){
/*
When server sends data to the client it will trigger "message" event on the client side , by
using socket.on("message") , one cna listen for the ,message event and associate a callback to
be executed . The Callback function gets the dat sent from the server
*/
console.log("Message from the server arrived")
image = JSON.parse(image);
console.log(message); /*converting the data into JS object */
$('#yas').append('<div >'+image.data+'</div>'); /*appending the data on the page using Jquery */
});
//functions
//function appelé qd le drag commence
function dragIt(theEvent) {
//dire au navigateur ce qu'il faut glisser
theEvent.dataTransfer.setData("Text", theEvent.target.id);
}
//fonction appelée lorsque l'élément drops
function dropIt(theEvent) {
//Obtenir une référence à l'élément dragged
var theData = theEvent.dataTransfer.getData("Text");
//Obtenir l'élément
var theDraggedElement = document.getElementById(theData);
//Ajouter à l' élément de drop
theEvent.target.appendChild(theDraggedElement);
//Charger le navigateur pour permettre le drop
theEvent.preventDefault();
}
</script>
<!--elements de la page-->
<div class="pics">
<div class="ZP" style="text-align: center;" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<div id="myDIV" class="ui-widget-content draggable" draggable="true" ondragstart="dragIt(event);" id="pic1">
ARTEFACT
</div>
</div>
<div class="ZE ZE1" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img src="flower.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="ppic1" />
<img id="avatar"; src="avatar1.png" style=" width: 40px; height: 40px" />
</div>
<span
style="left: 527.5px; top: 0px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(180deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE2" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img id="avatar"; src="avatar2.png" style=" width: 40px; height: 40px" />
</div>
<span
style="left: 1176.75px; top: 0px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(180deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE3" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img id="avatar"; src="avatar3.png" style=" width: 40px; height: 40px" />
</div>
<span
style="left: 1405px; top: 392.5px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(270deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE4" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img id="avatar"; src="avatar4.png" style=" width: 40px; height: 40px" />
</div>
<span
style="left: 1176.75px; top: 785px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(0deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE5" id=momo ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img id="avatar"; src="avatar5.png" style=" width: 40px; height: 40px" />
</div>
<span
style="left: 527.5px; top: 785px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(0deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE6" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img id="avatar"; src="avatar6.png" style=" width: 40px; height: 40px" />
</div>
<span
style="left: -121.75px; top: 785px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(0deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE7" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img id="avatar"; src="avatar7.png" style=" width: 40px; height: 40px" />
</div>
<span
style="left: -350px; top: 392.5px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(90deg); opacity: 0;"
class="back"></span>
<div class="ZE ZE8" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img id="avatar"; src="avatar8.png" style=" width: 40px; height: 40px" />
</div>
<span
style="left: -121.75px; top: 0px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(180deg); opacity: 0;"
class="back"></span>
</div>
</body>
</html>`
なぜないが、変換は、時間 – Vincent
で、一部のブラウザと互換性のCSS3プロパティで、そうではありませんはい、しかし、まだIE 8と互換性がありません http://caniuse.com/#search=transform – Vincent
あなたはそうです、私は答えて警告します...人々の0.77％は痛みですウェブで... – SteeveDroz