I would like to inject touch events such as "touchstart", "touchmove", "touchend" into the QWebEngineView. Then, I should be able to capture the events in my html page running in the webview for example using jquery like below :
$(document).on("touchstart",function() {
console.log("Touchstart");
});
I tried using QMouseEvents as explained in this SO answer and it works. But not the QTouchEvents.
Any suggestions ?
Related
I'm creating a POC using google app maker. I plan on using a JS library that has a dependency on Jquery. I've listed JQuery as an "external resource" to start with and added an H1 element on my html with the following code as part of a client script:
$(document).ready(function(){
$("h1").click(function(){
console.log("jquery works");
});
});
When I preview my app and click on the element, nothing is logged. When I inspect the elements, I can see both the Jquery library and the code above, but the event is not triggering when I click on the element. Any suggestions? The ultimate goal is to be able to use https://querybuilder.js.org/ within the app I'm creating.
My best guess is that when you say that you added the code:
$(document).ready(function(){
$("h1").click(function(){
console.log("jquery works");
});
});
to the client script, what you did was created a client script under the SCRIPTS section of App Maker and then added the code there. If that is so, that is why it's not working.
What you need to do is to use client scripting in the widget event handlers. Each widget has event handlers and the HTML widget is not an exception. What I recommend is to add the code to the onAttach event handler of the HTML widget:
}
Also, you can get rid of the document.ready part and just use the code you see in the image above. That should do the trick.
BONUS: If you will be using classes and ids, for it to work you will need to use the allowUnsafeHtml option:
I hope this helps for now. If you need something else, I'll be happy to help you.
I am new to DOJO and have a requirement where in we need to embed already running website on our new website using an iframe. Both websites will be running on same domain.
I tried using dojo/request/iframe, and am able to see the website in my iframe BUT when clicking on any of the link in embedded website, it opens in another window. But i want it to work in my iframe internally.
Below is the code snippet:
<script>
require(["dojo/request/iframe", "dojo/dom", "dojo/dom-construct"], function(iframe, dom, domConst){
iframe("http://localhost:8080/phpkbv8/", {
handleAs: "html"
}).then(function(data){
var greetingNode = dom.byId('siteInclude');
domConst.place(data.documentElement,greetingNode);
}, function(err){
var greetingNode = dom.byId('siteInclude');
domConst.place('<p>Error Occured!!!</p>' + err,greetingNode);
});
// Progress events are not supported using the iframe provider
});
</script>
Please help me in making it work. Looking for help.
If you are intending to embed an iframe into your page for display/interaction purposes, you shouldn't really be using dojo/request/iframe to do so. If you need to create the iframe programmatically, use DOM APIs or dojo/dom-construct. For example, based on your code above:
domConst.create('iframe', {
src: 'http://localhost:8080/phpkbv8/'
}, greetingNode);
dojo/request/iframe is specifically intended as a transport for sending Ajax requests, in cases where XHR, script injection, etc. aren't sufficient.
I'm using the new Qt5.4 with the module QtWebEngine and from what I see mainFrame() doesn't exists anymore. How to get the contentSize/size of the page and how to render it now? I tried with the setView and view but doesn't work.
I couldn't find any native Qt method for that, but I came up with a workaround:
once the page is loaded, I do the following to resize my widget to the web content:
webView->page()->runJavaScript("document.documentElement.scrollWidth;",[=](QVariant result){
int newWidth=result.toInt()+10;
webView->resize(newWidth,webView->height());
});
webView->page()->runJavaScript("document.documentElement.scrollHeight;",[=](QVariant result){
int newHeight=result.toInt();
webView->resize(webView->width(),newHeight);
});
NB: I added a 10px width margin
Check if the QWebEnginePage::geometryChangeRequested signal does what you want.
Also you display a QWebEnginePage by creating a QWebEngineView (it's a QWidget) and calling QWebEngineView::setPage(yourPage).
Yet another question about the angular calendar directive. I need to display multiple calendars on one page and am using the jquery tabs widget. However, only one calendar will render properly. In normal jquery fullCalendar, you use the 'render' method to ensure that the calendar shows when the tab is selected. However, this doesn't seem to be working with the angular-ui calendar directive.
Here is a plunker showing what I mean. Delete the $().tabs() and the three angular calendars display just fine. Wrap them in tabs, and it no longer works:
http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM
Any ideas on why this is not working and how to fix it?
Thanks!
PS. I will cross-post this question in Google Groups. Thanks.
It appears that despite the fullCalendar documentation, "show" is not the place to trigger a fullcalendar('render'). I should say, at least not when working with Angular. I don't know if that is correct under normal jQuery usage. Use the "Activate" event instead:
$("#tabs").tabs({
activate: function(){
("#calendar").fullCalendar('render');
}
});
http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM
Use timeout while rendering.
<tab heading="{{tabs[0].title}}" active="tabs[0].active" select="renderCalendar()" disabled="tabs[0].disabled">
$scope.renderCalendar = function() {
$timeout(function(){
$('.calendar').fullCalendar('render');
}, 0);
};
I've got the following Javascript for creating the HTML of video player. I use Javascript because this is the only way I can tell the player which video to play.
function createPlayer(videoSource){
document.writeln("<div id=\"player\">");
document.writeln("<object width=\"489\" height=\"414\" >");
document.writeln("<param name=\"player\" value=\"bin-debug/FlexPlayer.swf\">");
//etc
The problem is FlexPlayer.swf is loading every time and I need to cache this SWF file. Maybe I should use Javascript constructor but don't know how in this case. Any code help will be greatly appreciated.
If you're video player is in flex (and I'm guessing that it is with the flex tag and the bin-debug folder) - you should just call into the flex app in order to set the video.
You can allow flex and javascript to communicate with each other, without having to embed different versions of it in the HTML! It's awesome, check it out...
In your flex app, after it is initialized you can add something like this :
ExternalInterface.addCallback( 'playVideoFromJS' , playVideo );
What the above does is expose a function named "playVideoFromJS" that can be called in your javascript that will execute the 'playVideo' funciton in the flex app! Neat!
Then add a function like so somewhere in your flex app:
public function playVideo ( videoToPlay : String ) : void {
...play video code here
}
Then in javascript, you can actually call your flex function playVideo!
myFlexAppName.playVideoFromJS( 'myvideoofile.flv' );
More information on ExternalInterface here :
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6#addCallback()