<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <div class="row"> <h2>GET JSON DATA FROM A WEB SITE</h2> <hr style="border: 1px solid #D6D6D6" align="center" width="100%"> <h2 class="main-list strait-25" style="color:#000">Diğer Haberler</h2> <div id="haberler"></div> </div> </div>

/* list item Restriction. */ .main-list { padding-left: .5em; padding-right: .5em; } .main-list .media { /* margin-top: 20px; */ padding-bottom: 15px; border-bottom: 1px solid #3C3C3C; } .main-list .media:first-child { /* border-top: 2px solid blue;*/ padding-top:15px; } .main-list .media:last-child { /*border: none;*/ border-bottom: 1px solid #D6D6D6; } .habertext { border: 1px solid #D9534F; } /* list item shortening a long sentence. */ .listitem { overflow: hidden; width:100%; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .image-container { width: 150px; height: 100px; overflow: hidden; /* Dışarı taşan kısmı gizle */ position: relative; border-radius: 5px; /* Köşeleri yuvarlatır */ } .image-container img { width: 100%; /* Genişliği kapsayacak şekilde ayarla */ height: auto; /* Oranı koru (sıkıştırma yok) */ display: block; position: relative; top: 0; /* Gerekirse yukarıdan kırp */ } .media-heading { font-weight:bold; } .by-author, .media-heading { line-height: 90%; color:#000; }

$(document).ready(function(){ function tersCevir(str){ return str.split("").reverse().join(""); } function haberleriYukle() { $.ajax({ url: "https://muhittinbudak.github.io/oyakbilgi/yeni.json", // PHP API URL'n method: "GET", dataType: "json", success: function(data) { let html = '<ul class="media-list main-list" style="border-top: 2px solid red;" >'; if (data.length > 0) { data.forEach(function(haber) { html += "<li class='media'><a class='pull-left' target='_blank' href='" + haber.obp_weburl +"'><div class='image-container'><img class='media-object img-responsive img-rounded' src='"+ haber.obp_resim_url +"''></div></a><div class='media-body'><div class='media-heading strait-16 listitem'>" + tersCevir(haber.obp_title) + "</div><div class='listitem by-author strait-13'>" + tersCevir(haber.obp_title) + "</div><div class='btn-toolbar' style='margin-top:10px;'><a target='_blank' href='"+ haber.obp_weburl + "' class='btn btn-lg btn-danger habertext strait'>Habere Git <span class='glyphicon glyphicon-chevron-right'></span></a></div></li>" }); } else { html += "<li>Henüz haber yok.</li>"; } html += "</ul>"; $("#haberler").html(html); }, error: function() { $("#haberler").html("<p>Could not get data.</p>"); } }); } // Sayfa yüklendiğinde ilk veriyi al haberleriYukle(); //$('#haberler').append(html); // Sonra her 10 saniyede bir yeniden veriyi al setInterval(haberleriYukle, 10000); // 10000 milisaniye = 10 saniye });