1
Я разрабатываю веб-приложение, которое позволяет добавлять динамику div s, которые изменяются по размеру и перетаскиваются jQuery в контейнер div с черным фоном.Изменение размера шрифта при изменении размера div
Вот код этого приложения:
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height : 768px;
width : 432px;
background-color : #000000;
}
.menu {
border:1px solid black;
padding-left:15px;
padding-right:15px;
padding-top:2px;
padding-bottom:2px;
float:left;
text-align : center;
}
h3, li, ul{
text-align : left;
}
.encadrer {
border: 1px solid white;
height : 120px;
position:absolute !important;
}
.centrerTitre{
position: absolute;
top: 0;
left: 0;
right: 0;
color : white;
margin : auto;
text-align : center;
padding-top : 7px;
}
.centrerPara{
font-size: 16;
color : white;
margin : auto;
text-align : center;
padding-left : 7px;
padding-right : 7px;
}
.inner {
display: inline-block;
vertical-align: middle;
text-align:center;
width:100%;
}
.encadrer:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
/*----- Resizable ------*/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-nw { cursor: nw-resize; height: 7px; width: 7px; top: -5px; left: -5px; }
.ui-resizable-se { cursor: se-resize; height: 7px; width: 7px; right: -5px; bottom: -5px; }
.ui-resizable-ne { cursor: ne-resize; height: 7px; width: 7px; top: -5px; right: -5px; }
.ui-resizable-sw { cursor: sw-resize; height: 7px; width: 7px; left: -5px; bottom: -5px; }
/*----------------------*/<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Affichage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<body>
<div id="menu" class="menu">
<h3>Taille de l'écran</h3>
<select id='selector'>
<option value="1920x1080">1920x1080</option>
</select>
</br></br>
<table>
<tr>
<td><input type="radio" id="portrait" name="orientation" value="portrait" checked="checked">Portrait</td>
<td><input type="radio" id="paysage" name="orientation" value="paysage">Paysage</td>
</tr>
</table>
</br>
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
<script type="text/javascript">
var bg = document.getElementById('bg');
bg.className = "centrer";
var ajoutImg = document.getElementById('ajoutImage');
var initDiagonal;
var initFontSize;
var rad = document.getElementsByName('orientation');
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = tailleEcran;
}
document.getElementById("selector").addEventListener("change", tailleEcran, false);
ajoutImg.onclick = function() {
//var name = prompt("Texte de l'image :");
var container = document.createElement("div");
container.className = 'encadrer';
var inner = document.createElement("div");
inner.className = 'inner';
var titre = document.createElement("p");
var para = document.createElement("p");
titre.textContent = "Titre";
titre.className = 'centrerTitre';
inner.appendChild(titre);
para.textContent = prompt("Texte de l'image :");;
para.className = 'centrerPara';
inner.appendChild(para);
container.appendChild(inner);
//var container = $('<div class="encadrer"><div class="inner"><p class="centrerTitre">Titre</p><p class="centrerPara">' + name + '</p></div></div>');
bg.appendChild(container);
$(container)
.draggable({containment:"parent"})
.resizable({
containment:"parent",
handles: "all"
});
};
function tailleEcran() {
switch(document.getElementById("selector").value){
case '1920x1080' :
if(document.getElementById("portrait").checked == true){
bg.style.height = '768px';
bg.style.width = '432px';
}else{
bg.style.height = '432px';
bg.style.width = '768px';
}
break;
}
}
</script>
</body>
</html>Я пытаюсь сделать размер шрифта содержания динамического div изменения размера при изменении размера div, как вы можно видеть на этом посту:
Can text be resizable using jquery-ui?
Я поместил все узлы в переменные, но я не смог добавить эту функцию в свое приложение.
Кто-то знает, как я могу это сделать?
Спасибо за внимание,
С уважением,
Maxime OZENNE.
Я написал плагин jquery, чтобы сделать это давным-давно, проверьте его - https://github.com/ozzyogkush/jquery.textAutoSize - не обновлялся в то время, но работал достаточно хорошо, когда писал Это. – Derek
Я проверю его и дам вам отзывы, спасибо :) –
Фактически, глядя на код, он не делает это при изменении размера, но может быть легко разветвлен и обновлен, чтобы работать так. – Derek