http://jsfiddle.net/1nLLdfdw/
Trying to make the fancybox images sortable (When the links are clicked they filter as in http://isotope.metafizzy.co/), which I was able to do with v1 of isotope but not v2, I've been poking around all night and through many iterations of my main.js file. I don't know whats going wrong exactly, would appreciate any help.
My main.js file:
jQuery(function ($) {
$(document).ready(function () {
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
afterLoad: function () {
this.title = 'Download ' + this.title;
},
beforeShow: function () {
if (this.title) {
// New line
this.title += '<br />';
// Add tweet button
this.title += 'Tweet ';
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
}
},
afterShow: function () {
// Render tweet button
twttr.widgets.load();
},
helpers: {
title: {
type: 'inside'
}
}
});
});
/*----------------------------------------- FancyBox ^ ------------------*/
$(document).ready(function () {
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.item-thumbs',
layoutMode: 'fitRows'
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function () {
var number = $(this).find('.number').text();
return parseInt(number, 10) > 50;
},
// show if name ends with -ium
ium: function () {
var name = $(this).find('.name').text();
return name.match(/ium$/);
}
};
// bind filter button click
$('#filters').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[filterValue] || filterValue;
$container.isotope({
filter: filterValue
});
});
// bind sort button click
$('#options').on('click', 'button', function () {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({
sortBy: sortByValue
});
});
// change is-checked class on buttons
$('.button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
/*----------------------------------------- Isotope Filters ^ ------------------*/
});
});
And my index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="_include/css/normalize.css">
<link rel="stylesheet" href="_include/css/main.css">
<link rel="stylesheet" href="_include/css/jquery.fancybox.css" type="text/css" media="screen" />
</head>
<body>
<!--END HEADER-->
<header>
</header>
<!--END HEADER-->
<!--START CONTENT-->
<div class="content">
<nav id="options" class="work-nav">
<ul id='filters' class='option-set' data-option-key='filter'>
<li class='type-work'>Type of Blah</li>
<li>ALL</li>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
</nav>
<section class="isotope">
<ul id="thumbs">
<li class="item-thumbs test1">
<a title="test1 title" class="fancybox" rel="group" href="_include/img/full1.jpg"><img src="_include/img/thumb1.jpg" alt="" /></a>
</li>
<li class="item-thumbs test1">
<a title="test2" class="fancybox" rel="group" href="_include/img/full1.jpg"><img src="_include/img/thumb1.jpg" alt="" /></a>
</li>
<li class="item-thumbs test2">
<a title="test3" class="fancybox" rel="group" href="_include/img/full1.jpg"><img src="_include/img/thumb1.jpg" alt="" /></a>
</li>
<li class="item-thumbs test3">
<a title="test4" class="fancybox" rel="group" href="_include/img/full1.jpg"><img src="_include/img/thumb1.jpg" alt="" /></a>
</li>
</ul>
</section>
</div>
<!--END CONTENT-->
<!--STARTFOOTER-->
<footer>
</footer>
<!--END FOOTER-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- fancyBox -->
<script type="text/javascript" src="_include/js/jquery.fancybox.js"></script>
<script type="text/javascript" src="_include/js/jquery.fancybox.pack.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<!-- Isotope -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js"></script>
<!-- others -->
<script src="_include/js/main.js" type="text/javascript"></script>
</body>
</html>
You have a few errors in your code. You have set your #filters click function on a button, yet you have no button, you have a link inside a "li". You also set the link element to #filter, not sure why. I would say set it to #.
You Filtervalue is set to:
var filterValue = $(this).attr('data-filter');
but your using the data-attribute "data-option-value", not "data-filter"
Try this:
// bind filter button click
$('ul#filters li').on('click', 'a', function () {
var filterValue = $(this).attr('data-option-value');
// use filterFn if matches value
filterValue = filterFns[filterValue] || filterValue;
$container.isotope({
filter: filterValue
});
});
Related
I want to enable deep-linking to images in a Swiper carousel. The "hashNavigation" component seems to be purpose-built for this but I can't see how to make it work. When I enable it and provide the data-hash attribute in my slides it replaces the entire path with the hash I provided. Obviously, this renders it useless for any swiper not on the home page. How can I get it to append the hash to the path instead of replacing it? Here's my code instantiating it:
var vis = document.getElementById('vis'),
swiperOpts = {
loop: true,
slidesPerView: 1,
mousewheel: true,
hashNavigation: {
watchState: true,
replaceState: true,
},
autoplay: {delay: 4444}
},
swiper = new Swiper(vis, swiperOpts);
And a markup sample:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<link rel="preconnect" href="//cdnjs.cloudflare.com">
<link rel="preconnect" href="//unpkg.com">
<link rel="stylesheet" href="//unpkg.com/swiper/css/swiper.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
</head>
<body class="visio">
<main>
<div class="swiper-container" id="vis">
<ul class="swiper-wrapper">
<li class="swiper-slide" data-hash="235" style="">
<p>slide one</p></li>
<li class="swiper-slide" data-hash="228" style="">
<p>slide two</p></li>
<li class="swiper-slide" data-hash="224" style="">
<p>slide tre</p></li>
<li class="swiper-slide" data-hash="227" style="">
<p>slide for</p></li>
<li class="swiper-slide" data-hash="236" style="">
<p>slide fiv</p></li>
</ul>
</div>
</main>
<script src="//unpkg.com/swiper/js/swiper.min.js"></script>
</body></html>
Here are some examples of the URLs I'm seeing:
base URL: domain.com/visio/sol
slide data-hash value: 224
URL after Swiper modifies: domain.com/#224
I was never able to get this to work properly but I worked around it with the following code:
let initIDX = 0;
if(window.location.hash){
let lmnt = document.querySelector('[data-hash="'+window.location.hash.substring(1)+'"]'),
i = 0;
while((lmnt = lmnt.previousSibling) != null) if(lmnt.nodeType == 1) ++i;
initIDX = i;
}
var vis = document.getElementById('vis'),
swiperOpts = {
loop: true,
slidesPerView: 1,
initialSlide: initIDX,
on:{
slideChangeTransitionEnd: function(){
history.replaceState(null, null,
window.location.pathname + '#' + this.slides[this.activeIndex].dataset.hash);
}
}
},
swiper = new Swiper(vis, swiperOpts);
This is working for me.
I know this question has been asked several times, but i want to load a panel dynamic for all pages and it doesn't work.
Sometimes the css style is not loading or the panel does not open..
Any suggestions? ;(
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="css/own.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var panelHtml = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
});
$(this).append(panelHtml);
$("#panel_" + this.id).panel();
$("#panel_" + this.id).panel().enhanceWithin();
$("#panel_" + this.id).enhanceWithin();
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<h2>Content</h2>
Open Panel
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<h2>Content</h2>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<h2>Content</h2>
</div>
</div>
</body>
</html>
My panel.html
<ul data-role="listview" data-theme="g" data-divider-theme="g">
<li data-role="list-divider">Panel</li>
<li>Page1</li>
<li>Page2</li>
<li>Pag3</li>
</ul>
Thank you for your tips... .one('pagebeforecreate',
It is not easy to load the same header and / or footer in all pages.
Finding the right event is really difficult.
I modified your solution a bit, it's more concise and can be faster.
$(document).one('pagebeforecreate', function () {
$.get('header.html').success(function(htmlHeader){
$.get('footer.html').success(function(htmlFooter){
$(htmlHeader).prependTo($('[data-role="page"]'));
$(htmlFooter).appendTo($('[data-role="page"]'));
$('body').enhanceWithin(); // All pages in once
});
});
});
#thanks to ezanker
- i didnt know that a external panel exist, thanks
- i tested it on jsfiddle and it worked but i didnt worked local, i dont know why
thats my solution
its a bit silly when you know external panels exist, but here it is
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="css/own.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="header">').load("templates/header/header.html", function () {
$("#" + id).prepend(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="footer" id="footer" data-position="fixed" data-tap-toggle="false">').load("templates/footer/footerUp.html", function () {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="popup" id="popup_' + this.id + '" data-theme="a" class="ui-corner-all">').load("templates/popup/type_1/popup.html", function () {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page1").popup("open")'>Open PopUp</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page2").popup("open")'>Open PopUp</a>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page3").popup("open")'>Open PopUp</a>
</div>
</div>
</body>
</html>
Could someone please explain to me how to change this internal js to external. If there is something in the file that is isn't show it is another document but I do need all the ID's and Class's that are mentioned
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $pageTitle; ?></title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<!-- CSS link -->
<link href="Content/css/tlm-styles.css" rel="stylesheet" type="text/css">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<header>
<h1><img src="Content/images/coloured-logo.svg" alt="TLM logo">TLM Project Management</h1>
<nav id="top-nav">
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</header>
<main>
<nav id="sidebar">
<ul>
<li>Home
<li>Add Projects</li>
<li>All Projects</li>
<li>All Users</li>
</ul>
</nav>
<section class="content">
</section>
</main>
<footer>
<section id="copy">
<p>© 2016 | TLM Content Management System | Tara McNeil</p>
</section>
</footer>
<!-- JavaScript -->
<script src="Scripts/tlm-scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
Not sure this is what you want but I would replace the contents of your script tag with this function call in your HTML
<script>
initToggle();
</script>
Then on your tlm-scripts.js file, I would define the function, something like this:
$(document).ready(function(){
/// here goes your existing code on that file
/// if they are related to jquery
//...
//...
// define function that does the toggle
var initToggle = function(){
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
};
});
Lastly, include your custom JS file after your Jquery files
UPDATE
If you do not want JS on your HTML page, then change the function declaration to this:
$(document).ready(function(){
/// here goes your existing code on that file
/// if they are related to jquery
//...
//...
// define function that does the toggle
var initToggle = function(){
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
};
// invoke function here, not in the HTML
initToggle();
});
I am currently developing a dynamic menu using jQuery.mmenu plugin.
The definition (nav + ul) of my menu is static and written into the index.html
The submenu is an external html page that I open in the jQuery(document).ready part, and added with append function.
My problem is located on the form:
Good version / bad version
On the left, you can see a standard and static implementation,
With my solution, CSS seems to don't apply.
My code:
index.html:
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="../dist/core/css/jquery.mmenu.all.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../dist/core/js/jquery.mmenu.min.all.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
var $menu = $("#menu").mmenu({
"extensions": [
"pageshadow"
],
"counters": true,
"navbar": {
"title": "Ressource List"
},
"navbars": [
{
"position": "top",
"content": [
"searchfield"
]
},
{
"position": "top",
"content": [
"prev",
"title",
"close"
]
}
],
"sectionIndexer": true
});
var api = $("#menu").data( "mmenu" );
api.bind( "init", function() {
$.ajax({
// options to retrieve the submenu
url:"include/menu.html",
type : 'GET',
dataType : 'html'
}).success(function(data) {
var $ul = $menu.find( "#panel" );
$ul.append(data);
$("body").addClass("body");
});
});
api.init( $("#panel") );
});
</script>
</head>
<body>
<!-- The page -->
<div class="page">
<div class="header">
Index
</div>
</div>
<!-- The menu -->
<nav id="menu">
<ul id="panel">
</nav>
</nav>
</body>
</html>
menu.html
<ul>
<li>Home</li>
<li><span>Room</span>
<ul>
<li>Room11</li>
<li>Room12</li>
</ul>
</li>
<li><span>Room2</span>
<ul>
<li>Room21</li>
<li>Room22</li>
</ul>
</li>
<li>Update data</li>
</ul>
To simplify the problem, I've used the basic example included in the package: http://mmenu.frebsite.nl/download.html
Could you please help me ?
Not sure if this is affecting anything but...
Your ul tag is missing a closing tag.
Also... in your success callback you have the code:
var $ul = $menu.find( "#panel" );
$ul.append(data);
If you are trying to get the first list in the panel. It should be:
var $ul = $menu.find( "#panel>ul" );
$ul.append(data);
jQuery.mmenu plugin appears to rearrange the markup.
Works for 1 level:
var $menu = $('nav#menu').mmenu();
var api = $('nav#menu').data('mmenu');
$('#btnAdd').click(function () {
var $ul = $menu.find('#test>ul');
$ul.append('<li>Home12</li>\
<li>About us</li>\
<li>Contact</li>');
});
<button id="btnAdd">Add</button>
<nav id="menu">
<ul id="test"></ul>
</nav>
This only works for one level. If I try to add a nested list item it doesn't appear to work.
Doesn't work for nested levels:
$ul.append('<li>Home12</li>\
<li><a id="about2" href="#about">About us</a><ul><li>About us</li></ul></li>\
<li>Contact</li>');
This github thread may help...
At the bottom of the thread the user FrDH provides an example that may help you.
Link: https://github.com/FrDH/jQuery.mmenu/issues/57
I am currently working on a project that deals with feed from a website.
I have successufully gotten the feed, but my challenge is getting the content and title of the feed when a user click on the feed link rather than taken the user to the feed site.
I have tried using different method to get the solution, but none works.
Below is my latest code (Jquery Mobile)
(function($){
$.fn.FeedEk=function(opt){
var def={FeedUrl:'', MaxCount:5, ShowDesc:true, ShowPubDate:true, ShowFullContent:true};
if(opt){
$.extend(def,opt)
}
var idd = $(this).attr('id');
if(def.FeedUrl==null || def.FeedUrl==''){
$('#'+idd).empty();
return;
}
var pubdate;
$('#'+idd).empty().append('<div style="text-align:center; margin: auto;"><img src="loader.gif" class="loader" /></div>');
$.ajax({
url:'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+def.MaxCount+'&output=json&q='+encodeURIComponent(def.FeedUrl)+'&callback=?',
dataType:'json',
success:function(data){
$('#'+idd).empty();
$('#post').empty();
var output = '<ul data-role="listview" data-filter="true">';
$.each(data.responseData.feed.entries,function(i,entry){
var i =new Array(i);
for(j=0;j<=i;j++)
{
var id = j;
}
var title =new Array(entry.title);
var content =new Array(entry.content);
for(t=0;t<title.length;t++){
for(c=0;c<content.length;c++){$('#post').append(title[t]+'<br/>'+content[c])}
}
//while(id ==
//if(i == id
//var post = '<div><h3>'+entry.title+'</h3></div>';
//post += '<div>Post content'+entry.content+'</div>';
output += '<li>';
output += ''+entry.title+'';
/*if(def.ShowPubDate){
pubdate=new Date(feed[0].entry.publishedDate);
output += '<br/><span class="ItemDate">'+pubdate.toLocaleDateString()+'</span';
}
if(def.ShowDesc){
output += '<br/><span class="ItemDesc">'+feed[0].entry.contentSnippet+'</span>';
}*/
output += '</li>';});
console.log(data.responseData.feed.entries);
output += '</ul>';
$('#'+idd).html(output);
if($('.'+id).click() == true){
$('#post').empty();
var postTitle = title[id];
var postContent = content[id];
$('#post').append('<div><h3>'+postTitle+'</h3></div><div>'+postContent+'</div>');
}
}
})
}
})
(jQuery);
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>News on the GO!</title>
<link href="theme/news.min.css" rel="stylesheet" />
<link href="theme/jquery.mobile.structure-1.2.0.min.css" rel="stylesheet" />
<link href="theme/FeedEk.css" rel="stylesheet" type="text/css" />
<script type="application/javascript" src="js/jquery1.7.2-min.js" ></script>
<script type="application/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="application/javascript" src="js/FeedEk.js"></script>
<link href="theme/custom.css" rel="stylesheet" type="text/css" />
<script type="application/javascript" src='js/main.js'></script>
<script type="application/javascript">
$(document).ready(function() {
//latest
$("#ipaid").FeedEk({
FeedUrl : 'http://ipaidabribenaija.com/news?format=feed',
MaxCount : 7,
ShowDesc : true,
ShowPubDate:true,
ShowFullContent:true
});});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-theme="a">
<h2>Recent News</h2>
About
</div><!-- /header -->
<div class="imghome">
<img src="images/news.png" alt="news" width="300" height="200" />
</div>
<nav data-role="navbar">
<ul>
<li><a href="#latest" data-theme="a" data-transition="flip" >Local News</a></li></ul>
</nav>
<!--<div data-role="content" >
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-theme="a"></div><!-- /footer -->
</div><!-- /Page home -->
<div data-role="page" id="latest" data-title="Local News">
<div data-role="header" data-position="fixed" data-id="ipaid_header" data-theme="a">
<h2>Local News</h2>
Back
</div><!-- /header -->
<div data-role="content" >
<div id="ipaid">
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ipaid_footer" data-theme="a">
<div data-role="navbar" data-theme="a">
<ul>
<li>Home</li>
<li>Politics</li>
<li>Sports</li>
<li>Business</li>
</ul>
</div><!-- /Footernavbar --></div><!-- /footer -->
</div><!-- /Page Latest --></body>
</html>
As far as I understood. You want to show each news feed on a separate page on your webpage, and prevent the link from opening a new window (leaving your webpage).
You could do the following, of course it needs some tuning and CSS styling, which can be done easily. The below code, prevents opening the link a new window, - using preventDefault() - it copies feed details (title, image, full article..etc) and appending them to a new page dynamically.
Each page has an auto-generated ID, in case you want to navigate between them using Swipe events or any other methods.
Working example
Code:
var pageid = 0;
$('#ipaid').on('click', 'a', function (e) {
pageid++;
e.preventDefault();
var clicked = $(this);
var root = clicked.closest('li');
var linkto = clicked.attr('href');
var title = clicked.text();
var date = clicked.parent('div').next('div').text();
var linkdiv = root.find('div.itemTitle');
var datediv = root.find('div.itemDate');
var contentdiv = root.find('div.itemContent');
var image = contentdiv.first('div').find('img').attr('src');
var article = '';
contentdiv.find('p').each(function () {
article += $(this).text();
});
var newPage = $("<div data-role=page id='page" + pageid + "'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>" + title + "</h1></div><div data-role=content><p>Date:" + date + "</p><img src='" + image + "'></div><div class='article'><p>" + article + "</p></div></div></div");
newPage.appendTo($.mobile.pageContainer);
$.mobile.changePage('#page' + pageid);
});
I think you simple need jFeed. Sample code from the jFeed site:
jQuery.getFeed(options);
options:
* url: the feed URL (required).
* data: data to be sent to the server. See jQuery.ajax data property.
* success: a function to be called if the request succeeds.
The function gets passed one argument: the JFeed object.
Example:
jQuery.getFeed({
url: 'rss.xml',
success: function(feed) {
alert(feed.title);
}
});