Essentially I'm trying to create a mini-clone of JSFiddle.
That is, I want to allow my users to type some HTML and CSS and see the rendered result in another area of the screen. I'm also looking to use AngularJS.
Does anyone have any advice or experience on how to go about this?
I'm not sure how much Javascript you know/want to use, but you could create 3 frames, for the HTML, CSS and output. In the HTML and CSS frames, put an input text area. Then on the "run" button click, change the inner HTML of the output to the content of the html (within HTML tags) and the css (within Style tags).
(I drafted this before you made the Angular edit, but you can use jQuery with Angular.)
You can do this within a single page, if you're somewhat careful:
You can have only one body tag on a page. So any body styles should apply to the container only, not to the document body. The code below handles this by changing a body tag style to a .body class style, which applies to a div within the container with class body.
Any other styles should also apply to the container's children only. The code below handles this by first appending the "style sheet" textarea to the container, then iterating through the style rules and prepending the container's ID to each selector. (The original rules are deleted and the new rules are inserted.)
The code below works in IE9+ and modern browsers. Working Fiddle.
<div>
<textarea placeholder="Enter HTML here"></textarea>
<textarea placeholder="Enter CSS here"> </textarea>
</div>
<div id="Render"></div>
$('div').first()
.keyup(function() {
$('#Render').html(
'<style>'+$('div:first textarea:not(:first)').val()+'</style>'+
'<div class="body">'+$('div:first textarea:first').val()+'</div>'
);
var ss= document.styleSheets[document.styleSheets.length-1],
rules= ss.cssRules;
for(var i = 0 ; i < rules.length ; i++) {
var rule= '#Render '+rules[i].selectorText
.replace('body','.body')
.split(',').join(', #Render')+
'{'+rules[i].cssText.split('{')[1];
ss.deleteRule(i);
ss.insertRule(rule, i);
}
})
.keyup();
You could create a temporary file with the CSS and HTML provided and then use a Frame to view that file in another section of the page
Related
I am creating a templates application where users can write any HTML/CSS code inside a textarea (E.G. a full html page pasted on a textarea). These users are mostly familiar with html and css so we have not yet implemented markdown. One important feature that we would like to add is the ability to preview the html in the textarea before submition. I have thought of ways that these can be done, but I am not sure which would be correct and most maintainable.
Preview the html inside a div in the same page - the problem I can see here is the existing CSS style might interfere with the CSS styles the user typed in the textarea. Furthermore, if the user writes body tag in the textarea, there will be another body tag inside the existing body tag of the actual page, so the html might become malformed.
Preview the html on a separate window - the problem is I do not have much control on this (if the user uses a poppup blocker, for example)
Preview the html on a separate tab - the problem is the user might be confused (E.G. closes the whole browser, thinking that it opens in a new window)
Preview the html on an iframe - this is doable, but will require me to create an additional .html file just for previewing
Preview the html on a modal - this is doable, but I am not sure if modal bodies will accept toplevel tags like title or body
Can anyone help me? Which of these potential solutions are best? Or is there a better solution?
I would use an iframe. It can run a new body and html inside of it. So if someone for example styled the body in it, it wouldn't effect the page its on. Here I wrote the code for you. Give it a shot, do some html coding in the text area and click "run"
<p>type some HTML/CSS code in here:</p>
<textarea type="text" rows="15" cols="40"id="myText"></textarea>
<p>Your HTML output</p>
<iframe id="output" srcdoc="">
</iframe>
<p>Click the button to preview your code</p>
<button onclick="myFunction()">run</button>
<script>
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("output").srcdoc = "<!doctype html> <html>" + x + "</html>";
}
</script>
Have you investigated iframe's srcdoc attribute? It allows you to have a string which is a complete document without needing to create a separate file. Of course you'd have to do some escaping or something to deal with the quotes.
Here's a trivial example:
<iframe srcdoc="
<!doctype html>
<html>
<head>
</head>
<body>
hello
</body>
</html>">
</iframe>
Have a look at https://codemirror.net/
It is opensource and will give you a complete CodeEditor out of thej box.
If not:
If you want to show HTML markup in a textarea, you should escape all
‘<’ characters with <. For consistency’s sake, you may also
escape ‘>’ characters with >.
How to assign values or string to p tag through CSS?
I am trying like this, why I am doing like this because I come from Android programming.
HTML file:
<p> </p>
CSS file:
p{
text:"today"
}
result should= "today" in browser
So please help me.
Although I can't see a reason why you can't just add the text to the HTML file, I will still answer your question.
There is no way to add text inside of the HTML tag. The only way that you can add text around HTML is through pseudo elements like the following:
p:before{
content: "today";
color: black;
}
This is not recommended however, due to the fact that the text won't actually exist in the html and will need to be styled to display properly.
A much better solution would be to use javascript
<script>
document.getElementById('todayTag').innerHTML = "today";
</script>
The 'todayTag' refers to an ID that will be placed on the p tag.
1)It is not possible in css,
2)Use jQuery or
$("p").html("today");
3)Use JavaScript
document.getElementsByTagName("P")[0].innerHTML = "Today";
note [0] is the index
You cannot do that via css alone, use javascript for that instead.
document.getElementById("demo").innerHTML = "text";
<p id="demo">
</p>
.complete {
content: 'complete'
}
<input type="button" value="Complete Purchase" id="btn_complete" class="complete">
screen shot
Here the button text is "Complete Purchase". i want to remove "Purchase". i need only Complete. by using css only. i have tired using css. Please see the above snippet
I didn't see anywhere that you can replace a part of something with css, But with this you can change all your text in an element:
.yourElement {content: 'complete'}
But It can completely be done using JQuery.
It is not either the matter of css or js or anything......The problem is, what do you want to change?.... if you want to change the text of a button, just go to your html file and edit the text. Or If the html file is isolated from you, and you have just the access of js directories or css directories, then use style content:'complete' or use js.
I am creating a wordpress theme, and inside the admin panel I am creating a live preview of a search box. The user can style the search box directly from the admin panel. It's a very basic html code:
<li class="epurus_nav_search">
<form class="search_form">
<input class=nav_search_input" type="search" name="s" placeholder="Search..."/>
<input type="button" class="nav_search_submit" value="Go"/>
</form>
</li>
Now I noticed, that the entire admin live demo itself, is already an entire form field, so I can't use the above <form> (it breaks the websites when a form is inside a form). I have replaced the form tag with <span> however it often gives different css results than the form tag.
I am seeing all kind of different behaviours between the demo and the front end of the website. Paddings, margin and line-heights are all totally off, even though I have set them all to 0 or some other value.
Is there anyway I can use a form within a form, or is there another tag that comes close to <form>?
I am open to any tag such as span, div or even javascript solutions. The one thing I can't do, is move the HTML chunk outside of the admin form.
You can't insert a form element inside anothe one, as it will submit the parent and not the child. Also it may have fields in conflict.
A form is a block element, so it's more similar to a div than a span. I'd use that to start with. Starting from this point, I'd use a class like <div class="form"> and start styling it to fake the same form behavior. Simpliest way is to first analyse the processed form CSS (via developer tools) and then copy/paste the ones that affect forms only (i.e. not body inheritances etc).
Eventually you'd block the default submit button's event and submit the form in another way (ajax maybe?).
Try using <span> with display: block;
This should work.
EDIT:
I have had a brainwave. Put the div into the form and set all the styles to inherit
I have 4 elements "Block" "button1" "button2" and "label".
I want the block to have the buttons inside it by CSS. this can be done by HTML like this :
<b class = "block">
<g class="Label"> </g>
<a class="button1"> </a>
<a class="button2"> </a>
</b>
but it'll take so much space if done 50 times in one page.
and I want a way to change button1,2 'href' with as less a possible lines of code.
CSS is meant to modify the appearance of a page, and not to be used for adding content - although pseudo-elements like :before and :after are commonly used for decorative purposes (e.g. adding arrows, or for layout hacks)
Have you considered using a JS-based method? You can loop through all the .block elements and then insert the label and buttons in each of them.
An example of a JS-based method would be: (assuming that you're using jQuery)
$(document).ready(function() {
$(".block").each(function() {
// Create elements to append
var apnd = '<element></element>';
// Append the created elements
$(apnd).appendTo($(this));
});
});
The only way I can think to achieve this would be use a parameterised jQuery function that adds or modifies the "href" value of each button of a given CSS class (with minor variations of the assigned href based on a given parameter - if that suits).
Sorry, to directly address the question, I agree with the other posters in that this can't be achieved using CSS alone.