I have this function to replace image attributes:
jQuery(function() {
jQuery(".lightbox-enabled img").each(function() {
imgh = jQuery(this).height();
lbh = jQuery('.lightbox-enabled').height();
lbw = jQuery('.lightbox-enabled').width();
jQuery(this).html(jQuery(this).html().replace(/width="218"/g, 'width="300"'));
});
});
There is an error, but where?
I also had it in another way, but there each image had the same source....
You could use jQuery for that, which is more robust than using a regex. Use .attr(..) for setting/getting.
You can get the check that it is 218 before with jQuery("[width=218]")
So:
jQuery(function() {
jQuery(".lightbox-enabled img").each(function() {
imgh = jQuery(this).height();
lbh = jQuery('.lightbox-enabled').height();
lbw = jQuery('.lightbox-enabled').width();
jQuery(this).find("[width=218]").attr("width", 300); //some elements.
});
});
Related
Somebody can help me how to custom autocomplete for ace editor?
I need to display the emoji images such as below:
This editor is work well for me, but i need to insert the emoji images to the result of autocomplete.
var editor = ace.edit('editor');
editor.setTheme('ace/theme/github');
editor.getSession().setMode('ace/mode/markdown');
editor.$blockScrolling = Infinity; //prevents ace from logging annoying warnings
editor.getSession().on('change', function () {
draceditor.val(editor.getSession().getValue());
});
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
// Ace autocomplete
var emojiWordCompleter = {
getCompletions: function(editor, session, pos, prefix, callback) {
var wordList = emojis; // list emojis from `atwho/emojis.min.js`
var obj = editor.getSession().getTokenAt(pos.row, pos.column.count);
var curTokens = obj.value.split(/\s+/);
var lastToken = curTokens[curTokens.length-1];
if (lastToken[0] == ':') {
console.log(lastToken);
callback(null, wordList.map(function(word) {
return {
caption: word,
value: word.replace(':', '') + ' ',
meta: 'emoji' // this should return as text only.
};
}));
}
}
}
editor.completers = [emojiWordCompleter]
my bad idea, i try with this meta: '<img src="/path/to/emoji.png">', but of course it can't be work.
Any idea how to solve this? Thank so much before..
There is no built in way to do this.
You can create a custom renderer similar to https://github.com/c9/c9.ide.language.core/blob/bfb5dd2acc/completedp.js#L44, or modify https://github.com/ajaxorg/ace/blob/master/lib/ace/autocomplete/popup.js and create pull request to ace.
I few days ago I implement a routingControl = L.Routing.control({...}) which works perfect for my needs. However I need for one of my customer also the RouteBoxer which I was also able to implement it. Now following my code I wants to remove the boxes from my map in order to draw new ones. However after 2 days trying to find a solution I've given up.
wideroad is a param that comes from a dropdown list 10,20,30 km etc.
function routeBoxer(wideroad) {
this.route = [];
this.waypoints = []; //Array for drawBoxes
this.wideroad = parseInt(wideroad); //Distance in km
this.routeArray = routingControl.getWaypoints();
for (var i=0; i<routeArray.length; i++) {
waypoints.push(routeArray[i].latLng.lng + ',' + routeArray[i].latLng.lat);
}
this.route = loadRoute(waypoints, this.drawRoute);
}; //End routeBoxer()
drawroute = function (route) {
route = new L.Polyline(L.PolylineUtil.decode(route)); // OSRM polyline decoding
boxes = L.RouteBoxer.box(route, this.wideroad);
var bounds = new L.LatLngBounds([]);
for (var i = 0; i < boxes.length; i++) {
**L.rectangle(boxes[i], {color: "#ff7800", weight: 1}).addTo(this.map);**
bounds.extend(boxes[i]);
}
console.log('drawRoute:',boxes);
this.map.fitBounds(bounds);
return route;
}; //End drawRoute()
loadRoute = function (waypoints) {
var url = '//router.project-osrm.org/route/v1/driving/';
var _this = this;
url += waypoints.join(';');
var jqxhr = $.ajax({
url: url,
data: {
overview: 'full',
steps: false,
//compression: false,
alternatives: false
},
dataType: 'json'
})
.done(function(data) {
_this.drawRoute(data.routes[0].geometry);
//console.log("loadRoute.done:",data);
})
.fail(function(data) {
//console.log("loadRoute.fail:",data);
});
}; //End loadRoute()
Well, my problem is now how to remove previously drawn boxes in order to draw new ones because of changing the wideroad using a dropdown list. Most of this code I got from the leaflet-routeboxer application.
Thanks in advance for your help...
You have to keep a reference to the rectangles so you can manipulate them (remove them) later. Note that neither Leaflet nor Leaflet-routeboxer will do this for you.
e.g.:
if (this._currentlyDisplayedRectangles) {
for (var i = 0; i < this._currentlyDisplayedRectangles.length; i++) {
this._currentlyDisplayedRectangles[i].remove();
}
} else {
this._currentlyDisplayedRectangles = [];
}
for (var i = 0; i < boxes.length; i++) {
var displayedRectangle = L.rectangle(boxes[i], {color: "#ff7800", weight: 1}).addTo(this.map);
bounds.extend(boxes[i]);
this._currentlyDisplayedRectangles.push(displayedRectangle);
}
If you don't store a reference to the L.rectangle() instance, you obviously won't be able to manipulate it later. This applies to other Leaflet layers as well - not storing explicit references to Leaflet layers is a usual pattern in Leaflet examples.
I am using the following code to save the content of div (image and text) as an image using html2canvas.
$(function() {
$("#save").click(function() {
var flag = true;
var imgpath = document.getElementById('file').value;
if(imgpath.length == 0)
{
alert('Please select image file to upload.');
flag = false;
}
else
{
html2canvas($('.body740'), {
onrendered: function(canvas) {
theCanvas = canvas;
var url = canvas.toDataURL("image/png");
var br = document.createElement("br");
var center = document.createElement("center");
var newImg = document.createElement("img"); // create img tag
newImg.src = url;
$(".body740").hide();
$("#canvas").show(); //div where the final image is shown
document.getElementById("rsimg").src=url;
document.getElementById("rsa").href=url;
}
});
}
});
});
This is my link : http://www.aamras.com/greetings2/
But, when I click the save image button, it takes a lot of time to generate the image. Why is it taking so much time to load? What is the issue?
Solved : Change the version of html2cannvas. I was previously using html2canvas 0.5.0-alpha 2014 version
I Switched to html2canvas 0.5.0-alpha1. It generates the image properly and takes no time to do so. You can download the files from https://github.com/niklasvh/html2canvas/releases
I'm trying to make use of the file system API in a Chrome App. I've tried all the sample code I can find and can't get a simple text file to read. I'm logging almost every step, and what seems to happen (or not happen) is everything stops the first time I reference a file reader object. It creates just fine, because I can log the .readyState, but after that I can't seem to even set an onload()event or execute a .readAsText().
Here's what I'm calling from a button:
function clickButton(){
chrome.fileSystem.chooseEntry({type: 'openFile', acceptsMultiple: false}, function(FileEntry){
if(chrome.runtime.lastError) {console.warn("Warning: " + chrome.runtime.lastError.message);}
else{
console.log(FileEntry);
var thing = new FileReader();
console.log(thing.readyState);
thing.onloadstart(function(){
console.log("Started loading " & FileEntry);
});
console.log("added onloadstart");
console.log(thing.readyState);
console.log(thing);
thing.readAsText(FileEntry);
console.log(thing.readyState);
console.log(thing.result);
}
});
document.getElementById("status").innerHTML = "I did something";
}
I did read somewhere that Chrome doesn't allow access to local files, but the chrome apps seem to be different. At least, the documentation seems to suggest that.
The only thing I end up with in my console is the FileEntry object.
https://developer.chrome.com/apps/app_storage#filesystem
I've used the example code right from the above link and still can't get it right. Anyone else have this issue or know what I'm doing wrong?
There is a difference between a FileEntry and a File. You need to call FileEntry's .file() method. So, replace
thing.readAsText(FileEntry);
with
FileEntry.file(function(File) {
thing.readAsText(File)
})
https://developer.mozilla.org/en-US/docs/Web/API/FileEntry#File
Try this code...
<!doctype html>
<html>
<script>
function handle_files(files) {
for (i = 0; i < files.length; i++) {
file = files[i]
console.log(file)
var reader = new FileReader()
ret = []
reader.onload = function(e) {
console.log(e.target.result)
}
reader.onerror = function(stuff) {
console.log("error", stuff)
console.log (stuff.getMessage())
}
reader.readAsText(file) //readAsdataURL
}
}
</script>
<body>
FileReader that works!
<input type="file" multiple onchange="handle_files(this.files)">
</body>
</html>
I've written a function to extract text from a file.
function getFileEntryText(fileEntry) {
return new Promise(function (resolve, reject) {
fileEntry.file(function (file) {
var fileReader = new FileReader();
fileReader.onload = function (text) {
resolve(fileReader.result);
};
fileReader.onerror = function () {
reject(fileReader.error);
};
fileReader.readAsText(file);
});
});
}
You can invoke this method like so:
getFileEntryText(fileEntry).then(function(text) {
// Process the file text here
}, function(error) {
// Handle the file error here
});
One thing I'm grappling with when working with the FileSystem is that every call is asynchronous. Having multiple levels of nested callbacks can make for code that's hard to read. I'm currently working around this by converting everything I can to a Promise.
for anyone who is interested, here's my final (working) code, complete with all the console.log()'s I needed to follow all those callbacks.
var chosenEntry = null;
function clickButton(){
console.log("Button clicked");
var accepts = [{
mimeTypes: ['text/*'],
extensions: ['js', 'css', 'txt', 'html', 'xml', 'tsv', 'csv', 'rtf']
}];
chrome.fileSystem.chooseEntry({type: 'openFile', accepts: accepts}, function(theEntry) {
if (!theEntry) {
output.textContent = 'No file selected.';
return;
}
// use local storage to retain access to this file
chrome.storage.local.set({'chosenFile': chrome.fileSystem.retainEntry(theEntry)});
console.log("local data set. calling loadFileEntry");
loadFileEntry(theEntry);
console.log("loadFileEntry called, returned to clickButton()");
});
}
function loadFileEntry(_chosenEntry) {
console.log("entered loadFileEntry()");
chosenEntry = _chosenEntry;
chosenEntry.file(function(file) {
readAsText(chosenEntry, function(result) {
console.log("running callback in readAsText");
document.getElementById('text').innerHTML = result;
console.log("I just tried to update textarea.innerHTML");
});
});
console.log("added function to chosenEntry.file()");
}
function readAsText(fileEntry, callback) {
console.log("readAsText called");
fileEntry.file(function(file) {
var reader = new FileReader();
console.log("Created reader as FileReader");
reader.onload = function(e) {
console.log("called reader.onload function");
callback(e.target.result);
};
console.log("calling reader.readAsText");
reader.readAsText(file);
});
}
Currently trying to remove jScrollPane when the width is a certain size. It appears to be working, I can trigger alert with
if (Modernizr.mq("screen and (max-width:715px)")) {
alert('hello world');
}
And I can remove jScrollPane with click functionality
$('.st-accordion a').click(function() {
var element = $('.hs-content').jScrollPane({});
var api = element.data('jsp');
api.destroy();
});
But for whatever reason I can't trigger destroy(); with the modernizr conditional
if (Modernizr.mq("screen and (max-width:715px)")) {
var element = $('.hs-content').jScrollPane({});
var api = element.data('jsp');
api.destroy();
}
Any ideas?
Never mind, I got it by enclosing it all in the same function. A moment of clarity.
//Scrollpane
$(function()
{
$('.hs-content').jScrollPane({ autoReinitialise: true, hideFocus: true });
$('.hs-menu nav').jScrollPane({ autoReinitialise: true, hideFocus: true });
if (Modernizr.mq("screen and (max-width:715px)")) {
var element = $('.hs-content').jScrollPane({});
var api = element.data('jsp');
api.destroy();
}
});