I have found a dialog box script http://jsfiddle.net/taditdash/vvjj8/ which I want to work with button onclick. But it's not working.
Any Help?
My modification
<input type="button" id="btnOpenDialog" value="Open Confirm Dialog" onclick="fnOpenNormalDialog()"/>
<div id="dialog-confirm"></div>
function fnOpenNormalDialog() {
$("#dialog-confirm").html("Confirm Dialog Box");
// Define the Dialog and its properties.
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 250,
width: 400,
buttons: {
"Yes": function () {
$(this).dialog('close');
callback(true);
},
"No": function () {
$(this).dialog('close');
callback(false);
}
}
});
}
function callback(value) {
if (value) {
alert("Confirmed");
} else {
alert("Rejected");
}
}
Just enclose your javascript functions in tags to HTML block like this :
<input type="button" id="btnOpenDialog" value="Open Confirm Dialog" onclick="fnOpenNormalDialog()"/>
<div id="dialog-confirm"></div>
<script>
function fnOpenNormalDialog() {
$("#dialog-confirm").html("Confirm Dialog Box");
// Define the Dialog and its properties.
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 250,
width: 400,
buttons: {
"Yes": function () {
$(this).dialog('close');
callback(true);
},
"No": function () {
$(this).dialog('close');
callback(false);
}
}
});
}
function callback(value) {
if (value) {
alert("Confirmed");
} else {
alert("Rejected");
}
}
</script>
DEMO :
http://jsfiddle.net/vvjj8/106/
use this:
<button value="click me" onclick="fnOpenNormalDialog()">
You need to add the brackets for the function call to succeed.
Related
i have a angular web application with a line graph (using echarts) with multiple series.
the labels of the series are overlapping, is there a way to adjust their position or size etc to prevent them from over lapping ?
my code:
thisInstance._paidUnpaidSplitGraphOptions = {
title: {
text: 'Paid/Unpaid Claims'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Unpaid Claims', 'Paid Claims']
},
grid: {
left: '5%',
right: '6%',
bottom: '5%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
title: "Download Image of Chart"
},
dataZoom: {
yAxisIndex: false,
title: { "zoom": "Zoom Chart", "back": "Remove Zoom" }
},
brush: {
type: ['lineX', 'clear'],
title: {
"lineX": "LineX", "clear": "Clear" }
}
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: xAxisData
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Paid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
position: 'TopLeft',
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
color: '#151515'
}
},
areaStyle: { normal: {} },
data: paidAmounts
},
{
name: 'Unpaid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
position: 'BottomRight',
color: '#151515'
}
},
areaStyle: { normal: {} },
data: unPaidAmounts
}
]
}
html code:
<div class="clr-row">
<div class="clr-col-2">
</div>
<div class="clr-col-8">
<div echarts [options]="this._appService.GraphsService._paidUnpaidSplitGraphOptions" class="demo-chart"></div>
</div>
<div class="clr-col-2">
<button class="btn btn-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesLagReport()"><clr-icon shape="download"></clr-icon>LAG REPORT</button><br />
<button class="btn btn-success-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesAgeReport()"><clr-icon shape="download"></clr-icon>AGE ANALYSIS REPORT</button>
</div>
</div>
What i have tried so far is to change the position of the labels as you can see in the above code t making the one 'TopLeft' and the other 'BottomRight', but this didn't seem to help at all the labels are still overlapping.
below is a screenshot of what it looks like
To move text slightly you can use offset: [0,-15], reference.
However you might want to use the label formatter to mask the labels that are under a certain value.
Example
var data = [
[820, 932, 901, 934, 1290, 330, 320],
[0, 0, 0, 0, 0, 900, 1320]
];
var option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {},
itemStyle: {
},
series: [{
data: data[0],
type: "line",
stack: "stack",
color: 'blue',
areaStyle: {
color: 'blue',
opacity: 0.3
},
label: {
position: "top",
offset: [0, -15],
show: true,
}
},
{
data: data[1],
type: "line",
stack: "stack",
areaStyle: {
color: 'red',
opacity: 0.3
},
label: {
position: "top",
show: true,
formatter: function (params) {
return (params.value === 0) ? "" : params.value;
}
}
}
]
}
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
if (option && typeof option === "object")
myChart.setOption(option, true);
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 90%"></div>
</body>
</html>
Stacked line graph with masked labels
You should try avoidLabelOverlap = true
I have two button + and - . When I click on + button I am adding one div in parent div and want to show tooltip on that div when I click again on + button then I am adding again one div and want to show tooltip on second div only. It's same for upto 7 div.
Currently I am doing same but when I add more than one div tooltip will not hide for previous button and will still there. So at end I am seeing all 7 tooltip but I supposed to see last div tooltip only.
I tried to hide it after some delay but even it's not working.
Here is my code.
function init(){
for(var divCount = 1; divCount <= fanSpeed; divCount++){
$('#temperature_bar').append('<div style="float:left" data-tooltip-id="'+divCount+'" id="speed_"'+divCount +'" class="trigger climate-fan-bar" onclick="\buttonTempraturePressed(this.id)\" title="<div class="row row-thumbnail" id="box-search"><div class="thumbnail text-center"><img width="50" height="50" src="images/fan_speed_bg_center_popup.png" class="img-responsive"><div class="caption"><span class="tooltip-text-size">' + divCount + '</span></div></div></div></div>' );
showTooltips("speed_"+divCount);
}
}
function showTooltips(clicked_id){
//show
$(clicked_id).on('click', '.trigger', function () {
$(this).addClass("on");
$(this).tooltip({
hide: { effect: "flip", duration: 1000 },
items: '.trigger.on',
position: {
my: "top",
at: "top",
collision: "flip"
}
});
$(this).trigger('mouseenter');
});
/*$(clicked_id).on('click', '.trigger.on', function () {
$(this).tooltip('close');
$(this).removeClass("on");
});*/
//prevent mouseout and other related events from firing their handlers
$(".trigger").on('mouseout', function (e) {
e.stopImmediatePropagation();
});
}
Here is an possible solution. Making use of the items and content options, you can adjust the content instead of trying to pass it via title attribute.
Working Example: https://jsfiddle.net/Twisty/cfd6z8db/
HTML
<div style="padding:20px; display: block;">
<div id="temperature_bar">
</div>
</div>
<div style="padding:20px; display: block;">
<label>Speed</label>
<button id="decSpeed" title="Decrease">-</button>
<button id="incSpeed" title="Increase">+</button>
</div>
CSS
.item {
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #ccc;
padding: .25em .5em;
cursor: pointer;
}
.item:nth-child(1) {
border-left-width: 1px;
}
.row-thumbnail .caption {
width: 100%;
text-align: center;
}
jQuery
function showToolTips(obj) {
if (obj.hasClass("on")) {
// Hide ToolTip
obj.removeClass("on");
obj.tooltip("close");
} else {
// Show ToolTip
obj.addClass("on");
obj.tooltip("open");
}
}
function addItem() {
var divCount = $(".item").length + 1;
if (divCount == 8) {
return false;
}
var img = "https://dummyimage.com/50x50/000000/fff";
var item = $("<div>", {
id: "speed-" + divCount,
class: "trigger item",
"data-tip-content": img + "|" + divCount,
"data-tip-id": divCount,
})
.css("float", "left");
item.html(divCount);
item.tooltip({
disabled: true,
hide: {
effect: "flip",
duration: 1000
},
position: {
my: "center bottom+5",
at: "center top",
collision: "flip"
},
items: "[data-tip-content]",
content: '<div class="row row-thumbnail" id="box-search"><div class="thumbnail text-center"><img width="50" height="50" src="' + item.data("tip-content").split("|")[0] + '" class="img-responsive"><div class="caption"><span class="tooltip-text-size">' + item.data("tip-content").split("|")[1] + '</span></div></div>'
});
$('#temperature_bar').append(item);
}
// Make Items
function init() {
var c = 5;
var divCount = 1;
for (divCount; divCount <= c; divCount++) {
var item = $("<div>", {
id: "speed-" + divCount,
class: "trigger item",
"data-tip-content": "https://dummyimage.com/50x50/000000/fff" + "|" + divCount,
"data-tip-id": divCount,
})
.css("float", "left");
item.html(divCount);
item.tooltip({
disabled: true,
hide: {
effect: "flip",
duration: 1000
},
position: {
my: "center bottom+5",
at: "center top",
collision: "flip"
},
items: "[data-tip-content]",
content: '<div class="row row-thumbnail" id="box-search"><div class="thumbnail text-center"><img width="50" height="50" src="' + item.data("tip-content").split("|")[0] + '" class="img-responsive"><div class="caption"><span class="tooltip-text-size">' + item.data("tip-content").split("|")[1] + '</span></div></div>'
});
$('#temperature_bar').append(item);
}
}
$(function() {
init();
$(".trigger").on('mouseout', function(e) {
if ($(this).hasClass("on")) {
$(this).removeClass("on");
$(this).tooltip("close");
}
});
$("#temperature_bar").on("click", ".trigger", function() {
console.log("Click Triggered. Executing 'showToolTips()'.");
showToolTips($(this));
});
$("#decSpeed").click(function() {
$("#temperature_bar .item").last().remove();
});
$("#incSpeed").click(addItem);
});
When using a position like { my: "top", at: "top", collision: "flip" }, this caused some type of weird loading issue. I used a different position and it seemed to clear the issue.
You post did not give a very strong example, so I created some example buttons. the disable option was also helpful, this ensured that they didn't display on mouseover events. It also allows us to control the open and close.
I packaged all the content items into a data attribute. I separated it with a pipe (|) so that it can all be one spot, but easily worked with later.
Click a button, and the tip appears. Click it again, and it hides. Same if you move the mouse away.
If you need more info, please update your post with a better example.
I would simply execute
$(".ui-tooltip-content").hide();
to:
function showTooltips(clicked_id){
$(".ui-tooltip-content").hide(); // Clean up prior tips
//show
$(clicked_id).on('click', '.trigger', function () {
$(this).addClass("on");
$(this).tooltip({
...
hth
I have a kendoTreeView connected to OData source as given in the demo on official site. I need to change the dataSource of the kendoTreeView to something else. Here is the html with the script.
When I click on the change button the tree changes but shows all the nodes as undefined. It is not able to show the new dataTextField values. When I revert it back it works even without setting the dataTextField.
I need to either change the dataSource of the tree or destroy the tree, remove it from DOM and then add a new one. Any help or pointers?
<body>
<input type="button" id="expandAllNodes" value="expandAllNodes" />
<input type="button" id="changedatasource" value="changedatasource" />
<input type="button" id="revert" value="revert" />
<span>First Tree</span>
<div id="treeview"></div>
<br/>
<span>Second Tree</span>
<div id="treeview2"></div>
<!--<div id="example" class="k-content">
<div id="treeview" class="demo-section"></div>-->
<script>
</script>
<style scoped>
#example {
text-align: center;
}
.demo-section {
display: inline-block;
vertical-align: top;
width: 320px;
height: 300px;
text-align: left;
margin: 0 2em;
}
</style>
<!--</div>-->
</body>
$(document).ready(function () {
// TreeView bound to Categories > Products > OrderDetails
var viewModel = {
self: this,
OrderDetails: {
type: "odata",
transport: {
read: {
url: function (options) {
return kendo.format("http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products({0})/Order_Details", options.ProductID);
}
}
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
},
Products: new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
},
schema: {
model: {
id: "ProductID",
hasChildren: "Order_Details",
children: {
type: "odata",
transport: {
read: {
url: function (options) {
return kendo.format("http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products({0})/Order_Details", options.ProductID);
}
}
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
}
}
}
}),
Categories: new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
},
schema: {
model: {
hasChildren: "Products",
id: "CategoryID",
children: {
type: "odata",
schema: {
model: {
id: "ProductID",
hasChildren: "Order_Details",
children: {
type: "odata",
transport: {
read: {
url: function (options) {
return kendo.format("http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products({0})/Order_Details", options.ProductID);
}
}
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
}
}
},
transport: {
read: {
url: function (options) {
return kendo.format("http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories({0})/Products", options.CategoryID);
}
}
}
}
}
}
})
}
$("#treeview").kendoTreeView({
dataSource: viewModel.Categories,
dataTextField: ["CategoryName", "ProductName", "OrderID"],
checkboxes: {
checkChildren: true
}
});
$("#treeview2").kendoTreeView({
dataSource: viewModel.Products,
dataTextField: ["ProductName", "OrderID"],
checkboxes: {
checkChildren: true
}
});
ko.applyBindings(viewModel);
$("#expandAllNodes").click(function () {
var treeView = $("#kendoTreeView").data("kendoTreeView");
treeView.expand(".k-item");
});
$("#changedatasource").click(function () {
var treeview: kendo.ui.TreeView = $("#treeview").data("kendoTreeView");
//treeview.destroy();
treeview.setOptions({ dataTextField: ["ProductName", "OrderID"] });
treeview.setDataSource(viewModel.Products);
});
$("#revert").click(function () {
var treeview: kendo.ui.TreeView = $("#treeview").data("kendoTreeView");
//treeview.setOptions({ dataTextField: ["CategoryName", "ProductName", "OrderID"] });
treeview.setDataSource(viewModel.Categories);
});
});
Set the datasource to a new instance of a HierarchicalDataSource, see here: http://d585tldpucybw.cloudfront.net/forums/datasource-property-update-and-refresh. Direct link to Dojo by Alex Gyoshev: http://dojo.telerik.com/#gyoshev/iJIhI.
I've made it work by these codes for an addtional title (a new div inside fancybox):
beforeShow: function(){
this.title=$(this.element).data('caption');
this.title2="<div class='photo_exif'>"+$(this.element).data('exif')+"</div>";
$(this.title2)
.bind("contextmenu", function (e) {
return false; /* Disables right click */
})
.prependTo( $.fancybox.inner );
}
and the html is :
<a href='PhotoURL' class='fancybox' data-fancybox-group='gallery' data-caption='PhotoTitle' data-exif='photoTitle2'>pic</a>
now i want this div (div.photo_exif) hover to show or hide, so i added these codes:
afterShow:function() {
$("#fancybox-wrap").hover(function() {
$(".photo_exif").show();
}, function() {
$(".photo_exif").hide();
});
}
but it doesnt work. The div is always show on fancybox. My css is :
.photo_exif {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
width:100%;
height:30px;
background: #000;
background: rgba(0, 0, 0, .8);
}
and my whole fancybox code (with ie6 crack) is :
$('.fancybox').fancybox({
fitToView: false,
mouseWheel: false,
beforeShow: function(){
this.title=$(this.element).data('caption');
this.title2="<div class='photo_exif'>"+$(this.element).data('exif')+"</div>";
$(this.title2)
.bind("contextmenu", function (e) {
return false; /* Disables right click */
})
.prependTo( $.fancybox.inner );
},
afterShow: function(){
if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) <= 6) {
$("div#fancybox-buttons").css("top", $("html").scrollTop());
$(window).scroll(function () {
$("div#fancybox-buttons").css("top", $("html").scrollTop());
});
}
$("#fancybox-wrap").hover(function() {
$(".photo_exif").show();
}, function() {
$(".photo_exif").hide();
});
}
});
Is there anything wrong?
This one was easy. This line of your code :
$("#fancybox-wrap").hover(function() {
... should be :
$(".fancybox-wrap").hover(function() {
The fancybox selector is a class not an ID
I am using gmaps.js plugin http://hpneo.github.com/gmaps/
The Sliding Zoom Control and the InfoWindow don't show up and have some issues when they display. Link: http://bakasura.in/startupsradar/index.html
// JavaScript Document
$(document).ready(function () {
var map = new GMaps({
div: '#map',
lat: 13.00487,
lng: 77.576729,
zoom: 13,
});
GMaps.geolocate({
success: function (position) {
map.setCenter(position.coords.latitude, position.coords.longitude);
},
error: function (error) {
alert('Geolocation failed: ' + error.message);
},
not_supported: function () {
alert("Your browser does not support geolocation");
},
always: function () {
//alert("Done!");
}
});
map.addControl({
position: 'top_right',
text: 'Geolocate',
style: {
margin: '5px',
padding: '1px 6px',
border: 'solid 1px #717B87',
background: '#fff'
},
events: {
click: function () {
GMaps.geolocate({
success: function (position) {
map.setCenter(position.coords.latitude, position.coords.longitude);
},
error: function (error) {
alert('Geolocation failed: ' + error.message);
},
not_supported: function () {
alert("Your browser does not support geolocation");
}
});
}
}
});
map.addMarker({
lat: 13.00487,
lng: 77.576729,
title: 'Lima',
icon: "http://i.imgur.com/3YJ8z.png",
infoWindow: {
content: '<p>HTML Content</p>'
}
});
});
Bootstrap was conflicting with the rendering of Maps
Adding these lines of CSS did the trick
/* Bootstrap Css Map Fix*/
#mainBody #map img {
max-width: none;
}
/* Bootstrap Css Map Fix*/
#mainBody #map label {
width: auto; display:inline;
}
I had this before, it was some of my own CSS that overwrote some of the values in maps. I would suggest checking all styles applied to img tags. Especially width values that is set to images globally.