I'm making a website with Bulma (and I'm pretty new to Bulma & CSS frameworks) and have imported Bulma.js for my Navbar burger but it only works on the home (index.html) page.
I'm thinking that the reason for this is because on the other pages I load the navbar with
$("#nav").load("../extras/nav.html");
and import bulma.js normally in the header. I've tried importing it from the nav.html file and putting it in the body. I've also used window.onload in all sorts of ways. I can verify that the bulma.js is loaded as I downloaded and added a console.log and it works.
This loads the nav.html into the div.
<div id="nav"></div>
$(document).ready(function() {
console.log('loading navbar');
$("#nav").load("../extras/nav.html");
});
This is the full nav.html file
And obviously a line linking bulma.js in the head.
The goal is to get the nav burger to work without changing too much of the content (such as linking nav.html) but currently the nav burger does nothing when clicked (except on index.html page which is the same but with the nav.html code hard coded in)
Also, this is my first Stack overflow post (coming from Reddit) so I hope everything is proper and this problem can be resolved.
If you want to skip jquery, and use framework like Vue, here is another solution:
<template>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" v-bind:class="{ 'is-active': showBurger}" #click="showBurger = !showBurger">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu" v-bind:class="{ 'is-active': showBurger}">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<a class="navbar-item">
Service
</a>
</div>
</div>
</nav>
</template>
<script>
export default {
data(){
return {
showBurger: false
}
}
}
</script>
This is because you are adding the elements after the JS file has loaded, and after the DOM is "ready". So when the page loads that clickable element does not exist and thus there is nothing attached to that element.
I would suggest one of a few solutions.
Simply add your Nav HTML to each page.
Add the click behavior for the hamburger menu to your Nav HTML template. This is from the Bulma documentation.
<script>
$(".navbar-burger").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
});
</script>
Use a templatable language like PHP on the backend, where you can add load templates/resources on the server side as opposed to the front end.
Related
I have almost done my work and my client ask for keeping submenu opened when user click the item in the menu and also set active color. The idea is better orientation when user actualy is. In React App it wouldn't be problem, cuz whole app works like single page. In this case i've decided use only HTML/JS as my challenge.
Is it even possible somehow keep menu opened/open again menu when new page is loaded please?
I tried make from this app something like single page app by some tutorials like "load paghe without refresh" etc, but nothing worked.
menu
<div class="menu">
<div class="item">
<a class="sub-btn">
Matice
<i class="fas fa-angle-right dropdown"></i>
</a>
<div class="sub-menu">
<a
href="/pages/matice/zakladni-operace.html"
id="matice/zakladni-operace"
onClick="reply_click(this.id)"
class="sub-item">
Základní operace
</a>
<a
href="/pages/matice/hodnosti.html"
id="matice/hodnosti"
onClick="reply_click(this.id)"
class="sub-item">
Hodnost
</a>
<a
href="/pages/matice/determinanty.html"
id="matice/determinanty"
onClick="reply_click(this.id)"
class="sub-item">
Determinanty
</a>
<a
href="/pages/matice/inverzni-matice.html"
id="matice/inverzni-matice"
onClick="reply_click(this.id)"
class="sub-item">
Inverzní matice
</a>
<a
href="/pages/matice/maticove-rovnice.html"
id="matice/maticove-rovnice"
onClick="reply_click(this.id)"
class="sub-item">
Maticové rovnice
</a>
<a
href="/pages/matice/vlastni-cisla-a-vektory.html"
id="matice/vlastni-cisla-a-vektory"
onClick="reply_click(this.id)"
class="sub-item">
Vlastní čísla a vektory
</a>
</div>
</div>
</div>
You can try to get window.location.href on load of your page and add style classes depending on conditionally with something like
<div class="<%= 'yourStyleClass' if #url== 'urURL' %>"> to set active color
You could use AJAX to call the page. But that doesn't sound like what you want. An alternative way in javascript would be to get the current window.location.href when the page loads, then inject a class name into the relevant node, and have the css for that class make it visible and highlighted.
If you're using a library like jQuery this shouldn't be too hard to achieve.
I have a header.html page that I keep loading dynamically with JavaScript into all my webpages via add_header.js.
The header.html includes a notification badge that shows a red span with the number of the notifications.
In my add_header.js I have a JS function that removes the red span when the badge is clicked.
Everything works great for one page, but when I go to an other page, the header.html gets loaded again so the notification is red again.
How can I fix this, in order for the function to be executed only one time for all pages?
webpage.html
<script src="js/add_header.js"></script>
<div id="header">
</div>
my header.html
<div class="bootstrap-iso">
<li class="nav-item d-md-down-none">
<a id="notif-link" class="nav-link" href="#" title="Notifications">
<span id="notif" class="badge badge-pill" style="background-color:red;"></span>
</a>
</li>
</div>
my add_header.js
$(function(){
$("#header").load("header.html");
});
$(document).ready(function(){
var list_notif=["Notification1","Notification2","Notification3","Notification4"];
var number_notif=list_notif.length;
$('#notif').text(number_notif);
$('#notif-link').focus(
function(){
$('#notif').remove();
});
});
i've stumbled into a problem where I am not unable to close my mobile navigation menu.
I am using jQuery Full Page for my front-end. My mobile menu opens when clicked on:
<nav class="menu col-xs-4 pull-right">
<a href="#">
<span>Menu</span>
<button>
<span>toggle menu</span>
</button>
</a>
</nav>
With jQuery code of:
$('nav, .mobile-menu--close').click(function(e){
$('body').toggleClass('menu-open');
});
But it does nothing on closing with .mobile-menu--close
<a href="#" class="mobile-menu--close">
<span>Close</span>
<span class="mobile-menu--close-x"></span>
</a>
It is inside an aside element which is outside of main
...
<div class="background-image landing-mantas col-xs-8 pull-right">
</div>
</div>
</div>
</main>
<aside class="mobile-menu">
<ul>
<li>
Homepage
</li>
<li>...
With mobile-open class it translates X 100% and brings aside.mobile-menu from X100% to 0%. So basically it swaps these with positions.
I've read answers with disabling touch-actions: none and so on. Nothing does seem to help.
Full preview of web could be found here
Keep in mind that this is wop so please view it in responsive view to get the point. But it should do the trick.
Remove this style and try
.mobile-menu {
z-index: -1;
}
As I can see from the link you provided. When menu-open is applied then your navigation is not clickable, so you need to set z-index of menu-open to higher that the z-index of your content (I am assuming the the page is inside the content class) -
.menu-open{
z-index: 1111;
}
.content{
z-index: 1000;
}
I have a webpage with 3 items in the navbar; Products, Partners and Support. I have moved this navbar to a seperate .html file; navbar.html and called it using load-navbar.js. I have done this to avoid code repetition. Is it possible to use javascript to show which navbar item is active? Is it possible to use switch statements to do this. If yes, how can I do this?
navbar.html
<nav class="navbar navbar-default mc-header navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mc-collapse-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img id="logo" src="images/logo.svg" alt="Company Logo">
</div>
<div id="mc-collapse-nav" class="collapse navbar-collapse mc-navbar-spacing">
<ul class="nav navbar-nav navbar-right" >
<li><a class="mc-active" href="Items/products.html">Products</a></li>
<li>Partners</li>
<li>Support</li>
</ul>
</div>
</nav>
load-navbar.js
$(function(){
$("#main-nav").load("main-nav.html");
});
The mc-active class in products is added to the class to show that products.html is the active class.
You can store the current url in a variable:
var x = $(location).attr('href');
And then assign an "active" class to a link if the href matches the url, or if it's href is contained within the url, whichever fits your situation. You can use this link:
css-tricks link
or this search:
jquery active link google
for more info that might fit your situation better. I don't think you'd need more than a simple comparison between the window href and link href. Also I'd definitely follow the advice given in the comments.
I'm new to angular, been trying to fix this for about an hour now but can't get it working. I have some html code:
<li class="notification-dropdown hidden-xs hidden-sm">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
...
The notification pop-dialog is hidden by default and the following JQuery shows it when the .notification-dropdown is clicked
$(document).on("click", ".notification-dropdown", function (e) {
e.preventDefault();
e.stopPropagation();
// hide all other pop-dialogs
$(".notification-dropdown .pop-dialog").removeClass("is-visible");
$(".notification-dropdown .trigger").removeClass("active");
var $dialog = $(this).children(".pop-dialog");
$dialog.toggleClass("is-visible");
});
For some reason, this code does not work when I put the html into AngularJS's ng-view loaded as a partial into a main html document.
I've already loaded the JQuery lib before Angular.
I've tried to shorten the code for simplicity, I can show more code if needed.
Best try to avoid using jQuery with AngularJS completely. Using both together in this fashion is a common mistake among those new to Angular, coming form a jQuery background. Here is a great answer on that topic: "Thinking in AngularJS" if I have a jQuery background?
You could just use ui bootstrap´s dropdown.
Alternatively, there are ngShow and ngIf. If you still want to use your own css class to hide it, just set the class with ngClass.
Then, you can use ngClick to recieve the click event.
Here is how it would look (HTML only, you dont even have to write any JS for this):
<li class="notification-dropdown hidden-xs hidden-sm" ng-click="showDialog = !showDialog">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog" ng-show="showDialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
<!-- body content -->
</div>
</div>
</li>
EDIT : Added Code
EDIT : working plunk