I need to include a HTML which adds a preview pane inside a JavaScript function, something like this :
<html>
<body>
<div style="height: 70%; border: 1px solid #000; overflow: auto;">
<div style="background: #ddd; height: 1000px;">master</div>
</div>
<div style="height: 30%; border: 1px solid; #000; overflow: auto;">
<div style="background: #ddd; height: 1000px;">detail</div>
</div>
</body>
</html>
just use quotes around html like
var a = 'some string';
just you will have to have all hmtl in 1 line or add line by line to var.
Or use ES5 and just make like this:
let a = `any
string
with new lines`;
Or
Use jsx with ReactJs for html inside js! It's awesome :-) Last time i wrote html outside js was like 2 years ago..
https://facebook.github.io/react/
great place to start learning:
https://www.youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr
I'm not exactly sure if this is what you are asking...
Do you want to add HTML dynamically via JavaScript?
This is a way to do it with jQuery:
var html = '<div id="whatever"></div>';
$("body").prepend(html);
If you want to write html markup in javascript you can move towards React JS this is very power full engine for writing html markup in javascript it provides lot of others things.
You can:
use some template engine like:
mustaches https://github.com/janl/mustache.js/
angular https://angularjs.org/
write the code as text inside a var and then append it to them dom. (see document.write())
Related
I would like to understand if I can wrap text in a content editable div.
For example, if a user uses markup to type
### MY TITLE
can I somehow parse that line and create another div that outputs
<b>MY TITLE<b>
I've created a jsfiddle to observe the output, but I don't see much that tells me where a line ENDS to put the closing tag. In addition, the output looks pretty weird after hitting the return key a couple times. It seems difficult to work with and I was hoping there be better indicators of what the user had typed.
"
### test
<div><br></div>"
https://jsfiddle.net/rn2camL4/1/
If I'm understanding correctly, you just want to put bold tags around the output, if so, you can accomplish this with a simple concatenation.
I brought your jsfiddle over into the snippet below, please run it to see it in action.
When you console.log(boldHtml) you will see the output wrapped in <b></b>.
$('#editable').on('keydown', function(e) {
let html = $(this).html();
//concatenate bold tags around your html and declare new boldHtml variable
let boldHtml = '<b>' + html + '</b>'
$('#render').html(boldHtml) // replace test with <b>test</b>
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editable" contenteditable="true" style="background-color:white; outline: 0px solid transparent; width: 100%; padding: 16px;">
### test
</div>
<div id='render'>
</div>
Alternatively, if you're fine with using a library, you can use markdown-it for example and have it convert any type of markdown into HTML.
I've applied the logic to your code below.
When you console.log(markdown) you will see the correct HTML tags around your output.
const md = window.markdownit();
$('#editable').on('keydown', function(e) {
let html = $(this).html();
let markdown = md.render(html);
$('#render').html(markdown) // replace any markdown with proper html
//console.log(markdown);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markdown-it#10.0.0/dist/markdown-it.min.js"></script>
<div id="editable" contenteditable="true" style="background-color:white; outline: 0px solid transparent; width: 100%; padding: 16px;">
Enter ANY markdown here
</div>
<div id='render'>
</div>
I am required to use a specific plugin in Wordpress for a project. It outputs several DIVs, each with identical IDs.
However, I need to isolate them individually, so that I style them in CSS separately.
Normally I would either alter the PHP or use nth-child...but this plugin basically makes both of these options impossible...long (and frustrating) story.
So I am looking for a Javascript/jQuery solution that I can plug into a global .js file and execute using a $(document).ready statement after page load instead.
I just can't seem to figure it out. The js/jquery code would need to alter the html output by this plugin after it's finished loading. It would scan the page, locate each instance of #commonName, and append a number onto it OR add a class name to it. Doesn't matter how it's done, as long as each DIV becomes unique in name.
The plugin outputs something like this on the page (simplified):
<div id="commonName"></div>
<div id="commonName"></div>
<div id="commonName"></div>
I would like my Javascript or jQuery code to locate and change every instance of this ID, and turn it into this:
<div id="commonName" class="copy-1"></div>
<div id="commonName" class="copy-2"></div>
<div id="commonName" class="copy-3"></div>
Or this would be fine too:
<div id="commonName-1"></div>
<div id="commonName-2"></div>
<div id="commonName-3"></div>
Thanks for your help everyone!
This will take all of the ids that have the id value of commonName
The using an each loop, we can change the id value using the attr function.
Hope this helps :>
$("[id='commonName']").each((i,el)=>$(el).attr('id','commonName-'+i))
console.log($("body").children())
body div {
width: 50px;
height: 50px;
display: inline-block;
}
#commonName-0{
background: red;
}
#commonName-1{
background: green;
}
#commonName-2{
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="commonName"></div>
<div id="commonName"></div>
<div id="commonName"></div>
I want to build a simple online editor like plunker. Does anyone know how to accomplish the live preview, once several files (.html, .css, .js, .json) have been uploaded?
Taking JSBin as example, there are only 1 html text, 1 css text and 1 js text, so it is simple: we just need to construct one complete html file from these texts and use Document.write().
However, how do editors such as plunker, brackets, vscode do live preview? Do they also construct one complete file by themselves or they use some third-party tools?
Live previews are pretty easy. Just replace the HTML of an area on the page with the HTML the user provided. In practice, you probably want to do this in a sandboxed iframe for security purposes.
The snippet below shows how this can be done, all in JavaScript. Try running the snippet and typing in the box.
function doLivePreview() {
$("#output").html($("#source").val());
}
$(function() {
doLivePreview();
$("#source").on("input", doLivePreview);
});
#source {
float: left;
}
#output {
float: left;
border: 1px solid #AAA;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="source" cols="50" rows="8">
Type to see a live preview
<br/>
<a href="https://www.google.com">Google<a>
</textarea>
<div id="output">
</div>
Have some markup
<div class="container">
<aside class="left">
<div class="item"><p>lorem ipsum</p></div>
</aside>
<aside class="right">
<div class="item"></div>
</aside>
</div>
<button>load more</button>
css
aside {
display: inline-block;
width: 40%;
border: 1px solid red;
margin: 2%;
vertical-align: top;
}
.item {
border-bottom: 1px solid black;
}
I need to load some html content from .txt file when clicking button and add that markup inside both aside. In .txt file markup like this
<div class="item"><p>lorem ipsum1</p></div>
<div class="item"><p>lorem ipsum2</p></div>
<div class="item"><p>lorem ipsum3</p></div>
<div class="item"><p>lorem ipsum4</p></div>
I want "drag" and paste first div with class .item to aside.left, second div with class .item in aside.right, third div with class .item in aside.left and so on...
Is there any solution? I don't know how paste .item divs in both columns..
Thanks for any help
Here is JsFiddle DEMO
upd: I'm only use css+html+some jquery, I dont know any things on php or server technology.. but programmer who work with my markup says that I need to demonstrate how content will be added on click.. So I dont know is this my work, or this is programmer need to do.. I need your answer about this..
If that helps, here is LINK you can see site. In bottom you can see arrow, onclick on that there need add content in columns..
P.S. Programmer works with Yii framework.
Since you already seem to know about AJAX (you added the tag), I think you have your answer there.
You can just use AJAX to get any chunk of data from the server and add it to the page.
Since you are working together with a server-side programmer, I think each of you could build their own part independantly.
All you need is an API that you can use, to which you can specify the offset of items to load, so you could call /getitems?offset=12&count=4 to get the next 4 items from item 12.
You can then just make a simple page that returns dummy data. getitems.php can just return the same constant items every time, and all you need to do is add those items at the bottom of your list.
At the same time, the PHP programmer can actually implement that page so it returns the same data. He can make it in such a way that it also works for non-AJAX request, so he can easily test it without needing your front-end code.
Is there a jQuery library or any leads on implementing that photo tagging like in Facebook and Orkut Photo albums?
Thanks
Hmmm, I found that the new version of Img Notes seems to do exactly what you want.
Checkout the Demo. It allows you to easily add tag notes and show them using JQuery. He also depends on the imgAreaSelect jquery plugin for adding notes.
you could try Jcrop or imgAreaSelect.
Not 100% the same behaviour as in Facebook, but with some tweaks, this should e possible.
I didn't find any suitable plugins for this purpose. So I ended up writing myself a small plug-in to mark areas over an image based on the coordinates loaded through an XML file.
The basic code is required is:
<div id="imageholder">
<!-- The main image -->
<img src="<link to image file>" alt="Image">
<!-- The grid tags -->
<div class="gridtag" style="bottom: 100px; left: 106px; height: 41px; width: 41px;"/>
<div class="gridtag" style="bottom: 300px; left: 56px; height: 100px; width: 56px;"/>
<div class="gridtag" ...
</div>
And the basic CSS styling required:
#imageholder{
height:500px;
width:497px;
position:relative;
}
div.gridtag {
border:1px solid #F0F0F0;
display:block;
position:absolute;
z-index:3;
}
In the above the divs with class "gridtags" are added using jQuery through XML or JSON and by binding events on this divs, we can make phototagging similar in Orkut.
PS: This only one side of the phototagging, ie. if we already have the coordinates we can mark on an image and add click events, which is the part actually i wanted. :) You guys has to write code for doing the marking part of the phototagging.
A good and complex example of tag like functionality in facebook is
Talking Pictures, Which is a facebook application.