Forum
Aktif konular
Üyeler
Kurallar
Arama
Jquery Yardım Jquery Yardım
-
Beyler bir div içerisindeki bütün elementlerin width değerini kontrol edip eğer 900 den fazla ise 850'ye fixlemek istiyorum bunu yapan hazır jquery kodu var mıdır yoksa döngüler ile mi çözmek gerekir?
-
buldum buldum :D
<script>
$(document).ready(function () {
var accum_width = 0;
$('.cem').find('div').each(function () {
accum_width = $(this).width();
if (accum_width>=920) {
$(this).css({ "width": "920px" });
}
});
});
</script>
-
buda var hoca
$(".cem").find("div").css("max-width":"920px");
şeklinde kullanabilirsin. yada direk css de tanımlayıp kaymaların önüne geçebilirsin.
bu linktende max-width özelliği için detaylı bilgileri bulabilirsin
http://www.w3schools.com/cssref/pr_dim_max-width.asp
-
isoT bunu yazdı
buda var hoca
$(".cem").find("div").css("max-width":"920px");
şeklinde kullanabilirsin. yada direk css de tanımlayıp kaymaların önüne geçebilirsin.
bu linktende max-width özelliği için detaylı bilgileri bulabilirsin
http://www.w3schools.com/cssref/pr_dim_max-width.asp
Şimdi seneryoya göre içerisinde bir sürü div olabilir ve 400 500 px olanlara müdahele etmememiz lazım sadece 900den fazla olanlar için geçerli olması lazım o yüzden if kontrolu şart burda.
Hep bu html editorlerden açıklama eklerken sıkıntı oluyor işte :\
-
hocam 400 500 olana dokunmuyor zaten, max-width ile sınır belirliyosun.
örneğin max-width değeri için 500 dediysen 500den küçük olanlara etki etmez, büyük olanları fixler.
--
find("bilmemne").css("property","value") şeklinde set ettiğin değer seçilen tüm elementler için atanıyor. içinde kaç tane div olduğunun önemi yok.
yinede kendi yaptığını kullan. ben sadece fikir olması için yazdım. kolay gelsin.
-
isot hocam belki bende çalıştıramadım bi bakar mısın şuna
$(".cem").find("div").css("max-width":"300px"); değerini ekledim etkilemedi ama html değerini
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="cem" style="width: 500px; border: 1px solid Red; background-color: Yellow">
<div style="width: 180px; background-color: Red">asdasd</div>
<div class="ic" style="width: 100px;">
</div>
<div class="ic" style="width: 1110px;">
</div>
</div>
<script>
$(document).ready(function () {
$(".cem").find("div").css("max-width":"300px");
// var accum_width = 0;
// $('.cem').find('div').each(function () {
// accum_width = $(this).width();
// if (accum_width>=99) {
// $(this).css({ "width": "920px" });
// }
// });
});
</script>
</div>
</form>
</body>
</html>
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <div class="cem" style="width: 500px; border: 1px solid Red; background-color: Yellow"> <div style="background-color: #00F;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div class="ic" style="width: 100px; background-color: #F00;"> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> <div class="ic" style="width: 1110px; background-color: #0F0;"> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit </div> </div> </div> </form> <script> $(document).ready(function () { $(".cem").find("div").css("max-width","300px"); /* var accum_width = 0; $('.cem').find('div').each(function () { accum_width = $(this).width(); if (accum_width>=99) { $(this).css({ "width": "920px" }); } }); */ }); </script> </body> </html>ilk cevapda syntax hatası yapmışım hocam k.bakma
.css("max-width":"300px"); burada ":" değilde "," olacak özellik ve değer arasında.
.css("max-width", "300px");
sayfa üzerinde de düzelttim.
-
oo çok canavar kodmuş buda hocam sağol valla :))
Peki .cem elemanti içindeki sadece div değilde hepsi için nasıl bişey yazarız tüm elementleri kapsasın span,div,table,p gibi
-
$(".cem").find("*")
dersen içindeki tüm elementleri seçmiş olursun.
--
<span> default olarak inline şeklinde eklenir.
o yüzden max-width etkilemez onu.
etki edebilmesi için display:block olarak belirtmen gerekiyor hocam.
var EklenecekCss = {"max-width":"300px", "display":"block"};
$(".cem").find("*").css(EklenecekCss);
dersen tamamdır yani
-
yardımların için teşekkürler isot hocam kullanışlı oldu benim için bunlar.
-
Bende öğrenicem inş ama önce şu kütüphaneyi indirme mantığını bulmam lazım :)
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla