#HTML5, #CSS3 and #Jquery RSS reader for Smartphones and Tablets

This code uses jquery (1.6.4in this case) and cross browser CSS3 to make a collapsing list of RSS articles.

Mobile RSS display

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=340″ />
<title>Punctuation</title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
” type=”text/javascript”></script>
<style type=”text/css”>
body {
font-family: “Verdana”, cursive;
font-size: .6em;
}
#inner {
width: 90%;
font-family: “Verdana”, “Comic Sans MS”, cursive;
padding-left: 5%;
padding-right: 5%;
}
#header {
font-family: Arial, Helvetica, sans-serif;
font-size: .5em;
}
.header {
background: -moz-linear-gradient(top, gray, white);
background: -webkit-gradient(linear, left top, left bottom, from(gray), to(white));
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari, Chrome */
border-radius: 15px; /* CSS3 */
text-shadow:#FFF 0px 1px 0px;
padding: 6px;
}
.header2 {
font-weight: bold;
display: block;
background-color: #0F0;
}
.noshow {
display: none;
font-size: .8em;
padding: 10px;
}
</style>
</head>

<body>
<div id=”content”>
<div id=”header”> </div>
<div id=”inner”>
<script>
var last = “”;
function show(id){
var mySelect = “#tip”+id;
if(last == mySelect){
$(last).slideUp(1000,function(){
$(‘html, body’).animate({ scrollTop: $(mySelect).offset().top-40 }, 1000);
});
last=””;
}else if(last!=””){
$(last).slideUp(1000);
$(mySelect).slideDown(1000,function(){
$(‘html, body’).animate({ scrollTop: $(mySelect).offset().top-40 }, 1000);
});
last = mySelect;
} else {
$(mySelect).slideDown(1000,function(){
$(‘html, body’).animate({ scrollTop: $(mySelect).offset().top-40 }, 1000);
});
last = mySelect;
}

}
$.get(“rss.xml”, function(data){

$(data).find(“item”).each(function(i){
$(“#inner”).append(“<div class=\”header\” onClick=\”show(“+i+”)\”>”+$(this).find(“title”).text()+”</div>”);
$(“#inner”).append(“<div id=\”tip”+i+”\” class=\”noshow\”>”+”<div class=\”mainText\”>”+$(this).find(“description”).text()+”</div></div>”);
});

});

</script>
</div>
</body>
</html>

This entry was posted in Code, edtech. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box