Is there a way to embed text on a limited page? - html

The web page I am putting together has a character limit of 10,000, which is definitely not enough for me.
The page I am editing on has it's tabs divided with div ID. On the different tabs, all of the writing I have done takes up 80% of my character limit and I want to know if there is a website (something like Pastebin) where I can type all of the information I need on my tabs and embed the text into the Div ID pages. This would save a TREMENDOUS amount of characters I can use to continue coding.
If I can do this with Pastebin, could someone tell me how? I cannot use the embed option on the Pastebin website since it doesn't appear to work.
<script src=""></script>
Script src also wouldn't work since I am not embedding any code from the Pastebin file, it's just text. It's very important that I get this done... I'm stumped...

Use jQuery to make an AJAX request to the file.txt, and the result text will be placed inside the selected element.
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<div id="content">
<p>Content loading...</p>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$.ajax({
context: this,
dataType : "text",
url : "file.txt",
success : function(results) {
$("#content").html(results);
}
});
});
</script>

Related

How to reuse text in an HTML page, where the text is defined on the same page (not a different file)?

In HTML, I want to define a block of text in the page, and then reuse the text multiple times on the same page. Can I do this using HTML only?
I specifically don't want the duplicated content to live in another file. I want it to be defined in the same page. Like declaring a constant at the top of a code file and reusing it throughout your code.
You can use JavaScript inside your HTML Document, so you don't need an extra page. Just define the variable inside a <script> tag (best way would be to do it in the header, but it also works in the body) and then access the value of the variable inside another <script> tag in the body like this:
<!DOCTYPE html>
<html>
<head>
<script>
var carName = "Volvo"; <!-- defining the variable -->
</script>
</head>
<body>
<p id="demo">Hi.</p>
<script>
document.getElementById("demo").innerHTML = carName; <!-- changing the Hi in the <p> tag to Volvo (value of the variable -->
</script>
</body>
</html>
Oh boy, that's the first question I was able to answer ^^
You just duplicate your text couple of times in your html code. You should usually use the p tag.

Iframe visible in page source

I have such code :
<iframe id="document_viewer" src="<TMPL_VAR docviewer_url>"></iframe>
The variable is PHP URL with pdf converted to text and embed in perl generated HTML using that iframe.
For SEO reasons i need to make it visible in page source , like it would regular text. Help will be truly appreciated.
something like this:
<script>
$('#buttonID').click(function(){
var value = $('#document_viewer').contents().find('body').html();
$("#divID").load(value);
});
</script>

Will script tags of different type be interpreted as JS?

This is more about security than programming, but I'll post it here anyways.
A markup parser renders a math block as:
<script type="math/tex">
% tex code here
</script>
A client side library (aka MathJax) then detects these <script> tags and turns them into math.
My question is: when sanitizing the HTML, is it okay to allow <script type="tex/math"> tags?
Is there a chance that browsers interpet such a tag as JavaScript (enabling an XSS)?
This should be safe. It depends on how you are allowing these tags through whilst HTML encoding everything else.
Also beware of any user controlled content within your script tags.
e.g. if a user could set % tex code here to something like
</script>
<script>
alert('xssed')
then the following would be rendered:
<script type="math/tex">
</script>
<script>
alert('xssed')
</script>
and then the JavaScript would be executed.

Can I plug text into HTML from elsewhere?

I'm new to web development and I'm working on my second website. I feel it should be a basic question and probably have already gotten addressed somewhere on Stack Overflow. However I can't find anything directly relevant, due to a lack of precise description. The problem is:
Because I'm doing copywriting along the way, frequently I find myself needing to update the copy inside the HTML code wrapped deep inside many div's. It's quite inconvenient; and because of texts, codes can sometimes get messy.
I wonder if there's a simple way to leave a "handle" in place of texts inside HTML code, "plugging in" text from elsewhere, like plugging in style from CSS? I suppose it should work in a concept similar to what a CMS have.
With jQuery, you can use .html to plug text and symbol to html page
<html>
<head>
<title>Your page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$("#statictext").html('<b>jQuery</b>');
$("#symbol").html('©');
});
</script>
</head>
<body>
<div id="statictext"></div>
<div id="symbol"></div>
</body>
I think what you're looking for is the id HTML attribute. You can use it like this from javascript (i'm using js since you don't specify a language):
var yourelement = document.getElementById('yourelementid');
yourelement.textContent = "Yer text";
with your html being:
<div id="yourelementid"></div>
with the element being a div or any other element that can have text content.
If you need to insert HTML, you can do it through .innerHTML or, preferrably, manipulate the DOM, by adding and removing elements. CSS also has an attr() property function, which allows you to set an arbitrary property on an HTML element (such as piece="textstuff", with the css being content: attr(piece)).
You can also construct elements and append them (again, if what you want is to insert HTML markup) by using .appendChild and .removeChild.

HTML multi-level templating (HTML and JS only)

Hi I wanna do something really simple: a multi-level template system using only HTML and JS.
I would have like to do that with HTML only, I tried with object and embed tags but I can't make it work properly (embed doesn't display and object generates a new HTML document with and , plus it's pretty ugly).
So, next I tried handlebars.js but I didn't manage to use it to put HTML from a file into another one.
I just want to separate the distinct components of my page into different HTML-like documents (but not full HTML-valid documents, just one with the header only, one with the navigation menu only, and so on). Then on "level 2" I would have a "structure" HTML-body document which would arrange the previous elements as I want (one structure could have a menu on the left, content on the right and a footer, another would have menu on top, full-size content and a header, etc. like the different themes of a CMS only much simpler). Then on "level 3" finally, my "real" pages would use a "structure" template and then I guess I should use something like handlebars to pass content, titles etc. to level 2 and again to level 1.
So, is there any easy way to do this? Without having to rewrite a whole JS library :P And if you think handlebars.js would suit my needs (but I really don't need dynamic parts, just a title and a content for each page, maybe something to handle the current position on the website to manage menus and breadcrumb), could you please tell me how to use it to include HTML from one file to another?
Thank you very much :)
EDIT
Well after a little bit of struggling, I dit it really easily with only jQuery. I'm really not familiar with javascript (but I'm still a little ashamed) here is the way to go :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("body").load("structure.html", function() {
$("nav").load("nav.html");
$("section").load("section.html", function() {
$("section hgroup h1")[0].innerHTML = document.title;
});
$("footer").load("footer.html");
});
});
</script>
</body>
</html>
with structure.html containing just empty tags in the order you want them like this:
and section, nav and footer.html contining what should be inside the respective tags.
Wouldn't it be easier to simply use a couple iframes? Something like:
<html>
<body>
<iframe src="nav.html"/>
<iframe src="content.html"/>
</body>
</html>
Or am I misunderstanding your question?