We are using Webfont Loader to load google fonts. And inside the active callback of WebFont.load we load our main script and bootstrap angular.js application.
<script type="text/javascript">
WebFontConfig = {
google: {
families: ['Open Sans:400,700,700i,400i:latin-ext']
},
active: function() {
var mainScript = document.createElement('script');
mainScript.src = "/js/main.js";
mainScript.onload = function() {
angular.bootstrap(document, ['cob']);
}
document.body.appendChild(mainScript);
}
};
WebFont.load(WebFontConfig);
</script>
To make browser use default fonts until the google font file loaded, we set fonts for .wf-active class
html.wf-active {
font-family: 'Open Sans', sans-serif;
}
Inside angular run, we switch apploaded and clear screen from loaders and show the application.
angular.module('mymodule')
.run([function() {
$rootScope.appLoaded = true;
}
]);
html
<body>
<div class="app-loader" ng-hide="appLoaded">loading...</div>
<div class="page-container" ng-if="appLoaded">
application loaded. <button>GİRİŞ</button>
</div>
</body>
We see "loading..." until the font files loaded, then application bootstraps successfully.
But the button text is rendered as "G R " for a couple of seconds, after a while 'İ' and 'Ş' characters are loaded into screen and we see GİRİŞ on button.
I am sure the font file is loaded before application bootstraps, because the font doesn't change after the application is loaded.
May be irrelevant but, I got some image files on the page and foreign characters are rendered with the image files. So there is some kind of a wierd screen render latency.
We only have this issue on iOS application, I have tested it on iPhone 6 and 6s, and on xcode simulators.
This works as intended on browsers (safari, chrome and firefox) and on android application we create with the same cordova project.
After trying various preload methods, just as I was considering to give it up, I came accross to a fact here
most browsers download fonts when they're used in a page rather than
when they're declared in CSS.
It seems like latin-ext subset of the font is delayed until it is used inside the page.
I have solved the issue by putting a dummy character (İ) that will make it download latin-ext subset on load screen
Related
In my PDF download, I need to have the possibility to use both english and chinese as languages for the inserted text, but while english works I cannot make chinese to work.
I followed the documentation from here, but no matter what fonts I try to use the newly added ones always display as empty boxes, more exactly something like this [][][][].
The steps I've took are the following ones:
Downloaded the SC (and TC) fonts from the google fonts page
Converted the Regular file of the font family from .otf to .ttf using online converters (multiple sites since I've thought maybe the convertor has a problem). This resulted in two aprox. 10kb files (one for TC and one for SC).
Using the script.sh from the pdfmake documentation page, I've converted the .ttf fonts to a vfs_fonts.js, which successfully created an object that contains the font name as key and a base64 string as value
Added the necessary code to my pdf exporting service after moving the vfs_fonts.js file in my assets folder
Yet the boxes are still empty. This is my service code, where pdfFonts.pdfMake.vfs references the newly created vfs file and defaultStyle of the docDefinition is set to font: "NotoCh".
pdfMake.vfs = pdfFonts.pdfMake.vfs;
pdfMake.fonts = {
NotoCh: {
normal: 'NotoSansSC-Regular.ttf',
bold: 'NotoSansTC-Regular.ttf',
italics: 'NotoSansSC-Regular.ttf',
bolditalics: 'NotoSansTC-Regular.ttf',
},
};
I used both SC and TC files because initially I thought I was using the wrong chinese characters, but it doesn't matter which ones I use, it still doesn't work, and I receive no error in the console or at compile time. What am I missing in here?
EDIT: These are the characters I am trying to display, as an example: 简体中文体中文
It looks like this is a bug related to Noto fonts present in the latest pdfkit version 0.11.0, which was seemingly fixed in pdfkit-next. Link to the bug
Not sure if you've solve your problem yet. I had the same issue before and I finally solved the problem after trying out many solutions posted online: So what you have been doing is correct and will work, as long as you include your custom font as the new default font style in your document definition. I have included my test html code below for your reference.
Note: The custom font file doesn't have to be in .ttf format. I'm using Noto Sans SC from Google Fonts and the .otf files work just fine. (I'm using pdfmake v0.1.68).
<!DOCTYPE html>
<html>
<head>
<title>PDFMake with Chinese Font</title>
<meta charset='utf-8'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
<script src="vfs_fonts.js"></script>
</head>
<body>
<div id="test">尝试加入简体中文</div>
<script>
pdfMake.fonts = {
NotoSansSC: {
normal: 'NotoSansSC-Regular.otf',
bold: 'NotoSansSC-Bold.otf',
}
};
var docDefinition = {
content: document.getElementById('test').innerHTML,
defaultStyle: {
font: 'NotoSansSC'
}
}
pdfMake.createPdf(docDefinition).download();
</script>
</body>
</html>
When we print pages from our web site, which is based on Bootstrap 3, they are printing on some browsers showing the mobile version. I have Googled to try and find a good solution, but not really found anything that works.
Using the same CSS for the screen and adding the "print-hidden" class to specific DIV's our pages look fine using Safari on a Mac, but using Chrome on the Mac or Firexof and Chrome on the PC the print preview shows the mobile version.
Is there an easy way to tell the browser that the viewport width is a regular screen not a phone (XS), or do we have to incorporate a lot of complicated grid changes etc?
Adding a print media query worked for me. This is what I finally stumbled onto.
#media print {
#page {
size: 330mm 427mm;
margin: 14mm;
}
.container {
width: 1170px;
}
}
The 330mm and 427mm dimensions were just what seem to fit for my 1170px breakpoint. (They're also the 8.5/11 ration.)
EDIT: As #tony-payne said, this likely only works for Chrome. In my use case, that was fine. Just added a script with a warning about printing if not in Chrome.
<script>
(function() {
var isChromium = !!window.chrome;
var beforePrint = function() {
alert("Printing is optimized for the Chrome browser.");
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches && !isChromium) {
beforePrint();
}
});
}
window.onbeforeprint = beforePrint;
}());
</script>
Something that worked for me...
in bootstrap grid.scss find:
#include make-grid(xs);
then add below:
#media print {
#include make-grid(sm);
}
This is a known issue that's mentioned in the official docs:
Printer viewports
Even in some modern browsers, printing can be quirky. In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. See #12078 for some details. Suggested workarounds:
Embrace the extra-small grid and make sure your page looks acceptable under it.
Customize the values of the #screen-* Less variables so that your printer paper is considered larger than extra-small.
Add custom media queries to change the grid size breakpoints for print media only.
I am developing an app which uses both Phonegap and JQuery Mobile.
The app connects to an external server to check for new content/content updates (html and pdf files).
If needed, in iOS those files are successfully downloaded into the app /Documents folder.
The app then retrieves each content file's absolute path (file://localhost/var/mobile/Applications/APPID/Documents/subfolder) and creates listviews that link to each file's absolute path.
The problem I am having is the following: tapping a listview opens the linked page BUT not as an ajax call. The page loads but then no javascript (cordova.js, jquery.js app.js etc) is referenced in the page and hence I can't navigate back to the main menu. It seems like the jQueryMobile ajax navigation stops working when I open html files in the /Documents folder.
This happens only for the downloaded content in the /Documents folder (and hence outside Phonegap's www folder).
From the remote debugger, if I try to call the $.mobile.changePage('previousPage.html')* function, the console returns that $ is not defined, as if the page couldn't reference jQuery. But in none of the pages in the /www folder I need to re-reference the js files.
The app uses a multipage layout and each page has its own javascript after the <div data-role="page" id="pageid"> container.
Each .html in the /Documents folder is structured as a jQueryMobile page (with data-role attributes).
This is the code that creates the listviews:
<script type="text/javascript">
$('#content').live('pagebeforeshow', function(e) {
var curCat = parseInt(window.localStorage.getItem('currentCat'));
console.log('PAGE BEFORE SHOW: CONTENT');
db.db.transaction(function(tx) {
tx.executeSql('SELECT * FROM `content` WHERE `content`.`catID` = ?', [curCat],
function(tx, result) {
var path = window.localStorage.getItem('contentPath') + '/';
if (result.rows && result.rows.length) {
var html = '<ul data-role="listview" id="linkUl">';
for (var i = 0; i < result.rows.length; i++) {
var filename = result.rows.item(i).index_file.substr(result.rows.item(i).index_file.lastIndexOf('/'));
console.log(result.rows.item(i).id);
html += '<li id="' + result.rows.item(i).id + '">';
html += '<a href="' + path + filename +'">';
html += result.rows.item(i).title;
html += '</a></li>';
}
html += '</ul>';
console.log(html);
$('#contCnt').html(html);
$('ul#linkUl').listview();
}
},
function(tx, error) {
console.log(error.code);
var html = '<div id="errorDB">';
html += 'ERROR RETRIEVING FILES';
html += '</div>';
$('#contCnt').html(html);
}
);
});
});
$('div#content').live('pageshow', function(e) {
$('ul#linkUl').listview('refresh');
});
</script>
where the ContentPath variable is stored as a fileSystem object's directory.toUrl();
My fear is that jQueryMobile can't ajax-pull html from an external directory (the /Documents folder in iOS), or that I am missing some attribute or setting in order to do so.
Perhaps because I am using an absolute url? If so, how can I get the relative url from Phonegap's /www folder?
Do I have to declare something on the cordova.plist file?
Also, the downloaded content won't have to contain any js, they should be only plain html, but I need to keep jQuery Mobile header/footer and navigation system in all the pages.
I am using Cordova 2.2.0 and the latest releases of both jQuery and jQuery mobile.
Thanks in advance and sorry if something in the formatting goes wrong, I am new to SO (in case I'll edit asap).
You can open files from the documents folder (or any other folder the app has read access to).
There are two reasons that a link may not load as an ajax page
jQuery Mobile thinks that it isn't part of the app
There is a javascript error loading the page, which causes the default link click action to run instead of the ajax loader.
You could try using a call to $.mobile.changePage instead of just setting up the links - that gives you a little bit more visibility into what is going on.
I don't think a file url in a different folder should be treated as a different domain by jQuery Mobile, but to eliminate that possibility it should be reasonably easy to construct a relative url to the documents folder.
Solved, and thanks to Tom who led me through the right direction.
I guess the problem was that jQueryMobile was interpreting the absolute path as a an external link and thus the WebView was opening the html files as a new file, detaching it from the rest of the application.
What I did was substituting the absolute path file://localhost/var/mobile/Applications/APPID/Documents/subfolder
with a relative one, which in my case is './../../Documents/subfolder/filename.html
and now it works like a charm.
I am using Xcode 4 with PhoneGap (Cordova 1.6) and ChildBrowser. I've used SiteCrawler on OSX to successfully download a website and localize it, and it is fully browsable locally with images, PDFs, etc. I have moved all the localized site files into the PhoneGap www folder and the app test builds fine - the site is fully browse able.
I want the PDFs on the site to open in their own window, and ChildBrowser does this perfectly as far as my needs. Using http://blog.digitalbackcountry.com/2012/03/installing-the-childbrowser-plugin-for-ios-with-phonegapcordova-1-5/ I was able to get ChildBrowser installed and working - I have PDF files opening in the ChildBrowser.
My problem is that using the link above, I have to add ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;" to every PDF link on the site. Since we use a CMS, this isn't much of a problem - the bulk of PDFs are called from a template with data filled in from the CMS and they are fine. But there are some pages in the site where the client has added a link to an uploaded PDF into the content of the page. In this case, there is no easy way to add the above code to the inline link.
I figured that I can use jQuery to look at each a tag on the page when clicked and if clicked, run the ChildBroswer instance, and this would cover both types of PDF links, but I can't seem to get it to work. Here is what I have:
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
$('a[href$=pdf]').click(function() {
var href = $(this).attr('href');
cb.showWebPage(encodeURI(href));
return false;
});
</script>
Using the above with no inline link javascript, the PDF opens on its own, without child browser.
Using the below along with ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;", child browser will open, and for some links shows the PDF, and for others just says loading. I figure this is just tweaking for paths, but I think the above would be most universal if it can be made to work.
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
function loadChildBrowser(file) {
cb.showWebPage(encodeURI(file));
}
</script>
Through trial and error I was able to get this working for the most part. I'm still hitting a couple of unrelated bugs (well, related to Childbrowser but not the loading go local PDF files).
So, using ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;" on all links to PDFs on the site is still the way to go. What changed was the JS function I am using to determine the path to the PDFs and launch ChildBrowser. I had to do this:
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
function loadChildBrowser(file) {
var path = location.pathname+file;
var len = path.length;
var locleft = path.indexOf('/www/')+4;
var trim = len-locleft;
var left = path.slice(0,-trim);
var locright = path.indexOf('/assets/');
var trim = len-locright;
var right = path.slice(-trim);
var finalPath = left+right;
cb.showWebPage(encodeURI(finalPath));
}
</script>
in my included header file (so it lives in the head of every page on the site). The problem was that when ChildBrowser pulled up the path to the file, it was appending the part below the normal site's web root (/assets/documents/xxx.pdf) to the full path to the page being viewed in the app at the time, so I ended up with:
/var/users/name/blah/blah/www/page.html/assets/documents/xxx.pdf
when we wanted:
/var/users/name/blah/blah/www/assets/documents/xxx.pdf
The script above prepends location.pathname to the file var passed from the function (ontouch start) that calls ChildBrowser so that we end up with
/var/users/name/blah/blah/www/page.html/assets/documents/xxx.pdf (not correct)
It then splits it into a left section (everything before /www) and a right section (everything including and after /assets/) and then concatenates them (effectively removing all the site directory and html file information) and then calls ChildBrowser with that finalPath. Working for me.
I'm using "Jquery UI 1./Dan Wellman/Packt Publishing" to learn JQuery UI. I'm working on the 'Dialog widget' chapiter.
After I've completed a series of exercises in order to build a Dialog widget (using Google Chrome), I then tried my work with Internet Explorer and Firefox.
The result has been disappointing.
Chrome was perfet
With Internet Explorer, (1) the title of the Dialog widget did not appear, (2) The location of the dialog widget was not correct (given the position: ["center", "center"]). It was rather offset toward left.
With Firefox, the location was respected. However, only the outer container was visible. the content was missing, just a blank container.
Also using Option Show:true and Hide:true did only work with Chrome.
I wonder now if JQuery UI was meant to be used only with Google Chrome. I just think that I might be missing some directives to make it work with major browsers (as the author claimed in his book).
Here's the code. Since, I'm using ASP.NET MVC, certain codes, such as the element to the css, do not appear. But, for the rest, all the functioning code is bellow.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<p>
The goal of this tutorial is to explain one method of creating
model classes for an ASP.NET MVC application. In this tutorial,
you learn how to build model classes and perform database access
by taking advantage of Microsoft LINQ to SQL. In this tutorial,
we build a basic Movie database application. We start by creating
the Movie database application in the fastest and easiest way possible.
We perform all of our data access directly from our controller actions.
</p>
<div style = "font-size:.7em" id = "myDialog" title = "This is the title">
In this tutorial -- in order to illustrate how you can build model classes
-- we build a simple Movie database application.
The first step is to create a new database. Right-click the
App_Data folder in the Solution Explorer window and select the menu option
Add, New Item. Select the SQL Server Database template, give it the name
MoviesDB.mdf, and click the Add button (see Figure 1).
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent"
runat="server">
<script src="../../Content/development-bundle/jquery-1.3.2.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.core.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.dialog.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.draggable.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.resizable.js"
type="text/javascript"></script>
<script
src="../../Content/development-bundle/external/bgiframe/jquery.bgiframe.js"
type="text/javascript"></script>
<script type = "text/javascript">
$(function() {
var execute = function() { }
var cancel = function() { }
var dialogOpts = {
position: ["center", "center"],
title: '<a href="/Home/About">A link title!<a>',
modal: true,
minWidth: 500,
minHeight: 500,
buttons: {
"OK": execute,
"Cancel": cancel
},
show:true,
hide: true,
bgiframe:true
};
$("#myDialog").dialog(dialogOpts);
});
</script>
Thank for helping.
EDIT
I've re-done the same exercise yesterday. From the beginning to the end, each time I've introduced a behavior, I've tested my work in all 3 browsers (IE, Firefox, Chrome).
Everything works until I add option Show and Hide. Then only Chrome works.
If I remove Show and Hide, everything works again.
If I keep only Show and Hide, everything works perfectly
Maybe Show and Hide options for dialog widget do not mix up well with other options.
Thanks for helping.
No, jQuery UI works in any of those browsers. It's probably either the steps you're following don't work so well with the version you're using or the version you're using is old. I've used jQuery UI without issue on both browsers. If you don't believe me, then open this URL in your browser:
http://jqueryui.com/demos/dialog/
In Firefox 3.6, it loads just fine for me.
I'm not an expert on jQuery UI, but providing the code here might help.
jQuery supports all the major browsers however there are know issues with;
Firefox 1.0.x
Internet Explorer 1.0-5.x
Safari 1.0-2.0.1
Opera 1.0-8.x
Konqueror
We have successfully implemented a Dialog widget without major issues. We did have some problems making sure the correct versions of the libraries were created. I would suggest you build a custom file using the jQuery UI download tool. This will put all the necessary files in a single minified file.
If the Dialog examples don't help then posting code will be necessary to obtain further help.
EDIT:
I have anchors created with the classes dialogOpen and dialogClose and use the following code to utilise the created UI Dialog;
$(document).ready(function(){
var dialogOpts = {
autoOpen: false,
modal: true,
width: 840,
height: 560
};
$(".dialogOpen").click(function(){
$("#myDialog").dialog("open");
return false;
});
$(".dialogClose").click(function(){
$("#myDialog").dialog("close");
return false;
});
$("#myDialog").css('display','block').dialog(dialogOpts);
$(".ui-dialog-titlebar").hide();
});
NB: The use of the css function when creating the dialog stops the content appearing on the page before the Dialog is created. We needed this because our dialog has flash.
You may be missing something. It surely works in all major browsers.
jQuery is ment to be cross browser. Any errors with this can have to reasons
- Programmer's error
- Explicit incompatibilty
There are some explicit incompatibility's with IE5.5 and IE6 in jQuery. They are in the comments of jQuery and a good js compatible IDE like netbeans will allow targeting and warn you about it.
I never had any problems with the dialog widget positioning or contents.
jQuery UI is most definitly not designed to work with Google Chrome only.
I've successfully created applications using jQuery UI working on all major browser platforms.
jQuery UI (and jQuery) contain code to work around certain browser issues.
Of course there can be issues in jQuery UI which show on IE, like this one, but those are certainly not by design.