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")
}
}
Related
I've got this base.html from which other html documents extend
base.html
<!DOCTYPE html>
<html>
<head>
<--!some css links and jquery source headers-->
<style>
{% block style %}
.container{
position: relative;
}
{% endblock style %}
</style>
</head>
<body>
<div class="container">
{% block breadcrumb %}{% endblock breadcrumb %}
{% block content %}{% endblock content %}
</div>
</body>
<script type="text/JavaScript">
{% block script %}
var imgName = "{% url 'img_file.png' %}";
document.body.style.backgroundImage = "url('"+ imgName.src +"')";
{% endblock script %}
</script>
<\html>
a document that extends from base.html
index.html
{% extends 'base.html' %}
{% block breadcrumb %}
<div class="nav nav-bar nav-bar-dark>
some link
</div>
{% endblock %}
{% block content %}
<form action="view-url" method="post">
{{ form }}
<input type="submit" class="btn" value"Submit">
</form>
{% endblock %}
the submit input works well but the link (to some url) seems to be disabled. When I remove the background image from the base.html, the link works just fine. Any help on what I'm missing here please ,
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;
});
})
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.
I have an issue. I could not trigger the onclick event on the link using Django and Python. I am providing my code below.
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{% load static %}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var query='';
function pageTransition(){
var full_url = window.location.search;
var url = full_url.replace("?", '');
query=url.file;
console.log('query',query);
var url="'"+query+"'";
$.getScript(url,function(){
$('a').velocity("scroll", { duration: 1000 });
})
}
</script>
</head>
<body>
<header>
<h1>Nuclear Reactor</h1>
{% if count > 0 %}
<b>Hi, {{ user.username }}</b>
Home
View Reactor status
logout
{% else %}
login / signup
{% endif %}
<hr>
</header>
<main>
{% block content %}
{% endblock %}
</main>
</body>
</html>
home.html:
{% extends 'base.html' %}
{% block content %}
<center><h1>Welcome</h1>
<p>This App allow to control the life cycle of the Nuclear Reactor and Retrive the status report </p>
<p>Status reportControl panel</p>
</center>
{% endblock %}
total html generated output after click on home link:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var query='';
function pageTransition(){
var full_url = window.location.search;
var url = full_url.replace("?", '');
query=url.file;
console.log('query',query);
var url="'"+query+"'";
$.getScript(url,function(){
$('a').velocity("scroll", { duration: 1000 });
})
}
</script>
</head>
<body>
<header>
<h1>Nuclear Reactor</h1>
<b>Hi, </b>
Home
View Reactor status
logout
<hr>
</header>
<main>
<center><h1>Welcome</h1>
<p>This App allow to control the life cycle of the Nuclear Reactor and Retrive the status report </p>
<p>Status reportControl panel</p>
</center>
</main>
</body>
</html>
Here I need to get that query string value and include it inside that JavaScript function but the JavaScript function is not called at all.
I have a base.html and an index.html that extends base.html and fills out a {% block content %}{% endblock %}. However, for some reason, the javascript that I have in the block that deals with initiating a Google Map doesn't create the map - the page is blank. Without extending the base.html (i.e. just by typing everything in base.html out in index.html explicitly), the map works fine. The code:
base.html
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href='{% static "mh_app/style.css" %}' />
</head>
<body>
<header id="header">
<div class="header-cont">
<h1>
Title
</h1>
<nav id="nav">
<ul>
<li>
Home
</li>
<li>
Download
</li>
<li>
About
</li>
</ul>
</nav>
</div>
</header>
{% block content %}{% endblock %}
</body>
</html>
index.html
{% block content %}
<div id='map'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type='text/javascript'>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 38.3499047, lng: -100.0770253},
zoom: 4
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<my_api_key>&callback=initMap" async defer></script>
{% endblock %}
I've tried sticking some console.log statements inside initMap(), and they run just fine, so I have no idea why the map is not appearing.
EDIT
style.css
#map {
height: 90%;
width: 100%;
}
Do you have styles for the map div ?
Add height and width for the map div, try changing <div id="map"></div> to something like <div id="map" style="width: 500px; height: 500px;"></div>