I have created a SAP UI5 Popover using Fragment. The fragment has XML code for opening the popover window.
My requirement is that when the popover is open and when the mouse pointer goes outside the popver (not mouse click outside), then the popover should close automatically.
Please help me with this.
You can use so called "Event Delegates".
See this little Demo:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.layout,sap.f"
data-sap-ui-theme='sap_fiori_3'></script>
<script>
var btn = new sap.m.Link({
text:'Hello World',
press: function(evt){
var pop = new sap.m.Popover({
title: "MyPopOver",
placement: "Bottom",
contentWidth: "200px",
content: [new sap.m.Text({text: "My Text"})]
})
pop.addEventDelegate({
onmouseout: function() {
pop.close()
}
}, this);
pop.openBy(evt.getSource());
}
});
btn.placeAt('content');
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>
Beware, this one already closes, if you touch a text inside the popup, but you'll get the generell idea.
Related
i want to create a hidden window so that access it's indexeddb and perform other background operations
this is my worker.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
rel="stylesheet"
/>
<title>CartOS</title>
</head>
<body>
<h1>Backend</h1>
</body>
</html>
let mainWindow, backendWindow;
function createWindow() {
const startUrl = process.env.DEV
? 'http://localhost:3000'
: url.format({
pathname: path.join(__dirname, '/../build/index.html'),
protocol: 'file:',
slashes: true,
});
mainWindow = new BrowserWindow({
show: false,
icon,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
},
maxWidth: 1024,
maxHeight: 700,
});
mainWindow.maximize();
mainWindow.show();
mainWindow.loadURL(startUrl);
// create hidden backend window
backendWindow = new BrowserWindow({
show: true,
webPreferences: { nodeIntegration: true }
});
backendWindow.loadFile('worker.html');
process.env.DEV && mainWindow.webContents.openDevTools();
mainWindow.on('closed', function () {
loadBalancer.stopAll();
mainWindow = null;
});
// once the window is created, load the product
}
My main window opens and works fine. I changed the backend window to visible so I can see it but the backend window opens and get stuck in plain white but does not show any content. is there anything I am doing wrong and how can i fixed this?
There is no script in the index.html file to run.
I am using ionic to bulid mobile app for ios and android. In my app when any ionic alert shown and when I click on background than the background functionality working. I want this to be disabled.
My alert box code is:
var alertPopup = $ionicPopup.alert({
title: 'Alert',
template: 'Please fill all fields first.'
})
.then(function(res) {
// some code
});
This will show an alert box on mobile but when i click on background side than background functionality working and I want to stop this.
For example : I have a form with multiple fields. I clicked on submit button and alert message is shown. When I click on "ok" button of alert the background input box which is behind the "ok" button also triggered. So I want to prevent this.
I searched for this issue but didn't found anything.
Place this option backdropDismiss inside your .create object and assign false to it
Try this one
HTML
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Popups
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="PopupCtrl">
<button class="button button-positive" ng-click="showAlert()">
Alert
</button>
</body>
</html>
app.js
angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {
// An alert dialog
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Alert',
template: 'Please fill all fields first.'
});
alertPopup.then(function(res) {
console.log('something');
});
};
The jQUery UI draggables sample named Default says that:
Enable draggable functionality on any DOM element.
But I'm not able to make them work on buttons elements.
I modified the Default sample to look like this:
I just changed the div element to a button one with type="button":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<button type="button" id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</button>
<div class="demo-description">
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
</div>
</body>
</html>
How I can make the draggables functionality work on a button element?
Using cancel: false seems to work for me.
$(function() {
$( "#draggable" ).draggable({
cancel: false
});
});
jsfiddle
I guess without the cancel only the default click event of the button fires and with cancel you prevent the default click event.
I use Phaser to create a game but I found an problem for using it in for example facebook. When an redirect is done within an iframe the canvas is not responding after a click.
Example:
I have a IFrame and within the iframe I redirect to the game.html. When I click in the game.html everything freezes.
Everything works fine when using a computer (any browser), windows phone or android, but with an iphone or ipad it won't work.
Below are the example files to replay the problem...
index.html:
<html>
<body>
<iframe src="click.html" height="900" width="800"/>
</body>
</html>
click.html
<!DOCTYPE html>
<html>
<body>
CLICK HERE
</body>
</html>
Game.html
<!DOCTYPE html>
<html>
<head>
<style>
body{overflow:hidden;}
#game_div {
width: 760px;
height: 1100px;
margin: auto;
}
</style>
<script type="text/javascript" src="./Game/phaser.min.js"></script>
<script type="text/javascript" src="./Game/main.js"></script>
</head>
<body>
<div id="game_div"> </div>
</body>
</html>
main.js
var game = new Phaser.Game(760, 1100, Phaser.AUTO, 'game_div');
var overlay, countdownText;
var counter = 0;
var main_state = {
preload: function() {
},
create: function () {
//game overlay
overlay = game.add.graphics(0, 0);
overlay.beginFill(0x00A54F, 0.8);
overlay.drawRect(0, 0, game.width, game.height);
countdownText = game.add.text((game.width / 2), (game.height / 2), counter, { font: "65px Arial", fill: "#ffffff", align: "center" });
countdownText.anchor.set(0.5,0.5);
},
update: function() {
countdownText.setText(counter++);
}
}
game.state.add('main', main_state);
game.state.start('main');
TNX
Found the solution, with thanks to Rich Davey.
When I add the following code it works:
game.stage.disableVisibilityChange = true;
I am developing an application in ExtJs using Rails, wherein there's a tab panel. The main tab contains the list of buttons on the left . Clicking on each button would open a new tab, and would render a grid or form. When i add new record from the form, it is displayed at once on the grid, but if i close the tab panel and click on the button again, no grid is displayed.
How to load the grid along with the data again ?
P.S: when i manually refresh the browser, it's displayed again !!
Thanks in advance !!
MyCode :
//** MyUnit.js in Units controller**//
MyUnit = Ext.extend(MyUnitUi, {
initComponent: function() {
MyUnit.superclass.initComponent.call(this);
//Insert records...
var sbtn=Ext.getCmp('btnSave');
sbtn.on('click',function(){
var grid = Ext.getCmp('maingrid');
var unitname = Ext.getCmp('unitname').getValue();
var description = Ext.getCmp('description').getValue();
var frm=Ext.getCmp('myform');
Ext.Ajax.request({
url: '/units',
method: 'POST',
params: {'data[unitname]':unitname,'data[description]':description}
});
var grid=Ext.getCmp('maingrid');
grid.store.reload();
grid.show();
frm.hide();
});
});
//** MyViewport.js in Test1 Controller **//
var unit_bt =Ext.getCmp('btnUnit');
unit_bt.on('click', function(){
var unit_el =Ext.getCmp('tabcon');
var tab = unit_el.getItem('tab_unit');
if(tab)
{
tab.show();
}else{
unit_el.add({
title : 'Unit of Measurement',
html : 'I am new unit',
activeTab: 0,
closable : true ,
id: 'tab_unit',
autoLoad:{url:'/units',scripts:true}
//store.load({params:{start:0, limit:25}})
}).show();
}
});
//** Units/index.html **//
<!DOCTYPE html>
<!-- Auto Generated with Ext Designer -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unit.xds</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all-debug.js"></script>
<script type="text/javascript" src="MyUnit.ui.js"></script>
<script type="text/javascript" src="MyUnit.js"></script>
<script type="text/javascript" src="MyUnitStore.js"></script>
<script type="text/javascript" src="xds_index.js"></script>
</head>
<body></body>
</html>
#All : Thanks for your effort. Well my friend found the solution.
The problem got solved just by adding the following line of code in units.js again :
var grid=Ext.getCmp('maingrid');
grid.store.reload();