I have a web application which is on HTML5... In that i have a dojo dialogue box for some user operations... Now i want to click the title bar of that dialogue box... The title bar of the dialogue box is accessible by ele = document.getElementById("searchFrame_title");...
and i am performing the click on the dialogue box's title bar by this...
ele = document.getElementById("searchFrame_title");
ele.style.cursor = 'move';
var evt = new MouseEvent("click", {
view : window,
bubbles : true,
cancelable : true,
}), ele = document.getElementById("searchFrame_title");
ele.dispatchEvent(evt);
alert("clicked");
While everything's fine but on clicking the title bar of the dojo dialogue box it doesn't comes in visible area...
Scenario...
I dragged the dialogue box at the bottom of the web page(really bottom any further will push it upwards). then i performed a click on the box which appends some data on the dialogue box due to which the data appended goes inside the screen.
Problem...
When i click on the title bar manually the dialogue box automatically moves it upwards to the viewable area calculated from the bottom. But when i simulate the click from the code(shown above), it doesn't do so...
How to do it...
The positioning is not done at the click time but at the end drag time. Simulating a click does not trigger the drag mechanism.
However, you can workaround it. That's a dirty trick but you can call _endDrag() method of the dialog (instead of simulating a click)
See:
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
var dialog = new Dialog({
content: document.getElementById('dialogContent')
});
dialog.show();
document.getElementById('repositionMe').onclick = function() {
dialog._endDrag();
}
document.getElementById('addTo').onclick = function() {
document.getElementById('content').innerHTML += '<br>' + document.getElementById('content').innerHTML;
}
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<body class = "tundra">
<div id="dialogContent">
<button id="addTo">add content</button>
<button id="repositionMe">reposition me</button>
<div id="content">this is the content of the dialog</div>
</div>
</body>
Related
I am trying to create a modal box following this tutorial:
http://www.w3schools.com/howto/howto_css_modals.asp with jQuery. Here's what I got:
$(function() {
var $openMacros = $(".profile-form #open-macros");
var $macrosModal = $(".profile-form .modal-macros");
var $closeMacros = $macrosModal.find("#close-macros");
$openMacros.click(function() {
$macrosModal.show();
event.preventDefault();
});
});
.modal-macros {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile-form">
Set macros
<div class="modal-macros">Modal</div>
</div>
What happens is my modal box opens for a fraction of a second and then closes immediately. I tried using return false or preventDefault inside of my onclick method and it indeed works, but after I close the modal box I can't open it again. Anyone can help?
I have a javascript in an HTA which looks like this:
var result = null;
window.showModalDialog("dialog.hta", window, "dialogHeight:300px; dialogWidth:300px");
alert(result);
dialog.hta:
<html>
<head>
<title>Dialog box</title>
<meta http-equiv="MSThemeCompatible" content="yes"/>
</head>
<body style="background:#F0F0F0">
<select id="colors">
<option selected>Red</option>
<option>Blue</option>
<option>Green</option>
<option>Yellow</option>
</select><br/>
<script type="text/javascript">
function ok(){
window.dialogArguments.result = colors.getElementsByTagName("option")[colors.selectedIndex].innerHTML;
window.close();
}
</script>
<button onclick="ok()">OK</button>
<button onclick="window.close()">Cancel</button>
</body>
</html>
The problem is that when I press OK the alert(result) in the main HTA window always says null, even when I click on the OK button in the modal dialog box.
How can I do so that it says which option the user selects in the list when the OK button is pressed and null when the cancel button is pressed?
This is how modal dialog works:
In the main app:
// Call a dialog, and store the returned value to a variable
var result = showModalDialog(path, argument, options);
On dialog close:
// Set the returnValue
var elem = document.getElementById("colors");
window.returnValue = elem[elem.selectedIndex].text;
top.close();
After setting the returnValue in the dialog, you can read it from result after the dialog has been closed.
option elements didn't have innerHTML in old IEs, hence you've to use text property instead. You can also add a value attribute to the select element, and then create a return value in a simple way:
window.returnValue = document.getElementById('colors').value;
I want to add clear button in Calender modal Popup.In my application lots of dateboxes are there.I restrict the user only to select the date not to enter. But in some cases I need to clear the date. Because of read only I am not able to clear it manually. I need to customize the calender which will reflect other places. And user can clear the datebox by clicking clear button in calender window.
Is there any way to add clear button in calender to fulfill my requirement?
Thanks in Advance!!
You can customize widget action with Client Side Programming (refer to Client Side Programming), for example:
<zk xmlns:w="client">
<!-- -->
<!-- Tested with ZK 6.5.3 -->
<!-- -->
<zscript><![CDATA[
// testing data
Date d = new Date();
]]></zscript>
<style>
/* invisible if not moved into datebox */
.invisible {
display: none !important;
}
</style>
put clear button under popup of datebox
<button label="show value" onClick="alert(((Datebox)self.getNextSibling()).getValue());" />
<datebox readonly="true" value="${d}">
<attribute w:name="doClick_"><![CDATA[
function (evt) {
// call original function
this.$doClick_(evt);
var pp = this.$n('pp'), // popup dom
$n = jq(this.$n()); // root dom
if (pp && !jq(pp).find('.datebox-inner-clear-button')[0]) {
// find button next to root dom
var btn = $n.next('.datebox-inner-clear-button')[0], // button dom element
btnWgt = zk.Widget.$('#' + btn.id), // button widget
popupWgt = this._pop;
// make button visible
jq(btn).removeClass('invisible');
// put button under popup dom
pp.appendChild(btn);
// store self at button widget
btnWgt.datebox = this;
var oldOnFloatUp = popupWgt.onFloatUp;
popupWgt.onFloatUp = function (ctl) {
if(ctl.origin == btnWgt) return; // do not close popup while mousedown on button
oldOnFloatUp.apply(this, arguments);
}
}
}
]]></attribute>
</datebox>
<button label="clear" sclass="datebox-inner-clear-button invisible">
<attribute w:name="doClick_"><![CDATA[
function (evt) {
// call original function
this.$doClick_(evt);
var dbx = this.datebox;
if (dbx) {
dbx.getInputNode().value = '';
dbx.updateChange_();
}
}
]]></attribute>
</button>
</zk>
You may also want to wrap the customized datebox and button by Macro Component or Composite Component as needed.
I have table cell with a javascript/css content box that pops up upon mouseover.
There are 20 cells on the page. Everything is working correctly, in that when you mouseover the product link, you see the content box. However, I want to put a LINK inside the content box that the user can click on if they choose. So, the popup box has to stay up long enough for the user to mouseover to click the link.
Really, I want the OnMouseOver to stay open until either a second or two has gone by and/or the user OnMouseOver's another cell.
The problem I'm having is that the pop up box doesn't stay open (due to OnMouseOut) to click the link. If I turn OnMouseOut off (which I tried), then all the pop up boxes just stay open, so this doesn't do the job either.
My CSS looks like this:
<style type="text/css" title="">
.NameHighlights {position:relative; }
.NameHighlights div {display: none;}
.NameHighlightsHover {position:relative;}
.NameHighlightsHover div {display:block;position:absolute;width: 15em;top:1.3em;*top:20px;left:70px;z-index:1000;}
</style>
And the html:
<td>
<span class="NameHighlights" onMouseOver="javascript:this.className='NameHighlightsHover'" onMouseOut="javascript:this.className='NameHighlights'">
Product 1
<div>
# of Votes: 123<br>
% Liked<br>
<a href="product review link>See User reviews</a>
</div>
</span>
</td>
So, how can I make the pop up box stay open long enough to click on the link, but also make it disappear if another content box is activated?
Thanks in advance.
You have to improve your HTML markup for this task, need to get rid of inline event handlers:
<span class="NameHighlights">
Product 1
<div>
# of Votes: 123<br>
% Liked<br>
See User reviews
</div>
</span>
Then you have to bind your events to all .NameHighlights spans:
var span = document.querySelectorAll('.NameHighlights');
for (var i = span.length; i--;) {
(function () {
var t;
span[i].onmouseover = function () {
hideAll();
clearTimeout(t);
this.className = 'NameHighlightsHover';
};
span[i].onmouseout = function () {
var self = this;
t = setTimeout(function () {
self.className = 'NameHighlights';
}, 300);
};
})();
}
http://jsfiddle.net/3wyHJ/
So the idea is to use setTimeout method.
Notes: I used querySelectorAll which is not supported by IE7, if you need to support it then you can use any of implementations of the getElementsByClassName method.
In case anyone is looking for a jQuery version of the accepted answer:
var t;
$(function(){
$('span.NameHighlights').mouseover(
function(e){
hideAll();
clearTimeout(t);
$(this).attr('class', 'NameHighlightsHover');
}
).mouseout(
function(e){
t = setTimeout(function() {
//$(this).attr('class', 'NameHighlights');
hideAll();
}, 300);
}
);
});
function hideAll() {
$('span.NameHighlightsHover').each(function(index) {
console.log('insde hideAll');
$(this).attr('class', 'NameHighlights');
})
};
jsFiddle
How to create a confirm dialog box in dojo? I would like to have an ok cancel dialog to appear on button click with dojo dialog (no javascript confirm dialog).
So far i can only display a dialog on click event.
Heres my code:
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
var secondDlg;
dojo.ready(function(){
// create the dialog:
secondDlg = new dijit.Dialog({
title: "Programmatic Dialog Creation",
style: "width: 300px",
draggable:false
});
});
showDialogTwo = function(){
// set the content of the dialog:
secondDlg.set("content", "Hey, I wasn't there before, I was added at " + new Date() + "!");
secondDlg.show();
}
</script>
</head>
<body class="claro" style="margin-right:10px;">
<button id="buttonTwo" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:showDialogTwo" type="button">Show me!</button>
</body>
How can i make this ok cancel dialog box?
<script type="dojo/method" event="onClick">
var dialog = new dijit.Dialog({
title: "Delete Switch Type",
style: "width: 400px",
content : "Do you really want to delete ?????<br>"
});
//Creating div element inside dialog
var div = dojo.create('div', {}, dialog.containerNode);
dojo.style(dojo.byId(div), "float", "left");
var noBtn = new dijit.form.Button({
label: "Cancel",
onClick: function(){
dialog.hide();
dojo.destroy(dialog);
}
});
var yesBtn = new dijit.form.Button({
label: "Yes",
style : "width : 60px",
onClick : <your function here>,
dialog.hide();
dojo.destroy(dialog);
}
});
//adding buttons to the div, created inside the dialog
dojo.create(yesBtn.domNode,{}, div);
dojo.create(noBtn.domNode,{}, div);
dialog.show();
</script>
I'm using this code as inline dojo/method - on the click event of the button. you can modify anyway
The Confirm Dialog is supported since Dojo 1.10.
See the release notes and the documentation.
The solution above does not take into account the little cross at the top right of the dialog.
I had done, long ago, a little suite of dialogs, you might find some happiness here, especially ConfirmDialog.js
I just uploaded them on github today so you can take a look at them : http://github.com/PEM-FR/Dojo-Components/tree/master/dojox/dialog
They should be usable "as-is" or with minor changes