This is driving me crazy but is there a way to read a local text file from my computer and have it display the text from the text file to the page.
I've tried:
<iframe src="test.txt" frameborder="0" style="color: white;"></iframe>
However, you can't change the text color and I assume you can't change the font-family. Is this any way possible?
EDIT: I'm trying to make an overlay on OBS where the HUD fades away and comes back, however, there are several texts located in text files that I need to use since they change, for example, last follower. The name of the follower gets added to the text file in which I was hoping I can display and modify the font color and family to fit the theme of the HUD. I only plan on using the html page locally through browser source.
Take a look at this Javascript plugin, it can help:
https://github.com/systemjs/plugin-text
this plugin gets the text and stores in a variable, so you can use this variable to replace some innerHTML of an element, like a >p<, >div<, etc...
Or, you can use the simplest way, jQuery .load() function:
http://api.jquery.com/load/
Related
I've created a text editor, using a contenteditable div. The user can copy and paste text from word to the website. Only the images aren't working, because the src points to a local path.
I think I should encode the image to base64, before it is displayed, but the problem is, that the images cant be displayed, because they are local files.
Try using some remote server to hold the photos so that they can be utilized. Try something like picpaste.com, however they only hold files temporarily I presume.
im trying to convert ckeditor into a simpler interface and am incorporating bb code into my side so thought i might as well remove the whole insert image interface.
Instead, i would like the insert image button to simple put '[img][/img]' into the ckeditor body.
If possible also get the cursor between the two, but thats another issue.
Any help?
im making a program that generates rgb, hsl, and hex# colors in 6 swatches, the other 5 swatches being complementary light and darker colors. I need to have a button that when pushed inserts another html file (something very basic that has some styling) and then another button that when pushed styles the example html file previously inserted with the colors the user inputed.
a simple way to put it is basically to show the user how the colors generated would look on an example website page. So on the new html file, the new colors generated would display for the user to see. Like the font color would change, toolbars, calendar, anything like that.
How would I go about doing this? my code generates the colors, and I inserted an so I can see my sample website, I just dont know how to style the css of the example html code. any suggestions would work perfect! I dont know how to attach files on this website but if you need me to email you all my code I can do that. just let me know thank you!
Like Derek said, iframes are used for inserting pages or parts of pages into other pages, but I'd say it'd make more sense for you to use a div rather than an entire new HTML page.
An inline frame is used to embed another document within the current
HTML document.
http://www.w3.org/community/webed/wiki/HTML/Elements/iframe
http://www.w3.org/TR/html4/present/frames.html#h-16.5
http://www.w3schools.com/tags/tag_iframe.asp
I have a site that contains some videos that made by graphic designer , he also edit them now and then and add videos. I want to add text to the video that after X seconds at the bottom of the video that will show some text. For example: "Hosted by XXX". I cannot ask this from the designer because the text changes once a month and he will charge me for that work every time.
This videos are in swf (flash) format. I need to do it online - while the page loaded or even asynchronously. My site it wrote in asp.net so this must be done(if it can) by asp.net or javascript.
I have zero knowledge in flash but I have now problem to learn if this thing possible..
Can you say if it is possible? And if so give the concept by it can be done.
You can use html and javascript (preferably using the JQuery and JQuery UI javascript libraries)
Write a javascript function to show and position your html element. You will need some way of determining the coordinates dynamically.
Have this function fire on the click of a video object e.g
onclick='myJavascriptFunction(videoID)'.
If you need to delay it you can do that in the javascript function.
Just do it in html (driven by asp if you will)?
Or am I missing something?
Or you could acces a webserver to load in text, or you could add it in the flashvars, or ...
First you need the source code for the file.
Just a SWF will not work and I will not promote de-compiling someone elses work.
Next in the HTML you set up flashvars to be passed to your flash app the flash var will contain your text for the label.
Finally You create a TextField in the flash app and assign it the flashvar
I'm writing a plugin for FCKeditor that's meant to insert placeholders for dynamic content into the HTML. The interface look like this:
Currently, the plugin inserts the following HTML:
<div title="Dynamic Element: E-Cards (sidebar)" class="dynamicelement ecards-sidebar"> </div>
The snippet of Javascript in my plugin that accomplishes the actual insertion of these placeholders is this:
function insertNewDiv() {
var divNode = oEditor.FCK.EditorDocument.createElement('div');
oEditor.FCK.InsertElement(divNode);
oEditor.FCK.Focus();
oEditor.FCK.Events.FireEvent('OnSelectionChange');
return divNode;
}
To make it look nice in the FCKeditor window, I'm applying some CSS to the FCKeditor window, including the following, that writes the title in there:
.dynamicelement:before {
content: attr(title);
}
Anyway, other than the styling, FCKeditor treats these div elements no differently than any other div element in its window. This is not good for me.
I need these placeholders to have the following traits:
Insertion of content into the placeholder is not allowed.
Clicking it should select it as a whole.
Tapping the delete key when it's selected should delete it.
The only way to edit it (apart from deleting it) is to select it, then click the toolbar button to open an edit dialog.
It should always be considered a block-level element
It doesn't matter if the HTML output uses a custom tag name or not (<dynamicelement> instead of <div class="dynamicelement">).
Does the FCKeditor API provide a way to give it command like, "Treat every element that matches the selector 'div.dynamicelement' the following way: ..." ?
Also, is there another FCKeditor plugin that does a similar thing that I can refer to that I might have overlooked in my research?
EDIT: By the way, I already know about CKeditor. I'm using FCKeditor for a couple of reasons: it's working for my CMS, the configuration options I'm using are perfect for my clients (except, obviously, for the placeholder thing), etc..
I solved this by duplicating the code that makes the "Page Break" button work.
While wading through the source code, I learned that FCKeditor has a native method for inserting placeholders.
Create a "fake image" and insert it into the editor DOM. You can style the image however you want.
Using Javascript, connect it to the div in question.
Hide the div (it still appears in the source and in your output though).
While in WYSIWYG mode, you're playing with this fake image, and the changes are being carried over to the div.
There a few bits and pieces that need to be in the plugin to make this work. If you grep for FCK__PageBreak, you will find them all in the source, ready to be copied into your plugin. FCK__PageBreak is the class name of the Page Break's fake image.
You might be able to use ProtectedSource to get what you want:
The editor offers a way to "protect" part of the source to remain untouched while editing or changing views. Just use the "FCKConfig.ProtectedSource.Add" function in the configuration file.
But:
Note that there currently isn't any way to "lock" displayed content in the editor. The content protected with ProtectedSource will actually be invisible during editing. It may be used instead, for example, to protect custom non standard tags or server side scripts. By default, FCKeditor uses it to protect <script> tags from activation during editing.
You might be able to use this together with a placeholder image:
Your plugin adds both the "real" protect tags and the placeholder.
The server strips out the placeholder and does things to the real tag; however, if the placeholder isn't there but the "real" stuff is then delete the "real" stuff.
When editing, the server inserts the placeholder image before sending things off to the browser.
All this seems a little convoluted so you might be better off with a simpler kludge:
Plugin just inserts a placeholder image with a specific class or a fake attribute of your choosing.
Tweak the image plugin to ignore your placeholder.
Replace the placeholder image with the real stuff on the server.
Replace the real stuff with a placeholder image when sending it back to the browser when they're editing the content.
Or, you could use your own custom tag (i.e. <dynamicelement>) and then use ProtectedTags:
In many situations, it is important to be able to switch to the source view in FCKeditor and add a few custom tags, needed for custom processing, or whatever. The problem is that browsers don't know how to handle non standard HTML tags, and usually break the DOM tree when finding them (specially IE).
That combined with some CSS to display <dynamicelement> nicely (say some dimensions and a background image) might do the trick without too much dirty kludging.