I have a textfile, that is loaded into a swf through a flashvars:
The data is stored in Mysql,
The data is stored using coldfusion and cfquery
the data is read out into a textfile by coldfusion
the data is loaded into the swf by passing the filename to flashvars, then being read into the actionscript.
the problem is, all the text is initialized until the first
"e;
and I'm not sure how to escape this, and at what point I should.
I am storing the original text using coldfusion, and have it set the data to html edit format
#HTMLEditFormat(form.content)# />
The boy grinned as he led back to the trail.
"A big un, Granser," he chuckled
Below is the full actionscript
// This will be the starting position of the textbox
var starting_ypos:Number;
// Load the Flashvars into the script
text1.text = myVariable;
text2.int = mySecondVariable;
// Make a load vars object
my_data = new LoadVars();
// This will be how fast the text box will scroll
var scroll_speed:Number = text2.int;
// Make my on load function
my_data.onLoad = function() {
// Fix the double space issue
var my_text = unescape(this.content).split("\r\n");
my_text = my_text.join("\n");
my_text = my_text.split("\r");
my_text = my_text.join("\n");
// Set the text in the text box
scroll_text.Text = my_text;
// Set the autosize
scroll_text.autoSize = true;
// Set the starting_ypos
starting_ypos = scroll_text._y;
};
// Load the external text file
my_data.load(text1.text);
// Start the scrolling
this.onEnterFrame = function() {
// Check for hit test with the mask and the mouse
if(!mask_mc.hitTest(_root._xmouse, _root._ymouse)) {
// Check to see if we are in the mask
if(mask_mc.hitTest(scroll_text)) {
// Move the textbox
scroll_text._y -= scroll_speed;
} else {
// Reset the text box
stop();
}
}
}
// Simple stop command
stop();
When entering variables into a flash file the ampersand is used to delimit the variables, much like URL parameters.
so flash reads this:
The boy grinned as he led back to the trail. "A big un,
Granser," he chuckled
as this:
var1 = The boy grinned as he led back to the trail.
var2 = quot;A big un, Granser,
var3 = quot; he chuckled
try using URLEncodedFormat(FORM.content) so encode the vars for flash.
Related
I am using Ace Editor in my web app. Wonder if it's possible to copy the text inside Ace Editor to clipboard with highlight. With default configurations, if I copy the selected text in Ace Editor to clipboard, it seems that only text content is copied with no html styles.
Thanks a lot for your help!
Unfortunately there is no api for this. you'll need to modify https://github.com/ajaxorg/ace/blob/v1.2.5/lib/ace/keyboard/textinput.js#L290 to also set text/html mime type to some html, rendered similar to https://github.com/ajaxorg/ace/blob/v1.2.5/lib/ace/layer/text.js#L442.
Also you'll need to include the css for the theme in the copied html
I know this is late, but this might be helpful for someone like me who stumbled upon this problem this late.
The basic idea is to get the text that is being copied and use Ace's tokenizer to generate HTML from it:
Add an event listener on the copy/cut event on the editor's container.
You can use clipboard object in event to get the data currently being copied: event.clipboardData?.getData('text/plain')
Rest steps are in code below
// get current tokenizer
const tokenizer = aceSession.getMode().getTokenizer();
// get `Text` object from ace , this will help in generating HTML
const Text = ace.require('ace/layer/text').Text;
// create a wrapper div, all your resultant HTML will come inside this
// also this will contain the basic HTML required to initialize the editor
const root = document.createElement('div');
// this is the main magic object
const rootText = new Text(root);
lines.forEach(line => {
// this converts your text to tokens
const tokens = tokenizer.getLineTokens(line, 'start') as any;
const leadingSpacesCount = (line.match(/^\s*/) || [])[0].length;
const lineGroupEl = document.createElement('div');
lineGroupEl.className = 'ace_line_group';
const lineEl = document.createElement('div');
lineEl.className = 'ace_line';
const spaceSpan = document.createElement('span');
if (tokens && tokens.tokens.length) {
//////////////////////////////////////////////////////
// Magic Happens here, this line is responsible for converting our tokens to HTML elements
rootText.$renderSimpleLine(lineEl, tokens.tokens);
//////////////////////////////////////////////////////
// Leading spaces do not get translated to HTML, add them separately
spaceSpan.innerHTML = ' '.repeat(leadingSpacesCount);
lineEl.insertBefore(spaceSpan, lineEl.children[0]);
} else {
spaceSpan.innerHTML = ' ';
lineEl.appendChild(spaceSpan);
}
lineGroupEl.appendChild(lineEl);
// `root` has a wrapper div, inside which our main div (with class "ace_layer ace_text-layer") lies
root.children[0].appendChild(lineGroupEl);
});
return root.innerHTML;
Now finally, in your eventlistener you can wrap this with any div to give your own custom color to it, and put it to clipboardData with text\html mime type:
event.clipboardData?.setData('text/html', htmlContent);
I am creating a simple flash animation that displays text in a textField(textBox?).
var fl_TextLoader:URLLoader = new URLLoader();
var fl_TextURLRequest:URLRequest = new URLRequest("./liveStatus.txt");
fl_TextLoader.addEventListener(Event.COMPLETE, fl_CompleteHandler);
function fl_CompleteHandler(event:Event):void
{
var textData:String = new String(fl_TextLoader.data);
trace(textData);
text_feed_1.text_feed_1_text.text = textData;
}
However, when the text file has multiple lines, the text that gets displayed only contains the first line of that file, while the "trace" method displays everything in the console output. So I wonder how to display the additional lines from that text file in the textField.
Also, it would be great if these lines can be parsed into a string array. That would be even better because I can then manipulate the lines of that file.
Thank you very much!
Try to set the "multiline" (and maybe "wordWrap") value from your Textfield to true.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextField.html
An to parse your string in a array you could use the split method from String like so:
var linesArray:Array = fl_TextLoader.data.split("\n");
\n = new line char. ("\r" or "\r\n" might alos do the trick depending on the encoding of your text file)
I have a page that displays a picture in high quality. The pictures typically take a while to load. I have a jQuery function that runs on load of the picture #image I want this function to pre-load other images 1 at a time in the order they will appear.
So: on if I am on the 1st picture, it should load picture 1 and display it, then pre-load/cache the second picture when pic1 is done. The pictures being loaded all have a caching header attached already. When pic2 is done loading, pic3 should begin loading. In case you are wondering, I have a cgi backend that is able to print things in loops and such.
So far I have the following working:
$('#image').load(function() {
preLoad2 = new Image()
preLoad2.src = "pic2"
})
I can then continue this with another function with the same $('#image').load(function() { } line, but how do I make it so the next picture doesn't begin loading until this one is completely loaded. I would prefer not to use a timed delay as that is not very accurate.
Here is what I have currently. I am using a bash cgi script in this example.
#set a loop counter
# variables will be refered to as $[var-name]
count=1
first=true
#loop through all images that need pre-loading
for file in *
do
#check if the picture matches the search criteria
if [[ "$file" = *$lowerSearch* ]]
then
#create a js script
echo "<script language=\"javascript\" type=\"text/javascript\">"
echo "function load$count() {"
echo " preLoad$count = new Image()"
echo " preLoad$count.src = \"?loadFile=$file\""
echo "}"
#the first one of these functions should be bound to the main image load event
if [ "$first" = 'true' ]
then
echo "document.getElementById('image').onload = load$count()"
#the 2nd and on should be bound to the pre-load of the previous picture
else
echo " preLoad$last.onload = load$count()"
#end if
fi
echo "</script>"
#store the current count so that the next time through it can be used to call the last loaded picture
last=$count
first=false
#add 1 to count
count=$((count+1))
#end if
fi
#end loop
done
How this works: Loops through pictures. If the picture matches the search criteria then run the main code...otherwise skip loop. In the search criteria, it creates a js script that includes a function. the function loads the picture that the loop is currently referring to. It then creates an onLoad function that refers to the last picture pre-loaded and sets an onLoad event to it that runs the function just created.
I believe this question's answer is somewhat related to this question
First create JSON record of images like this
var imageRecord = ['image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg'];
then create function to load image one after another
function loadAllImages(index){
if( index >= imageRecord.length ){
return;
}
//create image object
var image = new Image();
//add image path
image.src = imageRecord[index];
//bind load event
image.onload = function(){
//now load next image
loadAllImages(index + 1);
}
}
hope this small snippet will help you.
to understand whole concept of preload images using javascript, please visit http://zainultutorials.blogspot.in/2013/11/preload-images-using-javascript.html
In the past I've used something similar to this image preloader:
http://www.webreference.com/programming/javascript/gr/column3/index.html
The formatting on the code is weird but the code itself is good. After setting up that ImagePreloader "class" I used a method like this:
function preloadImages(imageSRCs){
var loadingMessage = $('<div/>').addClass('loading').html('<h1>LOADING</h1>');
// stay classy: tell the user you're loading images
$('#content').append(loadingMessage);
// this imgPreloader takes care of loading the images
imgPreloader = new ImagePreloader(imageSRCs, function(imgArr, numLoaded){
if(this.nImages == numLoaded){
loadingMessage.remove();
//do whatever you want with the images here
for(var i = 0; i < imgArr.length; i++){
var pathIdPattern = new RegExp("[^/]+\\.");
var imgName = pathIdPattern.exec(imgArr[i].src)[0];
var imgId = imgName.substring(0, imgName.length-1);
$('div#images').append($(imgArr[i]).hide().attr("id", imgId));
}
}else{
loadingMessage.text('Sorry, there was a problem loading the site : / ');
console.error("Only " + numLoaded + " of " + this.nImages + " images loaded successfully.");
}
});}
Where the imageSRCs parameter was just a string array of the image paths. Maybe it's a more involved solution to what you're looking for but I hope it helps!
if you have the images an array of urls you can do something like this: demo
<div id="cont"></div>
<script type="text/javascript">
function loadImagesInSequence(images) {
if (!images.length) {
return;
}
var img = new Image();
//Remove if from the array list and return it to the variable
var url = images.shift();
img.onload = function(){ loadImagesInSequence(images) };
img.src = url;
$("#cont").append(img);
}
loadImagesInSequence(['http://www.nasa.gov/centers/goddard/images/content/433226main_Misti_ComaCluster.jpg',
'http://www.hdwallpapers.in/walls/cold_universe-wide.jpg', 'http://scienceblogs.com/startswithabang/files/2013/05/chemical_composition_universe.jpeg']);
</script>
or if you have the image tags in your page you can go with something like this: demo
<img id="img1" src="http://miniontours.yzi.me/loading.gif" data-image="http://www.nasa.gov/centers/goddard/images/content/433226main_Misti_ComaCluster.jpg" />
<img id="img2" src="http://miniontours.yzi.me/loading.gif" data-image="http://www.hdwallpapers.in/walls/cold_universe-wide.jpg" />
<img id="img3" src="http://miniontours.yzi.me/loading.gif" data-image="http://scienceblogs.com/startswithabang/files/2013/05/chemical_composition_universe.jpeg" />
<script type="text/javascript">
var imgs = [];
$("img").each(function(){
imgs.push({
"ID": this.id,
"src" : $(this).data("image")
});
});
loadImagesInSequence(imgs);
function loadImagesInSequence(images) {
if (!images.length) {
return;
}
var img = images.shift();
var url = img.src;
img = $("#"+img.ID);
img.load(function(){ loadImagesInSequence(images); });
img.attr("src",url);
}
</script>
I have a SFW embedded in a PHP page. There is also a div on the page with id="target".
I want to access the content of that div (ie: the characters inside it) and hold them as a String variable in AS3. How can I do this?
My attempt so far
import flash.external.ExternalInterface;
var myDivContent = ExternalInterface.call("function(){ return document.GetElementById('target');}");
var myDivContent2:String = myDivContent.toString();
test_vars.text = myDivContent2; //Dynamic text output
I don't think you can define a function in the ExternalInterface.call() method. You have to call a function by name which already exists in the JavaScript.
So I'd create some JavaScript code like this:
function getTargetContent()
{
return document.getElementById('target').innerHTML;
}
And then in your Flash,
var myDivContent = ExternalInterface.call("getTargetContent");
Note that document.getElementById('target') only returns the reference to that div, not the contents within. So if you don't return .innerHTML then the Flash will get an object which may not be usable (although I haven't actually tried doing this).
The easiest way to do this is as Allan describes, write a Javascript function to sit on the page and return the required value to you.
Of course, if you can't edit the page content, only the flash, then you do need to pass the function itself, which will actually have to be forced into the page though JavaScript injection. An example for your case, which I have not tested:
//prepare the JavaSctipt as an XML object for Dom insertion
var injectCode:XML =
<script>
<![CDATA[
function() {
getElementContent = function(elementID) {
return document.getElementById(elementID).innerHTML;
}
}
]]>
</script>;
//inject code
ExternalInterface.call(injectCode);
//get contents of 'divA'
var divAContent:String = ExternalInterface.call('getElementContent','divA') as String;
//get contents of 'spanB'
var spanBContent:String = ExternalInterface.call('getElementContent','spanB') as String;
You're almost there :
var res : String = ExternalInterface.call("function(){return document.getElementById('target').outerHTML}");
If you only want the content of your target, use innerHTML instead of outerHTML.
im a little stuck using the canvas element in html5, have scoured the net looking for a workable solution but to no avail!
the main issue is that I want to click a button and send just the canvas element on the page to the printer.
i have tried using toDataUrl() - but this just seems to be resulting in a blank white image which has none of the canvas content!
the other issue i am experiencing is that attempting to initiate any javascript functions using "onClick" attached to a form button seems to be being tempermental at best!
here is my current attempt - this works in the sense that it does open a new window and attempt to send it to printer and it does create a base64 string (tested this using the "dataUrl" output on the second lowest document.write line) but as previously mentioned the image appears to be completely blank! (the canvas itself is definitely filled, both with an imported image and some text)
function printCanv()
{
var dataUrl = document.getElementById('copy').toDataURL(); //attempt to save base64 string to server using this var
document.getElementById('testBox').value = dataUrl; //load data into textarea
//attempt open window and add canvas etc
win = window.open();
self.focus();
win.document.open();
win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
((image code is here but site will not let me post it for some reason?))
win.document.write(dataUrl);
win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
win.document.close();
win.print();
win.close();
}
note: the code from "win = window.open()" onwards is currently taken from a tutorial and not my own work!
it is currently being called using <body onload="printCanv";"> - for some reason I could not get this to work at all using a button (little chunk of code below is my attempt which seemed to fail)
<input type="button" id="test" value="click me" onClick="printCanv();"> </input>
apologies is this help request is all over the place! i haven't posted to a site like this before and it didn't like me posting some html/script!
thanks in advance for any help you may be able to offer :)
Edit: draw function:
function copydraw() { //function called "copydraw" (could be anything)
var testimage3 = document.getElementById('copy').getContext('2d'); //declare variable for canvas overall (inc paths)
var img3 = new Image(); //declare image variable called "img3"
var testVar = document.getElementById('userIn').value; //take value from userin box. only updating on browser refresh?
img3.onload = function(){ //when image has loaded (img.onload) run this function
testimage3.drawImage(img3,0,0); //draw "img" to testimage
testimage3.font = "30pt 'Arial'"; //font method varies font attrib (weight, size, face)
testimage3.fillStyle = "#000000"; //sets fill color
testimage3.fillText(testVar, 310, 360); //filltext method draws text (xup ydown)
}
img3.src = 'images/liecakeA4.jpg'; //source of image
}
This function works perfectly, it draws the object and adds text from the variable, but for some reason it seems to be preventing me from outputting it as an image. I'm really confused!
I'm not sure exactly what's wrong with your code, I suspect in your current version calling printCanv in the body load event will mean you're trying to print the canvas before it's drawn. Running it off the button should work better, I'm not sure why that wasn't working for you as there's no reason in principle why it shouldn't work.
To arrive at a working version I've modified your code slightly:
function printCanvas(el) {
var dataUrl = document.getElementById(el).toDataURL(); //attempt to save base64 string to server using this var
var windowContent = '<!DOCTYPE html>';
windowContent += '<html>'
windowContent += '<head><title>Print canvas</title></head>';
windowContent += '<body>'
windowContent += '<img src="' + dataUrl + '">';
windowContent += '</body>';
windowContent += '</html>';
var printWin = window.open('','','width=340,height=260');
printWin.document.open();
printWin.document.write(windowContent);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
This works for me in the Firefox 4.0 nightly.
One addition to the accepted-best-answer: It doesnt work here with Chrome 17.0.942.0 winvista, because the print-preview-dlg is shown within the website itself and printWin.close() will close the dlg too.
So printWin.close() must be delayed or initiated by the user, but those are no good solutions.
It would be best, if chrome printdlg could have a callback, sth. one knows, printing is done, and can close the window. If this is possible is another question.