AmCharts Map Disable Rollover Color on Mouseover

AmCharts Map Disable Rollover Color on Mouseover - javascript

I've checked the documentation but I cannot find it... how can I disable the rollover color on AmCharts Map on mouseover? Basically disable the change of color of map (for example, a state on US map). I don't want any mouseover interactivity or change of color. Thanks.
var map = AmCharts.makeChart("propertiesMap", {
"type": "map",
"listeners": [{
"event": "mouseover",
"method": removeListener
}],
"dragMap": false,
"theme": "light",
"colorSteps": 5,
"mouseEnabled": false,
"selectable": false,
"zoomOnDoubleClick": false,
"dataLoader": {
"url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22422.json",
format: "json",
"areas": [{
"mouseEnabled": false
}]
},
"areasSettings": {
"autoZoom": false,
"balloonText": "",
"outlineThickness": 1,
"selectable": false,
},
"valueLegend": {
"right": 10,
"minValue": "Cold",
"maxValue": "Hot"
},
"zoomControl": {
"zoomControlEnabled": false,
"panControlEnabled": false,
"homeButtonEnabled": false
}
});

To disable the rollover color for all states/areas, set the rollOverColor to null in your areasSettings object:
"areasSettings": {
// ...
"rollOverColor": null
},
Demo

From the docs
removeListener(chart, type, handler)
So in your case:
removeListener(myChart, 'mouseover', stateHoverFunction)

Related

Exclamation and question marks in JavaScript comments?

I was going through some code and found these two:
// ! if (!playbackState) return
// ? if (isSpotify) setPlayerTime(playbackState.position)
In VS Code, the line with "!" was highlighted in red, the other one was highlighted in blue. Couldn't find any info on it.

I am taking a jump (or a bit of a leap since some context is missing) and assuming you have better-comments installed
To which end, the below is found in my settings.json which does explain this
"better-comments.tags": [
{
"tag": "!",
"color": "#FF2D00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "?",
"color": "#3498DB",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
}
}

amcharts interactive map: making selected states a clickable link

I am creating a personal blog site. I stumbled upon an interactive visited states map in which I wanted to implement in one of my html page. I was able to successfully put it on my website with the generated html they provided. However, I wanted to tweak it a little bit but I'm not all familiar with javascript.
There are two things I want to add:
1st: Make the selected states link to a specific html page.
2nd (optional): Disable the zoom and color change when clicking on states that are not highlighted(visited).
Here is the code I have currently:
<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaHigh.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 1000px; height: 450px; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; cursor: default;"></div>
<script type="text/javascript">
var map = AmCharts.makeChart("mapdiv", {
type: "map",
theme: "light",
backgroundColor : "#FFFFFF",
backgroundAlpha : 1,
zoomControl: {
zoomControlEnabled : false
},
dataProvider : {
map : "usaHigh",
getAreasFromMap : true,
areas :
[
{
"id": "US-AZ",
"showAsSelected": true
},
{
"id": "US-CA",
"showAsSelected": true
},
{
"id": "US-DC",
"showAsSelected": true
},
{
"id": "US-ID",
"showAsSelected": true
},
{
"id": "US-MA",
"showAsSelected": true
},
{
"id": "US-MT",
"showAsSelected": true
},
{
"id": "US-NJ",
"showAsSelected": true
},
{
"id": "US-NV",
"showAsSelected": true
},
{
"id": "US-NY",
"showAsSelected": true
},
{
"id": "US-OR",
"showAsSelected": true
},
{
"id": "US-PA",
"showAsSelected": true
},
{
"id": "US-WA",
"showAsSelected": true
},
{
"id": "US-WY",
"showAsSelected": true
}
]
},
areasSettings : {
autoZoom : true,
color : "#B4B4B7",
colorSolid : "#DB4646",
selectedColor : "#DB4646",
outlineColor : "#666666",
rollOverColor : "#9EC2F7",
rollOverOutlineColor : "#000000"
}
});
</script>

