Using jQuery to load another HTML page into current HTML page - html

I have a file called navbar.html which I want to load onto my index.html.
I am trying to load via jQuery, but this does not seem to be working.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<title>Home | title</title>
<link rel="stylesheet" href = "style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="hello">testing</div>
<div id="nav-placeholder">
</div>
<script>
$(document).ready(function(){
$('#nav-placeholder').load("./navbar.html");
});
</script>
</body>
</html>
Here is my navbar.html
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href="style.css">
</head>
<body>
<!---Create the navigation bar.-->
<div class="top_navigation_bar">
<span>
nav title
</span>
Projects
About Me
Home
</header>
</body>
</html>

Related

Unable to use CircleType.js

How do you include circletype.min.js into html file, and call its function in an external js file?
I've also downloaded the circletype.min.js file into my working directory, however, after following various tutorials, it still doesn't work for me.
Detailed code:
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="index.js"></script>
<!-- circle type.js-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="javascript/circletype.min.js"></script>
<script src="http://circletype.labwire.ca/js/plugins.js"></script>
</head>
<body>
<div>
<div class="links">
<ul id="directory">
<li class="ul_links">About Us</li>
<li class="ul_links">Our Works</li>
<li class="ul_links">Contact Us</li>
</ul>
</div>
</div>
</body>
</html>
JS:
new CircleType(document.getElementById("directory")).radius(384);
Use these 2 libraries and it will work:
<script src="https://cdn.jsdelivr.net/npm/circletype#2.3.0/dist/circletype.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
new CircleType(document.getElementById('type'))
.radius(384);
</script>
Refer this :
new CircleType(document.getElementById('type'))
.radius(384);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>circletype-test</title>
</head>
<body>
<h1 id="type">About Me :</h1>
<!--circletype.min.js cdn link(you don't need this)-->
<script src="https://circletype.labwire.ca/dist/circletype.min.js"></script>
<!--circletype.min.js file path-->
<script src="circletype.min.js"></script>
<!--your external js file path-->
<script src="script.js"></script>
</body>
</html>

Can't get Boostrap CSS to load in a React App

This is my HTML file:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static',filename='styles/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href= "{{ url_for('static',filename='styles/style.css') }}">
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.js"></script>
<meta charset="utf-8">
<title>Dashboard</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="/static/js/dashboard.js"></script>
</body>
</html>
The file is located in:
/Simple_flask_app
-hello.py
/static
-js
/styles
-boostrap.min.css
-style.css
I created a simple component just to try to get the CSS to load:
var Dashboard = React.createClass({
render: function(){
return (
<div>
<div class="jumbotron">
<h1>Test</h1>
</div>
</div>
)
ReactDOM.render(<Dashboard />, document.getElementById('content'));
I was trying to get this giant grey box to load - https://getbootstrap.com/examples/navbar/
Do I have to do something special because I'm in React?
Within JSX in React, you must use 'className' instead of 'class'.
So you should change <div class="jumbotron"> to <div className="jumbotron">

Html bootstrap link error

I cannot connect bootstrap's files from my index.html.as my code file belong ; my index.html file locates in /var/www/html as "localhost" . but when i start to localhost/bootstrap/index.html , i can access my website only without any CSS properties.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Bilsay Mavi
</title>
<link href=../css/bootstrap.min.css rel="stylesheet">
</head>
<body>
<h1>DENEME</h1>
<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="#">Bilsay</a>
</div>
</nav>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
I tried <link href=localhost/bootstrap/css/bootstrap.min.css rel="stylesheet"> and <link href=/var/www/html/bootstrap/css/bootstrap.min.css rel="stylesheet">
but I can't access with CSS file .how can i solve this error?

Changing 'Div' Property from HTML

I'm using StackEdit (Which is amazing!).
It has a feature to export HTML file of the document.
The document uses The CSS File which is the default.
For instance, I downloaded HTML file with the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><h2 id="hello">Hello</h2>
<p>We’re dealing with…</p>
<blockquote>
<p>Written with StackEdit.</p>
</blockquote></div></body>
</html>
What I want to do is change the background color if the 'div' element with ID: "container" without changing any other property of his.
I only have access to the basic template which is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><%= documentHTML %></div></body>
</html>
How can I do that the simplest way?
Notes:
I can only edit the template.
I want to change the color into f6f7f9.
I want any other properties of the elements to be kept.
Updates
Tried your suggestions on the sample code above:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container" style="background-color:#f6f7f9;"><h2 id="hello">Hello</h2>
<p>We’re dealing with…</p>
<blockquote>
<p>Written with StackEdit.</p>
</blockquote></div></body>
</html>
It doesn't work, it changes the whole look of the document.
You can try by creating a local HTML file and see. -> I was wrong. It works!
if you are only able to edit the template, use inline styling like this:
<div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>
or since your template is the whole page, you can add custom styles in the head and use !important directive to override any other custom styling.
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
<%= documentHTML %>
</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
<style type="text/css">
.container {
background-color:#f6f7f9 !important;
}
</style>
</head>
<body>
<div class="container">
<%= documentHTML %>
</div>
</body>
</html>
Add the style background-color:yellow; to the container div.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
<div class="container" style="background-color:yellow;"><%= documentHTML %></div>
</body>
</html>
try this one
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
<style>
.container
{
background:#f6f7f9;
}
</style>
</head>
<body>
<div class="container" style="background-color:#f6f7f9;"> <%= documentHTML %></div>
</body>
</html>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
<div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>
</body>
</html>

Back button not working in jquery mobile

Hello friends i have created two page one is index.html and second is about.html . I just want to add back button on about.html using jQuery mobile . i have tried it but back button is not working in my code i dont know what is the problem
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="data-add-back-btn ">Back</div>
<div><h1>Page title</h1>
About us</div>
</div>
</body>
</html>
Please help me. Thanks in advance...
You may try creating your back button by using data-rel="back" as follows:
<a data-role="button" data-rel="back">Back</a>
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<a data-role="button" data-rel="back">Back</a>
<div>
<h1>Page title</h1>
About us
</div>
</div>
</body>
</html>
Check the section "Back" button links of the online doc for more information: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html