I created a jQuery mobile page , where i import the albums and photos from a facebook page and dynamically create a listView with the albums. When the user clicks on an album from the listview he can see all the photos in thumbnails.
When he hits a photo he should see them in a nice carousel effect.
However in my case when i select a foto i just see the photo in the facebook link.
How it should be(click on a picture for carousel effect) :
PhotoSwipe Example
What i get after i select a picture :
I dont get the carousel effect..Instead i just get the image in the fb link.
This is all my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CityInfo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link href="photoSwipe/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="photoSwipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoSwipe/klass.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="photoSwipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<script type="text/javascript">
//PhotoSwipe
/*
* IMPORTANT!!!
* REMEMBER TO ADD rel="external" to your anchor tags.
* If you don't this will mess with how jQuery Mobile works
*/
(function(window, $, PhotoSwipe){
$(document).ready(function(){
$('div.gallery-page')
.on('pageshow', function(e){
var
currentPage = $(e.target),
options = {},
photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));
return true;
})
.on('pagehide', function(e){
var
currentPage = $(e.target),
photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}
return true;
});
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
var albumPhotos = new Array();
var albumThumbnails = new Array();
// start the entire process
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '564984346887426', // App ID from the app dashboard
channelUrl : 'channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
FB.api('169070991963/albums', checkForErrorFirst(getAlbums));
}
// checkForErrorFirst wraps your function around the error checking code first
// if there is no response, then your code will not be called
// this allows you to just write the juicy working code
// and not worry about error checking
function checkForErrorFirst(myFunc) {
return function(response) {
if (!response || response.error) {
alert("Noo!!");
} else {
myFunc(response);
}
};
}
function getAlbums(response) {
for (var i=0; i < response.data.length; ++i) {
processAlbum(response.data[i], i);
}
}
function processAlbum(album, i) {
FB.api(album.id + "/photos", checkForErrorFirst(populateAlbum(album, i)));
}
function populateAlbum(album, i) {
return function(response) {
for (var k=0; k < response.data.length; ++k){
albumThumbnails[i] = albumThumbnails[i]||[];
albumThumbnails[i][k] = response.data[k].picture;
albumPhotos[i] = albumPhotos[i]||[];
albumPhotos[i][k] = response.data[k].source;
}
// now that we've populated the album thumbnails and photos, we can render the album
FB.api(album.cover_photo, checkForErrorFirst(renderAlbum(album, i)));
};
}
function renderAlbum(album, i) {
return function(response) {
var albumName = album.name;
var albumCover = album.cover_photo;
var albumId = album.id;
var numberOfPhotos = album.count;
// render photos
$(".albums").append('<li>'+
'<a href="#Gallery' + i + '"' + 'data-transition="slidedown">'+
'<img src= "' + response.picture + '" />'+
'<h2>' + albumName + '</h2>'+
'<p>' + "Number of Photos: " + numberOfPhotos +'</p>'+
'</a>'+
'</li>').listview('refresh');
$("#Home").after('<div data-role="page" data-add-back-btn="true" id=Gallery'+ i +
' class="gallery-page"> ' +
' <div data-role="header"><h1>Gallery</h1></div> ' + ' <div data-role="content"> ' +
' <ul class="gallery"></ul> ' + ' </div> ' +
' </div> ');
for(var x=0; x < albumPhotos[i].length; x++)
$('#Gallery' + i + ' .gallery').append('<li><a href="' + albumPhotos[i][x]
+ '" rel="external"><img src="' + albumThumbnails[i][x] + '"' + '/> </a> </li>');
};
}
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div data-role="page" id="Home" data-theme="c">
<div data-role="content">
<h2 id="banner" align = "center">Photo Albums</h2>
<ul data-role="listview" data-inset="true" class="albums">
</ul>
</div>
</div>
</body>
</html>
As you see i call the fb Api to import albums and photos , i dynamically create the html page with jquery mobile depending on the number of albums and photos etc.
I cant understand what i am doing wrong here , as i try to follow the examples source code. The only difference is that instead of having the html page static , i create it dynamically. But i give it the correct form as far as i understand.
Any ideas on this one? (All the photos and albums are correctly imported , i have absolutely no problem with the facebook API. The only problem lies that i cant get the carousel effect from the library)
EDIT
The only warning i get in the console is this :
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
However this is from the fb API (which by the way seems to work just fine...) and i dont think iτ has anything to do with the what i am trying to accomplish here.
It seems that the scripts responsible for handling the carrousel aren't available or are interrupted in a different line of code somewere that has an error: if you would strip out jquery and the photoswipe js file reference from the header, the gallery would still have the same functionality as it has now due to css and markup.
Maybe good to rule out the obvious:
Did you check your links to the .js scripts?
I see that you use some with a http reference and others locally, if one of them aren't found the script will not work.
I'm quite new to java, my way of going at it would try to minimize the extra scripts around it and build it up from there.
I am not getting this run either. The website's documentation on how to use seems not elaborate enough...
EDIT: The interesting thing is that it seems to run in my desktop browser (the site demo) but not in my mobile browser (android/htc).
UPDATE: Funny. It doesn't run via apache2 as a website, but when I replace 'localhost' with '/var/ww' it is OK :)
Related
I'm doing a study using a RSS, but the Web Site gives me a RSS with an unclosed tag then I couldn't get the innerHTML of this tag.
I don't know how to resolve the problem with jquery and make the tag closed or a possible solution like this.
Here is the code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" content="xml">
<script type="text/javascript" src="api/jquery.js"></script>
</head>
<body>
<p id="someElement" visibility="hidden"></p>
<p id="anotherElement"></p>
<script type="text/javascript">
var x = new XMLHttpRequest();
x.open("GET", "http://www.lemonde.fr/rss/une.xml", true);
x.onreadystatechange = function () {
if (x.readyState == 4 && x.status == 200)
{
var doc = x.responseXML;
var string = (new XMLSerializer()).serializeToString(doc);
$("#someElement").append(string);
alert("test");
var tag = document.getElementsByTagName("item");
for(var i = 0, max = tag.length; i < max; i++){
var htmli = tag[i];
//alert(htmli.innerHTML);
//uncomment the alert to see the xml got from the rss
var title = htmli.getElementsByTagName("title")[0].innerHTML;
var link = htmli.getElementsByTagName("link")[0].innerHTML;
var description = htmli.getElementsByTagName("description")[0].innerHTML;
var toAdd = "<ul><li> title : " +title+"</li><li> link : "+ link +" </li><li> description :"+description+" </li></ul>";
$("#anotherElement").append(toAdd);
}
}
};
x.send(null);
</script>
</body>
</html>
Any solution to this?
I have jquery in a folder named api.
Thanks a lot !!
(I notice that while you include jQuery in a script tag, you're not actually using it in your code. It's much better practice to use jQuery's functionality to manage AJAX requests and serialization, if you're going to use it at all, as they cover many more situations and browser versions. I'd also recommend retrieving jQuery from a CDN rather than hosting it yourself. jQuery has had the ability to parse XML natively since 1.5. The following was written using 1.12.)
I ran into the same issue with unclosed tags in an RSS feed and came up with a terrible solution to it. I have not tested this cross-browser and would not recommend incorporating it into production code, but it worked to solve a one-time problem for me.
The idea is to take the raw output of the RSS item's text, cram it into the jQuery HTML parser, and then manually inspect its output until we get to an item that it thinks might have been an HTML <link> tag. Because we know the RSS link tag isn't closed, the next thing it encounters should be parsed as an HTML Text object, which we can extract for our permalink URL.
Here's how I would rewrite your script to take better advantage of jQuery and incorporate my hack. (I'm assuming you have set up CORS or something else so that you can actually retrieve the feed from lemonde.fr cross-domain.)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" content="xml">
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<p id="someElement" visibility="hidden"></p>
<p id="anotherElement"></p>
<script type="text/javascript">
(function($, window, document) {
function fetchFeed(url) {
// use jQuery to handle AJAX
$.get(url, function(data) {
// parse XML result with jQuery
var $XML = $(data);
$XML.find("item").each(function() {
// ensure that we have a jQuery-wrapped _this_ object and
// create a new object with the properties we want
var $this = $(this),
item = {
title: $this.find("title").text(),
description: $this.find("description").text(),
link: ""
};
// since the XML parser will treat the unclosed <link> as valid,
// we instead send the raw output to the HTML parser and tell it do to its best
var $redigested = $($this.html());
// jQuery should produce an array of HTML DOM objects
for (var i = 0; i < $redigested.length; i++) {
// if we found an HTMLLinkElement--a <link> tag--followed by a Text element, that's our URL
if ($redigested[i] instanceof HTMLLinkElement && $redigested.length >= i + 1 && $redigested[i + 1] instanceof Text) {
item.link = $redigested[i + 1].data;
break;
}
}
console.log("link: " + item.link);
var toAdd = "<ul><li> title: " + item.title + "</li><li> link: " + item.link + " </li><li> description: " + item.description + " </li></ul>";
$("#anotherElement").append(toAdd);
});
});
}
$(function() {
// call the fetch function on DOM ready
fetchFeed("http://www.lemonde.fr/rss/une.xml");
});
})(jQuery, window, document);
</script>
</body>
</html>
I have a https site from where I need to create a rss feed. I can successfully get rss feed for http site but I have been unsuccessful for https site. i used google, yahoo and many other for reading rss but have been unsuccessful. I need to read rss feed using jquery or js or jsp/java. Any help will be highly appreciated.
//this is just for test
YUI().use('yql', function(Y){
var query = 'select * from rss(0,3) where url = "some https site"'
var q = Y.YQL(query, function(r){
//r now contains the result of the YQL Query as a JSON
var feedmarkup = '<p>'
var feed = r.query.results.item // get feed as array of entries
for (var i=0; i<feed.length; i++){
feedmarkup += '<a href="' + feed[i].link + '">'
feedmarkup += feed[i].title + '</a><br />'
feedmarkup += feed[i].description + '</p>'
}
document.getElementById('qznews').innerHTML = feedmarkup
})
})
//this is just for the test
<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
<div id="qznews"></div>
Guys I was able to solve my above question using this post from stack overflow:https://github.com/sdepold/jquery-rss
Thanks for anyone taking time/effort on my question.
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="jquery.rss.min.js"></script>
<script>
jQuery(function($) {
$("#rss-feeds").rss("add any https feed link will work perfectly",
{
entryTemplate:'<li>[{author}#{date}] {title}<br/>{teaserImage}{shortBodyPlain}</li>'
})
})
</script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="rss-feeds"></div>
</body>
</html>
I have a dashboard site in the works, and it makes use of SpringMVC, FusionCharts, and Bootstrap (to give an architectural overview). When I freshly start up the Tomcat server, the very first time I'm served the index page, a panel of buttons will not render properly. I get the correct number of white circles with question marks as made in the first of 3 javascript functions. If I refresh the page, the intended red and green results immediately come up, generated by the second script function.
As a preamble, the panel with buttons on it is correctly generated with the right count, correct names, correct HREFs and all else. The colors just do not change until the page is refreshed. Back when this project was first constructed, the data was being gathered via http request server-side. It was comparably slow to what is occurring now: loading the data from a file server-side and sending it through in the same format. The old way always produced the correct colors and icons after a 10-second wait. Now, the buttons just remain blank white until I refresh the page, and then I get the right results.
I believe this is just the result of two Javascript functions stepping on each other, even though I know JavaScript is single-threaded. If not, I'm stumped and lost.
Index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Free Bootstrap Admin Template : Dream</title>
<!-- Bootstrap Styles-->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="css/font-awesome.css" rel="stylesheet" />
<!-- Morris Chart Styles-->
<link href="js/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/fusioncharts/core/fusioncharts.js"></script>
<script type="text/javascript" src="js/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
</head>
<body>
...
<!-- this is where the button panel is correctly created on every load
but only correctly modified on the 2nd load and later -->
<div class="row"> <div id="AppStatusTable"></div> </div>
...
<script src="js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="js/morris/raphael-2.1.0.min.js"></script>
<script src="js/morris/morris.js"></script>
<!-- Custom Js -->
<!--
<script src="js/custom-scripts.js"></script> -->
<script>
$(document).ready(function(){
$.get("/buttoninfo", function(data, status) {
tableMaker(data, "AppStatusTable");
});
$.get("/appstatus", function(data, status) {
appStatus(data);
});
$.get("/stackstatus", function(data, status) {
stackUpdater(data);
});
});
</script>
</body>
These last 3 functions fill out the html of a panel to contain a dynamic number of buttons, modify the inner html of those buttons, and then update other panels. The third currently takes a while and always produces correct results. I don't suspect it is the issue.
dashboard.js
function templateLoader(appTag) {
//$.get('/app/' + appTag);
window.location = "/app/" + appTag;
}
function appStatus(data){
for(var i = 0; i < data.length; ++i) {
if(data[i][1] == "up"){
$("#" + data[i][0] + "-appcheck").removeClass("btn-default");
$("#" + data[i][0] + "-appcheck").addClass("btn-success");
$("#" + data[i][0] + "-appcheck-icon").removeClass("fa-exclamation-circle");
$("#" + data[i][0] + "-appcheck-icon").addClass("fa-check");
} else if(data[i][1] == "down"){
$("#" + data[i][0] + "-appcheck").removeClass("btn-default");
$("#" + data[i][0] + "-appcheck").addClass("btn-danger");
$("#" + data[i][0] + "-appcheck-icon").removeClass("fa-exclamation-circle");
$("#" + data[i][0] + "-appcheck-icon").addClass("fa-close");
}
}
}
function tableMaker(data, tableID) {
/* vars used below as the skeleton of the injected buttons*/
var i = 0, j = 0, colLimit = 12;
for(; i < data.length;){
for (var j = 0; j < colLimit && i < data.length; ++j, ++i) {
mytable += colStart + data[i][2] + titleEnd + '\n' + buttonStart + data[i][2] + buttonMiddle1 +
data[i][2] + buttonMiddle2 + data[i][2] + buttonMiddle3 + '><i id="' + data[i][2] +
buttonEnd + colEnd;
}
}
panel += mytable + panelEnd;
document.getElementById(tableID).innerHTML = panel;
}
function stackUpdater(data){
for(var i = 0; i < data.length; ++i){
var curStack = data[i][0];
for(var j = 1; j < data[i].length; j++) {
if(data[i][j] == null) {
break;
} else {
$("#" + curStack + j).removeClass("progress-bar-info");
if(data[i][j] == "up") {
$("#" + curStack + j).addClass("progress-bar-success");
} else {
$("#" + curStack + j).addClass("progress-bar-danger");
}
}
}
}
}
I understand browsers cache the results of javascript functions, but the third function is run on every refresh, so why wouldn't the first two be? And thus, why would the results of the second function only appear after refreshing?
What needs to be changed to make sure the buttons modify correctly the FIRST time this page is loaded?
UPDATE 1
After inserting alerts between the function calls, the rendering works on the first try, so what's the correct way to ensure synchronization without this?
Bottom of Index.html:
$(document).ready(function(){
$.get("/buttoninfo", function(data, status) {
tableMaker(data, "AppStatusTable");
});
alert("Button table made!");
$.get("/appstatus", function(data, status) {
appStatus(data);
});
alert("Button Data Updated!");
$.get("/stackstatus", function(data, status) {
stackUpdater(data);
});
alert("Stack Data Updated!");
});
</script>
Instead of using $.get try using $.ajax with cache set to false. If $.get is absolute necessary try adding a timestamp with each request. You may refer to How to set cache: false in jQuery.get call.
Hope that help.
I am trying to add Disqus to my Ionic/Cordova app. I have successfully got the Disqus widget to appear in a template using an iframe but if I click on the Disqus widget to login to Disqus to add a comment, or look at the Disqus community tab, for example, then the app goes to a non scrollable Disqus page that fills all of the screen and there is no way to get back to the app.
Is there a way to make the page it goes to scrollable and smaller than the screen so the user can get back into the app.
The Disqus code server on a static server is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id="disqus_thread"></div>
<script type="text/javascript">
var params;
var disqus_url;
var disqus_title;
var disqus_shortname;
var disqus_identifier;
window.onload = function () {
var match,
pattern = /\+/g,
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pattern, " ")); },
query = window.location.search.substring(1);
params = {};
while (match = search.exec(query))
params[decode(match[1])] = decode(match[2]);
if (params["shortname"] === undefined || params["url"] === undefined || params["title"] === undefined) {
alert("Required arguments missing");
}
else {
loadComments(params["shortname"], params["url"], params["title"], params["identifier"]);
}
};
function loadComments(shortname, url, title, identifier) {
disqus_url = url;
disqus_title = title;
disqus_shortname = shortname;
if (identifier !== undefined)
disqus_identifier = identifier;
else
disqus_identifier = "";
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = false;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
}
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
blog comments powered by <span class="logo-disqus">Disqus</span>
</body>
</html>
In my app's controller I have:
var disqus_title = "TEST";
var disqus_identifier = '/movie/' + 0;
var disqus_url = 'http://example.com/movie/' + 0;
var url = "http://example.com/disqus.html?";
$scope.disqusurl = url + "shortname=example&url=" + encodeURIComponent(disqus_url) +
"&title=" + encodeURIComponent(disqus_title) + "&identifier=" + encodeURIComponent(disqus_identifier);
$scope.disqusurl = $sce.trustAsResourceUrl($scope.disqusurl);
The relevant part of the template file looks like this:
<ion-content>
...
<iframe style="max-height: 40%;" src="{{disqusurl}}"></iframe>
...
</ion-content>
EDIT
The problem seems to be that the web links in the Disqus widget are launched within the app. If somehow the links could be made to open in an external browser then all might work fine but I can't see how to make pulled in HTML code work this way.
Here's what I would try:
1) try to over ride disqus's css using !important selector
2) try to load in content with ajax
3) search and read articles like this: https://help.disqus.com/customer/portal/articles/472096-using-disqus-in-mobile-apps
4) have an iframe to a page on your website that has disqus, and make the iframe smaller than page height.
I am using Java script with GWTP technology to build my app.
Ok, I have a requirement. I want to use loading CSS to show the loading information right at the first time the page got loaded. The loading must show before any javascript files begin to be downloaded.
After all javascript files got downloaded, the loading CSS should stop working.
For example, when people visit mydomain.com, it should show "..loading..." indicator in the middle of the page & after the page starts to be visible, then it should hide the loading indicator.
The structure of my Ajax page is as following.
<html>
<head>
<meta>...</meta>
<link type="text/css" rel="stylesheet" href="myCss.css">
<script type="text/javascript" language="javascript" src="myproject.nocache.js"> </script> // this is where the big Javascript file got loaded
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position: absolute; width: 0;height: 0; border: 0;"></iframe>
</body>
</html>
Can you not just use the "onload" attribute of the body tag?
Put this javascript line to make the "loading" disappear at the end of the large javascript file :
document.getElementById('loading').className='loaded';
<!DOCTYPE HTML>
<html>
<head>
<meta>...</meta>
<link type="text/css" rel="stylesheet" href="myCss.css">
</head>
<script>
function pageLoaded(){
var jsFile=document.createElement('script');
jsFile.setAttribute("type","text/javascript");
jsFile.setAttribute("src", 'myproject.nocache.js');
document.getElementsByTagName("head")[0].appendChild(jsFile);
}
</script>
<style>
html{width:100%;height:100%;}
body{width:100%;height:100%;margin:0px;position:relative;}
div#loading{display:table;width:100%;height:100%;position:absolute;top:0px;left:0px;}
div#loading div{display:table-cell;width:100%;height:100%;text-align:center;vertical-align:middle;background-color:#cccccc;}
div.loaded#loading{display:none;}
</style>
<body onload="pageLoaded();">
<div id="loading">
<div>LOADING...</div>
</div>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position: absolute; width: 0;height: 0; border: 0;"></iframe>
</body>
</html>
Add loading class to body in the HTML code
<body class="no-mobile pc bootstrap loading">
And when all loading of scripts finished remove the loading class of body tag.
window.onload = function () {
$("#body").removeClass('loading');
}
This is just example, You can use pure javascript to remove 'loading' class of body.
Like this
Used body as ID, because I can't put custom body tag there.
(function (w, d, url, resource) {
w.t = new Date().getTime();
if (/webkit/i.test(w.navigator.userAgent)) {
d.write("<style>#loading"
+ "{-webkit-animation:blink"
+ " 350ms linear 0s normal infinite forwards;}"
+ "#-webkit-keyframes blink{"
+ "0%{color:transparent;}100%{color:blue;}};"
+ "</style>");
};
d.write("<div id=loading"
+ " style=font-size:24px;position:relative;"
+ "left:45%;top:25%;-moz-text-blink:blink;>"
+ "loading...</div>");
var script = d.createElement("script");
script.src = url;
script.async = true;
script.type = "text/javascript";
var head = d.getElementsByTagName("head")[0];
head.appendChild(script);
w.s = setInterval(function () {
// check for `object` or `function`, i.e.g., `window.jQuery()`
// set by `script` (`src`), `url`, resource at `window`,
// at `1000ms` intervals , adjustable, e.g., `500`; `250`
if (resource in w
&& typeof w.jQuery() === "object"
&& typeof w.jQuery === "function" ) {
// do stuff
d.body.removeChild(d.getElementById("loading"));
d.write("<span class=status>jQuery version: "
+ jQuery().jquery
+ "\n"
+ "estimated loading time: "
+ Number(new Date().getTime() - w.t)
+ "</span>");
// do stuff
// utilize `object`, `function`, data
// loaded in `window`, `document`,
// from `script`, `url` , resource
$("body")
.append("<br><iframe "
+ "src=http://api.jquery.com "
+ "width=480 height=400></iframe>");
$(".status").fadeOut(5000, function() {
$(".status", this).remove();
});
clearInterval(w.s);
};
}, 1000);
}(window, document, "http://code.jquery.com/jquery-latest.js", "jQuery"));
jsfiddle http://jsfiddle.net/guest271314/27RTx/