I want to be able to select a single element within the previewtemplate of a single image, such as:
//I'm passing the file to the function
MyDropzone.on('complete', function(file){
// select e.g. the .dz-success-mark for this file and make it visible
myselectedelement.css('display', 'block');
}
I am passing file, but how do I get the .dz-success-mark within the template of that file?
You can access your DOM node this way (jquery example)
MyDropzone.on('complete', function(file){
$(file.previewElement).css('display', 'block');
}
Related
I have content that references Images by ID within a placeholder (e.g. "$m(12345)" ). I have a REST call that will return an img-tag for the placeholder.
I would like CKEditor to display the image when the content is opened in editor, or a placeholder is inserted. But I want the placeholder to remain in the content (including when switching to the Source view)
I've tried to do this by adding a rule to the dataFilter:
CKEDITOR.on('instanceLoaded', function(ckeditor){
var mediaPlaceholderRegex = /\$m\(.*\)/;
ckeditor.editor.dataProcessor.dataFilter.addRules({
text: function( text, node ) {
return text.replace( mediaPlaceholderRegex, function( match ) {
var params = "placeholder="+match;
var xhttp = new XMLHttpRequest();
xhttp.open("POST", url, false);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(params);
return xhttp.responseText;
} );
}
});
});
It does the job of replacing the placeholder with the image tag, but the img-tag is also there when switching to the source view.
Is there an easy way to only apply a filter to the wysiwyg view.
The only way I see is to add a htmlFilter that would revert the img-tag back to a placeholder.
Is there an easy way to only apply a filter to the wysiwyg view. The only way I see is to add a htmlFilter that would revert the img-tag back to a placeholder.
Good thinking. Either that of if you don't want your images to be removed/fetched from the server on every mode change, you can for example put your placeholder into the data- attribute for the image tag. It all depends on your use case but the bottom line is that dataFilter is used when you load data into the editor and htmlFilter when you get data from the editor (same methods are used when getting data and switching to source mode so htmlFilter applies here).
I have been using Ammap Library and created Map.
https://www.amcharts.com/demos/custom-html-elements-map-markers/
I want to delete Map images object by using method(), Details are in below link.
Could any one let me know how to use this method()
https://docs.amcharts.com/3/javascriptmaps/MapImage#deleteObject
Method Name:"deleteObject()"
Thanks in Advance
deleteObject is a member method of the image/object itself, so you just call it from the object you want to delete, e.g.
image.deleteObject();
If your map is using custom HTML elements like in the demo, you also need to remove the div generated in your createCustomMarker method by calling removeChild in the DOM. You need to be able to access that div somehow, so I recommend modifying it to set the div's id to something you can look up later like the image's id:
// this function creates and returns a new marker element
function createCustomMarker(image) {
// create holder
var holder = document.createElement("div");
holder.className = "map-marker";
holder.title = image.title;
holder.id = image.id; //added to make div lookup easier
// ...
}
This modification assumes you set an id in your images, which is also recommended since you can use the getObjectById method to get the image object and call its deleteObject method.
Here's a sample function that deletes both the image and custom marker when an image ID is provided:
function deleteImage(imageId) {
var image = map.getObjectById(imageId);
var imageDiv;
if (image) {
image.deleteObject(); //delete the ammap image object
imageDiv = document.getElementById(imageId); //get the custom marker div
imageDiv.parentNode.removeChild(imageDiv); //remove it from the DOM
}
}
Demo - Click on the buttons to delete the corresponding marker.
I'm looking at this example of D3.js version 4 and I need to load dynamic data from the same script.
What is the analogus function of d3.csv() to load data from an array or an object? I don't need an XMLHttpRequest but I need the same behavior of d3.csv().
A fiddle is at https://jsfiddle.net/i5ar/mbcu05z8/.
Here's the full fiddle: https://jsfiddle.net/mbcu05z8/27/
I stored the array in a variable just like you did:
var myArr= [{"id":"AL","Under 5":310504,"5 to 13":552339,"14 to 17":259034,"total":1121877},{"id":"AK","Under 5":52083,"5 to 13":85640,"14 to 17":42153,"total":179876},{"id":"AZ","Under 5":515910,"5 to 13":828669,"14 to 17":362642,"total":1707221}];
then I changed d3.csv to a custom function named draw() and just called it :-)
draw(myArr);
function draw(states) {
var stateById = d3.map();
states.forEach(function(d) {
stateById.set(d.id, d);
});
setTimeout(()=>{
dispatch.call("load", window, stateById);
dispatch.call("statechange", window, stateById.get("AL"));
},20);
};
In a widget's init function I can access the widget's inner HTML using
this.element.getHtml();
This HTML might contain widget data attributes like data-cke-enter-mode="1" data-cke-widget-editable="text".
I want to get the HTML without these data attributes, exactly the same as the source area/dialog would show it. What's the best way to do this?
Just pass it trough the data processor:
editor.dataProcessor.toDataFormat( widget.wrapper.getOuterHtml() );
And in case of an inline widget:
editor.dataProcessor.toDataFormat( widget.wrapper.getOuterHtml(), { context: 'p' } );
Passing the context will prevent auto-paragraphing (inline widget will not be wrapped with a <p>).
I have been trying to manipulate content that is loaded into jQuery UI tabs via AJAX.
As you can imagine, these elements are "future" DOM elements and aren't manipulated by normal $(".someClass")functions.
I've read using .live() for event handling is now deprecated using jQuery 1.7+ and is replaced by the new .on() method.
My issue is that the div I want to hide, when it loads in an AJAX tab, must be manipulated after the initial DOM load and is not bound to a click event at first.
My functions, which are currently wrapped in $() are below.
I think I have the syntax correct for links that use a click handler, but I'm not sure of the correct way to ".hide()" my "hiddenStory" div at load.
I also think that the functions themselves shouldn't be wrapped in an overall $()?
Any help or advice would be greatly appreciated.
$(function(){
// this .hiddenStory div below is what I want to hide on AJAX load
// need syntax and/or new methods for writing this function
$(".hiddenStory").hide();
// this is a function that allows me to toggle a "read more/read less" area
// on the "hiddenStory" div
$(".showMoreOrLess").on('click', (function() {
if (this.className.indexOf('clicked') != -1 ) {
$(this).removeClass('clicked');
$(this).prev().slideUp(500);
$(this).html("Read More" + "<span class='moreUiIcon'></span>");
}
else {
$(this).addClass('clicked');
$(this).prev().slideDown(500);
$(this).html("See Less" + "<span class='lessUiIcon'></span>");
}
}));
});
// prevents default link behavior
// on BBQ history stated tab panes with
// "showMoreOrLess" links
$('.showMoreOrLess').click(function (event)
{
event.preventDefault();
// here you can also do all sort of things
});
// /prevents default behavior on "showMoreOrLess" links
Could you set the display: none via CSS and override it when you wanted to show the element's content? Another option, if you have to do it this way would be to add the `$(".hiddenStory").hide() in the callback from the AJAX load that is populating the element. For example:
$(".hiddenStory").load("http://myurl.com", function(){
$(".hiddenStory").hide();
}
);
If you aren't using the .load method, you should have some sort of call back to tie into (e.g. success if using $.ajax...)