Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am working on a functionality to increase/decrease font size of the page. The font size of the navbar cannot increase beyond 19px and that of the rest of the content cannot go beyond 50px ; and in case of decrement- the font size of navbar cannot decrease below the current size and that of the rest cannot go below 20px.
I have only written the code for the page content(which is working). I need help with completing it for the navbar and improving the code.
Below is the HTML,CSS & JS code -
function inc() {
var el = document.getElementById('test');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
console.log("SIZE", fontSize)
if (fontSize <= 50) {
el.style.fontSize = (fontSize + 2) + 'px';
console.log("incSize", el.style.fontSize)
}
}
function dec() {
var el = document.getElementById('test');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
console.log("SIZE", fontSize)
if (fontSize >= 20) {
el.style.fontSize = (fontSize - 2) + 'px';
console.log("decSize", el.style.fontSize)
}
}
/* Basic styling */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
nav {
background: #001a33;
}
.navbar-nav .nav-link {
color: white;
font-size: 12.8px;
}
.navbar-nav .nav-link:hover {
color: #91d5f3;
text-decoration: none;
}
.submenu {
color: white;
padding-top: 0.5rem;
font-size: 0.9rem;
}
.submenu-select {
font-size: 16px;
}
<nav class="navbar navbar-expand-lg py-0 " id="header-bar">
<div class="container">
<button class="navbar-dark navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#" id="first">ITEM1<span
class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link " href="#">ITEM0</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="#">ITEM2</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">ITEM3</a>
</li>
<li class="nav-item">
<a class="nav-link px-3 " href="#">ITEM4</a>
</li>
<label for="submenu" class="submenu px-2">Submenu:</label>
<select name="submenu" id="submenu" class="submenu-select">
<option value="Option1">option1</option>
<option value="Option2">option2</option>
</select>
</ul>
</div>
</div>
</nav>
<button onclick="inc()">INCREASE</button>
<button onclick="dec()">DECREASE</button>
<h1 id="test">FONT CHANGE</h1>
Try this
Create an array of items on the page with their corresponding min and max sizes
Have one function decide if it is increase or decrease (DRY)
loop over the array
NOTE: I moved the font-size of the nav to the nav container
NOTE: I have NOT tested this in IE8. It is not feasible to support anything lower than IE11
var items = [{
"el": "nav",
"maxSize": 30,
"minSize": 12.8
}, {
"el": "#test",
"maxSize": 50,
"minSize": 20
}]
var incdec = function(dir) {
items.forEach(function(item) {
size(dir, item)
});
};
var size = function(dir, item) {
var el = document.querySelector(item.el);
var max = item.maxSize;
var min = item.minSize;
console.log(dir, min,max)
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
if (dir === 1 && fontSize <= max) {
el.style.fontSize = (fontSize + 2) + 'px';
console.log("incSize", el.tagName, el.style.fontSize)
} else if (dir === -1 && fontSize >= min) {
el.style.fontSize = (fontSize - 2) + 'px';
console.log("decSize", el.tagName, el.style.fontSize)
}
}
/* Basic styling */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
nav {
background: #001a33;
font-size: 12.8px;
}
.navbar-nav .nav-link {
color: white;
}
.navbar-nav .nav-link:hover {
color: #91d5f3;
text-decoration: none;
}
.submenu {
color: white;
padding-top: 0.5rem;
font-size: 0.9rem;
}
.submenu-select {
font-size: 16px;
}
<nav class="navbar navbar-expand-lg py-0 " id="header-bar">
<div class="container">
<button class="navbar-dark navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#" id="first">ITEM1<span
class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link " href="#">ITEM0</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="#">ITEM2</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">ITEM3</a>
</li>
<li class="nav-item">
<a class="nav-link px-3 " href="#">ITEM4</a>
</li>
<label for="submenu" class="submenu px-2">Submenu:</label>
<select name="submenu" id="submenu" class="submenu-select">
<option value="Option1">option1</option>
<option value="Option2">option2</option>
</select>
</ul>
</div>
</div>
</nav>
<button onclick="incdec(1)">INCREASE</button>
<button onclick="incdec(-1)">DECREASE</button>
<h1 id="test">FONT CHANGE</h1>
Related
I'm new to Odoo .. I want to make my dropdown toggle display properties set to block only in my home page like this :
So, at other pages, it will set to none to prevent the dropdown override the content like this:
Here is what I've done so far with the code:
views/header.xml
<nav class="navbar navbar-expand-lg navbar-dark multilevel">
<ul class="navbar-nav w-100">
<li class="nav-item dropdown w-100">
<a class="nav-link dropdown-toggle nav-category" href="#"
data-bs-toggle="dropdown">
<i class="icon-view-grid"></i>
<span class="ic-category"></span>
Semua Kategori
</a>
<ul class="dropdown-menu dropdown-category show">
<div href="javascript:void(0)" class="close-category">
<i class="icon-x-circle"></i>
Tutup
</div>
<t t-foreach="product_categories" t-as="category">
<li class="has-submenu">
<a class="dropdown-item dropdown-toggle" t-attf-href="/products?categ={{ category.id }}">
<t t-if="category.image_1920">
<img class="image-category-icon" t-attf-src="/web/image/product.public.category/{{ category.id }}/image_1920"/>
</t>
<span t-esc="category.name"/>
</a>
<div class="megasubmenu dropdown-menu">
<ul class="list-unstyled">
<t t-foreach="category.child_id" t-as="second_level_category">
<t t-if="second_level_category.id">
<li>
<h3 class="content-title f-18"><a t-attf-href="/products?categ={{ second_level_category.id }}"><span t-esc="second_level_category.name"/></a></h3>
</li>
</t>
</t>
</ul>
</div>
</li>
</t>
<li>
<a class="dropdown-item text-center view-all"
href="/products">Lihat Semua Kategori
<i class="icon-arrow-right"></i>
</a>
</li>
</ul>
</li>
</ul>
</nav>
custom-style.css
.dropdown-item.active,
.dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #e5e5e5;
}
.dropdown-menu {
box-shadow: 0px 4px 35px rgba(70, 70, 70, 0.1);
border: 1px solid #d1d1d1;
}
main.js
//CATEGORY MENU
document.addEventListener("DOMContentLoaded", function () {
/////// Prevent closing from click inside dropdown
document.querySelectorAll('.dropdown-menu').forEach(function (element) {
element.addEventListener('click', function (e) {
e.stopPropagation();
});
});
// make it as accordion for smaller screens
if (window.innerWidth < 992) {
// close all inner dropdowns when parent is closed
document.querySelectorAll('.navbar .dropdown').forEach(function (everydropdown) {
everydropdown.addEventListener('hidden.bs.dropdown', function () {
// after dropdown is hidden, then find all submenus
this.querySelectorAll('.submenu').forEach(function (everysubmenu) {
// hide every submenu as well
everysubmenu.style.display = 'none';
});
});
});
document.querySelectorAll('.dropdown-menu a').forEach(function (element) {
element.addEventListener('click', function (e) {
let nextEl = this.nextElementSibling;
if (nextEl && nextEl.classList.contains('submenu')) {
// prevent opening link if link needs to open dropdown
e.preventDefault();
console.log(nextEl);
if (nextEl.style.display == 'block') {
nextEl.style.display = 'none';
} else {
nextEl.style.display = 'block';
}
}
});
});
} else if (window.location.pathname === '/') { // Check if the current URL is home page
// display all submenus
document.querySelectorAll('.submenu').forEach(function (everysubmenu) {
everysubmenu.style.display = 'block';
});
}
});
Is there any possible way to address this kind of stylesheet logics in JS than the built-in window.location.pathname and how to implement that, especially in Odoo, which is basicly using the markup of XML instead of HTML??
Any help would be very appreciated.
Thank a lot in advance.
This is a single-page website currently I am working on. But When I click another link in the navbar it's not changing color though hovering is working perfectly. Here is my html code :
<html>
<body>
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 ">
<li class="nav-item ">
<a class="nav-link scroll active " aria-current="page" href="#intro">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#about">About Us </a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#">Products</a>
</li>
</ul>
</div>
</html>
</body>
enter image description here
Here is my css:
<style>
.navbar .nav-item a {
color: #5cbf8f !important;
}
.navbar .nav-item a:hover {
color: #028b77 !important;
}
.navbar .nav-item a.active {
color: #028b77 !important;
}
</style>
enter image description here
Here is my Js :
<script>
$(document).ready(function () {
var scrollLink = $(".scroll");
// Smooth scrolling
scrollLink.click(function (e) {
e.preventDefault();
$("body,html").animate(
{
scrollTop: $(this.hash).offset().top,
},
1000
);
});
// Active link switching
$(window).scroll(function () {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function () {
var sectionOffset = $(this.hash).offset().top - 20;
if (sectionOffset <= scrollbarLocation) {
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
}
});
});
});
</script>
enter image description here
N.B: Don't really know about js, just found it on the internet.
Navbar:
enter image description here
I think your js is wrong.
$('.active').removeClass('active');
$(this).addClass('active');
More efficient options are available if the DOM hierarchy is known.
For example, if they're all siblings, you can use this:
$(this).addClass('active').siblings('.active').removeClass('active');
I am trying to add/remove active class in the navbar using a snipped from similar questions, however nothing happens in my case. It´s very possible I am missing out something that could not figured out so far.
Here is my HTML
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active" id="dashboard">
<a class="nav-link" href="{% url 'dashboard' %}">Dashboard</a>
</li>
<li class="nav-item" id="painel_regras">
<a class="nav-link" href="{% url 'painel_regras' %}">Todos as Regras</a>
</li>
</ul>
</div>
Here is the Javascript part
<script type="text/javascript">
var navContainer = document.getElementById("navbarColor01");
var navitem = navContainer.getElementsByClassName("nav-item");
for (var i = 0; i < navitem.length; i++) {
navitem[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
There might be conflicts with other elements that have the active class, so when you access current[0], the item at index 0 is not the one in the navbar. I have replaced document.getElementsByClassName with document.querySelector to make the element more specific.
var navContainer = document.getElementById("navbarColor01");
var navitem = navContainer.getElementsByClassName("nav-item");
for (var i = 0; i < navitem.length; i++) {
navitem[i].addEventListener("click", function() {
var current = document.querySelector("#navbarColor01 .nav-item.active");
current.className = current.className.replace(" active", "");
this.className += " active";
});
}
.active {
font-weight: bold;
}
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active" id="dashboard">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item" id="painel_regras">
<a class="nav-link" href="#">Todos as Regras</a>
</li>
</ul>
</div>
I want to add active link on page reload, but I don't know how to do this. The fact is that when I put active based on bootstrap 4, the active link doesn't work. I try many things but I really don't know how to interact with this jquery's plugin. Please help me.
I don't know how to make this on existing code.
HTML
<ul id="myNav" class="nav mt-7 mb-5">
<li class="nav-item">
<a class="nav-link active chiffres" href="tgn.php">01</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="oprah.php">02</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="innocent.php">03</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="reveal.php">04</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="maison21g.php">05</a>
</li>
</ul>
JAVASCRIPT
(function($){
$.fn.linkUnderlineAnim = function(options) {
var defaults = $.extend({
"speed" : 300,
"color" : "#DB3340",
"thickness" : 2,
"distance" : 0,
"bottom" : 0
}, options);
return this.each(function() {
var items = $("li a");
var o = defaults;
items.css("position", "relative")
.css("text-decoration", "none")
.css("padding-bottom", o.distance);
var id = this.id;
if (id !="") {
// it has id, so we will use it to customize the style sheet
}
else {
// it does not have id, so we generate a unique one to
customize the style sheet
this.id = '_' + new Date().getTime(); // it is important to
prefix the id with any character, because only numbers not working in
CSS selection
id = this.id;
}
//it is not possible to access :before in JavaScript/jQuery, so
we add a stylesheet instead. But we used/generated the id to avoid
styling non selected (ul) elements
var css = '#' + id + ' li a {position: relative; text-decoration:
none;}' +
'#' + id +' li a:before {content: "";position: absolute;
width: 100%; height: ' + o.thickness + 'px; bottom: ' + o.bottom +
'px; left: 0;'+
'background-color: ' + o.color + ';' +
'visibility: hidden; -webkit-transform: scaleX(0); transform:
scaleX(0);' +
'-webkit-transition: all ' + o.speed/1000 +'s ease-in-out 0s;
transition: all ' + o.speed/1000 + 's ease-in-out 0s;}' +
'#' + id +' li a:hover:before {visibility: visible; -webkit-
transform: scaleX(1); transform: scaleX(1);}' + '#' + id +'li
a:active{background:red;}' ,
head = document.head || document.getElementsByTagName('head')
[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
});
}
})(jQuery);
Try this solution it will take the path from your url and set active class into it.
$(function($) {
let url = window.location.href;
$('li a').each(function() {
if (this.href === url) {
$(this).closest('li').addClass('active');
}
});
});
.active {text-decoration: underline}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="myNav" class="nav mt-7 mb-5">
<li class="nav-item">
<a class="nav-link chiffres" href="tgn.php">01</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="oprah.php">02</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="innocent.php">03</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="reveal.php">04</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="maison21g.php">05</a>
</li>
</ul>
I was working on getting parallax for all my background images and I had an issue which was resolved by a stackoverflow community expert and got those to work but a small problem which I did not realize yesterday is that now I have a very thin white bar between the navbar and header-image and it has something to do with the parallax code ( because without the parallax code there is no gap ) so if somebody can check this and assist me it would be great..
jquery code :-
$(document).ready(function() {
$(function() {
// Cache the window object
var $window = $(window);
// Parallax background effect
// Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
$('section[data-type="background"]').each(function() {
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yOffset = $bgobj.offset().top;
var yPos = -(($window.scrollTop() - yOffset) / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // end window scroll
});
});
HTML Code :-
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
FEATURES <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>ABOUT</li>
<li>TEAM</li>
<li>TESTIMONIALS</li>
<li class="dropdown">
SHOP <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>PRICING</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section class="header-image" data-type="background" data-speed="5">
<h1> Elegant Single Page WordPress theme</h1>
<p>Easy , Reliable and Awesome</p>
<button class="btn btn-md btn-info">GET STARTED</button>
</section>
</header>
CSS code :-
.header-image {
height:40em;
background: url('../images/beach_sunset.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 0;
padding: 0;
}
.navbar-default {
margin: 0;
padding: 0;
}
.header-image h1 {
padding: 3em 0.5em 0;
}
.header-image p {
font-size: 1.2em;
padding-top: 1em;
}
.header-image h1,
.header-image p {
color: white;
text-align: center;
}
.header-image button {
display: block;
margin: 2em auto;
}
The problem was the yOffset wich was needed for another image on the page but not the one ontop of the page.
Fixed with using 2 different data-types, one using the yOffset and the other not using it.
tlrdr:
javascript calculation was incorrect for the image provided
It is because you are combining both padding and margin properties. You have to beware with that. You can always combine them (for sure) but you have to be aware of the space that they will take.
padding is the space between the content and its container.
margin is the space between the container and the rest of elements.
If you inspect your webpage:
And here is your updated JSFiddle.
Just add
h1{
margin: 0;
}
and it is done.
Warning!: Using type selector (h1) will remove the margin of all h1 that you will have in your webpage. If you want only to remove the margin property in one h1 only you should use an ID as #PRYM put in his answer.
The top margin of H1 tag which contains "Elegant Signle Page WordPress theme" is causing the gap.
Just adding margin-top:0px and it works
<h1 style="margin-top: 0px;"> Elegant Single Page WordPress theme</h1>