I'm using Yahoo Pipes to work around the cross-domain issue when retrieving an RSS feed with jquery. Here's my script:
function getFeed(feed) {
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run? &_render=json&_callback=piper&feed='+feed;
document.getElementsByTagName("head")[0].appendChild(newScript);
}
function piper(feed) {
var tmp='<li>';
for (var i=0; i<feed.value.items.length; i++) {
tmp+='<a href="'+feed.value.items[i].link+'">';
tmp+=feed.value.items[i].pubDate;
tmp+='<h3>'+feed.value.items[i].title+'</h3>';
tmp+='<p>'+feed.value.items[i].description+'<br></p>';
tmp+='<br></a></li>';
tmp+='<br>';
tmp+='<li>';
}
document.getElementById('rssLayer').innerHTML=tmp;
}
And here's how I'm calling it in the body:
<body class="ui-body" onLoad='getFeed("http://file.xml")';">
<ul data-role="listview" id='rssLayer'></ul>
</body>
My problem is that the text within each li won't wrap. Several of the descriptions are quite long, and most get cut off. Is there a way to wrap text in an li with CSS? I'm sure I'm overlooking something simple...I could look for a different way to display the feed, but I'd like to understand what's going wrong here.
Use this for elements where you want to wrap the text.
style="white-space:normal !important;"
Related
Is it possible to have a list in jQuery mobile that has one colour for an odd number member of the list and a different colour for even numbers within the same list. For example within the list the first list item will be grey and for the other item the list colour will be white. Can this be done with jQuery Mobile.
I should also mention that this list will be built with an ajax response.
<div data-demo-html="true">
<ul data-role="listview">
<li data-theme="a">Acura</li>
<li data-theme="b">Audi</li>
</ul>
</div><!--/demo-html -->
Alternating the data-theme attribute should do the trick.
I don't think you have tried anything. But I have made the function simple for you. Just use ajax in place of loop, rest all will be same
var swatch = ['a', 'b'];
$list = $("#list");
for (var i = 0; i < 5; i++) {
$list.append("<li data-theme='" + swatch[i % 2] + "'>List Item</li>");
}
$list.listview('refresh');
Link: http://jsfiddle.net/androdify/ahWzh/
In your CSS, add these two lines:
ul.ui-listview li:nth-child(even) a { background-color: #ffd800; }
ul.ui-listview li:nth-child(odd) a { background-color: #000; }
I am using iScroll on my mobile enable website (using iPhone here) to scroll inside a div.
In this this div, I have an iframe with a fixed height like this:
<body>
<div id="iscroller">
<iframe id="theIframe"></iframe>
Other stuff
</div>
</body>
Now, while scrolling within the div, everything works as expected but I cannot scroll when the scrolling gesture begins on the iframe.
The problem is described here pretty well: https://github.com/cubiq/iscroll/issues/41
So, I used the css workaround from that post by applying pointer-events:none to the iframe.
Now scrolling works perfectly but I cannot click any links which are defined within the iframe because all click/touch events on the iframe seems to be blocked due to pointer-events: none.
So, I thought:
"Ok, while the user scrolls, I need pointer-events:none. If he is
not scrolling (and instead clicking), I must set pointer-events:auto
in order to let the click/touch events pass."
So I did this:
CSS
#theIframe{pointer-events:none}
JavaScript
$("#theIframe").bind("touchstart", function(){
// Enable click before click is triggered
$(this).css("pointer-events", "auto");
});
$("#theIframe").bind("touchmove", function(){
// Disable click/touch events while scrolling
$(this).css("pointer-events", "none");
});
Even adding this doesn't work:
$("#theIframe").bind("touchend", function(){
// Re-enable click/touch events after releasing
$(this).css("pointer-events", "auto");
});
No matter what I do: Either scrolling doesn't work or clicking the link inside the iframe doesn't work.
Doesn't work. Any ideas?
I found the perfect solution. Works great on iOS and Android.
The basic idea is to put a div layer on top of that iframe. This way scrolling works smoothly.
If the user wants to tap/click on an element on that iframe I simply catch that click on the layer, save the x and y coordinates and trigger a click event on the iframe's content at these coordinates:
HTML:
<div id="wrapper">
<div id="layer"></div>
<iframe id="theIframe"></iframe>
</div>
Other stuff
CSS:
#layer{
position:absolute;
opacity:0;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
z-index:2
}
JavaScript:
$('#layer').click(function(event){
var iframe = $('#theIframe').get(0);
var iframeDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
// Find click position (coordinates)
var x = event.offsetX;
var y = event.offsetY;
// Trigger click inside iframe
var link = iframeDoc.elementFromPoint(x, y);
var newEvent = iframeDoc.createEvent('HTMLEvents');
newEvent.initEvent('click', true, true);
link.dispatchEvent(newEvent);
});
I found a solution for this, it happens to be close to what other guys already mentioned on github but this may be useful for whoever wants to find a fast working resolution for this problem.
I'm assuming a few things, like there's only one iscroll container, here represented as ID. This is not properly tested and needs refactor. It's working in my project, but I changed it here slightly for the example but I guess you'll easily understand what you need to do:
var $iscroll = $('#iscroll');
document.addEventListener('touchstart', function(e) {
if ($iscroll.find('iframe').length > 0){
$.each($iscroll.find('iframe'), function(k,v){
var $parent = $(v).parent().first();
if ($parent.find('.preventTouch').length == 0){
$('<div class="preventTouch" style="position:absolute; z-index:2; width:100%; height:100%;"></div>')
.prependTo($parent);
};
$parent
.css('position', 'relative').css('z-index', 1);
});
$iscroll.find('.preventTouch').on('click', function(e){
e.preventDefault();
e.stopPropagation();
return false;
});
};
};
document.addEventListener('touchend', function(e) {
if ($iscroll.find('iframe').length > 0){
setTimeout(function(){
var $iscroll = $('#iscroll');
$iscroll.find('.preventTouch').remove();
$iscroll.find('iframe').css('z-index', '');
$iscroll.find('.preventTouch').off('click');
}, 400);
};
};
Thanks for looking!
Structure of jQueryUI's Accordion is something like this,
<h2>title</h2><div>content</div>
for each item. What I am going to do is create accordion inside of my backbone view through looping, but backbone create div tag for each item so I have html code like this
<div><h2>title</h2><div>content</div></div>
This makes jQuery Accordion control does not work correctly, collapse and expand is not working.
I think this can be solved if I can set nothing on el or tagname, but I cannot find out.
Is there any way to solve this problem?
I think you'd be better off leaving the accordion to one view and then have a separate view inside each panel. After all, the <h2>s are controls for the accordion as-a-whole rather than for a specific panel.
You'd have some per-panel views like this:
var P = Backbone.View.extend({
render: function() {
// Add the panel's content to this.$el (which is a <div> by default).
return this;
}
});
And then an accordion view like this:
var A = Backbone.View.extend({
render: function() {
var panels = [ ... ];
for(var p, i = 0; i < panels.length; ++i) {
p = new P({ ... });
this.$el.append('<h3><a>' + panels[i] + '</a></h3>');
this.$el.append(p.render().el);
}
// The accordion wants to know the sizes of things so
// we let the DOM sort itself out before binding the
// accordion.
var _this = this;
setTimeout(function() { _this.$el.accordion() }, 0);
return this;
}
});
Then you can simply $('#something').append((new A).render().el) and it all works out nicely while leaving everything where it should be.
You could also add a title method to the P views and then A could ask the panel what its name/title/header should be so that all the per-panel information is nicely contained in the per-panel view.
Demo: http://jsfiddle.net/ambiguous/Y49W8/
I have a little problem, and I can't figure out where does it come from.
I'm using jQuery UI (and of course jQuery)
I have the following HTML:
<input type="checkbox" id="test" value="test"/>
<label for="test">Show Test</label>
<div id="checkedDiv"></div>
and the following JS:
function clickChange() {
var currentText = this.nextSibling.innerHTML;
this.nextSibling.innerHTML =
(this.checked) ? currentText.replace("Show","Hide") :
currentText.replace("Hide", "Show");
$("#checkedDiv").text(this.nextSibling.innerHTML);
}
var test=document.getElementById("test")
test.onclick=clickChange;
$("#test").button();
The problem is that on the first click, the innerHTML doesn't change. After that it works.
And to be a little more disappointed, the nextSibling seems to change (at least from what is seen in the #checkedDiv), but doesn't appear on the DOM Tree on firefox/firebug.
Am I missing something ?
Thanks
(if you want to try it yourself, it's here: http://jsfiddle.net/nvNKW/3/ )
EDIT:
The (or at least one) solution is to use label as suggested by Aziz Shaikh:
function clickChange() {
var currentText = $(this).button( "option","label");
$(this).button( "option","label",(this.checked)? currentText.replace("Show","Hide") : currentText.replace("Hide", "Show"));
}
And there is no need to change the html or the button initialisation.
Try setting the label using $("#test").button({ label: newText }); instead of this.nextSibling.innerHTML
Edit: So your fixed JS function would be:
function clickChange() {
var currentText = this.nextSibling.firstChild.innerHTML;
var newText = (this.checked) ? currentText.replace("Show","Hide") : currentText.replace("Hide", "Show");
$("#test").button("option", "label", newText);
$("#checkedDiv").text(this.nextSibling.innerHTML);
}
It's because nextSibling() also returns text nodes. You are changing the blank empty space after the input, not the next tag.
jQuery makes it easy, do
$(this).next('label').html()
I spent a lot of time trying to configure a styleswitcher script that replace my html background and css from one color to another, I got some texts using SIFR3, mainly h1, h2 tahs and h2 a: links...
My only problem is that when I'm switching, the flash text doesnt take the color change into consideration, I've tried to play with rollBack but I'm out of luck.
I found an interessant solution here :
function changeColor(hexValue) {
var css = '.sIFR-root { color: ' + hexValue + '; }';
for (var i = 0; i < sIFR.replacements['h1'].length; i++) {
sIFR.replacements['h1'][i].changeCSS(css);
}
for (var i = 0; i < sIFR.replacements['h2'].length; i++) {
sIFR.replacements['h2'][i].changeCSS(css);
}
}
// after switching stylesheet:
changeColor('#FF9900');
It works for h1, h2 but not for my h2 a: links...
Can you tell me how to adjust this?? It would be really really nice.
Right now when firing this function, my links just turn in their old html look with underline text decoration. Thanks !!
You need to pass in the new (or existing) styles for the a as well.