Loading content from textarea when in view - javascript

I'm building a blog-like portfolio. I want the content of the posts to be loaded only when they are viewed. To do that I tried to store the HTML code in a textarea in the meantime and place it in a div when the post is viewed. This works fine but for some reason the content is not recognized as HTML when placed in the div.
Can anyone tell me why?
You can find the testpage here: http://www.raapwerk.nl/login/portfolio
Thanks!

A textarea contains text, no HTML, so when you copy the contents it will be plain text you're copying. Is there any specific reason you use a textarea?
Otherwise you can just change it to a div and it will work, see this update to your fiddle
EDIT
Easier method, which doesn't load the content before it is displayed: just get the value of the textarea instead of the innerHtml, see this fiddle

Related

Wordpress HTML custom tag not working when I click "post"

I'm trying to add some custom html code to a Wordpress post in order to be able to add a small javascript "program" that let's you change a square's color depending on a value you enter.
The code is html with style and script tags. It works correctly when tested on my computer and when I click the "Preview" button on the HTML custom tag. However, once I post the post it breaks and shows the entire code as text. Is there a way I can make it work? I've been watching videos and reading about how to fix this, but I can't find a solution!
Thank you for your time!!

HTML/CSS local text file

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/

CKeditor doesn't work properly

I have a problem. I added CKeditor to my website.
Now i have a problem. If i add lines:
<script>
CKEDITOR.replace( 'tresc' );
</script>
In head section on my main page everything works, but if i go to contact or panel page unfortunetly editor doesn't work(name of the textarea is the same). If i add this lines at the end of body section in contant or panel works, but in the main page only one textarea working with editor, rest doesn't. Writing website on includes(my index is not changing and everything in content div is including from other files). Can some1 help me?
Please see: https://docs.ckeditor.com/#!/guide/dev_installation-section-adding-ckeditor-to-your-page
The replace method has to be used below textarea tag.
Your textarea tags need to have unique id and/or name attributes. So that each CKEditor instance knows to which textarea it is assigned. Unique element id's are also a requirement in HTML.
If your textarea tags can't have different names (they can't have same id's), please drop the names and assign fake class to each e.g. 'myeditor' and use replaceAll method: CKEDITOR.replaceAll('myeditor');.
I solve my problem.
I've added class and use another <script></script>. Now everything is working. Thanks j.swiderski for helping me. Best regards.

Disable javascript for some parth of my page

How can I disable javascript for some part of my page. For examle I have next structure
html
head
my js files
head
body
div
my components(they use javascript)
div
div
some untrusted content(may be some elements with javascript triggers 'on load' or smt. like that
div
body
html
I don`t want to process this content and only give it 'AS IS' but dont be vulnerable for XSS attack.
update
I want to build small service for posting text information from simple form and saving to the database. And I want to show it for user in preview mode on the html page(include two elements - header and body ).
Try replacing the <'s in your untrusted content with <'s:
var somewhatSanitizedContent = untrustedContent.replace("<", "<");
This should make all HTML tags appear as plain text, disabling <script> tags as well.
However, it may be a good idea to sanitize your input before storing it, instead of after.

Get the innerHTML of an iframe body which is displayed in browser

I have a variable
var s="<p>long content.....</p><p>long content....</p>"
I put this inside a iframe by
$('#iframeid').contents().find('html').html(s);
And I set the translateX of iframeid dynamically based on the browser size. So when the browser is big both the paragraph are shown. And when the browser is small first paragraph is displayed on the browser.
Now when the browser is small I use
document.getElementById('iframeid').contentWindow.document.body.innerText
And I get "long content....." and when I use
document.getElementById('iframeid').contentWindow.document.body.innerHTML
I am getting the variable s value completely. I want to get only the html content of the displayed position
Any help is appreciated. Thanks in advance.
I think that it isn't possible...
I can only suggest to you something that can give you something to getting started on it.
Jquery, on a big HTML with scroll, how to capture only the visible part of the HTML?
or you can use this plug-in:
jQuery.fracs, see the demo: demo
Probably if you want to show a portion of HTML and get only this visible part you must think up something and probably you can't use iFrame.

Categories