Navigation bar in html5 - javascript

I have a quick question. I'm wondering if it is possible to have a external html file with my navigation bar in it and have that be put in to all of my pages for my website. If so how do I do this? I have tried using these methods:
<script rel="import" src="navigation-bar.html"></script>
$("#nav-bar").load("navigation-bar.html")
but so far neither of them have worked... Do I have to use PHP and if I do how do I implement this.
please help.

I would use PHP to do this.
Here is the structure of how it would work.
<html>
<head>
<?php require('/directory/to/your/header.php'); ?>
</head>
<body>
...Your Content Here
</body>
</html>
In a separate header.php file you would include your navbar.
Header.php
<?php
echo '...enter your Navbar HTML code';
?>
Your file will have to have the extension .php and every time you write in php, you must start and end with
<?php
...enter your php code...
?>
You can mix php with html simply by writing the php into the HTML. Take for example the following href:
Your link Name
For more information please refer to :
http://php.net/manual/en/

put:
include("navigation-bar.html")
on top of your code.
This way you won't have to write the same navigation code in each webpage that you are going to host.
OR
you can try
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="h1.html"></div>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Read more at: http://www.w3schools.com/howto/howto_html_include.asp

This is probably the simplest solution that should work even in user agents without scripting support.
For example, your page will look like this:
<html>
<body>
<iframe src="navbar.html" class="navbar" />
</body>
</html>

Related

A self contained Javascript/Html module - Is this possible?

[EDIT: I have possibly found another solution. Kooilnc's solution looks good. Is the solution at the bottom of this question better or worse than Kooilnc's?]
I have a div with associated javascript code. I would like to have the html for just this div and the associated javascript code all in one file, a kind of self contained 'module', eg
mydiv.html
<html>
<div id="Wibble" style="display: none;">
... loads of structure for just this div
</div>
<script type="text/javascript">
... loads of js functions just associated with this div
</script>
</html>
Then in my main page index.html I would like to include this 'module' in some way.
The only thing I have found is a Server Side Include:
index.html
<!DOCTYPE html>
<html>
<head>
... loads of stuff
</head>
<body>
... loads of other html structure
<!--#include FILE="mydiv.html" -->
... loads of other html structure and script tags
</body>
</html>
Question 1: Is there a better way of doing this?
Question 2: Should I have the html tag in mydiv.html as that will obviously put an html tag in index.html which is out of place?
Question 3: If that html tag in Q2 should not be there, how do I write the mydiv.html file so it has all the formatting and nice coloured structure in Visual Studio Code?
Edit:
Kooilnc's solution (below in the answers) looks good. Here is another solution I have found. It is working in my development environment Visual Studio Code. I need the javascript in my included html file in body's onload. Does anyone know if this solution will work on a server with my body onload requirement? Is it better or worse than Kooilnc's solution?
Jquery must be included with the normal <script> tag prior to this.
I insert this code within index.html
<!DOCTYPE html>
<html>
<head>
... loads of stuff
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</head>
<body>
... loads of other html structure
<div id="include_mydiv"></div>
<script>
$(function(){
$("#include_mydiv").load("mydiv.html");
});
</script>
... loads of other html structure and script tags
</body>
</html>
And mydiv.html did not have any <html> tags:
<div id="Wibble" style="display: none;">
... loads of structure for just this div
</div>
<script type="text/javascript">
... loads of js functions just associated with this div
</script>
You can try importing from template elements. Here is a simplified templating example that may be useful.
If you need to import from an external file, check this example I cooked up for you.
document.querySelectorAll(`[data-import]`).forEach( el => {
if (!el.dataset.imported) {
el.appendChild(document.querySelector(`#${el.dataset.import}`)
.content.cloneNode(true));
el.dataset.imported = `ok`;
}
});
<template id="someForm">
<script>
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.nodeName === `BUTTON`) {
alert(`Yes. I am handled`);
}
}
</script>
<button id="sub">Handle me!</button>
</template>
<template id="somethingElse">
<style type="text/css">
.red {color: red;}
</style>
<p class="red">I am appended too</p>
</template>
<div data-import="someForm"></div>
<div data-import="somethingElse"></div>
Use an Iframe
<iframe id="inlineFrameExample"
width="300"
height="200"
src="mydiv.html">
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

why script doesnt run?

Well i am working on a website wordpress and i want to add javascript code to the article but it doesnt run !!
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script type="text/javascript">
document.write(5 + 6);
</script>
</body>
</html>
here the code , i tried custom field but it doesnt work also .
enter image description here
where i add the code exactly
If you're using gutenberg editor then you need to add custom html block to print out your script.
Check my backend screenshot: https://prnt.sc/rjqti4
Check my frontend screenshot: https://prnt.sc/rjqu3y
And if you're trying to do it on custom code then you should go for create a custom template or on single.php or on page.php file you simply use this code to load the desired items. Basically this is not the proper way to add script in WordPress though if you're using this script only on certain pages.
I would assume wordpress is stripping it out, you may need a plugin such as https://wordpress.org/plugins/simple-embed-code/#description to use script tags inside a post
You can add javascript code inside WordPress post > "Text" tab like:
<script type="text/javascript">// <![CDATA[
document.write(5 + 6);
console.log("Please check console: ", (5+6));
// ]]></script>
After adding this, save the WP post and then view the page in the browser.
<!doctype html>
<html lang="en">
<head>
<title>Greetings Page</title>
<link rel="stylesheet" href="./first.css" />
</head>
<body>
<h1>Greetings</h1>
<p id="greeting">Hello, World</p>
<script type="text/javascript">
setTimeout(function() {
document.getElementById('greeting').innerHTML = 'Hello JavaScript!';
}, 3000);
</script>
</body>
</html>

