0
Başka bir tanesine bir div görüntülemek için yazıyorum, ama çalışmıyor. Sadece yatay olarak merkezleyebilirim. Ama dikey olarak çalışmıyor. Bunu pek çok yönden yapmaya çalıştım ama henüz çalışmıyor. Ben myDIVbir dikey ve yatay olarak başka bir div merkezi
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>`
Neden olmasın, ama zaman – Vincent
de, bazı tarayıcılar ile bu kadar uyumlu olmayan bir CSS3 tesistir dönüşümü evet, ama hala IE 8 ve daha önceki ile uyumlu değil http://caniuse.com/#search=transform – Vincent
Haklısınız, cevabı bu konuda uyarırım ... o insanların% 0.77'si acıdır internette ... – SteeveDroz