I know there is a lot of topic about this but i can't find answer. My custom icon won't display. Here is my link http://maps.googleapis.com/maps/api/staticmap?zoom=15&size=640x200&scale=2&markers=icon:http%3A%2F%2Fwww.ide-imprimerie.com%2Fdata%2FnewTemplate%2Fpin.png|45.7472473,-0.6246753000000353
But the map is working well as you can see here : http://maps.googleapis.com/maps/api/staticmap?zoom=15&size=640x200&scale=2&markers=45.7472473,-0.6246753000000353
also the icon here : http://www.ide-imprimerie.com/data/newTemplate/pin.png
I encoded the URL, tried 32x32/64x64 icon, different icon and I still don't understand why this custom icon won't show up, thank you for reading and helping !
EDIT: Didn't find the issue but shortened url works so thread closed.
I believe this will works for you..
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: 'http://www.ide-imprimerie.com/data/newTemplate/pin.png'
map: map
});
Related
I am coding in typescript react js and I have a highstocks graph. The problem I need help with is that I need to show the values on hover on tags (div boxes) above the graph individual to each series plotted within. The values coincide with wherever the cursor is on the graph. Please help me to achieve this.
I am attaching an image for better understanding. The dotted line on the image is where the cursor is at the moment and I want to show the values: [128.32, 49.94, 1.01] instead of '--' next to each tag name: ['Throttle Valve, Posi', 'Mill Hydr. Unit, Gri', 'Water Injection, Pos']. Thanks
Image
Inside click events, you can access the nearest point using this.hoverPoint.
chart: {
events: {
click: function() {
console.log(this.hoverPoint)
}
}
},
Demo: https://jsfiddle.net/BlackLabel/8eym6jwo/
I was able to solve this problem. Appreciate everyone who helped out.
The solution (for getting an onclick point for multiple plotted series) is as follows:
this.hoverPoints?.map((item_hoverPoints, index_hoverPoints) => {
temp_trackValues[index_hoverPoints] = Number(
item_hoverPoints?.series?.points[this.hoverPoint?.index]?.y
).toFixed(3).toString();
});
Thanks
Trying to pull an image from Umbraco and display it using React.
I can pull all the text by doing this for example -
{String(this.props.data['carouselUnderImageText'])}
{String(this.props.data['carouselLink'])}
But when doing an image -
<img src={this.props.data["carouselImage"]} or <img src={String(this.props.data["carouselImage"])} />
Those two won't work, it seems to return me the url umb://media/8990dd19cfb746e0bea4baec5df20d01
Any ideas on how to solve this? I have not found enough documentation to fix this issue when using Umbraco with React.
If there is anything else I can show in order to help answer this question just put it in the comments and I will update the question.
Many Thanks in advance.
You can get the IPublishedContent of the image file by using the TypedMedia function in the Umbraco Helper, you can then access the images URL to be passed through to react.
var umbracoHelper = new UmbracoHelper(UmbracoContext.Current);
Udi.TryParse(carouselImage, out var carouselImageUdi); // this parses the umb://media string into a UDI to be used in TypedMedia.
var imageUrl = umbracoHelper.TypedMedia(carouselImageUdi).Url;
I've been trying to use the ng-grid 3.0 (ui-grid). I have managed to populate my grid and it's been very responsive and it's features are really amazing. But I'm trying to customize my column headers, as I need more info there.
I can create a custom header cell template, as indicated in the docs, but I don't seem able to use a Bootstrap Dropdown there, it gets cropped and I can't use it at all. Some googling got me thinking it is probably some issue with the overflow attributes, but still I can't solve it. My grid options is as follows:
$scope.columnDefs = [
{ name:'name', displayName: 'Vdd', headerCellTemplate: 'headerTemplate.html' },
{ name:'gender', headerCellTemplate: 'headerTemplate.html' },
{ name:'company' }
]
$scope.gridOptions = {
columnDefs: $scope.columnDefs,
rowTemplate: 'rowTemplate.html',
data: 'data'
};
I have forked an example in plunkr and managed to reproduce my issue:
http://plnkr.co/edit/qdrFiifiz18fxB8w6Aja?p=preview
I want to replace the built-in dropdown menu (since it doesn't seem to allow nesting and sub-menus) and add another one (so in the end, I'd have two dropdown menus in each header cell)
Any help is appreciated =)
I am proud to say I think I've figured it out. I've been digging through ui-grid's source code and narrowed it down to this block (lines: 2847 - 2852).
function syncHorizontalHeader(scrollEvent){
var newScrollLeft = scrollEvent.getNewScrollLeft(colContainer, containerCtrl.viewport);
if (containerCtrl.headerViewport) {
containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid);
}
}
I noticed that containerCtrl.headerViewport.scrollLeft was never getting set to newScrollLeft. A quick google search led me to this StackOverflow thread which says that you can't set the scrollLeft property of an element if it's overflow is set to visible.
My solution was to replace containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid); with containerCtrl.headerViewport.style.marginLeft = -gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid) + 'px'; which just sets a negative margin on the header. Then add an overflow:hidden; style to .ui-grid-render-container-body to hide headers that extend beyond the main grid viewport.
Doing this messed up the placement of column menus, but there is an easy fix. On line 514 replace var containerScrollLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].scrollLeft; with var containerScrollLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].style.marginLeft; to use the margin instead of the scroll value in the menu placement calculation.
I have a responsive site that uses the google translate widget. The weird thing is that for some time the widget now appears twice, and this seem to be related to the responsive design because if I place the same widget code on a simple html page it only appears once. I have no idea on how to solve this. Has anyone come across this?
Update.
I have discovered that this is caused by jquery.themepunch.showbizpro.min.js, if I remove that one the widget only appears once. I have not found a way to fix this yet but there might be a way. I found this piece of code.
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{ pageLanguage: 'sv' },
'google_translate_element'
);
/*
To remove the "powered by google",
uncomment one of the following code blocks.
NB: This breaks Google's Attribution Requirements:
https://developers.google.com/translate/v2/attribution#attribution-and-logos
*/
// Native (but only works in browsers that support query selector)
if(typeof(document.querySelector) == 'function') {
document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
}
//If you have jQuery - works cross-browser - uncomment this
jQuery('.goog-logo-link').css('display', 'none');
jQuery('.goog-te-gadget').css('font-size', '0');
}
</script>
This code remove the logo, so I'm thinking that if I use javascript I could check and remove duplicate occurrences of <select class="goog-te-combo"> then I would only have one left, is that possible?
This happened to me using Bootstrap. I had two instances of the Google Translate code - one instance for larger screen sizes and another that was only visible for smaller screens. Both showed up regardless of screen size. Bootstrap classes like visible-xs and hidden-xs do not seem to affect the display of the Google Translate button.
You can set a global counter and make sure it's only called once.
<div id="google_translate_element"></div>
<script type="text/javascript">
var duplicate_google_translate_counter = 0;//this stops google adding button multiple times
function googleTranslateElementInit() {
if (duplicate_google_translate_counter == 0) {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
duplicate_google_translate_counter++;
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Had the same problem on RoR. Problem caused by cashing pages with turbolinks. I solved it with deprecating cashing all links in (when script loading it adds attr "data-turbolinks="false" to the body-tag)
Hello to all! I had the same issue and I KNOW is not the best practice but I fixed it with CSS just adding overflow: hidden and a right border on it.
It visually fix the problem until we get a solution and really saved time diving into JS files. Hope it works for you too. Cheers!
I have a requirement to print the View model data using Print Button.
Currently i have a div and assigning my view content to it. This div has been already added in backbone region. In my javascript function, i am just setting the viewmodel content to the printdiv and it working with out any issue.
But the content which i have added for printing is getting appended in the browser HTML also, I dont want to show that in my browser. I tried setting visible hidden and display none to my printingdiv. but then printing is not working since the content is not visible
CSHTML:
<div id="printdiv"/>
JS:
Myapp.printdiv.show(viewData.view);
window.print();
Init.JS
Myapp.addRegions({
printdiv: '#printdiv',
});
Please help me to resolve this issue
Thanks
The best way to handle this sort of problem is with a print-specific stylesheet. This article explains how to do that in detail, but the short version is that you define your non-print styles as normal, then use CSS code like the following to override print-specific styles:
#printdiv {
display: none
}
#media print {
#printdiv {
display: block;
}
}