Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 months ago.
Improve this question
I have this problem with the menu. When I click on the hamburger icon in the menu, the full screen menu should appear where I will insert other items. I've also set the nav and given the parameters (on and off via js too), but something doesn't make it appear for me. Could you tell me how to solve?
Thanks a lot to whoever will help me
I leave the link of my codepen: https://codepen.io/edalbe/pen/QWxYXov
$( document ).ready(function() {
var hamburger = $('#hamburger-icon');
var nav = $('.canvas');
hamburger.click(function() {
nav.toggleClass('shown');
hamburger.toggleClass('active');
return false;
});
});
body, html {
overflow: hidden;
}
body{
font-family: 'Montserrat', sans-serif;
height: 100%;
margin: 0;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0.0625em;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg/1600px-Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg");
}
.separatore{
padding-left: 5px;
padding-right: 5px;
color:black;
}
.bi-bag{
margin-right: 12px;
font-size: 20px;
color:black;
}
.bi-heart{
font-size: 20px;
color:black;
}
.bi-person{
font-size: 20px;
color:black;
}
.bi-list{
margin-right: 12px;
font-size: 25px;
color:black;
}
.minemenu a{
text-decoration: none;
color: black;
font-size: 18px;
}
#menumio{
background-color: transparent;
}
.menu{
font-family: 'Cormorant Garamond', serif;
color:black;
font-size: 23px;
}
.shop{
font-family: 'Cormorant Garamond', serif;
color: black;
font-size: 20px;
}
#media(max-width:550px){
.nascondi{
display: none!important;
}
.minemenu a{
font-size: 16px;
line-height: 3px;
}
}
.canvas{
top: -50px;
left: 0;
width: 100%;
height: 100%;
display: block;
background: red;
position: fixed;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: all 0.2s;
}
.canvas.shown {
top: 0;
opacity: 1;
max-height: none
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Example</title>
<!--BOOTSTRAP-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css">
<!--MYSTILE-->
<link href="style.css" rel="stylesheet" type="text/css">
<!--GOOGLE FONT-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=La+Belle+Aurore&family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<nav id="menumio">
<div class="container text-center minemenu">
<nav class="canvas"></nav>
<div class="row">
<div class="col-4 d-flex">
<a id="hamburger-icon" href="#"><i class="bi bi-list"></i></a><span class="menu"><i>Menù</i></span>
</div>
<div class="col-4">
<font style="font-weight: 600;">Brand</font> Name
</div>
<div class="col-4 d-flex justify-content-end">
<i class="bi bi-bag"></i><span class="shop"><i>Shop</i></span>
<span class="separatore nascondi">|</span>
<i class="bi bi-person mx-1 nascondi"></i>
<span class="separatore nascondi">|</span>
<i class="bi bi-heart mx-1 nascondi"></i>
</div>
</div>
</div>
</nav>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
</body>
</html>
Related
This question already has answers here:
load and execute order of scripts
(6 answers)
Closed 1 year ago.
I've been making an Accordion-style FAQ for a website I'm building. I imported the JavaScript code and linked it to the main HTML file to make the motion of popping out the FAQ below when it is clicked. Unfortunately, it is not working for some reason, no matter if I place script directly in the HTML file or link the script file externally. Could someone let me know where it is going wrong? Thank you very much!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="icon" href="https://drive.google.com/uc?id=15DKhs1-y_c6C5TXfbQ1es1cJYwItjKkQ" sizes="32x32" type="image/png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">.
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="app.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<body>
<div id="faq">
<div class="faq-title">FAQ</div>
<button class="accordion">Question 1</button>
<div class="panel">
<p>Answer 1</p>
</div>
<button class="accordion">Question 2</button>
<div class="panel">
<p>Answer 2</p>
</div>
<button class="accordion">Question 3</button>
<div class="panel">
<p>Answer 3</p>
</div>
</body>
</html>
And below is the CSS I've used.
/* FAQ */
.faq-title {
text-align: left;
font-family: 'Poppins', sans-serif;
font-size: 40px;
margin-left: 6vw;
margin-top: 10vh;
margin-bottom: 7vh;
font-weight: bold;
color: black;
}
.accordion {
background-color: #ffe3c9;
font-family: 'Poppins', sans-serif;
color: #444;
font-size: 20px;
cursor: pointer;
padding: 25px;
margin-left: 5vw;
margin-right: 5vw;
margin-bottom: 1vh;
width: 90%;
text-align: left;
border: none;
border-radius: 10px;
outline: none;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #FF8718;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion:after {
padding-top: 0.5vh;
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #FF8718;
float: right;
margin-left: 5px;
}
.active:after {
padding-top: 1vh;
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
Now comes the JS in the script.js file:
/* FAQ ACCORDION STYLE */
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
Please move the tag at the end of tag or after tag.
Like this.
...
<script src="app.js"></script>
</body>
or
...
</body>
<script src="app.js"></script>
I tried add a backgound image for my django web site and it didn't work at all.I use this answer from stackoverflow as well stackoverflow question link.but it didn't work.and also I migrate changes to database.I try to add background image as in css method background-image: url("images/background.png"); .and it didn't work either.If you know way to fix this or know another method to do this please kindly lt me know that
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Dinindu Theekshana</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
<td class="tdStyle">
<style>
body {
font-family: "Roboto", sans-serif;
font-size: 17px;
}
.tdStyle{
background-image:url('{{ STATIC_URL }}images/sample.JPG');
background-repeat:no-repeat;
background-size:100%;
}
.shadow{
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1);
}
.btn-danger {
color: #fff;
background-color: #f00000;
border-color: #dc281e;
}
.masthead {
background:#3398E1;
height: auto;
padding-bottom: 15px;
box-shadow: 0 16px 48px #E3E7EB;
padding-top: 10px;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar {
overflow: hidden;
background-color: #333;
color: #333;
z-index: 9999999;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #294bc5;
color: white;
}
.content {
padding: 16px;
padding-top: 50px;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
</style>
<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow" id="mainNav">
<div id="navbar">
<a class="active" href="{% url 'home' %}">Home</a>
News
Contact
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</nav>
{% block content %}
<!-- Content Goes here -->
{% endblock content %}
<!-- Footer -->
<footer class="py-3 bg-grey">
<p class="m-0 text-dark text-center ">Copyright © Dinindu Theekshana</p>
</footer>
</body>
</html>
In Django you add the URLs when you render the page. So for your links in your navbar it would look like this:
<a class="active" href="{% url 'home' %}">Home</a>
News
Contact
you will then need to write views for these pages and add them to your urls.py.
I found a way to do it first you have to go your setting.py file and add this code STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'templates').replace('\\','/'), ] After that open your base.html file and try this.hope it works.If you need more info go with this article
`{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Dinindu Theekshana</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
<style>
body {
font-family: "Roboto", sans-serif;
font-size: 17px;
background-image: url("{% static "images/sun-pattern.png" %}");
}
.shadow{
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1);
}
.btn-danger {
color: #fff;
background-color: #f00000;
border-color: #dc281e;
}
.masthead {
background:#3398E1;
height: auto;
padding-bottom: 15px;
box-shadow: 0 16px 48px #E3E7EB;
padding-top: 10px;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar {
overflow: hidden;
background-color: #333;
color: #333;
z-index: 9999999;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #294bc5;
color: white;
}
.content {
padding: 16px;
padding-top: 50px;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
</style>
<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow" id="mainNav">
<div id="navbar">
<a class="active" href="{% url 'home' %}">Home</a>
News
Contact
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</nav>
{% block content %}
<!-- Content Goes here -->
{% endblock content %}
<!-- Footer -->
<footer class="py-3 bg-grey">
<p class="m-0 text-dark text-center ">Copyright © Dinindu Theekshana</p>
</footer>
</body>
</html>
`
I have a clearfix in my style.css and everything worked fine on other projects. All of a sudden there is a gap appearing in my browser, causing the div container move approx. 20px down, and I don't know what I do wrong here?
My code runs good in JS Fiddle I think. Therefore I put a picture in it where you can see the not wanted 20px "top - margin". What might be causing this?
Edit
I've found the issue. it was the h1 tag. If you replace h1 in both, html and css, with the p tag, it works perfectly fine after setting the p margin to 0. But why is this?
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Lobster|Raleway:300,400,500,700" rel="stylesheet">
<!--CSS-Font : font-family: 'Lobster', cursive;
font-family: 'Raleway', sans-serif; -->
<title>Appearence</title>
</head>
<div class="container">
<body>
<div class="main-header background-color clearfix">
<header id="main-header-top" class=" ">
<div class="logo-title ">
<h1>Operation<span>Mars</span>.com</h1>
</div>
</header>
</div>
</body>
<!--body-end-->
<footer>
</footer>
</div>
</html>
* {
margin: 0;
padding: 0;
font-family: 'Dosis', sans-serif;
}
body {
margin: 0;
padding: 0;
}
html,
body{
position:relative;
}
.main-header{
width: 100%;
height: 100px;
}
.background-color{
background-color: black;
}
.logo-title {
width: 400px;
height: auto;
left: 50%;
position: relative;
margin-left: -200px;
}
.logo-title a{
text-align: center;
text-decoration: none;
}
.logo-title a h1{
font-size: 60px;
text-decoration: none;
color: white;
font-family: 'Lobster', cursive;
}
.logo-title a h1 span{
color:#ff7256;
font-family: 'Lobster', cursive;
font-size: 70px;
}
/*clearfix*/
.clearfix:before,
.clearfix:after { /*Inhalt hinzufügen*/
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
try this.
* {
margin: 0;
padding: 0;
font-family: 'Dosis', sans-serif;
}
body {
margin: 0;
padding: 0;
}
html,
body{
position:relative;
}
.main-header{
width: 100%;
height: 100px;
}
.background-color{
background-color: black;
}
.logo-title {
width: 100%;
height: auto;
}
.logo-title a{
text-align: center;
text-decoration: none;
left: 50%;
position: absolute;
transform:translateX(-50%);
}
.logo-title a h1{
font-size: 60px;
text-decoration: none;
color: white;
font-family: 'Lobster', cursive;
}
.logo-title a h1 span{
color:#ff7256;
font-family: 'Lobster', cursive;
font-size: 70px;
}
/*clearfix*/
.clearfix:before,
.clearfix:after { /*Inhalt hinzufügen*/
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Lobster|Raleway:300,400,500,700" rel="stylesheet">
<!--CSS-Font : font-family: 'Lobster', cursive;
font-family: 'Raleway', sans-serif; -->
<title>Appearence</title>
</head>
<div class="container">
<body>
<div class="main-header background-color clearfix">
<header id="main-header-top" class=" ">
<div class="logo-title ">
<h1>Operation<span>Mars</span>.com</h1>
</div>
</header>
</div>
</body>
<!--body-end-->
<footer>
</footer>
</div>
</html>
So, I can run this on Firefox and it works just fine. But when running this on Chrome, I'm getting a loading icon which keeps just 'loading'.
Like this: http://prntscr.com/8erab4
On Firefox the result is just great, example: http://weveloped.com/app
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>HorizonApp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="custom.css" />
</head>
<body>
<!--Welcoming Page-->
<div data-role="page" id="homepage">
<div data-role="header" class="header">
<i class="fa fa-bars left"></i>
<h1>Horizon GPD</h1>
<i class="fa fa-home right"></i>
</div>
<div data-role="main" class="ui-content">
<div data-role="panel" data-position="left" data-display="overlay" id="panel">
<div class="sideMenu">
<ul>
<li class="navTitle">Tijden</li>
<li>van 09:00 tot 11:00</li>
<li>van 11:30 tot 13:00</li>
<li>van 13:30 tot 15:00</li>
</ul>
</div>
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>
CSS CODE:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
body {
font-family: 'Open Sans', sans serif;
}
/* Header */
.header {
height: 40px;
border: none;
}
.ui-page .ui-header {
background-color: #013378;
color: #FFF;
text-shadow: none;
}
.header a i {
font-size: 24px;
color: #FC7C00;
margin-top: 5px;
}
.header a i.left {
margin-left: 5px;
}
.header a i.right {
margin-right: 5px;
}
.header a:hover > i {
color: #FFF;
}
/* Side Menu */
.sideMenu, .sideMenu ul {
padding: 0; margin: 0;
text-shadow: none;
}
.sideMenu ul {
list-style-type: none;
position: relative;
}
.sideMenu ul li.navTitle {
height: 40px; line-height: 40px;
background-color: #FC7C00;
color: #FFF;
font-weight:700;
text-align: center;
}
.sideMenu ul li {
display: block;
}
.sideMenu ul li a {
height: 40px; line-height: 40px;
padding-left: 10px;
color: #222;
text-decoration: none;
display: block;
}
.sideMenu ul li a:hover {
color: #FFF;
background-color: rgba(1, 51, 120, 0.8);
}
.ui-panel-inner {
padding: 0; margin: 0;
}
Install WampServer on your computer, copy the folder of your project in c:\wamp\www\ , turn on the local server and run your jQuery Mobile page (localhost/folder-of-your-project/jquery-mobile-page).
You need a local server to run any jquery mobile page in Chrome
Regards
I have a page like below in Picture 1 but when i click to print that page its not showing properly on the print page.
js:
$("#printBtn").click(function(){
printcontent($("#YearWise").html());
});
function printcontent(content)
{
var mywindow = window.open('', '', '');
mywindow.document.write('<html><title>Print</title><body>');
mywindow.document.write(content);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.print();
return true;
}
html:
<button id="printBtn">Click Print</button>
<div id="YearWise" style="display: none">
<p style="position: absolute; color: rgb(172, 166, 166); font-family: calibri; font-size: 25px; font-variant: small-caps; font-weight: 100; margin-left: 514px; padding-top: 75px;">Report</p>
<span style="position: absolute; color: rgb(138, 138, 138); font-family: calibri; font-size: 31px; font-variant: small-caps; margin-left: 466px; padding-top: 42px;">Year Wise</span>
<div id="main" style="display: block; background-color: rgb(228, 228, 228)"
<input id="ChangeYear" class="date-pickerY" style="text-transform:uppercase; font-family: calibri; font-size: 18px; margin-top: -135px; margin-left: 416px; width: 160px; height: 24px; border: 1px solid #717271; color: rgb(68, 68, 68); padding-left: 6px" />
<img style="margin-left: -32px; margin-top: -134px; cursor: pointer; height: 28px;" src="../../img/Date.png" onClick="OpenDatePicker('ChangeYear')"/>
<ul id="holder" style="height: 785px; width: 1059px; margin-left: -25px; margin-top: -32px; margin-right: -26px; border-radius: 0px;">
<li style="width: 1021px; height: 981px; background-color: whitesmoke; border-radius: 0px; margin-top: 5px; margin-left: 0px; margin-right: 0px; padding-bottom: 94px;">
<br>
<div id="YearTable">
<div class="block">
</div>
</div>
</li>
</ul>
</div>
</div>
I provide a jsfiddle for the demo. If you people can help that would be really appreciated.
Jsfiddle
issue now:
I suppose your css styles are not included in content, create a css file, write all your inline styles in it and include it as document.write("<link rel="stylesheet" href="" />");
This line has a syntax error:
mywindow.document.write("<link rel="stylesheet" type="text/css" href="yourpath\style.css" />");
change it to this:
mywindow.document.write('<link rel="stylesheet" type="text/css" href="yourpath\style.css" />');
or do the proper escaping
mywindow.document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"yourpath\style.css\" />");
OR
simply include a style sheet containing all your inline styles for print content and include it as
<link rel="stylesheet" type="text/css" href="style.css" media="print">
If I explain in simple words
<link rel="stylesheet" type="text/css" href="main.css"> // this css will be used on page
<link rel="stylesheet" type="text/css" href="style.css" media="print"> // this css will be used if you try to print your page