http://jsfiddle.net/kKT2V/
$(document).ready(function () {
$('#te').dialog({
title: 'saved',
modal: true,
resizable: false,
draggable: false,
closeOnEscape: false,
width: 500,
buttons: [{
text: "Unpause",
click: function () {
$(this).dialog("close");
}
}]
});
clearInterval(interval);
});
This alert has a title and a button. Is there a way to change their position? I want to center them, for example.
http://jsfiddle.net/isherwood/kKT2V/2
.ui-dialog-titlebar, .ui-dialog-buttonset {
text-align: center;
float: none !important;
}
Your browser's document inspector is your friend.
Related
I have the following jQuery dialog. How can I change the button size of the two buttons? So they won't be underneath each other, but next to each other.
Here is my code
function ApplyJQueryUI() {
$("#<%= callForwardingAlwaysOption.ClientID %>").buttonset();
$("#callForwardingAlwaysDialog").dialog({
resizable: false,
modal: true,
autoOpen: false,
show: "fade",
closeOnEscape: false,
hide: "fade",
buttons: {
"> Ok": function () {
$("#<%= callForwardingAlwaysButton.ClientID %>").click();
},
"> Annuleren": function () {
$("#<%= callForwardingAlwaysOption.ClientID %>_0").attr("checked", "checked");
$("#<%= callForwardingAlwaysOption.ClientID %>").buttonset("refresh");
$(this).dialog("close");
}
}
});
$('#callForwardingAlwaysDialog').keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
$("#<%= callForwardingAlwaysButton.ClientID %>").click();
}
});
$("#callForwardingAlwaysDialog").parent().appendTo($("#<%= callForwardingAlwaysUpdatePanel.ClientID %>:first"));
if (isPostBack){
$(dialogInstance).dialog("close");
}
}
You can do this with a little bit of CSS, all you need to do is reduce the font size:
#dialog .ui-button-text {
font-size: 10px; /* Or whatever smaller value works for you. */
}
You can also drop the padding:
#dialog .ui-button-text {
font-size: 10px;
padding: 1px 1px 1px 1px; /* Or whatever makes it small enough. */
}
i'm using highcharts for genetating graphs, problem is, highcharts is generating space between border and content of Tooltip and labels of the Pie diagram is visible between that generated space.
can any has solving for my problem.
Please check with below example.
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'graf1',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
margin: 40,
text: 'Podíl všech potřeb'
},
tooltip: {
borderWidth: 1,
backgroundColor: "rgba(255,255,255,0)",
borderRadius: 0,
shadow: false,
useHTML: true,
percentageDecimals: 2,
backgroundColor: "rgba(255,255,255,1)",
formatter: function () {
return '<div class="tooltop">'+this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
zIndex: 1,
enabled: true,
color: '#000000',
connectorWidth: 2,
useHTML: true,
formatter: function () {
return '<span style="color:' + this.point.color + '"><b>' + this.point.name + '</b></span>';
}
}
}
},
series: [{
type: 'pie',
name: 'Potřeba',
data: [
['Firefox', 45.0],
['IE', 26.8], {
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}, ['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
.label {
z-index: 1!important;
}
.highcharts-tooltip span {
background-color:white;
border:1px solid green;
opacity:1;
z-index:9999!important;
}
.tooltip {
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="graf1" style="width: 400px; height: 250px; float:left"></div>
tooltip space between order and content highcharts
SVG tooltip elements can be hidden through:
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
Example: http://jsfiddle.net/x8Lq0yr9/1/
This will eliminate the space between border and HTML content.
you are using div class="tooltop" where as tooltop class is nowhere. Also, .highcharts-tooltip is used in highcharts at two places . one at datalables and second in tiiptip.
Unless you want specific border color , you can remove that css class from your code and tooltip loks good.
.tooltipSpan {
opacity:1;
z-index:9999!important;
width:100%;
}
See this Fiddle
Highcharts creates these using svg which makes it so the background shows up underneath certain elements. To avoid this undesired behavior the border and background settings have been turned off and all these are controlled, instead, using html in the formatter function. Using HTML makes it so the background does not show up underneath certain elements.
tooltip: {
backgroundColor: undefined,
borderColor: undefined,
borderWidth: 0,
}
Here is the output I require!
Here is how I try to achieve this:
win = Ext.create('Ext.window.Window', {
height: 650,
width: 500,
layout: 'fit',
border: false,
bodyPadding: 10,
modal:true,
itemId:'serviceCallWindow',
header: {
cls: 'n-service-call-window-header',
height: 80,
items:[{
xtype: 'component',
floating: true,
autoShow: true,
shadow: false,
focusOnToFront:false,
defaultAlign: 't',
autoEl: {
tag: 'img',
src: NG.serverMapPath('~/resources/images/support/support_icon.png')
},
componentCls: 'n-service-call-support-icon'
}]
},
items: [{
xtype: 'servicecall',
border: false,
bodyPadding: 10
}]
});
The challenge is to get the service call icon between the window header and body.
How can I achieve this?
This is achievable through manipulating CSS and the various layouts. You would perhaps also need to get rid of the header and actually make your own "close" button which would fire the windows close method.
such as below:
Ext.application({
name: 'Fiddle',
launch: function() {
win = Ext.create('Ext.window.Window', {
height: 300,
width: 500,
border: false,
bodyPadding: 10,
header: false,
modal: true,
layout: 'vbox',
itemId: 'serviceCallWindow',
items: [{
xtype: 'container',
/*layout: {
type: 'hbox',
pack: 'center'
},*/
width: '100%',
items: [{
xtype: 'image',
cls: 'testLogo',
style: {
margin: '0 auto',
width: '50px',
display: 'block'
},
src: 'http://placehold.it/50x50'
}, {
xtype: 'button',
cls: 'testClose',
style: {
top: 0,
right: 0,
position: 'absolute'
},
icon: 'http://placehold.it/20x20',
listeners: {
click: function() {
win.close();
}
}
}],
}, {
xtype: 'container',
border: false,
bodyPadding: 10,
html: 'this is the content of another container'
}]
});
win.show();
}
});
Demo: https://fiddle.sencha.com/#fiddle/g6t
I created a calendar using fullcalender all the events (tasks) are displaying on it.
Now i want to open a form which display the event's details, how can i taking the event details by clicking on it?
my code:
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Meeting',
start: '2014-09-12T10:30:00',
end: '2014-09-12T12:30:00'
}
]
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
Check the full calendar documentation. Here is the link.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Meeting',
start: '2014-09-12T10:30:00',
end: '2014-09-12T12:30:00'
}
],
eventClick: function(event) {
if (event.title) {
alert(event.title);
}
}
});
I want to create an instance of the Edit widget inside a modal Dialog. The Dialog works fine with the textarea control, but once I attached the Editor, the editor does not display property.
HTML
<div id="servicio-dialog" title="Servicio">
<form id="servicio-dialog-form">
<ul class="mm-simple">
<li><label for="servicio-dialog-name">Categoria</label></li>
<li><input type="text" id="servicio-dialog-name" value=""/></li>
<li><label for="servicio-dialog-description">Descripcion</label></li>
<li><textarea id="servicio-dialog-description"></textarea></li>
</ul>
</form>
</div>
JavaScript
$("#servicio-dialog").wijdialog({
autoOpen: false,
modal: true,
resizable: false,
width: 600,
height: 480,
buttons: [
{ text: 'Acceptar', click : mm_onDialogAcceptar},
{ text: 'Cancelar', click: mm_onDialogCancelar}
],
captionButtons: {
pin: { visible: false },
refresh: { visible: false },
toggle: { visible: false },
minimize: { visible: false },
maximize: { visible: false }
}
});
$('#servicio-dialog-description').wijeditor({
mode: 'simple'
});
The easiest way to do it is to initialize it once the dialog is open:
$("#servicio-dialog").wijdialog({
autoOpen: false,
modal: true,
resizable: false,
width: 600,
height: 480,
buttons: [
{ text: 'Acceptar', click : mm_onDialogAcceptar},
{ text: 'Cancelar', click: mm_onDialogCancelar}
],
captionButtons: {
pin: { visible: false },
refresh: { visible: false },
toggle: { visible: false },
minimize: { visible: false },
maximize: { visible: false }
},
open:function(){
$('#servicio-dialog-description').wijeditor({
mode: 'simple'
});
}
});