I tried to re-position the Scale Control like this
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
at This Demo but it seems it is not working! can you please let me know if it is possible to re-positin ans apply some style (To Highlight it) to Scale Control? Thanks
Currently there are no configurable options for a scaleControl, the position may not be modified
Related
I have a HighCharts organization chart that loads data from our db so it can have a variable number of nodes. I've added
.highcharts-container { overflow: scroll !important; min-width: 100px; }
to my css so that the scrollbars appear and it seems to be growing as needed vertically. However, the nodes overlap horizontally for some reason. I've added
nodePadding: 15
to my js which seems to space them out vertically but doesn't help the horizontal issue. I feel like there should be an option or setting for this, but when I search on overlapping issues, all I get are label issues. Any ideas on how to get my nodes to space out? Thanks!
Here's a jsFiddle which has overlapping data like mine - https://jsfiddle.net/ubmzs5qf/
In case things get unconnected at some point, here's a function given to me by Sebastian here: https://www.highcharts.com/forum/viewtopic.php?f=9&t=42435&p=149331 that handles resizing for the amount of data:
events: {
load() {
let chart = this,
series = chart.series[0],
newWidth = series.options.nodeWidth * series.nodeColumns[2].length;
chart.update({
chart: {
width: newWidth
}
})
}
}
I used this to set both the height and width but it's being overwritten by something, possibly a higher angular limit on dialog size. I think I need a way to space out the icons and make everything small since I can't just make the chart bigger.
You can achieve it by decreasing nodes width eg. nodeWidth: 50.
Demo:
https://jsfiddle.net/BlackLabel/d9cmt0oy/
API reference:
https://api.highcharts.com/highcharts/series.organization.nodeWidth
EDIT
Another way is to decrease `dataLabels font size and set manually the height and offset of each larger node.
Demo:
https://jsfiddle.net/BlackLabel/8om5hc34/1/
I have a Google Charts dashboard with various filters. One of the filters has 300 options.
When I click on the filter the dropdown list box expands way outside the dimensions the data table.
Does anyone know the class, to which I can apply a height property, so that I get scroll bar within the drop down box.
I've tried to inspect the element and I thought my best shot was the class .goog-menu goog-menu-vertical
but that doesn't seem to affect it
I've enabled "allowHTML" in the options of the wrapper - just need to know a class....
thanks
I might have found a potential solution to what you are looking for in the Google Groups forum: https://groups.google.com/forum/#!topic/google-visualization-api/VilEBO0m3xI
Add the following to your style/CSS:
.goog-menu-vertical {
max-height: 80vh;
overflow-y: auto;
}
I think you also need to have cssClass in the ControlWrapper and allowHtml: true in your code for it to work.
Hope this helps! It did for me :)
EDIT: just noticed that #Alon Eitan provided the answer in the comments section... :) I'll leave my comment here for others to see better
Is it possible to set a horizontal scrolling feature so that it scrolls to (overflow, I'm assuming, unless there is another way) the left as well as the right. Sort of like this picture:
a horizontal scrolling feature
... except I want to load the object just like it is in that photo but have other objects (images rather than the divs pictured) back behind to the left of that first object), so you can scroll to unseen things in both directions.
EDIT: in response to some of the people offering to help here (thanks), I have composed a fiddle (in the comments below). The hope is that I could load this horizontal feature with the blue-border box at far left (on initial load) and people could scroll back or forth). I'd prefer (but I'll take either one) it to be marked to load on that box rather than css it so it would load after a certain width or something like that, because I want to it to function this way universally (regardless of how many objects are hidden to the left) but, again, I'll take either solution, because I can probably make it work with either.
Here is a quick mockup of something like that. It can be extended to use scroll events. Used jquery but it can be done in pure js too. Just made the body hide the overflow like this
body {
overflow: hidden;
}
I have buttons to move it around but as I said you can do it with scroll events too.
function left () {
var div = document.getElementById('scrollContainer');
$(div).animate({ "right": "+=100px" }, 500);
}
function right () {
var div = document.getElementById('scrollContainer');
$(div).animate({ "right": "-=100px" }, 500);
}
Fiddle: http://jsfiddle.net/hna6jkzk/
And obviously the divs can be images too.
A fiddle with no JS and visible scrollbar: http://jsfiddle.net/hna6jkzk/1/
A fiddle with no JS and hidden scrollbar: http://jsfiddle.net/hna6jkzk/2/
I have the following code which is a custom icon on Google Maps V3. I want to rotate it using the jQuery.Rotate plugin.
var image = new google.maps.MarkerImage(
"markers/test.png",
new google.maps.Size(52, 52), // size
new google.maps.Point(0, 0), // origin
new google.maps.Point(20, 0) // anchor
);
marker = new google.maps.Marker(
{
map: map,
draggable: false,
position: markerData[i].latLng,
visible: true,
icon: image,
optimized: false
});
The problem is jQuery.Rotate is wanting the DOM id to identify the element to rotate.. Markerimage doesn't have one and I can't specify it.
Eg.
<img src="img" id="image">
$("#image").rotate(15);
Can anyone show me some sample code that will allow me to either assign an id to the MarkerImage so that jQuery.Rotate can use it eg. #image assuming the id is id="image", or is there another way of telling jQuery.Rotate to use the MarkerImage rather than point to a DOM element?
Any help would be appreciated.. If I can't find an answer to this I'll need to create 360 versions of the same icon for every icon I use of which there are many. I prefer to use this particular plugin though. Hopefully there's an easy answer.
I can't provide an 'answer', just a hint and observation.
Assuming that your map is a DOM object called 'map', have a look at the DOM object map.l.innerContainer.outerHtml. (thats a lower case "l" - map.l)
In outerHtml, amongst many other divs, you should be able to find a div that contains the img file for your icon.
I've wanted to do the same thing as you, rotate icons on the fly, but I haven't yet found the time to see if I can organise a way to put an id on these divs to facilitate using jquery to rotate them. The divs are created by the api.
There are some DOM mutation events (like DOMNodeInsertedIntoDocument) described in the literature but evidently their implementation is unreliable / uneven and it sounds like they have been removed from the W3C spec. I haven't tried any of these yet so can't comment from personal experience.
In my case I just decided to create icon files for each cardinal direction, N NNE NE ENE etc. For my application that seems to get the icons aligned well enough to look ok.
If you succeed in your quest please share your solution here for others.
Is there anyway to change the position style of an element dynamically from 'absolute' to 'fixed' dynamically in IE 9 and before?
In other words we want an element to move vertically on the page till a point when it would reach at the top of the window and then at that point make it fixed so it wont just go up anymore? Makes sense?
It just works in my copy of IE 9.
document.getElementById('foo').style.position = 'fixed';
What you're looking for is a way to change this value based on another in-page condition.
I'd suggest what you need is something akin to this (using jQuery):
var targetElement = $('#your-fixed-absolute-element');
var togglePixelY = 100; // change to suit your needs
$(window).bind('scroll resize',function(){
if($(this).css('scrollTop') <= togglePixelY && !targetElement.hasClass('absolute')) {
targetElement.addClass('absolute').removeClass('fixed');
} else if($(this).css('scrollTop') > togglePixelY && !targetElement.hasClass('fixed')) {
targetElement.addClass('fixed').removeClass('absolute');
}
});
Here is another useful question you can read up on:
Get current scroll position and pass it as a variable with a link?
or Position of a div relative to the window?
and there are plugins for this (look for 'sticky sidebar' for example) and a nice tutorial for it here: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/
Using jQuery?
http://api.jquery.com/css/