I'm developing a website with bootstrap.
If I want to modify the navbar, I don't want to go to any html files and make changes.
So would like to use javascript to "inject" the html code into the actual html file but I don't know how to do it.
This is what I tried.
document.write("<p>html code here</p>")
It, however, doesn't work. What the most conveniente and simple solution could be?
You can try something like this example below:
let newElement = document.createElement('div');
newElement.className = 'new-element';
This will create a div - assign it to the variable named 'newElement' and creating a class associated with that element named "new-element".
Related
html2pdf.js is a package for generating pdf's from html it is based on jspdf and html2canvas. It has a nice feature where it can insert page-breaks in order not to split elements. The way it works is that it loops over all the elements and creates empty div's where a page break needs to be inserted. I would like to style those divs and instead of having blank white space would like to be able to insert a class to determine how they would look. The issue is I don't seem to have access to this new HTML that will be converted to a pdf. The API seems to indicate that this is possible here but when I put in code like this:
var worker = html2pdf();
worker.set(opt).from(finalHtml).toContainer().toCanvas().then(newHtml => {
console.log(newHtml)
return newHtml
})
I am getting undefined. This is true whether I chain to toCanvas() and toContainer or not. Basically I would like the html generated here, how do I access this?
Say I have 2 html files, index.html, and example.html and they both use script.js. If I were to use a statement like document.createElement("p"); in the script, how would I specify which html file I want to make the paragraph in?
One way to do this is to play with classes/IDs. The JavaScript file will work on whichever DOM is loaded, whether it's a DOM based on your first HTML or the second.
If you were to do this, you could--in theory--have a specific ID on one HTML file and another ID on the other. Your JS file can append the paragraph to the node with that ID, but only if the ID is actually on the DOM.
This is far from ideal though.
If you don't want the element to be created in every HTML file in which the JS file is included, the code should be invoked from the HTML file as appropriate. For example, you would add a <script> block in the HTML file that calls createMyElement, and createMyElement would be a function in the shared JS file.
Where do you intend on injecting the paragraph element? You could give each section a different id and do something along the lines of :
function InjectHtmlElement(bodyId, element, modifyBodyCallBack)
{
let body = ducement.getElementById(bodyId);
if(body == null)
{
return
}
modifyBodyCallBack(body, element);
}
<body id="first"></body>
<body id="second"></body>
This isn't ideal but it'll work.
by appending the node element to an element in the desired file.
var p = document.createElement("p");
document.body.appendChild(p);
to learn more about appendChild
I am using createFileInput() from the P5.js library. More info on that here.
function setup() {
noCanvas();
var fileInput = createFileInput(addedFile);
}
When I use this in my setup function it simply adds the element to the end of the HTML page. I cannot figure out how to place the input anywhere within my page, like between some span tags.
I've tried .html(), .value() and even tried placing it directly inline in the HTML file but I cannot get it to appear where I want it. Usually it just disappears or I get an error.
I've tried using this tutorial and looking at the js to figure out how he placed it in the middle of the page but I can't even find that!
Any help on this would be much appreciated!
Your first stop should be the reference.
Specifically, it looks like the parent() function does what you want: it takes an element you created in your P5.js code (in your case, your fileInput variable) and moves it into a parent element in the HTML webpage.
So your first step would be to create an html webpage that contains an element (probably a <div>) in the middle of the page. Then you'd write P5.js code that calls the parent() function and passes in the id of that <div> element.
I am new to angularJs. there is a requirement need to assign css property to component at/from js file level. I have kept debugger, after assign css style to component. In debugger level I can able to see all applied css property to component behavior will be good. Once completes page load, I am not able to see applied css, from js file. From my side may be some overwriting/removing css style. How to achieve this one using angular/JavaScript/J query, great appreciate.
Here is my code.
By AngularJS
angular.element.find('.ctp-textfield')[0].style.width = "75px !important";
angular.element.find('.ctp-textfield')[0]["ng-style"] = "{height: 75px}";
By JavaScript
document.getElementById('Idname').style.width = "75px !important";
By JQuery
$('#idname')[0].style.width = "75px !important";
$('#idname').style.width = "75px !important";
The way to do DOM manipulation in Angular is to use a directive. All of the above snippets of code look like they are not running inside the link function of a directive so will not work as you expect (but theres not enough context to tell what you're doing).
see:
https://docs.angularjs.org/guide/directive
http://www.sitepoint.com/practical-guide-angularjs-directives/
http://www.ng-newsletter.com/posts/directives.html
http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/
https://github.com/angular/angular.js/wiki/Understanding-Directives
We've got a little tool that I built where you can edit a jQuery template in one field and JSON data in another and then hit a button to see the results immediately within the browser.
I really need to expand this though so the designer can edit a full CSS stylesheet within another field and when we render the template, it will have the CSS applied to it. The idea being that once we've got good results we can take the contents of these three fields, put them in files and use them in our project.
I found the jQuery.cssRule plugin but it looks like it's basically abandoned (all the links go nowhere and there's been no development in three years). Is there something better or is it the only game in town?
Note: We're looking for something where someone types traditional CSS stylesheet data in here and that is used immediately for rendering within the page and that can be edited and changed at will with the old rules going away and new ones used in their stead. I'm not looking for something where the designer has to learn jQuery syntax and enter in individual .css("attribute", "value") type calls to jQuery.
Sure, just append a style tag to the head:
$("head").append("<style>p { color: blue; }</style>");
See it in action here.
You can replace the text in a dynamically added style tag using something like this:
$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);
See this in action here.
The cleanest way to achieve this is by sandboxing your user-generated content into an <iframe>. This way, changes to the CSS won't affect the editor. (For example, input { display:none; } can't break your page.)
Just render out your HTML (including the CSS in the document's <head>, and write it into the <iframe>.
Example:
<iframe id="preview" src="about:blank">
var i = $('#preview')[0];
var doc = i.contentWindow || i.contentDocument;
if (doc.document) doc = doc.document;
doc.open('text/html',true);
doc.write('<!DOCTYPE html><html>...</html>');
doc.close();
If the user should be able to edit a whole stylesheet, not only single style attributes, then you can store the entered stylesheet in a temporary file and load it into your html document using
$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');
sounds like you want to write an interpreter for the css? if it is entered by hand in text, then using it later would be as simple as copy and pasting it into a css file.
so if you have a textarea on your page to type in css and want to apply those rules when you press the button, you could use something like this (only pseudocode, needs work):
//for each css id in the text area
$.each($('textarea[name=cssTextArea]').html().split('#'), function({
//now get each property
$.each($(this).split(';'), function(){
$(elem).css({property:value});
});
});
then you could write something to go through each element that your designer typed in, and get the current css rules for it (including those that you applied using some code like the snippet above) and create a css string from that which could then be output or saved in a db. It's a pain and much faffing around with substrings but unfortunately I don't know of a faster or more efficient way.
Hope this atleast gives you some ideas