JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<title> МК ВЕСТИ </title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
<body>
<div class="loading">
<h3>Вчитувам, почекајте...</h3><br>
<img src="http://phpscrape.plavevski.net/images/ajax-loader.gif" />
</div>
<div class="intro">
<h5> Pick your media </h5>
</div>
<ul class="main-nav">
<li>
<div class="newlistdiv">
<ul class="logos">
<li><img src="http://phpscrape.plavevski.net/images/A1.jpg" alt="A1" class="7sg" /></li>
<li><img src="http://phpscrape.plavevski.net/images/vecher.jpg" alt="Вечер" /></li>
<li><img src="http://phpscrape.plavevski.net/images/dnevnik.gif" alt="Дневник" /></li>
<li><img src="http://phpscrape.plavevski.net/images/kanal5.jpg" alt="Канал 5" /></li>
<li><img src="http://phpscrape.plavevski.net/images/novamakedonija.gif" alt="Нова Македонија" /></li>
<li><img src="http://phpscrape.plavevski.net/images/sitel.jpg" alt="Сител" /></li>
<li><img src="http://phpscrape.plavevski.net/images/telma.jpg" alt="Телма" /></li>
<li><img src="http://phpscrape.plavevski.net/images/utrinski.jpg" alt="Утрински" /></li>
<li><img src="http://phpscrape.plavevski.net/images/vreme.png" alt="Време" /></li>
<li><img src="http://phpscrape.plavevski.net/images/vest.png" alt="Вест" /></li>
</ul>
</div>
</li>
<li>
<ul class="newslist"></ul>
</li>
</ul>
</body>
</html>
CSS
html, body {
font-family:Arial;
background: #5B5B5B;
font-size:20px;
margin:0px;
padding:0px;
width:320px;
border:1px solid yellow;
}
h1,h2,h3,h4,h5,h6 {
margin:0px;
}
.loading {display:none;}
.main-nav {margin:0px;padding:0px;width:100%;}
.main-nav li {
list-style:none;
display:inline;
padding:0px;
overflow: hidden;
}
.newlistdiv {width: 100%; overflow: hidden;}
.logos {padding-left:0px;overflow:hidden;width:5000px;}
.newslist {border:1px solid blue;padding:0px;background-color:white;width:320px}
.newslist li {border-bottom:1px solid black; display:block;width:100%;padding:5px;margin-bottom:5px;}
.newslist li img {border:1px solid black}
.newslist li a {color:black;text-decoration:none}
.newslist p {font-size:12px;}
.newslist h4 {font-size:14px}
JavaScript
var bla = new Request.JSONP({
url: 'http://phpscrape.plavevski.net/index.php?src=a1&t=1',
callbackKey: 'jsoncallback',
onComplete: function(data){
data.vesti.each(function(vest, ind){
if (ind!=0){
if (vest.link!='/email/default.asp'&&vest.link!='/vesti/smsvesti.asp'&&vest.link!='/vesti/pda-wap.asp'&&vest.link!='/vesti/rss-kanali.asp'&&vest.link!='/vesti/denesen-den/default.asp'){
var rootUl = $$('.newslist')[0];
var chLi = new Element('li');
var chA = new Element('a',{'href':'javascript:;'});
var chLih = new Element('h4').set('html',vest.title);
var chLip = new Element('p').set('html',vest.desc);
if (vest.img!=''){
var chLiimg = new Element('img',{'align':'left'}).inject(chLi);
chLiimg.addEvent('load',function(){
var newWidth = chLiimg.width / 2;
var newHeight = chLiimg.height / 2;
chLiimg.setStyle('width',newWidth);
chLiimg.setStyle('height',newHeight);
})
chLiimg.src = vest.img;
}
chA.addEvent('click',function(){
var foo = new Request.JSONP({
url: 'http://phpscrape.plavevski.net/index.php?src=a1&t=2&dta=' + vest.link,
onComplete: function(theData){
chLip.set('html',theData.vest.cont);
}
});
foo.send();
})
chA.inject(chLi);
chLih.inject(chA);
chLip.inject(chLi);
chLi.inject(rootUl);
}
}
})
}});
bla.send();