I have been trying many "solutions" the last 5 days to try and "turn on" clicking in a QML webview object, and I can still not seem to click on any link, on any page.
I am embedding paypal checkout page, and probably it is something very simple I have missed. I tried an empty page with only webview and no options at all but width + height + javascripts (and without js), and I tried below code (and plenty of other stuff), still no clicks. Tried asking on IRC and got response back that "it should always be possible to click, even with the most basic webview setup". I have in the below code changed url from the one containing a real ap-key to just the dev login page, but the problem is the same, regardless if its google.com of paypal or any other site.
Please, anyone know how I can click on anything? I can not click forms either, get a keyboard to popup to fill out forms, or any click.
I am running QML + PySide on Meego platform. I load the below page/rectangle in a Loader object from my main.qml.
Any help would be extremely appreciated.
Note: I did ask same Q on qt-developer network but got no response yet. Trying here, this forums is more populated, so hoping that someone with experience about this problem will read (I noticed I am not the only one with these problems that just "should work").
import QtQuick 1.1
import QtWebKit 1.1
import com.nokia.meego 1.1
Rectangle {
Image {
id: background
source: "./images/bg.png"
anchors.fill: parent
Text {
id: logo
text: "My Fancy Logo"
x: 2
y: 2
font.pixelSize: 24
font.bold: true
font.italic: true
color: "white"
style: Text.Raised
styleColor: "black"
smooth: true
}
Rectangle {
id: rect
x: 0
y: 60
width: background.width
height: background.height - 70
Flickable {
id: flickable
width: parent.width
height: parent.height
contentWidth: Math.max(parent.width,webView.width)
contentHeight: Math.max(parent.height,webView.height)
flickableDirection: Flickable.HorizontalAndVerticalFlick
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
boundsBehavior: Flickable.DragOverBounds
clip:true
pressDelay: 200
WebView {
id: webView
settings.javascriptEnabled: true
settings.pluginsEnabled: true
url: "https://developer.paypal.com/"
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
transformOrigin: Item.Top
smooth: false
focus: true
preferredWidth: flickable.width
preferredHeight: flickable.height
PinchArea {
id: pinchArea
property real minScale: 1.0
anchors.fill: parent
property real lastScale: 1.0
pinch.target: webView
pinch.minimumScale: minScale
pinch.maximumScale: 3.0
onPinchFinished: {
flickable.returnToBounds();
flickable.contentWidth = (flickable.width + flickable.width) * webView.scale;
flickable.contentHeight = (flickable.height + flickable.height) * webView.scale;
}
}
}
}
}
}
}
In your QML markup the PinchArea element is a child of the WebView and thus gets the mouse/touch press events before the WebView. If you move the PinchArea "behind" the WebView in the element hierarchy the links will become clickable (except the three below the login box, because they try to open new browser windows).
Related
I have a div element which is made jquery Resizable. It has alsoResize option set, so other elements resize simultaneously.
What I want to do, is to set size of this Resizable div element programmatically in such way, that all Resizable logic is triggered (especially this alsoResize option is taken into account).
How can I achieve that?
Update: It looks like the internals of jQuery UI have changed dramatically since I answered this and firing the event no longer works.
There's no direct way to fire the event anymore because the resizable plugin has been fundamentally changed. It resizes as the mouse is dragged rather than syncing items up at the end. This happens by it listening for the internal resize propagation event for resizable plugins which is now fired by the _mouseDrag handler. But it depends on variables set along the way, so just firing that even internally won't help.
This means even overriding it is messy at best. I'd recommend just manually resizing the alsoResize elements directly, independent of the UI widget altogether if that's possible.
But for fun let's say it isn't. The problem is that the internals of the plugin set various properties relating to previous and current mouse position in order to know how much to resize by. We can abuse use that to add a method to the widget, like this:
$.widget("ui.resizable", $.ui.resizable, {
resizeTo: function(newSize) {
var start = new $.Event("mousedown", { pageX: 0, pageY: 0 });
this._mouseStart(start);
this.axis = 'se';
var end = new $.Event("mouseup", {
pageX: newSize.width - this.originalSize.width,
pageY: newSize.height - this.originalSize.height
});
this._mouseDrag(end);
this._mouseStop(end);
}
});
This is just creating the mouse events that the resizable widget is looking for and firing those. If you wanted to do something like resizeBy it'd be an even simpler end since all we care about is the delta:
var end = $.Event("mouseup", { pageX: newSize.width, pageY: newSize.height });
You'd call the $.widget() method after jQuery UI and before creating your .resizable() instances and they'll all have a resizeTo method. That part doesn't change, it's just:
$(".selector").resizable({ alsoResize: ".other-selector" });
Then to resize, you'd call that new resizeTo method like this:
$(".selector").resizable("resizeTo", { height: 100, width: 200 });
This would act as if you instantly dragged it to that size. There are of course a few gotchas here:
The "se" axis is assuming you want resize by the bottom right - I picked this because it's by far the most common scenario, but you could just make it a parameter.
We're hooking into the internal events a bit, but I'm intentionally using as few internal implementation details as possible, so that this is less likely to break in the future.
It could absolutely break in future versions of jQuery UI, I've only tried to minimize the chances of that.
You can play with it in action with a fiddle here and the resizeBy version here.
Original answer:
You can do this:
$(".selector").trigger("resize");
alsoResize internally rigs up a handler to the resize event, so you just need to invoke that :)
You can trigger the bars programmatically. For example, to trigger the east-west resize event:
var elem =... // Your ui-resizable element
var eastbar = elem.find(".ui-resizable-handle.ui-resizable-e").first();
var pageX = eastbar.offset().left;
var pageY = eastbar.offset().top;
(eastbar.trigger("mouseover")
.trigger({ type: "mousedown", which: 1, pageX: pageX, pageY: pageY })
.trigger({ type: "mousemove", which: 1, pageX: pageX - 1, pageY: pageY })
.trigger({ type: "mousemove", which: 1, pageX: pageX, pageY: pageY })
.trigger({ type: "mouseup", which: 1, pageX: pageX, pageY: pageY }));
I am doing a 1px left followed by 1px right movement on the east bar handle.
To perform a full size, you can target .ui-resizable-handle.ui-resizable-se if you have east and south resize bars.
I needed the same thing for tests. Similar questions have only one promising answer https://stackoverflow.com/a/17099382/1235394, but it requires additional setup, so I ended with my own solution.
I have an element with resizable right edge
$nameHeader.resizable({handles: 'e', ... });
and I needed to trigger all callbacks during the test in order to resize all elements properly. The key part of test code:
var $nameHeader = $list.find('.list-header .name'),
$nameCell = $list.find('.list-body .name');
ok($nameHeader.hasClass('ui-resizable'), 'Name header should be resizable');
equal($nameCell.outerWidth(), 300, 'Initial width of Name column');
// retrieve instance of resizable widget
var instance = $nameHeader.data('ui-resizable'),
position = $nameHeader.position(),
width = $nameHeader.outerWidth();
ok(instance, 'Instance of resizable widget should exist');
// mouseover initializes instance.axis to 'e'
instance._handles.trigger('mouseover');
// start dragging, fires `start` callback
instance._mouseStart({pageX: position.left + width, pageY: position.top});
// drag 50px to the right, fires `resize` callback
instance._mouseDrag({pageX: position.left + width + 50, pageY: position.top});
// stop dragging, fires `stop` callback
instance._mouseStop({pageX: position.left + width + 50, pageY: position.top});
// ensure width of linked element is changed after resizing
equal($nameCell.outerWidth(), 350, 'Name column width should change');
Of course this code is brittle and may break when widget implementation changes.
Hack Disclaimer (tested on jQuery 1.12.4):
This basically waits for the dialog to be opened and then increments by 1px (which forces the resize() event) and then decrements by 1px (to regain original size)
just say this in the dialog open event handler:
$(this)
.dialog("option","width",$(this).dialog("option","width")+1)
.dialog("option","width",$(this).dialog("option","width")-1);
note:
This may not work with show effects (like fadeIn,slideDown etc) as the "resizer" code executes before the dialog is fully rendered.
$(".yourWindow").each(function(e) {
$(this).height($(this).find(".yourContent").height());
});
And the same with the width.
I have a listview that displays a list of userdetails on right and profile pic on left which I get from back end. For downloading and loading the image I'm using a webviewsample image class from github and it works fine. Now I'm need to make the image round. As I searched through web I understand nine slicing is used to do this but I'm not sure how. Each of my listitem has a different background which changes randomly. Below are the sample image of what I have done and what I actually want.
This is my current list view
This is how I need it to be
This is the code of my custom list item that displays this view
Container {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
layout: StackLayout {
orientation: LayoutOrientation.LeftToRight
}
Container {
id:profileSubContainer
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
layout: DockLayout {
}
WebImageView {
id: profilePic
url: profilePicture
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
scalingMethod: ScalingMethod.AspectFit
visible: (profilePic.loading == 1.0)
}
ImageView {
id: defaultPic
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
scalingMethod: ScalingMethod.AspectFit
imageSource: "asset:///Images/defaultProfile.png"
visible:!profilePic.visible
}
layoutProperties: StackLayoutProperties
{
spaceQuota: 1
}
}
CustomButtonTextArea {
id: userName
layoutProperties: StackLayoutProperties {
spaceQuota: 2
}
text: username
textEditable: false
textAreaStyle: getStyle()
}
}
If you have older version of Qt where this isn't supported directly, a rather hackish way to do is this :
Cut out a circular hole from the background image (Using Photoshop/GIMP etc.) and save it as a PNG.
Now all you need to do is to arrange all the elements in such a way that it appears as if the profile pic has been cut out. If you place your profile pic first and then the background image, background image cover the profile pic, leaving only circular part from it visible (Note that it SHOULD be PNG for this to work).
Correct order will be :
a. Profile Image
b. Background Image
c. Text
You can either write these elements in that order or use the z value of elements.
Image // Background Image
{
z = 2;
}
Image // Profile Image
{
z = 1;
}
Text
{
z = 3;
}
P.S. This is pseudo code, I hope you get the idea. I did something like this with qt 4.8 long back, and it worked liked a charm.
Edit 1.
In case you want to have background of random color instead of images (as you have asked in the comment), you can try to do this using Qt.
Create the custom background with using QPainter or some similar class and some clipping mask to carve out the circular part.
Expose this class as a Qml element.
Use it for your case by passing random colors while drawing.
They talk of something similar here : http://qt-project.org/forums/viewthread/2066
P.S. Haven't tried it myself, but looks like a good direction if you are stuck otherwise.
If you can't use OpacityMask because your version of Qt doesn't support QtGraphicalEffects, you could do the same trick with Canvas, that is supported since Qt 5.0.
Rectangle{
id: root
width: 400
height: 400
color: "gray"
property string imageUrl: "./rabbid.jpg"
Canvas{
anchors{
fill: parent
margins: 50
}
Component.onCompleted:{
loadImage(imageUrl); // Ready to be used in onPaint handler
}
onPaint:{
console.log("Painting...");
var context = getContext("2d");
context.save();
context.fillStyle = "black";
context.arc(width/2, height/2, width/2, height/2, width);
context.fill();
context.globalCompositeOperation = "source-in";
context.drawImage(root.imageUrl, 0, 0, width, height);
context.restore();
}
}
}
The result:
Since Context.globalCompositeOperation = "source-in" is set, context operations will be done inside previous drawings. Take a look to Context2D for more info, and here for a graphical explanation of composite operations.
I have a FormPanel being created like this:
Modal.EmailPanel = Ext.extend(Ext.form.FormPanel, {
dock: 'top',
id: 'emailPanel',
name: 'emailPanel',
standardSubmit : false,
styleHtmlContent: false,
width: 200,
height: window.innerHeight - (Ext.is.Phone ? 20 : g_topToolbarHeight),
scroll: 'vertical',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
... etc.
What happens is that at first it displays correctly:
http://i.imgur.com/TOjG3fQ.png
But as soon as it is scrolled, part of it disappears under Safari's URL bar:
http://i.imgur.com/E2LAwQR.png
I am new to Sencha Touch so I'm not very sure what the issue could be. Any input would be appreciated.
So the problem is that when you scroll down your page that cannot fir inside the browser windows it reveals the bottom section and hides the upper?
Well this is the natual scroll behavior of any browser... even in this page, that cannor fit he window, when you scroll it the upper part slide under the url bar... am i missing something?
I'm currently developing a Chrome Packaged App and I'm using webviews, however I'm not having success at hidding the scroll bar on said webviews. I've tried using the overflow tag with no success.
Any help would be appretiated.
Try this:
var appWin = null;
chrome.app.runtime.onLaunched.addListener(function(launchData) {
chrome.app.window.create(
'main.html',
{bounds: {width: 800, height: 400}},
function(win) {
appWin = win;
win.onBoundsChanged.addListener(onBoundsChanged);
onBoundsChanged();
}
);
}
function onBoundsChanged() {
var bounds = chrome.app.window.current.getBounds();
var webview = appWin.contentWindow.document.getElementById("#my_webview");
webview.style.height = bounds.height + 'px';
webview.style.width = bounds.width + 'px';
}
Obviously, if your window is fixed size (resizable: false), you don't need to define an onBoundsChanged handler: you can adjust your webview size directly in the chrome.app.window.create() callback using the hardcoded dimensions you've specified for your window.
This is what I did to remove the webview's scrollbar when embedded inside Packaged Chrome App:
<html lang="en" style="overflow:hidden">
Edit: This code lives inside the page that the webview references - not the code inside your packaged chrome app.
I'm using jQuery UI Select Menu and occasionally have some issues.
This is located at the top left of my users' pages. Using the "dropdown/address" type, sometimes (seemingly random), the dropdown opens UP instead of DOWN, and you can't select any options in it except the first one because it's all "above" the screen.
Anyone know of a setting/option in there to force it to open down? Thanks!
update.... 11/23/11 1:11pm est
Here is some code of the call:
$(function(){
$('select#selectionA').selectmenu({
style:'dropdown',
menuWidth: 220,
positionOptions: {
collision: 'none'
},
format: addressFormatting
});
});
The plugin uses the Position utility of the jQuery UI library. If you look at the default options in the source of the plugin, there is a positionOptions property that is used in the function _refreshPosition():
options: {
transferClasses: true,
typeAhead: 1000,
style: 'dropdown',
positionOptions: {
my: "left top",
at: "left bottom",
offset: null
},
width: null,
menuWidth: null,
handleWidth: 26,
maxHeight: null,
icons: null,
format: null,
bgImage: function() {},
wrapperElement: "<div />"
}
_refreshPosition: function() {
var o = this.options;
// if its a pop-up we need to calculate the position of the selected li
if ( o.style == "popup" && !o.positionOptions.offset ) {
var selected = this._selectedOptionLi();
var _offset = "0 " + ( this.list.offset().top - selected.offset().top - ( this.newelement.outerHeight() + selected.outerHeight() ) / 2);
}
// update zIndex if jQuery UI is able to process
this.listWrap
.zIndex( this.element.zIndex() + 1 )
.position({
// set options for position plugin
of: o.positionOptions.of || this.newelement,
my: o.positionOptions.my,
at: o.positionOptions.at,
offset: o.positionOptions.offset || _offset,
collision: o.positionOptions.collision || 'flip'
});
}
You can see it uses a default value 'flip' if none is provided for the collision option of the position utility which is. According to jQuery UI documentation:
flip: to the opposite side and the collision detection is run again to see if it will fit. If it won't fit in either position, the center option should be used as a fall back.
fit: so the element keeps in the desired direction, but is re-positioned so it fits.
none: not do collision detection.
So i guess you could pass an option when initializing the plugin to define none for the collision option:
$('select').selectmenu({
positionOptions: {
collision: 'none'
}
});
Have not tested yet, this is just by looking at the code.
Edit following comment
I've noticed that the version of the javascript available on github and the one used on the plugin website are not the same. I don't know which one you are using but the one used on the website does not have a positionOptions option actually, so it has no effect to specify it when calling selectmenu().
It seems it's not possible to link directly to the javascript on the site so here's some code to illustrate:
defaults: {
transferClasses: true,
style: 'popup',
width: null,
menuWidth: null,
handleWidth: 26,
maxHeight: null,
icons: null,
format: null
}
_refreshPosition: function(){
//set left value
this.list.css('left', this.newelement.offset().left);
//set top value
var menuTop = this.newelement.offset().top;
var scrolledAmt = this.list[0].scrollTop;
this.list.find('li:lt('+this._selectedIndex()+')').each(function(){
scrolledAmt -= $(this).outerHeight();
});
if(this.newelement.is('.'+this.widgetBaseClass+'-popup')){
menuTop+=scrolledAmt;
this.list.css('top', menuTop);
}
else {
menuTop += this.newelement.height();
this.list.css('top', menuTop);
}
}
I was able to make it work as I first described with the version from github. In my opinion it is a more recent/complete version. Besides it was updated a few days ago.
I have created a small test page with two selects. I've changed for both the position for the dropdown to show above.
The first one does not specify the collision option, thus 'flip' is used and the dropdown displays below because there is not enough space above.
The second has 'none' specified and the dropdown shows above even if there is not enough space.
I've put the small test project on my dropbox.
I'm the maintainer of the Selectmenu plugin. There are currently three versions, please see the wiki for more information: https://github.com/fnagel/jquery-ui/wiki/Selectmenu
I assume you're using my fork. The collision problem could be related to this fix https://github.com/fnagel/jquery-ui/pull/255, please try the latest version.
To force a scrollbar use option maxHeight.