#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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>