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.
Related
I'm trying to connect Google One Tap Login with Django framework, but I'm having issue.
I'm not sure why this is displaying an issue. I followed all of the guidelines described in the Google documentation.
issue -
The given origin is not allowed for the given client ID
Here is my Google API client configuration for the javascript origin url.
Here is the login html template code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hi Reddit</h1>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload" data-client_id="i don't want to shere"
data-context="signin" data-ux_mode="popup" data-login_uri="http://localhost:8000/google/login/"
data-auto_select="true" data-itp_support="true">
</div>
<div class="g_id_signin" data-type="standard" data-shape="pill" data-theme="outline" data-text="continue_with"
data-size="large" data-logo_alignment="left">
</div>
</body>
</html>
I'm not sure why this is displaying an issue.
Is it possible to load Google One Tap Javascript in Django?
What should I do to load Google One Tap Javascript in Django?
I have a django project and I want to start adding Vue.js elements into it, but there is a big overarching issue before I can really start in that custom delimiters (template tags) do not work in the firefox browser only Chrome, I can change them from curly braces to square brackets, but in firefox it just renders the code not the message. The following code is not part of my django project, it is just example code to demonstrate the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Learning Vue.js</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" />
<p>Hello [[ message ]]</p>
</div>
<script>
new Vue({
delimiters: ["[[","]]"],
el: '#app',
data() {
return {
message: 'Hello World'
};
}
});
</script>
</body>
</html>
So this code renders the following in Chrome:
Hello World!
And in Firefox, it renders the code:
[[ message ]]
I'm assuming there is a fix for this, as I almost never see rendered code in websites and I'm assuming Vue is popular, how do other developers get around this issue?
I'm running an ember-cli app. The Inspector (Chrome) says This webpage is not running Ember.js.
Looking at the source view on the browser, it includes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
How can I get the Inspector to recognize it?
I stumbled onto a solution. I happened to right-click on the page's source-view, and "Inspect" came up, so I chose it. Inspector now recognizes the page as ember.js.
Ideally, I want my index.html from this:
<!-- app/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Program With Erik Blog Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/example1.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/example1.js"></script>
{{content-for 'body-footer'}}
</body>
</html>
into production code. But for some strange reason, each time I call ember build, I do not get the expected production-looking code. Instead I get something like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
.
.
.
<!-- lots of code -->
It's the default firebase page!
What is happening? I've deleted the picture multiple times. But each time I call ember build it builds the firebase default page rather than my ember app index.html.
I'm new to ember and I've been fiddling around heavily with the config/environment.js and the firebase.js. Any thoughts on why this might be happening?
On initialising a firebase app, one is prompted:
? What do you want to use as your public directory? (public)
make sure to set the dist folder as the public directory, that is
? What do you want to use as your public directory? (public) dist
using the default public will cause the above behavior no matter how many times you build your Ember app.
To fix the problem, re-initialise the firebase app with the firebase init command, and set the right folder as the public directory.
I am trying to implement the instafeed tutorial to just show some instagram pictures.
I am working on PyCharm using Django.
Here is my folder hierarchy:
/test_project/js/instafeed.min.js
I have a suspicion that I am not referencing the 'src' correctly. I had 'Cannot resolve directory' warnings before, but I got them to disappear by playing around with the Source preferences.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
</style>
<script type="text/javascript" src="/js/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'b8dacdbf587f41798d8dfb03e3f7a29',
useHTTP: true
});
feed.run();
</script>
</head>
<body>
<div id="instafeed">
</div>
</body>
</html>
I used the 'useHTTP:true' because I saw on another answer that this needs to be set to true to work on a local machine. I've looked at how the code was used in other tutorials and implementations, but I don't see how my code is any different.
Thanks for the help!
Instafeed needs jQuery (the documentation says that you don't need, but i got some errors without it), so make sure you have both libs loaded correctly.
Try with this:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdn.lukej.me/instafeed.js/1.2.0/instafeed.min.js"></script>