I have header.html and footer.html in root .my main page is in the folder "MainPages".I use script to call header.html and footer.html.
but I can not see Header.html and footer.html when I double click on the the page .
here is my folders and my Mainpage("bio.html")(bio.html is in the MainPages"folder).
<head>
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/normalize.min.css" rel="stylesheet" />
<link href="../Content/font-awesome.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.10.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<link href="../Content/css/animate.css" rel="stylesheet" />
<script src="../Scripts/modernizr-2.6.2.min.js"></script>
<script src="../Scripts/revealOnscroll.js"></script>
<link href="../Content/ava.css" rel="stylesheet" />
<script>
$(function () {
$("#Header").load("../Header.html");
});
</script>
<script>
$(function () {
$("#Footer").load("../Footer.html");
});
</script>
</head>
<body style="background-image: url(../images/sample_bg.jpg);">
<!--header-part-->
<div id="Header"></div>
<br /><br /><br /><br /><br /><br /><br /><br />
<div class=" container-fluid col-md-offset-2 row col-md-8 col-md-offset-2 "
style=" font-family: Mitra;background-image:url(../images/bio/bio-2.jpg);background-size:500px,500px;
background-repeat: no-repeat;background-position-x:right;background-position-y:top;
background-color:#fff ;clear:none;padding: 0px;">
<div class="container-fluid ">
<div class="row ">
<div class=" col-md-offset-1 col-md-9 ">
<div class="row">
<div class="bio-contex-1">
<span>
this is my main page for testing
</span>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
<!--footer-->
<div id="Footer"></div>
</body>
</html>
You need to run a local webserver, as you might be getting problems loading file in jquery underfile:///
Set up a webserver and then try to load them again.
Use npm : http-server
change ../ to /
e.g
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
Related
```
<html>
<head>
<link rel="stylesheet" href="http://serversamuel.altervista.org/prototipi/css/1.css">
<link rel="stylesheet" href="http://serversamuel.altervista.org/prototipi/css/2.css">
<link rel="stylesheet" href="http://serversamuel.altervista.org/prototipi/css/3.css">
</head>
<body>
<div id="none" style="display:none;">
<div class="chat">
<div class="chat-title">
<h1>Fabio Ottaviani</h1> ×
<h2>Supah</h2>
<figure class="avatar">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156381/profile/profile-80.jpg"></figure>
</div>
<div class="messages" style="overflow-y:scroll;scrollbar-width: none;">
<?php include 'commentinuovo.php';?>
<div class="messages-content"></div>
</div>
<form method="POST" action="config.php">
<div class="messages-content"></div>
<div class="message-box">
<textarea type="text" class="message-input" placeholder="Type message..." name="text"></textarea>
<input type="submit" name="submit" onsubmit="setTimeout(function () { window.location.reload(); }, 10)" id="button" >
</div>
</form>
</div>
<div class="bg"></div>
</div>
</body>
</html>
```
when I click the submit button it does its job, but there is a way to make the page reload when clicked and the form display remains empty??
so when I click both I reload the page and leave #none opened
I'm working on a class project that required me to code a website that sells something. I'm trying to create the shopping cart so that when I click add to cart it should add the product. However, when I added in a bootstrap link my page becomes white. Is the bootstrap the problem or is it something wrong with my code?
My first time using this site so I'm not sure if this is all I need to post. If any other code is required (like the js) just ask. Thank you in advance.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Printing Prime</title>
<link rel="icon" type="image/png" href="img/favi.png">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
<link rel="stylesheet" href="css\splitslick\style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
(problem***)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<section id="" class="container-fluid cart">
<article id="" class="col">
<span class="open-modal">
<i id="carts" class="fa fa-shopping-cart" data-toggle="modal" data-target="#cart"></i>
</span>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="mask"></div>
<div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cart</h5>
</div>
<div class="modal-body">
<table class="show-cart table">
</table>
<div>Total price: $<span class="total-cart"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Order now</button>
</div>
</div>
</div>
</div>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<nav class="navi">
<ul class="list">
<li>PRODUCTS</li>
<li>REVIEWS</li>
<li style="padding: 10px; margin: 10px;"><img src="img/ppppp.png" id="logo"></li>
<li>CONTACT</li>
<li>ABOUT US</li>
</ul>
</nav>
</div>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<div class="split-slideshow">
<div class="slideshow">
<div class="slider">
<div class="item">
<img src="img/banner1.png" />
</div>
<div class="item">
<img src="img/banner2.png" />
</div>
<div class="item">
<img src="https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-blue-gradient-pattern-overlay-background-banner-image_50591.jpg" />
</div>
<div class="item">
<img src="img/banner4.jpeg" />
</div>
</div>
</div>
<div class="slideshow-text">
<div class="item">PRINTING PRIME</div>
<div class="item">PRODUCTS</div>
<div class="item">THREE</div>
<div class="item">ABOUT US</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
<script src="js/splitslick/js/index.js"></script>
</div>
</article>
</section>
<!-- <section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<div class="col-md-6">
</div>
<div clas="col-md-6">
<div class="col-lg-12">
</div>
</article>
</section> -->
<section id="products" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12 product-grid">
<div class="col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 15vw;" src="img/hat1.png" alt="Avatar">
<h5 style="color:white;">Sad Face Cap</h5>
<h5 style="color:white;">$12.99</h5>
<div>
<input type="number" placeholder="# of items">
Add to cart
</div>
</div>
</div>
</div>
</div>
<div class="col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 15vw;" src="img/shirt1.png" alt="Avatar">
<h5 style="color:white;">Signature Tee</h5>
<div>
<input type="number" placeholder="# of items">
<input type="submit" value="Add To Cart" id="submit">
</div>
</div>
</div>
</div>
</div>
<div class=" col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 14vw;" src="img/hoodie1.png" alt="Avatar" >
<h5 style="color:white;">VHS Hoodie</h5>
<div>
<input type="number" placeholder="# of items" >
<input type="submit" value="Add To Cart" id="submit">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
There appear to be a few problems with the files you link:
You appear to have four different jQuery versions included (3.4.1, 2.1.3, 3.1.0 and slim). You only need one reference to jQuery (making sure it is referenced before Bootstrap). Having multiple references will throw errors.
You also appear to reference Bootstrap twice (once from the CDN at the end of your <head>, and once at the start of your <head> with a local reference). Multiple Bootstrap references will also likely throw errors.
You also appear to be missing a reference to PopperJS, which is a required dependency of Bootstrap 4.
css\splitslick\style.css is referenced with backslashes; you'll want forrward slashes.
Your local script.js and style.css come before Bootstrap's JS and CSS, which means that Bootstrap will overwrite your own code; you'll want your code to be loaded last.
Removing these additional references, and making sure that Bootstrap
comes after jQuery, PopperJS and Tether should fix your problem. Shifting your own JavaScript and CSS to the bottom of each respective section should cause it to override any conflicting Bootstrap code.
Here's a modified <head> that should work. Take note of the following order:
Bootstrap 4 CSS -> Plugins -> Fonts -> Custom CSS
jQuery -> PopperJS -> Tether -> Bootstrap 4 JS -> Custom JS
<head>
<meta charset="utf-8">
<title>Printing Prime</title>
<link rel="icon" type="image/png" href="img/favi.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/splitslick/style.css">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</head>
I can not get the values from an HTML page using document.getElementById ("ID"),is returning Null, in all the rest of the code everything works perfectly
Something so simple is driving me crazy, because in other parts of the code identically everything works perfectly
HTML:
<div id="childTemplateNotice" class="col-md-12">
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
JavaScript:
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
HTML INDEX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="notice.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/coments/coments.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/header/header.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/footer/footer.css" media="screen" />
<!-- Bootstrap e Jquery -->
<link rel="stylesheet" type="text/css" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" media="screen" />
</head>
<body>
<div class="col-md-12">
<?php include "../../components/header/header.html"; ?>
<div id="noticeFather"class=" col-md-12">
<div class="ads col-md-12 top">
</div>
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
</div>
<div class="row">
<div class="right col-md-3"></div>
<div class="midle col-md-6">
<p class="body"></p>
<span class="linkTitle"></span>
<a class="linkUrl"></a>
<!-- Coments -->
<div class="comentsDiv col-md-12">
</div>
</div>
<div class="left col-md-3"></div>
</div>
</div>
</div>
<div class="col-md-12">
<?php include "../../components/coments/coments.html" ?>
</div>
<?php include "../../components/footer/footer.html"; ?>
</div>
<!-- Scripts js -->
<script type="text/javascript" src="../../node_modules/moment/min/moment.min.js"></script>
<script type="text/javascript" src="../../node_modules/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../components/header/header.js"> </script>
<script type="text/javascript" src="../../service/esmiucado-service.js"></script>
<script type="text/javascript" src="../../repositorio/repositorio.js"> </script>
<!-- Requisição DataBase -->
<script>
postNotice()
getComents(noticeCod)
</script>
</body>
</html>
I already try:
$(document).ready(function() {
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
});
and:
window.onload = function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
and they did not work
OBS: the files javascript and html are in different directories
UPDATE:
When I call the function of another page everything works fine, so the problem is when I call this specific page, but I have not yet identified which problem
in document.ready function either remove the function inside it or call the function. First one is also working fine you just have to call the function. window.onload is working perfectly
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
postNotice();
$(document).ready(function() {
console.log(document.getElementById('childTemplateNotice'))
});
window.onload = function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="childTemplateNotice" class="col-md-12">
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
The problem was happening simply because I was not calling the html element on the main page.
I stuck into this problem. My separate header and footer only show after the data in js file is completely fetched. When the data is loading, I can see the input (search image) and another text input but I can't see the header and footer. Any suggestion for getting the header and footer first before executing js file?
Thanks.
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script>
$(function(){
$("#header").load("../header/index.html");
$("#footer").load("../footer/index.html");
});
</script>
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
</head>
<body>
<div id="header"></div>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<div id="footer"></div>
<script src="./main.js"></script>
</body>
</html>
Header file
<link rel="stylesheet" href="./style.css">
<header>
<div class="container">
<div id="branding">
<img src="../img/icon.png" height="40" width="160"/>
</div>
<nav>
<img src="../img/firstFlag.png" height="20" width="30"/>
<img src="../img/secondFlag.png" height="20" width="30"/>
</nav>
</div>
</header>
Give this a try:
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
</head>
<body style="display: none">
<div id="header"></div>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<div id="footer"></div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="./main.js"></script>
<script>
$(function(){
$("#header").load("../header/index.html", function (){
$("#footer").load("../footer/index.html", function() {
$("body").fadeIn(1000);
});
});
});
</script>
</body>
if load method is sync, then try change your html structure like this :
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body style="display: none">
<div id="header"></div>
<div id="footer"></div>
<script>
$("#header").load("../header/index.html");
$("#footer").load("../footer/index.html");
</script>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<script src="./main.js"></script>
</body>
New to JQuery and web dev in general.
I have been trying to get the confirm override simplemodal demo to work, so that it pops up with on alert on initial load of my site.
The below is the standard sample, but I have included the $(document).ready() function to try and fire the modal dialog on startup.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#confirm-dialog').modal();
});
</script>
</head>
<body>
<div id='container'>
<div id='content'>
<div id='confirm-dialog'>
<input type='button' name='confirm' class='confirm' value='Demo'/>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
</div>
</div>
</body>
</html>
However, this does not fire, and from what my limited experience with Firebug, I cannot see any errors so must be my code logic that is the issue?
It works for me in JSFiddle. What about using .dialog method of jquery UI library:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.ui.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#confirm-dialog').dialog({modal: true});
});
</script>
</head>
<body>
<div id='container'>
<div id='content'>
<div id='confirm-dialog'>
<input type='button' name='confirm' class='confirm' value='Demo'/>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
</div>
</div>
</body>
</html>
You can download jquery.ui file from here