Jquery-Append() Sonrası Düzeltemediğim Bir Css Problemi

03/Şub/16 13:50

Kısayol

Şikayet

Özel Mesaj

RockZs

Kayıt Tarihi: 30/Haziran/2002

selamlar,

arama yaptıktan sonra 8 adet sonuç each() döngüsü içinde bir div'e append ediliyor.

alt satıra geçtikten sonra hepsinin üst satırda olduğu gibi aynı sıradan hizzalanmasını istiyorum ama sonuç resimdeki gibi oluyor.

bootstrap kullanıyorum, kodlar da şu şekil:

	$("#search_container").html("");
	$.each(results.items, function(index, item) {
				$.get("https://www.googleapis.com/youtube/v3/videos", { 
				part: "contentDetails", 
				id: item.id.videoId,
				key: api_key	
				}, function(data) { 	
					
					video_duration_glob = data.items[0].contentDetails.duration + "";

					$("#search_container").append
					(
					"<div class=\"col-lg-3\"><a href=\"javascript:void(0)\" onclick=\"determine_vidvars('" + item.id.videoId + "', '" + item.snippet.thumbnails.medium.url + "', '" + item.snippet.title.substring(0,44).replace(/['"]+/g, '') + "', '" + item.snippet.description.substring(0,88).replace(/['"]+/g, '') + "', '" + convertISO8601ToSeconds(video_duration_glob) + "'); username_splash(); \">"
					+
					"<br />"
					+
					"<img src=\""
					+
					item.snippet.thumbnails.medium.url
					+
					"\" class=\"img-rounded joiner-tooltip\" width=\"100%\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"click to create\"><h3>"
					+
					item.snippet.title.toLowerCase()+"<small><br /> duration : "+convertISO8601ToSeconds(video_duration_glob)+"</small>"
					+
					"</h3></a></div>"
					);					
				});
	});

yardımcı olabilirseniz sevinirim..

sevgiler..

Alıntı yap

03/Şub/16 14:08

Kısayol

Şikayet

Özel Mesaj

camarade
ontedi

Kayıt Tarihi: 04/Eylül/2005

$("#search_container").html("");
var intAyrac = 0;
$.each(results.items, function(index, item) {
            $.get("https://www.googleapis.com/youtube/v3/videos", {
            part: "contentDetails",
            id: item.id.videoId,
            key: api_key  
            }, function(data) {   
                  
                video_duration_glob = data.items[0].contentDetails.duration + "";
  
                $("#search_container").append
                (
                "<div class=\"col-lg-3\"><a href=\"javascript:void(0)\" onclick=\"determine_vidvars('" + item.id.videoId + "', '" + item.snippet.thumbnails.medium.url + "', '" + item.snippet.title.substring(0,44).replace(/['"]+/g, '') + "', '" + item.snippet.description.substring(0,88).replace(/['"]+/g, '') + "', '" + convertISO8601ToSeconds(video_duration_glob) + "'); username_splash(); \">"
                +
                "<br />"
                +
                "<img src=\""
                +
                item.snippet.thumbnails.medium.url
                +
                "\" class=\"img-rounded joiner-tooltip\" width=\"100%\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"click to create\"><h3>"
                +
                item.snippet.title.toLowerCase()+"<small><br /> duration : "+convertISO8601ToSeconds(video_duration_glob)+"</small>"
                +
                "</h3></a></div>"
if (intAyrac % 4 == 3)
{
+ "<div style='clear:both;'></div>"
}
                );                
            });
intAyrac = intAyrac + 1;
});

Hocam daha düzenli bir şey yazsaydın ya, string birleştirme yapmak gerekmekte. Çok vaktim olmadığı için üstünkörü yaptım. if blogunda string olarak birleştir. Her 4 tanede 1 tane clear:both yapar.

ontedi tarafından 03/Şub/16 14:16 tarihinde düzenlenmiştir

Matematikçi ve Yazılımcı. http://www.ontedi.com ve http://www.cizgi.site Siteme beklerim herkesi.

Alıntı yap

03/Şub/16 14:15

Kısayol

Şikayet

Özel Mesaj

Retro
by_Tet

Kayıt Tarihi: 22/Mayıs/2012

Başlıklara sınırlama koy hocam ya da o standarta göre diz

iyibu! yeniden..

Alıntı yap

03/Şub/16 14:29

Kısayol

Şikayet

Özel Mesaj

ozgunlu

Banlanmış Üye

Kayıt Tarihi: 11/Kasım/2011

her 4 taneden sonra clear both dersen olması lazım.

Hello, i am nothing. I come from Neverland.

Alıntı yap

03/Şub/16 14:52

Kısayol

Şikayet

Özel Mesaj

RockZs

Kayıt Tarihi: 30/Haziran/2002

ontedi, özgünlü, bytet sağolun. if koyup, clear:both ile yapmaya çalışır, sonucu birazdan yazarım.

EK: SORUN ÇÖZÜLDÜ SANDIM AMA ÇÖZÜLMEMİŞ. YİNE DE SAĞOLUN. BELKİ BİRŞEYİ GÖZDEN KAÇIRIYORUMDUR, DAHA SONRA BAKACAĞIM.

RockZs tarafından 03/Şub/16 15:40 tarihinde düzenlenmiştir

Alıntı yap

04/Şub/16 14:38

Kısayol

Şikayet

Özel Mesaj

RockZs

Kayıt Tarihi: 30/Haziran/2002

Sorun çözüldü.

Şöyle ki:

var intClearfixCreate = 0;
$("#search_container").html("");
$.each(results.items, function(index, item) {
	$.get("https://www.googleapis.com/youtube/v3/videos", { 
	part: "contentDetails", 
	id: item.id.videoId,
	key: api_key	
	}, function(data) { 	
		
		video_duration_glob = data.items[0].contentDetails.duration + "";

		$("#search_container").append
		(
			//.........................
			//.........................
			//.........................
		);
		if (intClearfixCreate == 3) {
			$("#search_container").append("<div class=\"clearfix\"></div>");
		}
		intClearfixCreate = intClearfixCreate + 1;
	});	
});

each() için her dördüncü adımda parent div içine .clearfix class'ında boş bir div ekler. ilgili css'de şöyle:

.clearfix {
  *zoom: 1;
}
.clearfix:before, 
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}

bootstrap kullananlar "clearfix" ile yaşadığım sorunun üstesinden gelebilirler (bootstrap harici de muhtemelen çalışacaktır, bilemiyorum).

yardımlarınız için tekrar teşekür ederim.

sevgiler..

RockZs tarafından 04/Şub/16 14:40 tarihinde düzenlenmiştir

Alıntı yap