PDA

View Full Version : تغییر سایز خودکار متن


Mohsen.
یک شنبه 01 مرداد 1391, 14:40 عصر
سلام دوستان عزیز
من یک دایو دارم که مثلا عرضش 200px هستش.
حالا من میخوام وقتی اندازه متن از عرض دایو بیشتره شد سایز فونتش کوچیک بشه. به طوری که نه ارتفاع و نه عرض دایو زیاد بشه. راهی هست؟
من این تاپیکو در بخش طراحی زدم به نتیجه نرسیدم. حالا خودم یک فکری کردم.
به این صورت که:


$('#li').each(function(){
$(this).ready(function(){
while (($('#li').height())>48)
$(this).css('font-size',=-2)
});
});
اما این کد خط 4 اشتباه هست. نمیدونم چه جوری میتونم فونت رو کم کم کوچیک کنم.
اگه راه حل دیگه ای هم میدونید بگید.
ممنون
Mohsen.
یک شنبه 01 مرداد 1391, 15:28 عصر
دوستان من از این راه هم رفتم اما چون خروجی alert به صورت متن(مثلا 16px) نمیشه ازش مثلا 1 سایز کم کرد.

$('#li-ahdaf').ready(function(){
while (($('#li-ahdaf').height())>24)
{
var m=$('#li-ahdaf').css('font-size');
alert(m);
m=m-1;
$('#li-ahdaf').css('font-size',m)
}
});
blackmak
یک شنبه 01 مرداد 1391, 15:37 عصر
میتونی px و از رشته جدا کنی و بعد رشته رو تبدیل به int کنی.

var m = "100px";
var n = str.replace("px","");
var fsize = parseInt(n);
fsize = fsize - 1;
Variable
یک شنبه 01 مرداد 1391, 16:50 عصر
m=parseInt(m,10)-1

کافیه
Mohsen.
یک شنبه 01 مرداد 1391, 19:04 عصر
واقعا ممنون.
فقط یک مشکل دیگه. اونم اینکه با این کدی که من نوشتم فقط المنت اولی رو چک میکنه. و اندازه بدست آورده رو به همه المنت های مربوطه نسبت میده.

$('.li-ahdaf').each(function(){
$('.li-ahdaf').ready(function(){
while (($('.li-ahdaf').height())>24)
{
var m=$('.li-ahdaf').css('font-size');
m=parseInt(m,10)-1;
console.log(m);
$('.li-ahdaf').css('font-size',m)
}
});
});
Variable
یک شنبه 01 مرداد 1391, 19:59 عصر
$('.li-ahdaf').each(function(){
if($(this).height()>24)
$(this).ready(function(){
$(this).css({fontSize:'-=1'});
});
});


یاا ین کد رو امتحان کن


$('.li-ahdaf').each(function(){
$(this).ready(function(){
if($(this).height()>24)
$(this).css({fontSize:'-=1'});
});
});
Mohsen.
یک شنبه 01 مرداد 1391, 20:27 عصر
نه نشد. خودمم هم راه هایی مثل :nth-child رو امتحان کردم ولی نشد.
Mohsen.
یک شنبه 01 مرداد 1391, 21:39 عصر
دوستان بالاخره پس از چند ساعت درست شد. از همکاریتون متشکر

for(var i=1;i<=10;i++)
{
var tent='#lasted-post li:nth-child('+i+')'
$(tent).addClass('li-ahdaf')
while (($('.li-ahdaf').height())>24)
{
var m=$('.li-ahdaf').css('font-size');
m=parseInt(m,10)-1;
$('.li-ahdaf').css('font-size',m)
}
$(tent).removeClass('li-ahdaf')
}
Variable
یک شنبه 01 مرداد 1391, 21:45 عصر
<html>
<head>
<title></title>

<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.size{
width:300;
border:1px solid black;
height: 200px;
}
.size p{
border:1px solid red;
font-size:40px ;
width:auto;
}

</style>
</head>
<body>
<div class="size">
<p id="text">
this is text
</p>
</div>
<button id='add'>Insert Text</button>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#add').click(function(){
$("#text").append('this is text');

var h=$("#text").height();
var w=$("#text").width();
while(h>200 || w>300)
{
$("#text").css({'font-size':'-=1'});
h=$("#text").height();
w=$("#text").width();
}
})
$('#text').on('change',function(){console.log('aa' );});
});
</script>
</body>
</html>