I have taken an example Highcharts plnkr and edited it to match my requirements.
Below is the plnkr that I have developed. https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview
Here all the labels and icons for the labels are displayed properly. But when I include it in my application, the icons for the labels are not displayed properly.
It is displayed as below
My label code is as below
labelFormatter: function () {
return '<div class="legend-label-md row" style=" border-bottom:1px solid black; margin-bottom: 5px"><span class="col-md-10">' + this.name +
'</span><span class="col-md-2" >' + this.value +
'%</span></div> ';
}
Related
I'm trying to make an image gallery that's navigated by dragging horizontally. The issue I'm currently facing is that there are no boundaries on the left and right for when the elements should stop dragging. I've tried using the 'container' element, but when I do, it stops dragging altogether.
I've tried using 'parent' or the actual div as the container and neither has worked properly. I saw on another message board that using flexbox in this situation makes things more complicated, so I switched to using display: inline-block on images.
This is my current draft: https://jsfiddle.net/samseurynck/ka1e9soj/21/
HTML
<div class="item_block_left">
<div class="item_block_left_gallery_container">
<div class="item_block_left_gallery">
<img class="item_block_left_gallery_item" src="https://placeimg.com/640/480/animals">
<img class="item_block_left_gallery_item" src="https://placeimg.com/200/200/animals">
<img class="item_block_left_gallery_item" src="https://placeimg.com/640/400/animals">
</div>
</div>
</div>
SCSS
.item_block_left{
height:200px;
width: 50%;
border: 1px solid pink;
overflow: hidden;
.item_block_left_gallery_container{
position: relative;
height:100%;
width: auto;
.item_block_left_gallery{
height:100%;
display: flex;
cursor: grab;
.item_block_left_gallery_item{
position: relative;
height:100%;
width:auto;
display: inline-block;
}
}
}
}
JQUERY
$(".item_block_left_gallery").draggable({
scroll: false,
axis: "x",
});
The intended result is only being able to scroll/drag horizontally as far as the images go, with no white space on the left or right sides.
Working Example: https://jsfiddle.net/Twisty/4ak6q0zu/44/
JavaScript
$(function() {
var bounds = {
left: $(".item_block_left_gallery").position().left
};
bounds.right = bounds.left - $(".item_block_left_gallery").width() - $(".item_block_left").width() + 10;
$(".item_block_left_gallery").draggable({
scroll: false,
axis: "x",
drag: function(e, ui) {
var l = ui.position.left;
if (l > bounds.left) {
console.log("Hit Left Boundry");
ui.position.left = bounds.left;
}
if (l <= bounds.right) {
console.log("Hit Right Boundry");
ui.position.left = bounds.right;
}
}
});
});
Using drag callback, you can check and set the position of the draggable item. Basing things off the left edge of the drag item, we can check and restrict the movement based on some specific boundaries. It appears that there was a 10px padding or margin on the right hand side, might just be white space, so I just adjusted to correct for this.
See more: http://api.jqueryui.com/draggable/#event-drag
Hope that helps.
I followed this stack thread to capture a double-click event on my grid. Interestingly though, my grid no longer highlights rows whose check-box's have been selected, as outlined in the gif below
Before I added the row template, everything was fine and worked correctly, as seen in the gif below
Here is the row template code:
Controller:
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>' +
'</div>';
}
As part of $scope.gridOptions:
, rowTemplate: rowTemplate()
Inside $scope.gridOptions
$scope.rowDblClick = function(row) {
console.log('double click event');
var thisRow = gridApi.selection.getSelectedRows() //gets the clicked row object
$log.log(thisRow);
$('.item').on('click', function(){
//if user clicks on grid tab, should go to grid view else go to patient view
if ($(this).hasClass('not')){
console.log('item has .not')
$state.go('list.patient.patient-information');
} else {
console.log('item has .grid')
$state.go('list.grid');
}
//
$('.item').css('cssText', 'border-radius: 0px !important; background-color: #4B6A89; font-family: Roboto; font-size: 14px; color: white; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;')
$(this).closest('.item').css('cssText', 'border-radius: 0px !important; color: #4B6A89; background-color: white; font-family: Roboto; font-size: 14px; color: #4B6A89; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;');
});
//after a 2click, deselect the row, so a user can edit another cell
$scope.gridApi.selection.clearSelectedRows();
};
UPDATE: when I remove the <div ng-dblclick="grid.appScope.rowDblClick(row)" > from the template, the line highlight comes back (although I lose the double click functionality
Problem solved after much trial and error!
The problem started when I added the ng-dblclick option for grid rows with the suggested syntax:
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>' +
'</div>';
}
I simply removed the div that the ng-dblclick was in, and moved it into the main row template div so it now looks like this:
function rowTemplate() {
return ' <div ng-dblclick="grid.appScope.rowDblClick(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>';
}
I faced the same issue before.
Apparently, when we add the outside div for double-click, it messes up the CSS for highlighting. So in your example, on selecting the checkbox, row gets selected, but the highlighting doesn't happen.
Solution for this is:
Row Template:
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader}" ui-grid-cell></div>' +
'</div>';
}
And add CSS for that specific grid, adding Grid Id or style:
#gridStyle .ui-grid-row.ui-grid-row-selected > [ui-grid-row] .ui-grid-cell {
background-color: #c9dde1;
}
My plunker working sample
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>' +
'</div>';
}
css:
/* --- ui-grid ------- row hover highlight ----- */
.ui-grid-row:hover .ui-grid-cell {
background-color: #ff8476;
}
/* ==== both works ===== */
/*
.ui-grid-row:nth-child(odd):hover .ui-grid-cell{background:red}
.ui-grid-row:nth-child(even):hover .ui-grid-cell{background:red}
*/
/* --- End ----- ui-grid ------- row hover highlight ----- */
I want to display brand logo in legend (line chart).
legend: {
enabled: true,
useHTML: true,
labelFormatter: function () {
console.log(this.userOptions.image)
return '<img src="' + this.userOptions.image + '" alt="" >';
}
},
this code working fine but first time legends overlap
Please check this example :
Example
The problem is that you haven't specified width/height for that image. So while rendering, img tag is 0x0 px. Working example: http://jsfiddle.net/1r3tfh5b/2/
labelFormatter: function () {
console.log(this.userOptions.image)
return '<img style="width: 30px; height: 30px;" src="' + this.userOptions.image + '" alt="" >';
}
In my web page I am using the FusionTablesLayer with data and infoWindow style coming from a FusionTable View. They have worked nicely. However, I did a re-style to change the size of the image display, and the font sizes, font colors. I could see the changes from the Fusion Table Map, I could also see the tableId and the encripted tableId did not get changed thereafter, and the infomration is saved, but I could not see the changes from my web page. Am I missing anything here? Any suggestion??
I resolved the issue by not using the infoWindow that comes with the FusionTablesLayer by doing the following:
1.suppressinfoWindows:true
create my own infoWindow
create openInfoWindow click event handler for the FusionTablesLayer here it is layer2
create openInfoWindow click event handler for the FusionTablesLayer here it is layer2
Like this:
var map;
var infoWindow = new google.maps.InfoWindow();
function openInfoWindow(FTevent) {
var contentStr = "<div class='googft-info-window' style='font-family:Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; padding:0; background-color: #ffffff;'>";
contentStr += "<h5 style='margin-top: 0; margin-bottom: 15px; color: #009AA6;'>" + FTevent.row['NAME'].value + "</h5>";
contentStr += "<div style='text-align: center; width: 300px; height: 220px;'>";
contentStr += "<img src=" + FTevent.row['URLIMAGE'].value + " style='vertical-align: top; max-width: 300px; max-height: 220px;'><br>";
contentStr += "</div></div>";
infoWindow.setOptions({
content: contentStr,
position: FTevent.latLng,
pixelOffset: FTevent.pixelOffset
});
infoWindow.open(map);
}
function initialize() {
.....
google.maps.event.addListener(layer2, 'click', openInfoWindow);
}
By doing so, I can also listen to the infoWindow for the 'closeclick', and so something when the infoWindow is closed, like this:
map.setZoom(7);
map.panTo(centerMarker.getPosition());
});
It is easy to use one of the icons available from the standard icon set:
$("#myButton").button({icons: {primary: "ui-icon-locked"}});
But what if I want to add one of my own icons that is not part of the framework icon set?
I thought it would be as easy as giving it your own CSS class with a background image, but that doesn't work:
.fw-button-edit {
background-image: url(edit.png);
}
Any suggestions?
I could also recommend:
.ui-button .ui-icon.your-own-custom-class {
background-image: url(your-path-to-normal-image-file.png);
width: your-icon-width;
height: your-icon-height;
}
.ui-button.ui-state-hover .ui-icon.your-own-custom-class {
background-image: url(your-path-to-highlighted-image-file.png);
width: your-icon-width;
height: your-icon-height;
}
then just type in the JS code:
jQuery('selector-to-your-button').button({
text: false,
icons: {
primary: "you-own-cusom-class" // Custom icon
}});
It worked for me and hope it works for you too!
I believe the reason why his won't work is because you're icon's background-image property is being overridden by the jQuery UI default sprite icon background image. The style in question is:
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_888888_256x240.png");
}
This has higher specificity than your .fw-button-edit selector, thus overriding the background-image proerty. Since they use sprites, the .ui-icon-locked ruleset only contains the background-position needed to get the sprite image's position. I believe using this would work:
.ui-button .ui-icon.fw-button-edit {
background-image: url(edit.png);
}
Or something else with enough specificity. Find out more about CSS specificity here: http://reference.sitepoint.com/css/specificity
This is based on the info provided by Yi Jiang and Panayiotis above, and the jquery ui button sample code:
As I was migrating an earlier JSP application that had a toolbar with images per button, I wanted to have the image inside the button declaration itself rather than create a separate class for each toolbar button.
<div id="toolbarDocs" class="tableCaptionBox">
<strong>Checked Item Actions: </strong>
<button id="btnOpenDocs" data-img="<s:url value="/images/multi.png"/>">Open Documents</button>
<button id="btnEmailDocs" data-img="<s:url value="/images/email.png"/>">Attach to Email</button>
</div>
Of course there were plenty more buttons than just the two above. The s tag above is a struts2 tag, but you could just replace it with any URL
<button id="btnOpenDocs" data-img="/images/multi.png">Open Documents</button>
The below script looks for the attribute data-img from the button tag, and then sets that as the background image for the button.
It temporarily sets ui-icon-bullet (any arbitrary existing style) which then gets changed later.
This class defines the temporary style (better to add further selectors for the specific toolbar if you plan to use this, so that the rest of your page remains unaffected). The actual image will be replaced by the Javascript below:
button.ui-button .ui-icon {
background-image: url(blank.png);
width: 0;
height: 0;
}
and the following Javascript:
$(document).ready(function () {
$("#toolbarDocs button").each(
function() {
$(this).button(
{ text: $(this).attr('data-img').length === 0? true: false, // display label for no image
icons: { primary: "ui-icon-bullet" }
}).css('background-image', "url(" + $(this).attr('data-img') +")")
.css('background-repeat', 'no-repeat');
});
});
The solution at this link worked great for me:
http://www.jquerybyexample.net/2012/09/how-to-assign-custom-image-to-jquery-ui-button.html
$(document).ready(function() {
$("#btnClose")
.text("")
.append("<img height="100" src="logo.png" width="100" />")
.button();
});
My solution to add custom icons to JQuery UI (using sprites):
CSS:
.icon-example {
background-position: 0 0;
}
.ui-state-default .ui-icon.custom {
background-image: url(icons.png);
}
.icon-example defines position of icon in custom icons file. .ui-icon.custom defines the file with custom icons.
Note: You may need to define other JQuery UI classes (like .ui-state-hover) as well.
JavaScript:
$("selector").button({
icons: { primary: "custom icon-example" }
});
Building on msanjay answer I extended this to work for custom icons for both jquery ui buttons and radio buttons as well:
<div id="toolbar">
<button id="btn1" data-img="/images/bla1.png">X</button>
<span id="radioBtns">
<input type="radio" id="radio1" name="radName" data-mode="scroll" data-img="Images/bla2.png"><label for="radio1">S</label>
<input type="radio" id="radio2" name="radName" data-mode="pan" data-img="Images/bla3.png"><label for="radio2">P</label>
</span>
</div>
$('#btn1').button();
$('#radioBtns').buttonset();
loadIconsOnButtons('toolbar');
function loadIconsOnButtons(divName) {
$("#" + divName + " input,#" + divName + " button").each(function() {
var iconUrl = $(this).attr('data-img');
if (iconUrl) {
$(this).button({
text: false,
icons: {
primary: "ui-icon-blank"
}
});
var imageElem, htmlType = $(this).prop('tagName');
if (htmlType==='BUTTON') imageElem=$(this);
if (htmlType==='INPUT') imageElem=$("#" + divName + " [for='" + $(this).attr('id') + "']");
if (imageElem) imageElem.css('background-image', "url(" + iconUrl + ")").css('background-repeat', 'no-repeat');
}
});
}
// HTML
<div id="radioSet" style="margin-top:4px; margin-left:130px;" class="radio">
<input type="radio" id="apple" name="radioSet" value="1"><label for="apple">Apple</label>
<input type="radio" id="mango" name="radioSet" value="2"><label for="mango">Mango</label>
</div>
// JQUERY
// Function to remove the old default Jquery UI Span and add our custom image tag
function AddIconToJQueryUIButton(controlForId)
{
$("label[for='"+ controlForId + "'] > span:first").remove();
$("label[for='"+ controlForId + "']")
.prepend("<img position='fixed' class='ui-button-icon-primary ui-icon' src='/assets/images/" + controlForId + ".png' style=' height: 16px; width: 16px;' />");
}
// We have to call the custom setting to happen after document loads so that Jquery UI controls will be there in place
// Set icons on buttons. pass ids of radio buttons
$(document).ready(function () {
AddIconToJQueryUIButton('apple');
AddIconToJQueryUIButton('mango');
});
// call Jquery UI api to set the default icon and later you can change it
$( "#apple" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });
$( "#mango" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });
in css
.ui-button .ui-icon.custom-class {
background-image: url(your-path-to-normal-image-file.png);
width: your-icon-width;
height: your-icon-height;
}
.ui-state-active .ui-icon.custom-class, .ui-button:active .ui-icon.custom-class {
background-image: url(your-path-to-highlighted-image-file.png);
width: your-icon-width;
height: your-icon-height;
}
in HTML
<button type="button" class="ui-button ui-widget ui-corner-all">
<span class="custom-class"></span> CAPTION TEXT
</button>
in JavaScript
$("selector").button({
icons: { primary: "custom-class" }
});