i want to include HTML Nav Bar, in Index HTML File.
(I prefer to follow suit) I do not know what wrong I did, but it does not show me the Nav bar..
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home Page</title>
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>
<body>
<div w3-include-html="navbar.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
You can OR solve this with PHP, as #floreich mentioned, otherwise I see your code is correct but perhaps your path to the file is not correct.
I mean this line of code: <div w3-include-html="navbar.html"></div>.
Try to navigate to the correct path of your file called 'navbar.html', and it should work. Let me know! :)
This might help:
<div w3-include-html="dir/navbar.html"></div>
As you can see 'dir/' is added before 'navbar.html', which is a directory where 'navbar.html' is located.
Perhaps this explanation might help to understand above: https://www.w3schools.com/hTml/html_filepaths.asp
EDIT:
'dir/' is just a name, so change it to YOUR directory name.
Related
i'm sorry to bother you with a silly problem, but i've been learning jee lately and started using bootstrap as i've been told is a nice tool, anyway i'm making a simple jsp page with a form but i noticed whenever i try to use a dropdown it doesn't work !
i don't know what i'm missing, i'd very much appreciate if someone can take a look at my code and tell what's wrong :D (i made it as simple as it can be on button in the page to find where the problem is )
<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0">
<jsp:directive.page contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false"/>
<jsp:output doctype-root-element="html"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
omit-xml-declaration="true" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Insert title here</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.css"></link>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"></link>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<script type="text/javascript" src="Bootstrap/jquery/jquery.js"></script>
<script type="text/javascript" src="Bootstrap/jquery/jquery.min.js"></script>
<script type="text/javascript" src="Bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="Bootstrap/js/Bootstrap.js"></script>
<script type="text/javascript" src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
</jsp:root>
I think my problem is that i'm missing the inclusion of some sort of file or somthing but i can't tell what is it, you can see i've tried including random ones to test but nothing :'(, i have the feeling it's something really stupid but i'd very much appreciate it if someone can help me please !
Thanks in advance guys
Maybe you could try this (see also here):
<script>
$(document).ready(function(){
$(".dropdown-toggle").dropdown();
});
</script>
You can use "select instead of ul" tag without "dropdown-menu". and "option instead of li".
You are missing the inclusion of your files.
I tried your dropdown, it works as it. I think your paths are not right because you said that:
fixed the problem with adding "<>script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">"
But jQuery is required by Bootstrap and already provided at the end ! So you missed this part at least.
<script type="text/javascript" src="Bootstrap/jquery/jquery.js"></script>
<script type="text/javascript" src="Bootstrap/jquery/jquery.min.js"></script>
<script type="text/javascript" src="Bootstrap/js/jquery.js"></script>
Furthermore you don't need jquery.js and jquery.min.js AND js/jquery.js
.min files are minified files. They do exactly the same job. And include three or four times a file is useless.
I advice you to use the tag ${pageContext.request.contextPath} in order to have the absolute path of your files. For example, if my app is called mywebapp on my server then ${pageContext.request.contextPath}/css/Bootstrap.css will give me /mywebapp/css/Boostrap.css
I hope it will help.
EDIT: Is it normal that your HTML file start with an XML tag ?
Please add in head otherwise It will not work
This is my first post and I am really new to computer programming so I apologize ahead of my time if my question is super simplistic. So I am trying to start an angular application and I currently have this:
<!DOCTYPE html>
<html>
<head ng-app>
<title>Hello World</title>
<body>
</head>
<h1>{{2+2}}</h1>
</body>
<script type="<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"> </script>
</head>
What is supposed to happen is that when I click the html page there should be the number 4 pop up but instead this pops up: {{2+2}}. I am assuming that my angular code is not correctly linked but I am not sure. Do you have any ideas?
Please find below the corrected html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body ng-app>
<h1>{{2+2}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</body>
</html>
Place the <body> tag in correct place. Moved the ng-app to body tag. Place the corrected script tag within <body>
Working sample: http://plnkr.co/edit/T15fetn913Fwn2uJ5pcj?p=preview
Explanation:
The body of an html page is where the components that display on a page will be declared.
- Overlying declaration of html
-where you put meta data, scrip imports, css imports, and title. Basically things the page will use
- all other tags from anchors to spans, things the user sees
Note*** nothing can go in between these tags
Visit w3schools for a great tutorial on this...
http://www.w3schools.com/html/default.asp
What I'm trying to do is make a stock .html file with the nav, footer, basically anything I'd use on multiple pages and want to change easily. This is a small 20ish page site I'm working on and I really don't want to rely on php or something.
I've looked at other responses on here and followed them precisely but they don't seem to help me at all, although it's probably something I'm overlooking.
<!doctype html>
<html>
<head>
<link href='files/stylesheet.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<body>
<!--Navigation-->
<div id='navigation'></div>
<script>$("#navigation").load("templete.html #nav");</script>
</body>
</html>
Thanks in advance! -Shy♥
Is it cust a typo templete.html (third line from below). Otherwis, take a look at the jQuery docs and the restrictions of the functions (http://api.jquery.com/load/).
I'm starting to coding in angular.js on webstorm:
<!DOCTYPE html>
<html ng-app="store">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="store">
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<p>Nothing here {{'yet' + '!'}}</p>
{{1 + 1}}
</body>
</html>
but the browser display
Nothing here {{'yet' + '!'}}
{{1 + 1}}
what can i do?
You don't provide enough details to resolve the issue, but I made these four changes to your HTML to get it working, at least with respect to AngularJS:
Remove the 'ng-app' attribute from the body tag.
Use a CDN URL for angularjs.
Remove the reference to your js file.
Remove your store app from the 'ng-app' attribute in the html tag.
This modified version of your HTML runs fine using WebStorm:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="https://code.angularjs.org/snapshot/angular.js"></script>
<p>Nothing here {{'yet' + '!'}}</p>
{{1 + 1}}
</body>
</html>
Once you see that working, you can progressively undo the changes I made (undo 2, then 3 then 4, but retain change 1), and retest to identify the problem.
More details are needed to determine the root cause, but the most likely issues are:
Your angularjs file can't be found.
Your "app.js" file can't be found.
Some problem(s) with your code in app.js.
But since you are using WebStorm, it may be able to identify your precise problem. Run Code=>Inspect Code on your project, then review the output. It will identify very basic problems, such as failing to locate your script files.
I am having trouble linking a javascript file to a dynamic website i made through php. My file structure is simply just:
index.php, css folder (which is working correctly), jscript folder (does
not work) and a pages folder (has all my pages)
My pages are simple just
header.php, registrationContent.php and footer.php
My index just includes all 3 php and it works perfectly fine. My problem is no matter what I do, whether inline, or soft coded javascripting it does not work. I am certain my syntax in the javascript is fine, its just the linking.
My header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Safe Drive Website</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/regStyle.css" rel="stylesheet" type="text/css" />
<script src="jscript/javascripts.js" type="text/javascript"></script>
</head>
<body>
<div class="topBar" id="topBar"><input type="Submit" value="Contact Us" class="topNavButton"/></div>
<div id="bannerText"><h1 class="mainHeader">SafeDrive</h1><h2 class="subHeader">Developer's Tool</h2></div>
I close the tags in the footer.php
Javascript files are included directly in your html page.
use the following line in your html page:
<html>
<head>
<script type="text/javascript" src="path/to/your/javascript/file.js"></script>
</head>
...
This is probably uncommon, but I thought of answering my own question because I found a solution, so that anyone else having the same problem could try mine.
Basically, it was loaded, the only problem was that the javascript functions weren't loaded and so to do that, i had to add:
window.onload = myJscriptFunction();
on any tag (body, footer etc. refer to w3schools for that information)
I do hope this helps anyone facing the same problem ^_^