I'm trying to display a sidebar that can be toggled on and off, I have a navbar at the top that contains a tag with the id="toggle" for which I added an eventListener (which waits for the HTML to be loaded before running the javascript code) and a corresponding function that should collapse/expand the side menu. However when I try to run the code nothing happens. Any help would be great!
Here is my HTML:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}"/>
<script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
</head>
<body>
<!-- navbar -->
<div id="navbar">
☰ Menu
Forget me
</div>
<!-- sidebar -->
<div id="mySidenav" class="sidenav">
About
{% for room in chatroom %}
{{ room }}
{% endfor %}
</div>
<body>
</html>
And the js file, which is in the 'static' folder:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("toggle").onclick = function() {
var sidebar = document.getElementById("mySidenav");
if (sidebar.style.width === "250px") {
sidebar.style.width = "0";
} else {
sidebar.style.width = "250px";
}
};
});
I see two issues without testing any code:
Your closing body tag needs to be </body>, and;
The toggle link will navigate away from the page, and you will need to prevent this. You can do so by changing the toggle element to a button type="button", or adding preventDefault() into your click handler Javascript.
Related
I need to know how to activate font-weight on the page (I'm using JavaScript).
Example: If I'm on the teachers page, the <a> Teachers </a> font-weight should be bold like shown in image below.
<!DOCTYPE html>
<html>
<head>
{% block head %}
<title>Private Classes</title>
{% endblock %}
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<header>
<div class="links">
Teachers
Students
</div>
</header>
{% block content %}
{% endblock %}
</body>
</html>
You are on teachers page and 'active' class is already there so no need to use javascript for it.
Simply adding font weight to the 'active' class is enough.
<style>
.active{
font-weight: bold;
}
</style>
const currentPage = location.pathname
const menuItems = document.querySelectorAll("header .links a")
for (item of menuItems) {
if (currentPage.includes(item.getAttribute("href"))) {
item.classList.add("active")
}
}
When I click on a button, the color of the button changes correctly. However, when you click on a button, it redirects to an app route. How can I make the color from clicking on the button still remain after the page loads?
base.html:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
{% block head %}
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{{ url_for('static', filename='js/button_click.js') }}" type="text/javascript"
charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/dashboard.css') }}">
<title>{% block title %}{% endblock %}</title>
{% endblock %}
</head>
<body>
{% block content %}
<div class="navbar">
<div class="logo-holder">
<img class="logo" src="{{ url_for('static', filename='img/logo.png') }}" alt="Logo">
</div>
<div class="button-holder">
<button class="navbtn" id="orange-btn" onclick="window.location = '/orange';">Orange</button>
</div>
<div class="button-holder">
<button class="navbtn" id="banana-btn" onclick="window.location = '/banana';">Banana</button>
</div>
<div class="button-holder">
<button class="navbtn" id="apple-btn" onclick="window.location = '/apple';">Apple</button>
</div>
</div>
{% endblock %}
</body>
</html>
button_click.js:
$('.button-holder').click( function () {
$(this).toggleClass('active_button');
});
dashboard.css:
.button-holder:active, .active_button {
background-color: #992200;
}
Since you're on a new page, you need to identify which page you're on and activate the appropriate button.
window.onOpen = function () {
const thisURL = window.location;
if (thisURL.includes('/orange') {
document.getElementById('orange-btn').classList.add('active-class');
}
/* and so forth for the other buttons */
}
You can add a value to the localStorage and then on new page check it and assign to the button again. Also please note that localstorage saved your clicked button value only for your device, not globally.
Besides, please change to anchor tag if you want to use links.
Try like this:
HTML:
<div class="button-holder">
Orange
</div>
<div class="button-holder">
Banana
</div>
<div class="button-holder">
<a href="/apple" class="navbtn" id="apple-btn" >Apple</a>
</div>
JS:
$(function(){
var button_index = localStorage.getItem('button_index');
if(button_index ){
$('.button-holder').eq(button_index).addClass('active_button');
}
$('.button-holder').click( function (e) {
e.preventDefault();
var url = window.location + $(this).find("a").attr('href');
var button_index = $(this).index();
$(this).toggleClass('active_button');
localStorage.setItem('button_index', button_index - 1 );
window.location = url;
});
})
This question already has answers here:
Toggle between two stylesheets
(7 answers)
Closed 3 years ago.
Trying various answers on "toggle theme with button", I have code, but it is not working
from bootstrap 4, bootswatch themes 'flatly' and 'darkly' have been selected, since I want to offer user of my web page option to select his/her favorite theme
I have put complete 'flatly.min.css' and 'darkly.min.css' into my static files folder (django project), and renamed them to 'light.css' and 'dark.css'
I tried various answers from stack exchange, and currently I use this one:
create switch for changing theme intead of browser page style html
My base.html:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
...
{% include 'base/css.html' %}
{% block base_head %}
{% endblock %}
</head>
<body>
...
{% include 'base/js.html' %}
{% block javascript %}
{% endblock %}
</body>
My css.html:
<!-- custom styling -->
<link rel="stylesheet"
href="{% static 'css/base.css' %}">
<!-- light styling -->
<link rel="stylesheet alternate"
id="theme"
href="{% static 'css/light.css' %}">
<!-- dark styling -->
<link rel="stylesheet alternate"
id="theme"
href="{% static 'css/dark.css' %}">
When I use only 'css/dark.css' (no 'css/light.css' link is declared), I get my page to render dark; if I change to 'css/light.css' (no 'css/dark.css' is declared), page renders light theme.
My js.html:
...
<script src="{% static 'js/ecommerce.sales.js' %}"></script>
<!-- toggle theme js -->
<script src="{% static 'js/toggle_theme.js' %}"></script>
toggle_theme.js says:
console.log('now what') // works at django runserver first run
document.getElementById('toggle-theme').onClick = function() {
console.log('js works'); // not working, js is not run on click
if (document.getElementById('theme').href == "{% static 'css/dark.css' %}") {
document.getElementById('theme').href = "{% static 'css/light.css' %}";
} else {
document.getElementById('theme').href = "{% static 'css/dark.css' %}";
}
}
The button I want to use in the navbar:
<!-- todo: toggle theme -->
<div class="nav-item mx-auto my-auto">
<!-- href="#" -->
<!-- <a class="nav-link dark-theme" -->
<a class="nav-link"
id="toggle-theme"
title="toggle theme">
<!-- id="toggle-theme" -->
<i class="fas fa-lg fa-square"
aria-hidden="true">
<!-- <script src="{% static 'js/toggle_theme.js' %}"></script> -->
</i> </a>
</div>
I did usual django stuff, 'python manage.py collectstatic' and Ctrl-F5 to refresh the development browser. What am I missing here?
Thank you for your help
EDIT:
Although above link to "Toggle between two stylesheets" did solved my issue, it is not complete, because on refresh the theme is set back to default theme. My complete solution is (dark is my default theme):
if (document.getElementById('theme')) {
if (localStorage) {
// console.log('storidge');
if (!localStorage.getItem('theme')) {
localStorage.setItem('theme', 'dark');
} else {
if (localStorage.getItem('theme') == 'dark') {
$("link[id='theme']").attr('href', '/static/css/dark.css');
} else if (localStorage.getItem('theme') == 'light') {
$("link[id='theme']").attr('href', '/static/css/light.css');
}
}
}
}
$('#toggle-theme').click(function() {
if ($("link[id='theme']").attr('href') == '/static/css/dark.css') {
$("link[id='theme']").attr('href', '/static/css/light.css');
localStorage.setItem('theme', 'light');
console.log('changed to light.css');
} else {
$("link[id='theme']").attr('href', '/static/css/dark.css');
localStorage.setItem('theme', 'dark');
console.log('changed to dark.css');
}
});
I do experience some page twinkling at refresh (F5), if light theme is set, but I will have to live with this for now. Dark theme works without twinkling.
Best regards,
Simon
S love nia
Have you tried changing document.getElementById('toggle-theme').onClick = function() { to document.getElementById('toggle-theme').onclick = function() {?
No guarantee that's the only issue, but onclick should be all lower case, and if the initial click isn't being recognized that might be your problem.
Ok, when I refresh my page, and view page source, I get:
<!-- light styling -->
<link rel="stylesheet"
id="theme"
href="/static/css/light.css">
<!-- dark styling -->
<link rel="stylesheet"
id="theme"
href="/static/css/dark.css">
If I inspect elements, I get the same code. Then I click my toggle-button, and view page source, the code stays the same, but when I inspect elements, I get:
<!-- light styling -->
<link rel="stylesheet"
id="theme"
href="/static/css/dark.css">
<!-- dark styling -->
<link rel="stylesheet"
id="theme"
href="/static/css/dark.css">
Both href are "/static/css/dark.css".
So, the code works, but not as expected. This tells me this is not a code to use. Will continue my search.
I have been having so many problems with getting my JQuery to load properly. I have looked at youtube videos and scoured Google but nothing seems to work :(
The most common problem with JQuery not being loaded properly is that people load the js file BEFORE the JQuery, but I have loaded it in the correct order and I am still having problems.
Before, I was able to run my feature that used JQuery only locally, but now even that isn't working.
Here is my index.html file:
<!DOCTYPE html>
<html>
<head>
<title> Website </title>
<link rel = "stylesheet" href="style.css" /> <!-- Link to css -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"> </script> <!-- link to js AFTER JQuery-->
`
<!-- Import Fonts to Use -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Muli" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto" />
</head>
<body>
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Works</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
<span class="bar-top"></span>
</div>
</section>
</body>
</html>
I have a css file named "style.css"
This is my js file titled "script.js"
$('.open-overlay').click(function() {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
})
ANY help would be appreciated!! Thank you!!
here is what it shows:
Your js files should go at the bottom of the body. You are referencing dom elements in your js that do not exist yet because they have not been loaded in the markup.
Move your jquery and js references to the bottom of the body
My first PhoneGap application includes 2 HTML files.
The first one is named index.html which uses index.js. This file will display a list item. When I click an item in that list, it brings me to detail.html file by this:
$.mobile.changePage("detail.html", { transition: "slideup"});
OR
location.href = "detail.html";
On the detail.html page, I load detal.js. However it did not work. I could not use functions in detail.js.
Please give me your advise and there are any example ?
Capture Photo
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="css/getAbstract.min.css" />
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>
<script src="js/jquery.ba-dotimeout.js"></script>
<script src="js/jquery.dst.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div data-role = "page" data-theme = "a" id = "pageContainer">
<!--Start Page Header -->
<div data-role = "header" id = "pageHeader" data-nobackbtn = "true" data-position = "fixed">
<h1>Camera</h1>
</div>
<!--End Page Header -->
<!--Start Page Content-->
<div data-role = "content" id= "pageContent">
<a data-role = "button" id = "btnCaptureEdit" href = "">Capture Edit</a>
<a data-role = "button" id = "btnLibraryPhoto" href = "">Get Photo From Library</a>
<a data-role = "button" id = "btnAlbumPhoto" href = "">Get Photo From Album</a>
</div>
<!--End Page Content-->
<!--Start Page Footer-->
<div data-role = "footer" id = "pageFooter">
</div>
<!--End Page Footer-->
</div>
<script src="js/detail.js"></script>
</body>
</html>
If this is your detail.html I don't see where do you load detail.js?
Maybe this
<script src="js/index.js"></script>
should be this
<script src="js/detail.js"></script>
?
I had the same problem, and found the answer.
If you use node.js with express, you need to give it its own function in order for the js file to be reached.
For example:
const script = path.join(__dirname, 'script.js');
const server = express().get('/', (req, res) => res.sendFile(script))