Inserting Text Into HTML - javascript

What I Want: Very simply I have a C program that generates a variable periodically, I want to be able to display this value on a website.
Restrictions: The webpage is HTML, php does not work, javascript does [I have tried a few javascript solutions but they have all been long, tedious and in the end ineffective] I want it to be able to format the text so that it matches the rest of the webpage. Above all I'd really like to find something simple that works.
Freedoms: I can output the variable from my C program to just about any file type and content that I want, the file is hosted so is available locally to the server or online for the client.
Preferred Solutions: I am currently playing around with the object and iframe tags native to html. They give a nice simple input:
<object height=20 width=75 type='text/plain' border=0 data="URL/filename.txt"></object>
inserts the contents of my file, but it can't be formatted so I am stuck with 12pt Courier font which is not acceptable. Using
<iframe seamless height=20 width=75 scrolling='no' src="URL/filename.htm"></iframe>
and adding my desired font/colour/size etc to the htm file gets me the right text style, but htm has a large amount of white padding around it which I can't seem to get rid of so I have to make my iframe quite large for the text to be displayed, but then it doesn't fit smoothly with other text.
So anyone that can answer one of four questions:
How to remove excess padding from htm
How to format the style of a html object
Is there anything in Java as simple as the php [so apparently it doesn't show php code even when you quote it as code. But basically using echo and get_file_contents to insert the contents of a txt file into a html page]
Propose an alternate solution

Padding and style can be handled by css.
By java I assume you mean javascript - google-ing will help you. Without details of what your server is running and what is dispatching your pages we can't give you an exact answer. You might want something with ajax to keep it updating in the background.
Try googling your question, you'd be surprised how often this helps.

I'm not sure what you're trying to do once you get the variable into your web page, but I think something like the following could be useful.
Create a hidden div on your page
Have your C application write the variable to some file
Use jquery to execute an ajax call to pull that value into the div ( or whatever other container you want to use
using some type of timer, execute the ajax call every X period of time, which will then get your up to date variable
on your main page, have another timer that will then come in to that container, grab your value and then you are free to do what you want with it.
This is all off the top of my head without knowing much about what you're trying to accomplish. If you provide some further details we may be able to help you a little more.

You need AJAX... that's just a fancy buzz-word. It means you can tell JavaScript can get a file from the server without reloading the page and you can insert data from that file into your HTML.
AJAX is made much simpler by using a JavaScript library like jQuery, but it can be done without jQuery. There's a pretty decent Getting Started tutorial at Mozilla Developer Network if you want to do it the hard way, but I really recommend jQuery.
As far as formatting... any formatting... you need to use CSS. Just about everything about the appearance of anything on a web page is controlled by CSS. MDN has a Learn CSS section, too.

load jquery on you main html file
put a div with some id (example id="newvalue")
make you c program to write the output in a file (for example value.html)
on main html page header, after jquery include code add some javascript like
$( document ).ready(function() {
$("#newvalue").load('yoursiteurl/value.html');
});

Related

Convert HTML entities inside <code> tag to display on web site?

Good day,
I'm writing some HTML/CSS code examples on a web site. I'm using the <code> element to mark out my examples.
I'm trying to:
Convert all HTML-tags inside my <code> blocks to be displayed on my web site
Make my examples beautiful with syntax highlighting and maybe even auto indent
I have tried PrismJS and Highlighter.JS but I cannot get any of them to convert the HTML tags. Are you forced to make it server side? And if so are there any PHP-examples or tools for this that works fine with any of the JS-libraries?
Thanks in advance
Well you might do a simple trick to display html and css codes without and tag
You might simply but the text inside a input within the code
Then you might simply style it and give it custom background and everything also it will be easy for the user to copy it but make sure to right the code you want to display inside the html code not on the rendered page or it will not be displayed to the users like this
<input type="text" name="html_test_code">whatever code here</input>
And then the styling of sytax might be done using js easily

Adding hyperlinks into xml file

I purchased a script online that's no longer supported and I just need one last functionality to finish off my project. One detail the client needs is to have a line of text link to another page in the site.
I do not know a whole lot about xml, but I understand it doesn't support html to include hyperlinks.
This is a quiz where users must answer specific questions in order to move on to the next step. It's fed into a div by a js file, I think, but I don't understand how it works. I'm not going to post any code just yet as I'm just reaching out for some advice right now and if what I want to do is even possible.
Is there some kind of a workaround? I've Googled plenty of sites with code chunks and have done a lot of experimenting, but I mostly just break the page the xml displays on.
Thanks.
Dont use the actual xml syntax of tags like <a></a>. Better replace these with other symbols like [a][/a]. When you output the code, simply replace [ and ] with < and >
You replace code before you put it into a div could look like this:
xmlAsString.replace(/\[/g,"<").replace(/\]/g,">");
edit:
I totally forgot about CDATA.
Forget my previous answer. Just add the <![CDATA[...]]> Tag around the anchor in your XML:
<![CDATA[link]]>

manipulating tinymce in Wordpress

I need to be able to extract, manipulate and update the text in wordpress's tinymce #content textbox.The code is coded in a wordpress plugin.
The below post helps but i am unable to comment or contact the original creator to ask him further questions. Having 1 points I cant practically do anything except ask questions. Let me know if i am doing this wrong.
Basically the code from this link is what i need to manipulate or edit the content in wordpress tinymce editor.
Manipulating TinyMCE content with jQuery
But the code seems to be overly simplified.
so my question is:
Do i need to include jquery
Do i need to include the tinymce js or class? is it in wordpress itself?
The code seems to be half javascript half php? Is the code suppose to be coded in a .js file?
do i need to put php tags here?
// make it into a jQuery object
var $content = $(content);
// manipulate the jquery object using jquery
$content = $content.remove('a');
Thanks.
hi I have figured it out after a bit more researching.
At first I was working with php to manipulate data after it is saved. But then i went on to wanting to manipulate the text before it was saved like underlining certain text based on a list in the database. So I needed to move on to javascript because i was editing the text before it was submitted or a page reload which i didn't wrap my head around yet.
So next i just coded the changes into javascript and built a button to call the process.
and seems i didn't need to include the tinymce class because probably the header of the editor page has already included it.

How to view all html content using Javascript?

I am trying to find a way to save all html content from a webpage to a variable. This should work even if the webpage has frames in it. By current best solution is:
javascript: alert(document.body.outerHTML);
Just paste the code into the control in your browser where the url is placed and push enter to see the result. Any idea how to do this?
You should cycle over all the frames and ajax-load the content.
Somethings like
document.getElementsByTagName('frame')[0].src
to get the source. But I strongly suggest you to use library to help you out. In jquery can be quite simple task. Cycle over all frames, than $.ajax request all the externals source and build it (replacing the relative section)
But, as pointed by smeg4brains, innerHTML can be your way.
Here is the direct answer to "how to do this":
Having this in the address bar just press Enter and you'll see the contents in alert dialog.
To see contents of frames you'll have to iterate them separately it won't be part of the HTML.
Does this work?
var copyOfHtml = document.documentElement.outerHTML
alert(copyOfHtml)

Decoupling HTML from JavaScript in bookmarklet

(Can't think of a good title :(( )
Hey all,
I'm developing a bookmarklet. When clicked on it creates a toolbar on the page the user is looking at. The above involves pulling various javascript and css files from my server and injecting them into the pages DOM.
I don't want to encode toolbar's HTML as a string inside one of my javascripts. So I've tried using hidden iframes to load my toolbar and then grabbing a fragment of html to insert, but immediately ran into cross-domain issues.
One solution spring to mind is sending my toolbar's html in JSON, but that seems a bit "hacky"?
What would be a good solution to the problem avoiding difficult-to-maintain html strings in javascript?
Thanks.
Don't know if it will help, here are 2 examples of toolbar bookmarklets:
diigolet : www.diigo.com/tools/diigolet
fytch it : fytch.com/about/get-started

Categories

Resources