Loading jQuery and own JS

I've looked for some time on the internet to get the right awnser for my problem and asked some colleagues... I'm still at the same problem.
As follows:
(I'm new at using JS and jQuery)
I wanna load my own JS into my HTML (written in PHP).
<script src="standaard.js"></script>
and
<script src="test.js"></script>
standaard.js contains all of this: https://code.jquery.com/jquery-3.2.1.min.js
test.js
$(document).ready(function(){
$("button").click(function(){
$("p").fadeOut("slow");
});
});
and the <button> it refers to is in a PHP file:
<button id="button"> CLICK HERE!</button>
Now when I just load standaard.js and copy the contents of test.js in the PHP file between <script></script>, it works just as it should.
But when I load it from different files, it doesn't and when I inspect the page in Firefox console it gives me this:
SyntaxError: expected expression, got '}'
[More Info]
test.js:4:10
I hope someone could help me with this and that I didn't make a newbie mistake :)
Note: I suspect that it has something to do with time that both scripts need to load and that test.js goes first... but then again, I don't get the error that pops up.
EDIT:
Here is the trimmed PHP file:
<?php
echo '<!doctype html>
<html>
<head>
<title>Opdracht 4!</title>
<meta name="author" content="Danny">
<link rel = "stylesheet" href = "basis.css">
</head>
<body>
<h3>Naam</h3>
<p> Danny </p><br>
<h3>Geboortedatum</h3>
<p>a date</p><br>
<h3>Woonplaats</h3>
<p>A City</p>
<br><br><br>
<div class="footer">
<footer>
&#169 2017, Danny
</footer>
</div>
<script src="standaard.js"> </script>
<script src="test.js"></script>
</body>
</html>';
?>
right before the ending </body> tag, put your two scripts in this order:
<script id="jquery" src="standaard.js"></script>
and
<script src="test.js"></script>
You can remove id="jquery". That is not serving any purpose. You should probably just rename the file to be jquery.min.js. This is not causing you any real issue, but it makes more sense naming-wise.
in the test.js file, you can put your script:
$(document).ready(function(){
$("button").click(function(){
$("p").fadeOut("slow");
});
});
After many tries I've found the solution!
It seems quit simple and not very logic but i replaced all " to ' and it worked!?
like this:
$(document).ready(function(){
$('button').click(function(){
$('p').fadeOut('slow');
});
});
Thank you all for your response, with your help I knew what things to cross off that coulndn't be it.

How to link a JS file externally?

I faced this problem.The Condition needed is that the external file should not include script tag.But in order to call a function the script tag is needed.The code is a mere example.Also is there any other alternative to link the External JS file.
<!DOCTYPE html>
<html>
<body>
<script src="Friendship.js">
</script>
</body>
</html>
The code for the external JS is:
<!DOCTYPE html>
<head>
<script>
function mySpace()
{
document.getElementById("playa").innerHTML="Friendship is always a sweet responsibility, never an opportunity.
";
}
</script>
<body>
<h1><tt>Friendship</tt></h1>
<p id="playa">"One of the most beautiful qualities of true friendship is to understand and to be understood.
"</p>
<button type="button" onclick="mySpace()">Click Here !</button>
</body>
</html>
A Javascript file, should only contain JavaScript code. It should not contain HTML, CSS or any other markup.
Based on your example above, you should have the following two files:
index.html
<!DOCTYPE html>
<html>
<body>
<!-- Link to external JavaScript file -->
<script src="friendship.js"></script>
<h1><tt>Friendship</tt></h1>
<p id="playa">"One of the most beautiful qualities of true friendship is to understand and to be understood."</p>
<button type="button" onclick="mySpace()">Click Here !</button>
</body>
</html>
friendship.js
// This is a comment
function mySpace()
{
document.getElementById("playa").innerHTML="Friendship is always a sweet responsibility, never an opportunity.";
}
Notes
The friendship.js is pure JavaScript (or comments as per my example above). You should not add any HTML tags to the JavaScript file such as <html>, <body>, etc. You also do not need to include <script> tags which will generate errors.
is it possible to write the JS code without an HTML declaration
I'm not exactly sure what you mean by this, but I'll attempt to explain. If you were to visit http://www.example.com/friendship.js then you would be shown the raw JavaScript code in that file. The code would not be executed automatically. You will need to initiate the JavaScript from an HTML file itself, just as you've done in your HTML with onclick="mySpace()".

Using 3rd party script in html

So actually i am not much familiar with javascript that's why i am going to post it to know something that i am going to know,
So here it is,
Suppose i have html page and hosted on some where on internet and its coding is,
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......</p>
The link of the document ......
</body>
</html>
In this code Link anchor text use for hyperlink, I would like to use javascript that call from another site, where the link exist and it display over there like this.
<script type="text/javascript" src="http://mysite.com/java.js">
I want to know that what code i put on java.js so it show the hyperlink in my html file and how and where do i add code to html page and in javascript
Advance Thanks for help :)
Apologies in advance if I misunderstood your question, but it sounds like you'd like to use JavaScript from another location on your site.
Using the example above, here's what that would look like:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......</p>
The link of the document ......
<script type="text/javascript" src="http://mysite.com/java.js"></script>
</body>
</html>
You could also link to it in the <head> instead, but it's better for performance if the scripts are placed in the footer.
your anchor:
href="javascript:linksomething()"
and js:
function linksomething(){
window.location.href=url;
}
is this what you want?

Categories

Resources