I am trying to use templates in .html and when I load a template in, it is only showing up in a small area in the top left corner and giving me a scroll wheel to move around the small box. I am not sure what I am doing wrong, the code works perfectly fine in its own .html but when I try to use a template it doesn't.
template.html
<style>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 500px;
background-color: #333;
color: #fff;
}
.navbar-item {
cursor: pointer;
}
.navbar-item:hover {
color: #eee;
}
</style>
<nav class="navbar">
<div class="navbar-item">Home</div>
<div class="navbar-item">About</div>
<div class="navbar-item">Contact</div>
</nav>
index.html
<html>
<head>
<meta charset="utf-8" />
<title>My Navbar Template</title>
</head>
<body>
<div id="navbar-container"></div>
<script>
var navbarContainer = document.getElementById('navbar-container');
navbarContainer.innerHTML = '<object type="text/html" data="template.html"></object>';
</script>
</body>
</html>
Related
I saw this reel https://www.instagram.com/p/CcyXukODe9D/
Done it as the video but it does not work with the animation. I think something with the JS is not working because the rest works ok.
Maybe I have to link the JavaScript in another way
let cuadrado = document.querySelector(".cuadrado");
cuadrado.addEventListener("click", () =>
cuadrado.classList.toggle("active"));
.cuadrado {
background-color: coral;
width: 80px;
height: 80px;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
align-items: center;
}
.line {
background-color: white;
width: 48px;
height: 6px;
border-radius: 3px;
transition: 0.5s;
}
.active .line:nth-child(1) {
transform: translateY(12px) rotate(135deg);
}
.active .line:nth-child(2) {
transform: scale(0);
}
.active .line:nth-child(3) {
transform: translateY(-16px) rotate(-135deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prueba menu</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script src="animation.js" type="text/javascript"></script>
</head>
<body>
<div class="cuadrado">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</body>
</html>
Try moving <script src="animation.js" type="text/javascript"></script> right before your closing </body>. Also change it to <script src="animation.js"></script>. While you're at it, double-check the file name. So like this:
...
<div class="line"></div>
</div>
<script src="animation.js"></script>
</body>
</html>
Thanks for everyone that answerd. In fact it was working, i didn't notice the JS function was 'on click' and not on 'mouseover' as i thought.
Sorry for disturbing
I need to know how to correct this layout on my 404 page of my website. It works fine on a desktop but the layout of the actual page (not the header) gets messed up on mobile. The code is below.
THE LINK TO THE SITE IS WWW.ROGERSARTWORK.CO.UK/404
HTML CODE
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("nav.html");
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
<div id="content">
<html>
<title>404 Not Found</title>
<img src="/images/logo.png" alt="Roger's Artwork Logo" width="320" height="272" />
<p></p>
<img class="image1" src="https://www.rogersartwork.co.uk/images/404.png" alt="Error 404 Image" width="832" height="249"/>
<p>The page you were looking for does not exist. Please return to our homepage.</p>
<script type="text/javascript">
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</html>
</div>
</div>
CSS
<style>
#content {
padding-top: 40px;
}
h1 {
font-size: 45pt;
font-family: Verdana;
font-weight: bold;
text-align: center;
}
#content {
padding-top: 50px;
}
p {
font-size: 25pt;
font-family: Verdana;
text-align: center;
}
body {
text-align: center;
background: #eeeeee;
}
html {
background: #eeeeee;
}
</style>
AND THE LINK TO THE SITE IS WWW.ROGERSARTWORK.CO.UK/404
IMAGE FOR #sbgib
It looks like the only issue is the scaling of the images. This can be fixed by adding CSS rules to make them full width for mobile and then adding one or more media queries to set the images to their full sizes at certain screen sizes. For example:
#content {
padding-top: 40px;
}
h1 {
font-size: 45pt;
font-family: Verdana;
font-weight: bold;
text-align: center;
}
#content {
padding-top: 50px;
}
p {
font-size: 25pt;
font-family: Verdana;
text-align: center;
}
body {
text-align: center;
background: #eeeeee;
}
html {
background: #eeeeee;
}
#content>title+img,
.image1 {
width: 100%;
height: auto;
}
#media screen and (min-width: 500px) {
#content>title+img {
width: auto;
max-width: 100%;
}
.image1 {
width: auto;
max-width: 100%;
}
}
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<script>
$(function() {
$("#header").load("nav.html");
});
</script>
</head>
<body>
<div id="header"></div>
</body>
<div id="content">
<title>404 Not Found</title>
<img src="https://www.rogersartwork.co.uk/images/logo.png" alt="Roger's Artwork Logo" width="320" height="272" />
<p></p>
<img class="image1" src="https://www.rogersartwork.co.uk/images/404.png" alt="Error 404 Image" width="832" height="249" />
<p>The page you were looking for does not exist. Please return to our homepage.</p>
<script type="text/javascript">
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</div>
</div>
</html>
Remove the width and height attributes from your image tags. What you should do instead is style them with css. For example, you can add and id to them and target that with css, or you can also do an inline style, like so:
Using inline styling:
<img src="/images/logo.png" alt="Roger's Artwork Logo" style="max-width: 20rem" />
I have implemented a simple web page with 2 sections. In each of this section there is text contains 2 lines. I would like to keep this text in center (margin left, top, right, bottom) in the section when changing the size of the screen (RWD). E.g. when I run this web page on the desktop the text in the section will be in center-center of the section and when I run this web page on the smartphone/tablet this text also be in the center of the section. Is it possible to do it? The code is below:
body {
height: 100%;
}
section {
height: 60vh;
}
section:nth-child(1) {
background: white;
}
section:nth-child(2) {
background: #f2efef;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section>
John is happy.<br><br>
Thank you.<br><br>
</section>
<section>
Have a nice day.<br><br>
Good luck.<br><br>
</section>
</body>
</html>
Thank you for help.
You can use flexbox grid for block alignment.
body {
height: 100%;
}
section {
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
}
section:nth-child(1) {
background: white;
}
section:nth-child(2) {
background: #f2efef;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section>
John is happy.<br><br>
Thank you.<br><br>
</section>
<section>
Have a nice day.<br><br>
Good luck.<br><br>
</section>
</body>
</html>
I hope this helps you.
in the CSS file you can use the following ways,
section {
text-align:center;
height: 60vh;
}
/* or */
section {
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
}
I have created a html page containing only the navgation bar and the actions to take on it.
I want to load this html page inside a div with an id of nav
However up to recently I used 3 things myself:
include_once(); but this is php i dont want to change an html page
to a php page only for one line of code
java script load function (however iv read this and its not recommended )
jQuery get function , which worked with simple html file but since in this file i have included the css and java script inside only one element will show which is the button.
Any solution or suggestion?
nav.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nav</title>
<link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
.Layer {
height: 100%;
width: 0;
z-index: 1;
position: fixed;
left: 0;
top: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
display: flex;
flex-direction: row-reverse;
}
.Content {
position: relative;
margin: auto;
}
.Content a {
margin: auto;
text-decoration: none;
font-size: 36px;
transition: 0.3s
}
.Content a:hover, .Content a:focus {
color: #f1f1f1;
}
.Layer .closebtn {
font-size: 60px;
}
</style>
</head>
<body>
<div id="myNav" class="Layer">
<a href="javascript:void(0)" class="closebtn" onClick="closeNav()">
<i class="fa fa-window-close" aria-hidden="true"></i>
</a>
<nav class="Content">
<ul>
<li>Home</li>
<li>Download</li>
<li>About this</li>
</ul>
</nav>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
jquery :
// JavaScript Document
window.onload = function()
{
"use strict";
//$("#nav").load("nav.html");
$.get("navbar.html",function(data)
{
document.getElementById("nav").innerHTML=data;
});
};
The following code works for me:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="include"></div>
<script>
window.onload = function(){
$.get("inc.html", function(data){
$("#include").html(data);
})
}
</script>
</body>
</html>
inc.html:
<p>This was included using jQuery.</p>
I know you said you have checked names, but I see nav.html in your question, and don't see the navbar.html that you are trying to include. I have a strong feeling you are misnaming something somewhere.
I'm using flex to make a responsive layout for my web-app.
I'm using jQuery UI on my navigator panel to be able to resize it. Unfortunately, when the resize event is triggered, jQuery UI inserts in the DOM a hard-coded height for my element, even if I specify the handles in the resizable settings.
Here's what I get in the DOM when the resize event is triggered:
<div class="navigator ui-resizable" style="top: 0px; left: 0px; width: 245px; height: 929px;">
I want to get rid of all the the other styles except the width.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
height: 100%;
}
.mainWrapper_1
{
display: flex;
backgound: gold;
height:100%;
}
.mainWrapper_1 .navigatorManager
{
background: tomato;
flex: 0 0 30px;
}
.mainWrapper_1 .mainWrapper_2
{
background: gray;
flex: 1;
display: flex;
flex-direction: column;
}
.topSideBar
{
height:50px;
background: yellow;
}
.mainWrapper_3
{
flex: 1;
background: cyan;
display:flex;
}
.navigator
{
flex: 0 0 auto/*100px*/;
background-color: green;
}
.mainWrapper_4
{
flex: 1;
display:flex;
flex-direction: column;
background: red;
}
.tabs
{
height:50px;
background: pink;
}
.mainWrapper_5
{
flex: 1;
background: magenta;
}
</style>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
<body>
<div class="mainWrapper_1">
<div class="navigatorManager">side</div>
<div class="mainWrapper_2">
<div class="topSideBar">
top side bar
</div>
<div class="mainWrapper_3">
<div class="navigator">
navigator
</div>
<div class="mainWrapper_4">
<div class="tabs">
TABS
</div>
<div class="mainWrapper_5">
MAIN
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".navigator").resizable({handles: "e"});
});
</script>
</html>
Try removing only the height attribute, the other attributes: top and left are responsible for positioning the .navigator and is probably essential for the resize feature to function. To remove an attribute you can try removeAttr() jQuery method or .removeAttribute() JavaScript method. The example below is using .removeAttr() and has .removeAttribute() commented out. If you prefer the latter just swap the comment marks to the other line.
BTW, your code had some weird placements like...
...the <script> tags being placed after the closing </body> tag.
<script> tags should either be situated at the <head> after <link> and <style> tags.
OR
<script> tags can be placed before the closing </body> tag.
Also there was a <link> tag outside of the <head>.
Although I believe it's ok to place a <link> tag outside of the head, it should be in the most possibly highest position possible (i.e. the head under any <meta> tags.). This is because the browser will render styles as they discovered along the way and you want the DOM finished as early as possible.
$(document).ready(function() {
$(".navigator").resizable({
handles: "e"
}).removeAttr('height');
//document.querySelector('.navigator').removeAttribute('height');
});
Live Demo: PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css">
<style>
html, body { margin: 0; height: 100%; }
.extLayer { display: flex; backgound: gold; height: 100%; }
.extLayer .navMgr { background: tomato; flex: 0 0 30px; }
.extLayer .endoLayer { background: gray; flex: 1; display: flex; flex-direction: column; }
.topSideBar { height: 50px; background: yellow; }
.intLayer { flex: 1; background: cyan; display: flex; }
.navigator { flex: 0 0 auto/*100px*/; background-color: green; }
.auxLayer { flex: 1; display: flex; flex-direction: column; background: red; }
.tabs { height: 50px; background: pink; }
.coreLayer { flex: 1; background: magenta; }
</style>
</head>
<body>
<div class="extLayer">
<nav class="navMgr">side</nav>
<div class="endoLayer">
<header class="topSideBar"> top side bar </header>
<div class="intLayer">
<nav class="navigator"> navigator </nav>
<section class="auxLayer">
<div class="tabs"> TABS </div>
<main class="coreLayer">
MAIN
</main>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$(".navigator").resizable({handles: "e"}).removeAttr('height');
//document.querySelector('.navigator').removeAttribute('height');
});
</script>
</body>
</html>