I'd like to think I'm fluent in html and css and I'm planning on broadening my horizons in the world of web development. Is there a way to create a set template for a div with a class using basic html/css or even javascript/php?
For example any div tag that is created with the class "test" will have preset elements as shown below.
<div class="test">
<h1></h1><br />
<p></p>
</div>
Updated to javascript..
Using the suggested Jquery code it hasn't responded correctly.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>$(".test").html("<h1>TEST</h1><br /><p>TEST</p>");</script>
</head>
<body>
<div class="test"></div>
</body>
</html>
It really depends on what you want to do. "Templates" are not generally a JS or PHP thing, but you can use libraries and such to use these.
One widely used PHP library is Smarty, which is, as it says, a "Template Engine". Similar things can be found for JS, such as ReactJS and AngularJS. I suggest doing some looking around and see what works best for you.
You can do this in HTML with a special tag called <script>. <script> basically tells the browser not to display the text, to instead run it as JavaScript. If you want to learn more about JavaScript Syntax, Wikipedia may help. You can use an open source library called jQuery to make your JavaScript code shorter. To use jQuery, you need to include
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
in your HTML document (preferably in <head>). To do what you asked, you just need to use jQuery's $ (in another <script>):
$(".test").html("<h1></h1><br />
<p></p>");
What this does is it selects ($) all elements class (.) test, and sets their internal HTML (the HTML inside of them) to your specified code. Your head should now look like:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<div class="test"> </div>
<script>
$(".test").html("<h1></h1><br /><p></p>");
</script>
</body>
The script must go second so the <div> is there to modify.
Related
I swear I've copied and pasted 100 different things that should work, but nothing is working.
I have my main html document, test.html:
<html>
<head>
</head>
<body>
<header></header>
<div class='content'>some content</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'></script>
<script src="script.js"></script>
</body>
</html>
Another html document, test2.html:
<p>this should show up if it works</p>
And a javascript document, script.js:
$(function() {
$("header").load("test2.html");
});
My end goal is to get a navbar.html document that can be referenced via jquery by multiple different html documents. Here, I'm trying to do a verrrrrrry simple test to get the .load() function to work.
When I load test.html, I expect to see the text from both test.html and test2.html, but I'm not seeing the text from test2.html. What am I doing wrong here?
For this kind of request, you need to be running on a server as you will get an CORS (Cross Origin Ressource Sharing) if running the file directly from your html file. You could use Live Server on Visual Studio code or directly on an apache server to run your perticular code.
You can also see this link if my first answer doesn't work https://medium.com/#dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9
I'm using Kotlin to write a JavaScript application, but I immediately ran into the problem of how JS executes. i.e. I tried to call document.getElementById() before the whole page loaded, resulting in errors as Kotlin could not cast a DOM object that doesn't exist yet.
The way around this I found was to use the window.onLoad() function, but this didn't feel right to me- Sticking all of the program's logic inside onLoad() seems like a hack.
Is there a better way of handling things like this via Kotlin? Or was I right to use onLoad() for running main? This is my first time using Kotlin to write JS so any extra advice and tips would be greatly appreciated!
Ensure that the code you are calling is contained in the body of your html above the scripts.
<html>
<head>
<meta charset="UTF-8">
<title>Console Output</title>
</head>
<body>
<div>
my html content up here!
</div>
<script language="JavaScript" type="application/javascript" src="target/js/lib/kotlin.js"></script>
<script language="JavaScript" type="application/javascript" src="target/js/my-program.js"></script>
</body>
</html>
I've wondered this before, but never gotten an answer. Then just today I came across another site: http://ruralcoz.com/ with no html in the source code. Only a minified script. Does anyone know how the developer built this site, and why they chose to replace all the html with javascript? What's the benefit of this? How is this done?
Thanks!
That's a React app. React uses JavaScript to create everything on the page and then loads it into the one root div on the page.
There are advantages to doing it this way and you can read more about it here
That site does have HTML in the source code, specifically:
<!doctype html>
<html lang="en">
<head>
<title>Four Points Funding</title>
<link href="/static/css/main.d6132581.css" rel="stylesheet">
...
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.0673017f.js"></script>
</body>
</html>
All of the above is HTML markup, and pages must have HTML to be rendered as HTML pages. There's no way around that.
What this site is lacking is content in the <body>, which might seem a bit odd, but is very doable. Javascript can be used to create elements and to insert them into the HTML, which is happening here. For example:
<script>
const div = document.createElement('div');
div.textContent = 'Body content!';
document.body.appendChild(div);
</script>
I'm looking into creating browser game development. I have a strong background in C programming (c/c++/c#) and web development (html/css/wordpress/some JS). This area of programming seems like chaos and no one has a firm framework that works well and is good.
I've been exploring at libraries available such as gameQueryJs and other tutorials I've found such as Canvas Tutorial, I keep running into the same issue.
They all just jump STRAIGHT into the code. No pre-set up, how the HTML page should look like, just nothing. They all go BANG, right into the javascript.
Before I get into the javascript I need to set up the web page. I am wondering how such a page would be designed like and how to import scripts correctly.
For example, if I wanted to add jquery and the gamequery libary, would I add it like this?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/jquery.gamequery-0.7.1.js"></script>
<title> GAME TITLE </title>
</head>
<body>
<div id="game-txt">
<h1> GAME TITLE </h1>
</div>
<div id="wrap">
<div id="canvascontainter">
<canvas id="canvas" width="300" height="300"></canvas> -- ignore this, this was when I was playing with the canvas tutorial
</div>
</body>
</html>
<!-- SCRIPT STUFF DOWN HERE? -->
To further explain my issue, here is gameQueryJS's first line of code they introduce to you to use.
var PLAYGROUND_HEIGHT = 250;
var PLAYGROUND_WIDTH = 700;
$("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH});
Where does that go? What is the playground id they are manipulating on the page? They just throw that line at you like every other tutorial I've found without explaining anything.
Javascript can be placed in script tags or in a seperate file just like the gameQueryJs libraries that you are loading.
Where you put the script tags is almost entirely up to you, although most people will put them in the section.
Putting them below the closing tag of the page is not correct however. Unfortunately most browsers will accept and execute it even then because they try quite hard to make every page they get served work. For more on where to place script tags check W3Schools
The playground they refer to is an element that you'd have on your page, in their example from lesson one it is a div with the id playground.
Also, if you check the first example that they give you can select Edit with JSFiddle the code they show there should help anwser part of your question as well as add to the lack of information you complained about.
Before all, I just want to apologize to my bad English (french school are not so good for practicing other languages ...).
I have a header.html on my site. I cannot modify him because it's not mine.
I just want to call an other html (one of mine, that i can modify, we can name it toto.html), when header.html is display (in other words, it's not a Java functions who call my other html, it's header.html).
I've tried some Jquery functions (like load()), Javascript and even the macro <#include from HTML, but without success.
Thanks to all for your responses.
Have a good day !
I have the following files in one directory:
helloworld.html
<p>hello!</p>
test.html
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$('#container').load('helloworld.html');
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Loading test.html in browser produces "hello!", so check if you jQuery is loaded properly.
Can you post example here to show us the context and how your page header.html is included in your site ?
I thinks it's not possible to do that : "(in other words, it's not a Java functions who call my other html, it's header.html)"
If you're not able to modify header.html or the way your page is called, it would be difficult to load anything else.