Tag: jQuery

Categories
Development

Append DOM to Another Page Using YQL

Apparently there is a data limit to how much we can fit into a content field on our CMS at work. The problem was that there is an incredibly long list of donors names, and when saving the edits to a page in the CMS, it just wouldn’t save past a certain point in the list.

So, I was a bit stumped on how best to workaround. So, I created another page with a good amount of the names in an unordered list. I then used YQL to create a REST query that would output only the HTML on the page that I wanted into and XML feed.

1

select * from html where url="http://www.a_web_page.com" and xpath='//*[@id="main"]/ul/li'

I’m not too sharp on my xpath selectors, but luckily it’s very easy to find an xpath using Chrome. Just right click on an element in the inspector, and the option is there. Huge timesaver!

Ok, now I had a REST query courtesy of YQL of the HTML elements that I wanted to take from that page.

Next was to load and append the data from the REST query onto the unordered list on the other page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(function()
{
    $.ajax(
    {
        type: "GET",
        url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fintraweb.stockton.edu%2Feyos%2Fpage.cfm%3FsiteID%3D221%26pageID%3D271%22%20and%0A%20%20%20%20%20%20xpath%3D'%2F%2F*%5B%40id%3D%22main%22%5D%2Ful%2Fli'&diagnostics=true",
        dataType: "text",
        cache: false,
        success: function(xml)
        {
            $(xml).find('li').each(function() { 
    			$("#main ul.append-list").append($(this));
			});
     }});
});

Using the jQuery library I was able to load view the ajax function the REST query. I had to choose the dataType of text not xml in this case. That way I was simply appending the results as they were in the REST query.

I can clean up the javascript a bit, and will work on that. However for now, I am able to add data from another page to work around the data limits of the CMS.

Categories
Development

PhoneGap with jQuery Mobile iOS 7 iPad Broken Display

I made a little iOS app using PhoneGap (Cordova 3.0) and jQueryMobile 1.3.1. All was working well in my xCode simulators as well as when testing out on my iPhone with iOS 6.x. But when xCode 5 and iOS 7 arrived I sadly noticed that my app was now not displaying correctly on the iPad simulators when running iOS 7.

Broken Avalon AppThis one had me stumped for quite some time. I hadn’t changed anything, so clearly something had changed with the iOS 7 update. After much research and quite frankly guessing it appears that the iPad under iOS 7 is measuring the device width and height a bit differently than it had in iOS 6, thus throwing off the CSS that was laying out this app.

Luckily a fairly simple change to the meta viewport tag was all that was needed to set things bad in order.

Removing  ‘width=device-width, height=device-height’ from the viewport meta seemed to set things back in order for me.

I’m not sure if this causes any conflicts elsewhere, but so far I haven’t found any (it’s quiet, almost too quiet).

 

 

Categories
Development

jQuery Mobile Hi-Res Images

I’ve been developing a little mobile app using jQuery Mobile and PhoneGap and ran into a little difficulty with supporting both Retina and earlier iPhone displays. Turns out it’s not too difficult using some CSS3 media queries.

However my hi-res images were showing up way too big still.

Simply adding the background-size attribute to what a “standard size” image should be did the job. It did make a lot of sense too, even though I hadn’t thought of it at first.

For instance, my 640px x 1136px image needed a background-size attribute of 320px x 480px to display properly on the Retina display since they pack a much higher pixel density.

1
2
3
4
5
6

@media only screen and (-webkit-min-device-pixel-ratio:2) {
    .ui-body-a, .ui-overlay-a {
        background: url('img/home_bg_2x.jpg') center bottom no-repeat;
        background-size: 320px 480px;
    }
}