You can add a url property to the states you want a link to. You can also set urlTarget to "_blank" if you want to make the link open in a new tab/window:
areas: [{
"id": "US-AZ",
"showAsSelected": true,
"url": "http://az.gov",
"urlTarget": "_blank"
},
{
"id": "US-CA",
"showAsSelected": true,
"url": "http://ca.gov/",
"urlTarget": "_blank"
},
// ... etc
I also recommend setting autoZoom to false and selectable to true in areasSettings so that the map doesn't try to zoom before triggering the URL:
areasSettings: {
autoZoom: false,
selectable: true,
To disable the zoom and color change on the other states, simply remove getAreasFromMap: true from your dataProvider.
var map = AmCharts.makeChart("mapdiv", {
type: "map",
theme: "light",
backgroundColor: "#FFFFFF",
backgroundAlpha: 1,
zoomControl: {
zoomControlEnabled: false
},
dataProvider: {
map: "usaHigh",
areas: [{
"id": "US-AZ",
"showAsSelected": true,
"url": "http://az.gov",
"urlTarget": "_blank"
},
{
"id": "US-CA",
"showAsSelected": true,
"url": "http://ca.gov/",
"urlTarget": "_blank"
},
{
"id": "US-DC",
"showAsSelected": true
},
{
"id": "US-ID",
"showAsSelected": true
},
{
"id": "US-MA",
"showAsSelected": true
},
{
"id": "US-MT",
"showAsSelected": true
},
{
"id": "US-NJ",
"showAsSelected": true
},
{
"id": "US-NV",
"showAsSelected": true
},
{
"id": "US-NY",
"showAsSelected": true
},
{
"id": "US-OR",
"showAsSelected": true
},
{
"id": "US-PA",
"showAsSelected": true
},
{
"id": "US-WA",
"showAsSelected": true
},
{
"id": "US-WY",
"showAsSelected": true
}
]
},
areasSettings: {
autoZoom: false,
selectable: true,
color: "#B4B4B7",
colorSolid: "#DB4646",
selectedColor: "#DB4646",
outlineColor: "#666666",
rollOverColor: "#9EC2F7",
rollOverOutlineColor: "#000000"
}
});
<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaHigh.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 1000px; height: 450px; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; cursor: default;"></div>

Why Rich file manager insert filemanager.config.json instead of insert image to text field

I've used Rich file manager with Laravel5.3.20 as the default configuration as below
Javascript
<script>
CKEDITOR.replace( 'textarea', {
filebrowserBrowseUrl: '{!! url('gallery/index.html') !!}',
///ImageBrowser : true,
autoUpdateElement:true,
language:'en'
});
</script>
Images in textarea url is wrong.
<p><img alt="" src="http://website.dev/gallery/connectors/php/filemanager.php?mode=readfile&path=%2Fae.jpg&config=filemanager.config.json&time=1477642950519" style="height:960px; width:720px" /></p>
All files, folder and sub folder have already update to userfiles
But it image url which i have to insert into Database with textarea go wrong as above url.
FileManager.configure.json
{
"_comment": "IMPORTANT : go to the wiki page to know about options configuration https://github.com/simogeo/Filemanager/wiki/Filemanager-configuration-file",
"options": {
"culture": "en",
"lang": "php",
"theme": "flat-dark",
"defaultViewMode": "grid",
"localizeGUI": true,
"showFullPath": false,
"showTitleAttr": false,
"browseOnly": false,
"showConfirmation": true,
"showThumbs": true,
"searchBox": true,
"listFiles": true,
"fileSorting": "NAME_ASC",
"folderPosition": "bottom",
"quickSelect": false,
"charsLatinOnly": false,
"splitterWidth": 200,
"splitterMinWidth": 200,
"dateFormat": "d M Y H:i",
"serverRoot": true,
"fileRoot": false,
"fileConnector": false,
"fileRootSizeLimit": false,
"baseUrl": false,
"capabilities": ["select", "upload", "download", "rename", "move", "replace", "delete"],
"logger": false,
"plugins": []
},
"security": {
"allowFolderDownload": false,
"allowChangeExtensions": false,
"allowNoExtension": false,
"normalizeFilename": true,
"uploadPolicy": "DISALLOW_ALL",
"uploadRestrictions": [
"jpg",
"jpe",
"jpeg",
"gif",
"png",
"svg",
"txt",
"pdf",
"odp",
"ods",
"odt",
"rtf",
"doc",
"docx",
"xls",
"xlsx",
"ppt",
"pptx",
"csv",
"ogv",
"avi",
"mkv",
"mp4",
"webm",
"m4v",
"ogg",
"mp3",
"wav",
"zip",
"rar"
]
},
"exclude": {
"unallowed_files": [
".htaccess",
"web.config"
],
"unallowed_dirs": [
"_thumbs",
".CDN_ACCESS_LOGS",
"cloudservers"
],
"unallowed_files_REGEXP": "/^\\./",
"unallowed_dirs_REGEXP": "/^\\./"
},
"upload": {
"multiple": true,
"paramName": "files",
"chunkSize": false,
"numberOfFiles": 5,
"fileSizeLimit": 16000000,
"overwrite": false,
"imagesOnly": false
},
"images": {
"imagesExt": [
"jpg",
"jpe",
"jpeg",
"gif",
"png",
"svg"
],
"main": {
"autoOrient": true,
"maxWidth": 1280,
"maxHeight": 1024
},
"thumbnail": {
"enabled": true,
"cache": true,
"dir": "_thumbs/",
"crop": true,
"maxWidth": 64,
"maxHeight": 64
}
},
"videos": {
"showVideoPlayer": true,
"videosExt": [
"ogv",
"mp4",
"webm",
"m4v"
],
"videosPlayerWidth": 400,
"videosPlayerHeight": 222
},
"audios": {
"showAudioPlayer": true,
"audiosExt": [
"ogg",
"mp3",
"wav"
]
},
"pdfs": {
"showPdfReader": true,
"pdfsExt": [
"pdf",
"odt",
"odp",
"ods"
],
"pdfsReaderWidth": "640",
"pdfsReaderHeight": "480"
},
"docs": {
"showGoogleViewer": true,
"docsExt": [
"doc",
"docx",
"xls",
"xlsx",
"ppt",
"pptx"
],
"docsReaderWidth": "640",
"docsReaderHeight": "480"
},
"edit": {
"enabled": true,
"lineNumbers": true,
"lineWrapping": true,
"codeHighlight": false,
"theme": "elegant",
"editExt": [
"txt",
"csv"
]
},
"customScrollbar": {
"enabled": true,
"theme": "inset-2-dark",
"button": true
},
"extras": {
"extra_js": [],
"extra_js_async": true
},
"icons": {
"path": "images/fileicons/",
"folder": "_Open.png",
"parent": "_Parent.png",
"default": "default.png"
},
"url": "https://github.com/servocoder/RichFilemanager",
"version": "1.0.6"
}

The version that you use doesn't support absolute paths in preview links, it builds preview urls via connector request path only.It was done because some users keep connector file separate from the client-side scripts (different servers and so on). After some discussions it was decided to support both options: absolute path (by default) and connector path (configurable). The feature that you need will be included in the next major release 2.0. Some discussion on your problem is here.

Disable keyboard Keys in WYSIHTML5

I want to disable all keyboard keys in wysihtml5 text editor .
I am using this editor https://github.com/bassjobsen/wysihtml5-image-upload
can anyone help me to do this. I have try "load" event and its works perfectly but i cannot use "onkeypress" or "onkeyup"\
var defaultOptions = $.fn.wysihtml5.defaultOptions = {
"font-styles": false,
"color": false,
"emphasis": false,
"lists": false,
"html": false,
"link": false,
"image": true,
events: {
"load": function() {
console.log('loaded!');
}
},

I think that is the answer below
var defaultOptions = $.fn.wysihtml5.defaultOptions = {
"font-styles": false,
"color": false,
"emphasis": false,
"lists": false,
"html": false,
"link": false,
"image": true,
events: {
"load": function() {
$('.wysihtml5-sandbox').contents().find('body').on("keydown",function(event) {
return false;
});
}
},

Simogeo FileManager does not show the images

I have Simogeo FileManager version 2.0.0.
I extracted it in root/tools, changed the config file, set up the permissions, hooked it to tinymce and everything seemed to work. The tinymce opens the popup window with FileManager. I can create a folder, change folder and upload files.
Problem is when I upload file(s) I cannot see them in the FileManager but they are uploaded in the directories I created. The only thing I can see are directories.
I am testing it on Windows 8.1 with uwAmp, PHP 5.3.24 or PHP 5.4.31.
Config file:
{
"_comment": "IMPORTANT : go to the wiki page to know about options configuration https://github.com/simogeo/Filemanager/wiki/Filemanager-configuration-file",
"options": {
"culture": "en",
"lang": "php",
"theme": "flat-dark",
"defaultViewMode": "grid",
"autoload": true,
"showFullPath": false,
"showTitleAttr": false,
"browseOnly": false,
"showConfirmation": true,
"showThumbs": true,
"generateThumbnails": true,
"searchBox": true,
"listFiles": true,
"fileSorting": "default",
"chars_only_latin": true,
"dateFormat": "d M Y H:i",
"serverRoot": true,
"fileRoot": false,
"relPath": false,
"logger": false,
"capabilities": ["select", "download", "rename", "delete", "replace"],
"plugins": []
},
"security": {
"allowFolderDownload": false,
"allowChangeExtensions": false,
"allowNoExtension": false,
"uploadPolicy": "DISALLOW_ALL",
"uploadRestrictions": [
"jpg",
"jpeg",
"gif",
"png",
"svg",
"txt",
"pdf",
"odp",
"ods",
"odt",
"rtf",
"doc",
"docx",
"xls",
"xlsx",
"ppt",
"pptx",
"csv",
"ogv",
"mp4",
"webm",
"m4v",
"ogg",
"mp3",
"wav",
"zip",
"rar"
]
},
"upload": {
"multiple": true,
"number": 5,
"overwrite": false,
"imagesOnly": false,
"fileSizeLimit": 16
},
"exclude": {
"unallowed_files": [
".htaccess",
"web.config"
],
"unallowed_dirs": [
"_thumbs",
".CDN_ACCESS_LOGS",
"cloudservers"
],
"unallowed_files_REGEXP": "/^\\./",
"unallowed_dirs_REGEXP": "/^\\./"
},
"images": {
"imagesExt": [
"jpg",
"jpeg",
"gif",
"png",
"svg"
],
"resize": {
"enabled":true,
"maxWidth": 1280,
"maxHeight": 1024
}
},
"videos": {
"showVideoPlayer": true,
"videosExt": [
"ogv",
"mp4",
"webm",
"m4v"
],
"videosPlayerWidth": 400,
"videosPlayerHeight": 222
},
"audios": {
"showAudioPlayer": true,
"audiosExt": [
"ogg",
"mp3",
"wav"
]
},
"edit": {
"enabled": true,
"lineNumbers": true,
"lineWrapping": true,
"codeHighlight": false,
"theme": "elegant",
"editExt": [
"txt",
"csv"
]
},
"customScrollbar": {
"enabled": true,
"theme": "inset-2-dark",
"button": true
},
"extras": {
"extra_js": [],
"extra_js_async": true
},
"icons": {
"path": "images/fileicons/",
"directory": "_Open.png",
"default": "default.png"
},
"url": "https://github.com/simogeo/Filemanager",
"version": "2.0.0-dev"
}

The problem was with the type in referer.
tinymce was passing ?type=image and filemanager expected ?type=images

Are you sure listFiles option is set to true inc config file ?
See the related doc : https://github.com/simogeo/Filemanager/wiki/Filemanager-configuration-file
listFiles Default value true. Display files in right column (filetree). If set to false, will display only folders. Can take value true or false.
For further help, could you copy-paste an URL or at least your config file!?

Develop Reference

JavaScript is the programming language of the Web.

AmCharts Map Disable Rollover Color on Mouseover - javascript

To disable the rollover color for all states/areas, set the rollOverColor to null in your areasSettings object: "areasSettings": { // ... "rollOverColor": null }, Demo

From the docs removeListener(chart, type, handler) So in your case: removeListener(myChart, 'mouseover', stateHoverFunction)

Related

Exclamation and question marks in JavaScript comments?

amcharts interactive map: making selected states a clickable link

Why Rich file manager insert filemanager.config.json instead of insert image to text field

Disable keyboard Keys in WYSIHTML5

Simogeo FileManager does not show the images

Categories

Resources