I have a need.. On clicking a button my datatable should be viewed in a full screen mode with option to come back to normal. If I am in full screen I shouldnot allowed to work on the parent window. I am not using windows.. I have placed my datatable inside a div. How can I achieve this??
try jQuery popup: http://jqueryui.com/dialog/#modal-form
Check out the documentation and initialize the dialog on loading the page. Here is a sample fiddle as well http://jsfiddle.net/taditdash/PHX2Y/
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 250,
width: 400,
buttons: {
"Ok": function() {
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
Related
I am using deltaDecorations to show errors in my editor.
here is my code: https://gist.github.com/dinager/41578bd658b60cc912a6023f80431810
Here is the result:
I am trying to add resize property to the editor by adding to the style
resize: both;overflow: auto;
But then the hover message is partly hidden by the edges of the editor
As you can see in below attached image - the editor can resize now (bottom right), but the hover message is partly hidden
How can I add resize property to not hide elements?
Another question: can I make the hover message float inside the editor, meaning if it's at the top line it should float to the bottom, if at the side of the editor float to the middle, etc..
Attaching the code adding the markerDecorations (exists also in the gist link at the top):
this.markerDecorations = codeEditor.deltaDecorations(this.markerDecorations, [
{
range: new monaco.Range(pos.startLine, pos.startColumn, pos.endLine, pos.endColumn),
options: {
className: 'squiggly-error',
minimap: {
color: { id: 'minimap.errorHighlight' },
position: monaco.editor.MinimapPosition.Gutter,
},
overviewRuler: {
color: { id: 'editorOverviewRuler.errorForeground' },
position: monaco.editor.OverviewRulerLane.Full,
},
stickiness: monaco.editor.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges,
zIndex: 1,
hoverMessage: { value: parseResponse.error, isTrusted: false },
},
},
]);
solved it by adding fixedOverflowWidgets: true on monaco.editor.create options.
this.editor = monaco.editor.create(el, {
// ...
fixedOverflowWidgets: true
});
I'm using Extjs and trying to create a layout that fill all the browser's window apart from the navigation bar.
I created a mapPanel with extjs / geoext which it renders to a div in my content:
Ext.create('Ext.panel.Panel', {
layout: "fit",
renderTo: "view",
width:1100,
height: 500,
items: {
layout: "border",
deferredRender: false,
items: [mapPanel, tree,
]
}
});
which works fine but the layout is rendered inside the "view" div.
Can I simply override all the content of the document apart from the navigation bar ?
You can use renderTo: Ext.getBody() or wrap everything in the Viewport.
Ext.create('Ext.container.Viewport',{
items:[{
layout: "border",
deferredRender: false,
items: [mapPanel, tree]
}]
});
However, neither solution will overwrite everything that is in the body already - you will have to destroy existing content manually.
For instance if you have a splash screen:
<div id="splash" style="text-align:center; vertical-align:middle;">
<br><br>
<img src="Loading.png">
<br><br>
<progress max=100></progress>
<br><br>
Loading...
</div>
you may want to destroy that screen in your launch method of Application.js:
launch: function() {
var splash = Ext.get('splash');
if(splash) splash.destroy();
}
How can I display a modal dialog from the context menu?
I can show a new window from context menu which opens in its own tab:
var menuItem = {
"id": "rateMenu",
"title": "Rate Item",
"contexts": ["all"],
}
chrome.contextMenus.create(menuItem);
chrome.contextMenus.onClicked.addListener(function (clickData) {
open('index.html');
});
I also know how to show a modal dialog, using bootstrap (for example) on the page itself:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
In this particular case I want to show a modal dialog that you cannot close unless you press the "close" button.
However, I have no idea how to show the modal popup window straight away from the context menu.
Does anyone have any idea how this can be achieved?
Thank you!
I have done the same. Just use content script to show modal.
Example : When user clicks the context menu item, send message to content script to let it know about it so that it should open a modal.
background.js:
chrome.contextMenus.onClicked.addListener(function (clickData) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {type: "openModal"});
});
});
contentscript.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
switch (request.type){
case "openModal":
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
break;
});
Make sure to include necessary css and js files under content_scripts in manifest.json
"content_scripts": [
{
"matches": ["https://*/*"],
"css":["bootstrap.min.css"],
"js":["jquery.min.js","bootstrap.min.js","contentscript.js"],
"run_at":"document_end"
}
]
NOTE : Using bootstrap.min.css may conflict with the page UI and it may change it. To avoid this, move your modal and the required js and css files in a separate html file(modal.html). Then inject your iframe into the tab using content script.
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL("modal.html");
iframe.frameBorder = 0;
iframe.id = "myFrame";
$(iframe).hide();//necessary otherwise frame will be visible
$(iframe).appendTo("body");
Remember to add modal.html and all the css and js files that are used inside modal.html like modal.js,bootstrap.min.js,bootstrap.min.css under web_accessible_resources:
web_accessible_resources": ["modal.html","modal.js","bootstrap.min.js","bootstrap.min.css"]
Now you can hide or show your iframe using content script but to show and hide modal, it can be done from inside iframe only. So you would need to pass a message from background to iframe to show the modal.The code above mentioned for contentscript will work for iframe also.
In case you want to hide the iframe, just send message from iframe to contentscipt using window.parent.postMessage().
Example:
modal.js:
window.parent.postMessage({ type: "hideFrame" }, "*");
contentscript.js:
window.addEventListener("message", function(event) {
if (event.data.type == "hideFrame") {
$("#myFrame").hide();
}
});
I am using ExtJs 4.2
My app needs to a have a button that will invoke a panel, that holds the navigation tree show once clicked.
This button needs to be visible at all times, and centered vertical to the middle and to the right of the screen.
How do I achieve this behavior? I don't want to nest the button in a panel, it should be a part of the view port...
Here is what I have tried:
Ext.define('NG.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id: 'appviewport',
items: [{
itemId: 'app-header',
xtype: 'appheader',
region: 'north',
weight: 10,
border: false,
height: 60
}, {
itemId: 'navigation',
xtype: 'button',
region: 'west',
weight:15
}, {
xtype: 'carddeckmanager',
region: 'center',
weight:10,
border: false,
cls:'n-cardmanager-box',
items: [{
itemId: 'dashboard',
xtype: 'dashboard'
}]
}]
});
but this makes the button expand as the height of the viewport.
If you really want to float that button, there's no sense in adding it to a container or the viewport. Render it to the document body, configure it with floating: true, and give it a z-index that will ensure that it remains above any window (if that's what you want).
Then you can position it where you want with its alignTo method but, better yet, use anchorTo so that it sticks where you put it, even when the browser is resized.
All of this gives us:
var body = Ext.getBody();
// Create the button
var button = Ext.widget('button', {
text: "Yo"
,floating: true
,renderTo: body
});
// z-index
// Ext4's windows default z-index starts from 29000
button.setZIndex(40000);
// Anchor the right of the button to the right of the document body
// with a 5px horizontal offset.
button.anchorTo(body, 'r-r', [-5, 0]);
Put this code somewhere in the startup process of your application. Candidates could be the init method of your application, the initComponent method of your viewport, or a single afterrender listener on the viewport...
Now, if what you want is just that the button remains visible in the right border of the viewport but without it filling the whole region, you need to wrap it in a container with an appropriate layout. For example, add this to your viewport:
{
region: 'west',
layout: {type: 'hbox', pack: 'center', align: 'middle'},
items: [{
xtype: 'button',
text: "Viewport button"
}]
}
On my site I have a contact button that when pressed slides a div containing a contact form downwards (using jQuery animate). This div has a close button in it that when pressed slides it back up (it's original position is off the screen). I need to make it so when the contact button is pressed, it only works once but then works again when the div has been closed.
I know this uses the bind / unbind function, however I can't get it working. Here is my code:
$(document).ready(function() {
var handler = function() {
$('.top,.left,.main,.header').animate({
top: '+=120'
}, 1300, 'easeOutBounce');
}
$('#contact').bind('click', handler);
$('#contact').unbind('click', handler);
});
$('#close').click(function() {
$('.top,.left,.main,.header').animate({
top: '-=120'
}, 1300, 'easeOutBounce');
});
the site where I'm trying to add it into is here: www.samskirrow.com/projects/move_div
Thanks for your help.
Sam
Figured it out, decided not to use bind, unbind commands but instead toggle. I have a close button that just takes on the role of the open button, therefore it doesn't disrupt the toggle cycle.
$(document).ready(function() {
$('#contact').toggle(function() {
$('.top,.left,.main,.header').animate({
top: '+=120'
}, 1300, 'easeOutBounce');
},function() {
$('.top,.left,.main,.header').animate({
top: '-=120'
}, 1300, 'easeOutBounce');
})
$('#close').click(function() {
$("#contact").click();
});
});
Hope this is useful to someone :)