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.
Related
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>
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
Sorry for double text for publishing my question.
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
// MENU SHOW
const first = document.getElementById('nav-toggle')
const second = document.getElementById('nav-menu')
first.addEventListener('click',()=>{
second.classList.toggle('show')
} )
<!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
}
html{
scroll-behavior: smooth;
}
body{
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: var(--font-meduim);
color: var(--dark-color);
line-height: 1.6;
}
h1,h2,h3,p,ul{
margin: 0;
}
ul{
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: var(--dark-color);
}
img{
max-width: 100%;
height: auto;
display: block;
}
/* Class Css */
.section{
padding: 5rem 0 2rem;
}
.section-title{
position: relative;
font-size: var(--big-font-size);
margin-bottom: var(--mb-4);
text-align: center;
letter-spacing: .1rem;
}
.section-title::after{
content: '';
position: absolute;
width: 56px;
height: .18rem;
top: -1rem;
left: 0;
right: 0;
margin: auto;
background-color: var(--dark-color);
}
/* Layout */
.bd-grid{
max-width: 1024px;
display: gird;
grid-template-columns: 100%;
column-gap: 2rem;
width: calc(100%-2rem);
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--dark-color-lighten);
}
/* nav */
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width:768px) {
.nav__menu{
position: fixed;
top: var(--header-height);
left: -100%;
width: 70%;
height: 100vh;
padding: 2rem;
background-color: var(--white-color);
transition: .5s;
}
}
.nav__item{
margin-bottom: var(--mb-4);
}
.nav__logo{
font-weight: var(--font-semi-bold);
}
.nav__toggle, .nav__shop{
font-size: 1.3rem;
cursor: pointer;
}
.show{
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
I was trying to create an overlay but when I click on the button the overlay don't show up.
In the console log the error 'overlay.js:4 Uncaught TypeError: Cannot read property 'addEventListener' of null' appears. I already tried by myself to solve this problem, I'm just a beginner.. I hope someone can solve the problem for me. Thanks for the effort!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link
href="style.css" media="screen,projection" rel="stylesheet" type="text/css"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
</head>
<body>
<div id="nav" class="overlay">
<button id="afsluiten" href="#" class="close">Afsluiten</button>
<div class="overlay__content">
Home
Profile
Images
About
Product
</div>
</div>
<button id="open" href="#" class=open"">Open Overlay</button>
<script src="overlay.js"></script>
</body>
</html>
CSS
body{
font-family: sans-serif;
}
.overlay{
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: limegreen;
overflow-x: hidden;
z-index: 5;
}
.overlay__content{
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a{
padding: 10px;
color: black;
font-size: 40px;
text-decoration: none;
display: block;
}
.overlay .close{
position: absolute;
top: 20px;
right: 50px;
font-size: 50px;
}
Javascript
var open = document.querySelector('.open');
var close = document.querySelector('.close');
open.addEventListener('click', function (ev) {
ev.preventDefault();
openOverlay();
}, false);
function openOverlay() {
document.querySelector('.nav').style.width = "100%";
}
Your line <button id="open" href="#" class=open"">Open Overlay</button> has a typo on the class name
<button id="open" href="#" class="open">Open Overlay</button>
The DOM hasn't been loaded yet. You need to put in the handler to the load event
I'm trying to make this div both draggable and resizable, however, the resizable function isn't working no matter what I try, but draggable works fine. The div is used to load a user's flash cards so they can view them in a video chat. Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script src="js/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#flash-card-div").hide();
$("#flash-card-bttn").button();
$("#draw-tool-bttn").button();
$("#document-view-bttn").button();
$("#flash-card-bttn").click(function(event) {
$("#flash-card-div").show();
$("#flash-card-div").load("/toolbarcardviewer")
});
$(function() {
$("#flash-card-div").resizable().draggable();
});
});
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
border: 1px solid #e7e7e7;
width = 100%;
}
li {
float: left;
}
#flash-card-div {
width: 300px;
height: 300px;
padding: 0.5em;
}
</style>
<link type="text/css" href="js/jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div id="toolbar">
<ul id="tools">
<li>
<button id="flash-card-bttn">Flash Cards</button>
</li>
<li>
<button id="draw-tool-bttn">Draw Tool</button>
</li>
<li>
<button id="document-view-bttn">Documents</button>
</li>
</ul>
</div>
<div id="flash-card-div" class="ui-widget-content">
</div>
</body>
</html>
How do I make both of these functions work on this page? Did I do something wrong with linking the stylesheet or something?
I am unable to replicate the issue. It's not clear what version of jQuery is being used, I am assuming v1.12.4. I tested with v3.3.1 and it seems to work properly.
I do see you are using a Custom jQuery UI download, so I would make sure it include the Resize widget.
$(function() {
$("#flash-card-div").hide();
$("#flash-card-bttn").button();
$("#draw-tool-bttn").button();
$("#document-view-bttn").button();
$("#flash-card-bttn").click(function(event) {
$("#flash-card-div").show();
$("#flash-card-div").load("/toolbarcardviewer")
});
$("#flash-card-div").resizable().draggable();
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
border: 1px solid #e7e7e7;
width=100%;
}
li {
float: left;
}
#flash-card-div {
width: 300px;
height: 300px;
padding: 0.5em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="toolbar">
<ul id="tools">
<li>
<button id="flash-card-bttn">Flash Cards</button>
</li>
<li>
<button id="draw-tool-bttn">Draw Tool</button>
</li>
<li>
<button id="document-view-bttn">Documents</button>
</li>
</ul>
</div>
<div id="flash-card-div" class="ui-widget-content">
</div>
I click the button. The Flash Card appears. I can drag it. I can resize it.
If you're still having an issue, check your console for errors. Comment with more details if you find out more.
Hope that helps.
I have already seen the docs for jquery mobile but couldn't understand how to integrate it on my mobile website. The docs are here at
http://jquerymobile.com/demos/1.2.0-pre/docs/pages/loader.html
Actually the gif image doesn't animate on 2.x android devices so I am thinking about making a text only kind of pre loading widget.
I tried changing it via css like this
.ui-icon-loading {
background: url(themes/images/custom-ajax-loader.gif);
}
but the new imag doesn't scale properly and the old background is still visible.
I am a complete noob with javascript.can someone plz help me with this?
You are mentioning the jQM 1.2 Alpha Docs so my answer is based in this jQM version.
Below you can find 2 options to change the default loader image.
Solution 1
As stated in the jQM 1.2 Alpha Docs:
When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind to mobileinit. Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
To configure the loading dialog globally the following settings can be defined on its prototype during the mobileinit event:
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});
Below you can find a working example in which you can fully customize the loader in the html prototype option.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.textonly = false;
$.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../images/my-custom-image.png' /><h2>loading</h2></span>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.loading('show');
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
Solution 2
Override the default CSS styles used to depict the page loader.
EDITED
For jQM 1.1.1 version there are the following configurable options:
loadingMessage string, default: "loading"
Set the text that appears when a page is loading. If set to false, the message will not appear at all.
loadingMessageTextVisible boolean, default: false
Whether the text should be visible when a loading message is shown. The text is always visible for loading errors.
loadingMessageTheme string, default: "a"
The theme that the loading message box uses when text is visible.
Code example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind( 'mobileinit', function(){
$.mobile.loadingMessageTheme = 'e';
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessage = "test";
});
</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.showPageLoadingMsg();
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
Furthermore you could try to override the default CSS used to style the jQM loader. More specifically you could modify or override the styles in the section loading screen and the style in the section loading icon which are used to depict the page loader.
You will find here the CSS used in jQM 1.1.1.
/* loading icon */
.ui-icon-loading {
background: url(images/ajax-loader.gif);
background-size: 46px 46px;
}
/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; }
.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
.ui-loader-verbose { width: 200px; opacity: .88; box-shadow: 0 1px 1px -1px #fff; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }
.ui-loader-textonly { padding: 15px; margin-left: -115px; }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }