I have an iframe application in vk.com. I can use their API everything looks fine but when I want to load profile images I get Security Sandbox Error. When I print the result and errors I get This: (I am using Greensock ImageLoader)
MYURL : 'MY Image URL on cs408919 subdomain of vk'
Loading CrossDomain on cs408919
ScriptAccessDenied : Error #2048
SecurityError : Error #2048
Error : Error #2048
ScriptAccessDenied : Error #2123 Security SandBox Violation, No Policy Files Granted Access
It seems to me crossdomain.xml issue but I couldn't find right one. Thanks...
In additional to fsbmain's answer I want say you have to add following code:
Security.allowDomain("*");
Yes, it's crossdomain issue, vk sub-domains for images doesn't provide crossdomain.xml for user avatars, but you still able to load (and add to display list as well) them. What you can't do is to access the loaded content (and set smooth bitmap flag for example, or draw the hole stage with vk images on it).
If you need the access the content you can use this "policy-hack", but it's hack, so it can be fixed in any FP update (I guess even this answer may bring closer this moment:) ):
The idea is to listen the ADDED event if image Loader:
protected var _prepareloaderBitmap:Bitmap;
_prepareloader.addEventListener(Event.ADDED, onPrepareLoader);
_prepareloader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPrepareLoader);
And the listener:
protected function onPrepareLoader(event:Event):void
{
//event ADDED fired only for Bitmap (not for SWFs)
if(event.type == Event.ADDED)
{
_prepareloaderBitmap = event.target as Bitmap;
}
else if (event.type == Event.COMPLETE)
{
if(_prepareloaderBitmap)
{
trace("loaded image size:", _prepareloaderBitmap.width, "x", _prepareloaderBitmap.height);
}
}
}
Having the reference to the loaded Bitmap you can now add it instead of crossdomain issued loader.
Related
I am using Spring boot, JPA with mysql, and thymeleaf and openlayers for the map.
So i have a map, and on this map there are dynamically generated markers for different places. What I want is when I click any of those markers to send the name of the marker to my controller and in response get an array of fishes that can be caught in this specific area and then display the names and pictures of the fishes in a dynamically generated list located on the sidebar . I cant think on how I can achieve that. Ive made a HTML page to show how I want it to look.
I was thinking about making a get request and giving the name as a path variable but then idk how I can do that request from the javascript when the button is clicked. Any ideas or concepts that I can read about are apreciated.
Most DOM elements in html are accessible in javascript via something like document.getelementbyid and typically if I remember this correctly most of the objects you can do something like domobject.addEventListener("click", myScript); and in myScripy make an http call to spring requesting the list of fish. I recommend setting some breakpoints in your JavaScript code via the dev console in your browser and looking through some of the objects that are produced
You can make a get request like described here. developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
Clicking on the markers would be similar to this example https://openlayers.org/en/latest/examples/icon.html, but instead of showing a popup you make a GET request for more data
map.on('click', function (evt) {
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
if (feature) {
const name = feature.get('name');
// now make get request
// ....
}
});
If you are requesting an image you could use xhr as in https://openlayers.org/en/latest/apidoc/module-ol_Tile.html#~LoadFunction or you could use fetch, similar to:
fetch(url).then(function(response) {
if (response.ok) {
return response.blob();
}
}).then(function(result) {
if (result) {
const imagesrc = URL.createObjectURL(result);
}
});
In my Nativescript app, the application starts with the login page. On iOS everything looks good, but on android, the username field is focused and the keyboard is showing. Is there a way to prevent this from happening?
So far I have tried:
Getting a reference of another element (a label) and calling lbl.focus() in the page's onLoaded event
getting a reference of the username textfield and calling txt.dismissSoftInput() and txt.android.clearFocus()
None of this worked. Is there another way to hide the keyboard when the page is loaded?
Thank you
I guess the username field is either textview or textfield. If so, try this on loaded callback:
var myTextview = page.getViewById("myTextView");
myTextView.dismissSoftInput();
So I ended up implementing a different solution. This may not be the best approach, but it serves its purpose in my case and I wanted to share it for those of you that face a similar scenario.
in page's loaded event I included this code:
if (page.android) {
var un = page.getViewById('username');
var p = page.getViewById('password');
un.android.setFocusable(false);
p.android.setFocusable(false);
setTimeout(function () {
un.android.setFocusableInTouchMode(true);
p.android.setFocusableInTouchMode(true);
}, 300);
}
The key here is the setTimeout function (Thanks Emil Oberg for pointing me to the right direction). As far as I understand, here is what is happening:
The page loads and we call setFocusable(false) on the only 2 text fields to prevent Android from setting the focus on them
Then we wait 300ms to allow Android to do its initialization
When the timeout executes, call setFocusableInTouchMode(true) to allow the fields to gain focus.
At this point the page is loaded without any fields to be in focus and with the keyboard hidden. If the user taps any of the fields the keyboard will appear and they can proceed to log in as usual.
As I mentioned, this may not be the best, or correct, approach, but works for me. Hope this can save someone the time to research the issue.
You want to clear the focus of the field in the loaded callback:
var searchBar = page.getViewById('my-search-bar-id');
if (searchBar.android) {
searchBar.android.clearFocus();
}
What about combining both tips above?
onClear(args) {
const searchBar = <SearchBar>args.object;
if (isAndroid && searchBar.android != undefined){//avoid random unpleasant error
setTimeout(() => { // the key here was this timeout
searchBar.android.clearFocus();
}, 1)
}
}
Morning,
We have literally searched all over Stackoverflow and Google to find this solutions but still don't have the right answer.
We're trying to auto-set the Base, Small and Thumbnail options on the first uploaded image, so when uploading multiple images the first image will always have all three options checked.
If anyone has tried and succeeded with find this answer and advice, Thank you.
It is very easy. Example's here. Replace in root/js/mage/adminhtml/product.js in the end of handleUploadComplete around 120 row code
this.container.setHasChanges();
this.updateImages();
},
updateImages : function() {
with
this.container.setHasChanges();
this.updateImages();
$$('tr#media_gallery_content-image-1 td.cell-image.a-center input')[0].setAttribute('checked','checked');
$$('tr#media_gallery_content-image-1 td.cell-small_image.a-center input')[0].setAttribute('checked','checked');
$$('tr#media_gallery_content-image-1 td.cell-thumbnail.a-center input')[0].setAttribute('checked','checked');
},
updateImages : function() {
And enjoy autoselect first image after upload
If you have already uploaded your images and need to set the first one as thumb/base/small try the sql command in this post:
Just follow the instructions given by stereo_world and nhahtdh and then refresh your cache.
Thanks to Fabian and Doug for the groundwork. I just published an extension, which does exactly what you are trying to achieve in a clean way: https://github.com/customgento/CustomGento_AutoSelectImages
It simply adds a JS file on the admin product edit page. In the JS file, the mentioned method Product.Gallery.createImageRow is wrapped, so that the radio buttons can be selected after the first image has been uploaded. Here is the JS "magic":
if (typeof Product.Gallery !== 'undefined') {
Product.Gallery.prototype.createImageRow = Product.Gallery.prototype.createImageRow.wrap(function (parentMethod, image) {
// first call the parent method
parentMethod(image);
// auto-select the radio buttons for the first uploaded image
$H(this.imageTypes).each(function (pair) {
if (this.images.length === 1) {
this.getFileElement(image.file, 'cell-' + pair.key + ' input').checked = true;
}
}.bind(this));
this.setProductImages(image.file);
});
}
I'm trying to change the default behavior of Drupal when adding an image through image field on a content type.
When you choose an image to assign to a node, it's not directly uploaded. You also need to click "upload" to display the preview of your image, and this is not really user friendly.
How can I change this (programmatically) to make Drupal start uploading directly the image after choosing the file.
Thank you for help
You can do it this way:
(function ($) {
Drupal.behaviors.autoUpload = {
attach: function(context, settings) {
$('.form-item input.form-submit[value=Upload]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Upload]', $parent).mousedown();
}
}, 100);
});
$('.form-item input.form-submit[value=Transférer]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Transférer]', $parent).mousedown();
}
}, 100);
});
}
};
})(jQuery);
This solution works with either english and french browsers. Unlike AutoUpload module, which only works on browsers configured in english. Note the [value=Upload] / [value=Upload] attribute
I found a similar post:
https://drupal.stackexchange.com/questions/31121/how-can-i-automatically-upload-images-on-file-selection-rather-than-pressing-the
It's exactly what I need..
You should be able to use http://drupal.org/project/imce for your needs.
I am not sure about the Image field but when I encountered this issue I decided letting users add images in body since it is a much easier option for durpal - When inserting images in text They will show immediately .
IMCE + filefield seems like a viable option for your direct needs,They do mention AJAX support.
With firebugs net tab open i stated zooming in and out of google map and i found its making requests for the png images.
Ok with this i understood that we can request the images using the Ajax. but wait ? i always used to request html, jsox, txt and xml. Image ........ its strange for me ? Can some one please elaborate on this ?
Also i would like to know if text is downloaded we add it to some DOM element and it show up. How images retried from the ajax can be accessed ?
Any help or pointer will be great help :)
GMaps doesn't make XMLHttpRequests to get the images. They instead use a normal <img /> element that is injected via javascript.
They then use the "onload" and "onerror" events to detect if the image was loaded correctly.
They retry a download of the image if it times out. This is achieved by setting a timer and once it expires re-setting the src property of the image.
var tile = document.createElement('img');
var url = 'http://sometilehost/X.Y.Z.png';
var downloadTimeout = 10000; // Retry in 10 seconds
// Tile downloaded successfully
tile.onload = function (e) {
window.clearTimeout(tile.downloadTimer);
alert('tile downloaded');
};
// The tile couldn't be downloaded. 404, 503 ...
tile.onerror = function (e) {
window.clearTimeout(tile.downloadTimer);
alert('tile not downloaded');
};
// This will fire if the tile doesn't download in time
tile.downloadTimer = window.setTimeout(function () {
tile.src = url; // Start the download again
}, downloadTimeout);
tile.src = url;