I have got the following issue. I'm using a google webfont in a project i did with Foundation. The thing is, it is working on any browser but not on the Android Browser on a Samsung Galaxy Note. The Android Browser is showing a standard font.
For testing purpose i tried it with a simple html file to check if it's a general problem with google fonts. But it was working. Then i tried a clean Foundation-Installation, I added the google font and changed all font-family tags. And again, the same result. It is working on FF, Chrome, Opera, Safari, but not on the Android Browser.
The installed System is Android 4.2.2
Zurb Foundation Head:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link href='http://fonts.googleapis.com/css?family=Exo+2:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/vendor/modernizr.js"></script>
CSS-changes in foundation.css
font-family: 'Exo 2','sans-serif';
I changed every font-family line like above.
Result in Adroid Browser:
http://uploadpie.com/lec8E
Result in Chrome:
http://uploadpie.com/qt3qK
I hope you guys have any ideas or solutions. Thanx for your help.
Cheers
Tom
Related
I am running a docker container inside a aws lightsail instance of ubuntu 18.04. When I curl the docker container from within the aws instance I get a response of:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bibleit.co</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/boots
trap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm
" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6
jizo"
crossorigin="anonymous">
</script>
<link rel="stylesheet" type="text/css" href="/static/styles/search.css"/>
</head>
<body>
...
But when I curl the url on my local machine i get:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bibleit Search</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<frameset rows="100%,*" border="0">
<frame src="http://myPublicPort/" frameborder="0" />
</frameset>
</html>
This causes all the browsers to display the site in a frame, which I guess by default displays everything in desktop, and wont allow the site to be responsive on mobile.
Does anyone know how to correct this. I cannot find anything on this problem on line.
The URL is http://bibleit.co if anyone wants to get a response.
Thank you for your help in advance.
It turns out that I had my GoDaddy domain settings were forwarding and masking my aws static ip which caused my html to be wrapped in a frameset.
So I created a DNS zone on my lightsail network settings, which gave me 4 namespaces. I then addend those custom namespace to my Godaddy domain settings.
Lightsail automatically uses port 80, so I changed my flask server to use port 80.
Wallah! No more frameset wrapping.
Thank you
I'm upgrading my code from Qt 5.5 to Qt 5.6, but I didn't find a way to port the following code:
QWebEngineView *qwebview = new QWebEngineView(this);
qwebview->settings()->setUserStyleSheetUrl(QUrl("qrc:/about.css"));
qwebview->setHtml(fileContentStr);
What is the best way to insert a user CSS using the new Qt Web Engine?
If you read here : Bug Report on QWebEngine, you'll see that :
The only opportunity to inject CSS code into the WebEngineView is
using JavaScript. It would be nice to have an appropriate API for this
and it could look like our already existing UserScripts API.
It seems pretty clear : you can't use the WebSettings anymore to insert CSS. Instead, you will have to use HTML/JavaScript to do that.
I don't know if it will help you, but here is an extract of what I have done .
In my .cpp :
m_pView = new QWebEngineView(this);
QUrl startURL = QUrl("path/to/index.html");
m_pView->setUrl(startURL);
And in the index.html :
<html>
<head>
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Many JS scripts here -->
<link href="./css/style.css" rel="stylesheet">
</head>
<body ng-app="myApp" >
<div ui-view class="page"></div>
</body>
</html>
Hope that helps.
I have a large php application that I am converting to ember.js. In my php application I used to have separate css and js files which was loaded when the specific routes get called. what the best way to accomplish this in ember.js or is there any other best practice for that. Right now I am loading all the js and css files in my index.html file.
<link type="text/css" rel="stylesheet" href="assets/css/gumby.css" media="all" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global.css" media="all" />
<link type="text/css" rel="stylesheet" href=assets/css/tooltipster.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/jquery.fancybox.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/about.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/admin.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global_print.css" media="print" />
js files:
<script src="assets/js/libs/jquery-1.9.0.min.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.6.1.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
<script src="js/router.js"></script>
<script src="js/account.js"></script>
<script src="js/message.js"></script>
<script src="js/user.js"></script>
<script src="js/inquiry.js"></script>
I saw this tutorial http://madhatted.com/2013/6/29/lazy-loading-with-ember and also looked ember-cli. It will be really helpful for me if people share what they are doing for their application. Thanks in advance.
Typically you can take two paths to preprocess your assets: minify, compress, uglify, etc.
You can do it with the back-end you are using. As examples here, you have Rails using sprockets for its asset pipeline, or PHP's Assetic.
If you don't want to rely on your back-end for this task, you can opt to do it using any front-end build tool. There are a few here, the most popular option for ember-cli these days seems to be broccoli, which comes set up by default. Other choices could be gulp or grunt. All these options involve using your terminal to build your application, using a configuration file as a central point (Brocfile.js, Gruntfile.js, etc.)
It's mostly a matter of personal preference. As an example, I'd probably go with Rails asset pipeline for small projects, while I'd use ember-cli and broccoli if I'd be working on something bigger.
My HTML entities, such as © and mdash; are showing up as ?, both when rendered on the page and when I view the underlying source -- but only when served through my production Jetty server (in the webapps directory).
The HTML entities look fine in when served from static files through a local Nginx. They also look good when run through a development run of a Pedestal app using embedded Jetty. Here is the HTML head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="Web Site Description" name="description" />
<meta content="The Author" name="author" />
<link href="/images/favicon-128x128.png" type="image/png" rel="shortcut icon" />
<title>A Really Great Title</title>
<link rel="stylesheet" href="/css/bootstrap.css" />
<link rel="stylesheet" href="/css/shared.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">
</script>
<![endif]-->
</head>
How do I solve this? What might be going wrong? Or, failing that, how do I debug?
Some ideas:
First, I'm using Jetty 9.1.X in production. My development server uses (from lein deps :tree):
[io.pedestal/pedestal.jetty "0.2.2"]
[javax.servlet/javax.servlet-api "3.0.1"]
[org.eclipse.jetty/jetty-server "8.1.9.v20130131"]
[org.eclipse.jetty.orbit/javax.servlet "3.0.0.v201112011016"]
[org.eclipse.jetty/jetty-continuation "8.1.9.v20130131"]
[org.eclipse.jetty/jetty-http "8.1.9.v20130131"]
[org.eclipse.jetty/jetty-io "8.1.9.v20130131"]
[org.eclipse.jetty/jetty-util "8.1.9.v20130131"]
[org.eclipse.jetty/jetty-servlet "8.1.9.v20130131"]
[org.eclipse.jetty/jetty-security "8.1.9.v20130131"]
Are there Jetty 9 production settings I should double check?
Second, I'm using Enlive. It relies on the following dependencies (from lein deps :tree):
[enlive "1.1.5"]
[org.ccil.cowan.tagsoup/tagsoup "1.2.1"]
[org.jsoup/jsoup "1.7.2"]
I wonder if somehow TagSoup is behaving differently in production versus development.
Update:
Here are the response headers:
HTTP/1.1 200 OK
Set-Cookie: ring-session=eyTI ... <SNIP> ... s%3D;Path=/
Content-Type: text/html;charset=UTF-8
Transfer-Encoding: chunked
Server: Jetty(9.1.3.v20140225)
The text/html;charset=UTF-8 seems to rule out that Jetty is the problem. I think it is possible (even likely) that TagSoup is not behaving as I would expect.
I am currently reading this thread on the Enlive mailing list: mdash output as question mark.
Update: My Clojure templating (I was using Enlive but I just switched to Laser -- but both behave the same in this regard) converts the HTML entities to Unicode. The problem seems to be that my installation Jetty 9 is not configured (or I'm not giving it what it needs) to handle the Unicode characters.
Specifying UTF-8 encoding when starting Jetty solved the problem.
java -Dfile.encoding=UTF-8 -jar start.jar
Also, here is the Chef cookbook I use in case it helps you: https://github.com/bluemont/chef-jetty
I'm trying to get a Google AdSense ad to display on my mobile website. I am using Django to serve my web pages and I'm using JQuery Mobile to display and format the content. I've followed these blog instructions on a static html page and the ad shows up fine. When I use the exact same code in my base template, the mobile ad does not show. When I compare the HTML source code they look exactly the same and all the links work exactly the same. Is there something Django injects into the header that would keep the ad from displaying? The HTML source is as follows:
<html>
<head>
<title>Test AdSense</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-XXXXXXXXXXXXXXXXXX";
/* LTC MobileHeader */
google_ad_slot = "XXXXXXXXXXXX";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
</head>
<body>
<div id="Div1" data-role="page" data-ajax="false">
<header data-role="header" data-position="fixed">
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<h1>Index Page</h1>
</header>
<section data-role="content">
to Page 2
</section>
<footer data-role="footer" data-position="fixed"></footer>
</div>
</body>
</html>
I decided to upload the code to my staging system system which runs on Ubuntu and the ads show up fine. There is something going on with my development environment which runs on windows that is blocking the call to Google.