I have the following HTML code in my landing page
<div class="col-12 text-center mt-4 mb-4">
<a class="btn know-more-btn text" href="#billing">Tell Me More</a>
</div>
<div id="billing" class="billing-section">
//show some billing options
</div>
when clicking on btn know-more-btn for the first time the screen flickers and nothing happens only from the second click it "jumps" to the right location on the page (the billing section)
Not sure why this happens
Also is there a way to turn the "jump" into simulation of fast scroll to that section
Try this
html
<div class="col-12 text-center mt-4 mb-4" (click)="toSec()">
<a class="btn know-more-btn text">Tell Me More</a>
</div>
ts
toSec() {
document.getElementById("billing").scrollIntoView();
}
for smooth scrolling adding this to main style file
css
html {
scroll-behavior: smooth;
}
this will not work will with the router Tell Me More ,it will trigger the router to redirect to some page or reload the page.
so one way to solve it by useing template variable and call scrollIntoView method to apply scrolling.
<div class="basic c-pointer col-12 text-center mt-4 mb-4">
<a class="btn know-more-btn text"
(click)="billingElm.scrollIntoView({behavior: 'smooth'})" >
Tell Me More 👇
</a>
</div>
<div #billingElm class="billing-section">
//show some billing options
</div>
stackblitz demo 🚀🚀
for reusability this the directive way
#Directive({
selector: '[scrollTo]'
})
export class ScrollToDirective {
#Input('scrollTo') elm:HTMLElement;
#HostListener('click') onClick(){
if(this.elm){
this.elm.scrollIntoView({behavior:'smooth'});
}
}
}
template
<div class="col-12 text-center mt-4 mb-4">
<a class="btn know-more-btn text" [scrollTo]="billingElm" >Tell Me More 👇</a>
</div>
<div #billingElm class="billing-section">
//show some billing options
</div>
stackblitz demo 🌟🌟
check this Passive Link in Angular 2 - equivalent to
get more details about how this problem.
I have a dropdown that at the moment exists of one button. I would like this button to be disabled and that the color changes when it is disabled. I created this behaviour already with the code underneath.
Can't this be written cleaner? Because now I actually create 2 buttons but only one is seen..
I have tried this but I get stuck when adding the css background-color in the button code.
<div class="block-options">
<div class="dropdown">
<!-- Options -->
<button type="button" class="btn-block-option dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="si si-settings"></i></button>
<div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
<!-- Disable buttons based on selected packages -->
<div *ngIf="checkIfValidVersion()">
<button class="dropdown-item js-swal-confirm" (click)="createMajors()">Create major version</button>
</div>
<div *ngIf="!checkIfValidVersion()">
<button [disabled]="!checkIfValidVersion()" style = "background-color:grey; color:black" class="dropdown-item js-swal-confirm">Create major version</button>
</div>
</div>
</div>
</div>
Ok, what you have to do is write a styling class for your button that will take effect if the button is disabled
Something similar to this will do the trick:
.my-button:disabled {
background-color: grey;
color: black
}
and your HTML will look like this:
<div class="block-options">
<div class="dropdown">
<!-- Options -->
<button type="button" class="btn-block-option dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"><i class="si si-settings"></i></button>
<div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
<!-- Disable buttons based on selected packages -->
<button class="dropdown-item js-swal-confirm my-button" (click)="createMajors()"
[disabled]="!checkIfValidVersion()">Create major version</button>
</div>
</div>
</div>
Related topic here
<button class="dropdown-item js-swal-confirm" [class.disabledStyle] ="!checkIfValidVersion()"> Create major version </button>
The above code will add a class name "disabledStyle" to the existing class if the function returns true.
disabledStyle {
background: grey;
}
You are duplicating the code. You just require one line which is already there. Based on condition it will put disable attribute in your button. Do not put css code at button level.
<button [disabled]="!checkIfValidVersion()" class="dropdown-item js-swal-confirm">Create major version</button>
Now put css at button level for disable scenario:
button[disabled=disabled], button:disabled {
background-color:grey;
color:black;}
This is most cleaner way.
I'm setting up a User Interface using a simple database and angular, where users can post a message, either with only a message, or with a picture attached to the message.
By doing some research, I found out about the built in ngIf conditions, where you can display variables if the variable doesn't hold a null value.
Here is my code and the output:
<div ng-repeat="m in chatDetailsCtrl.messageList">
<!-- This card prodives space for the message and Like/dislike buttons -->
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<!-- Card Title is the person who wrote the message -->
<span class="card-title">{{m.user_ID}}</span>
<!-- Here comes the message text -->
<p> {{m.post_msg}}
<div> <span class="new badge light-blue">{{m.post_date}}</span></div>
<p *ngIf="m.photo_url">
<img src="{{m.photo_url}}" width="100" height="100">
</p>
{{m.post_date|date("m/d/Y")}} -->
</p>
<td><a class="waves-effect light blue lighten-1 btn-small" ng-click="chatDetailsCtrl.postDetails(m.post_ID)">Post Details</a></td>
</div>
<div class="card-action">
<a class="btn-floating btn-small waves-effect waves-light blue" ><i class="material-icons">thumb_up
</i></a> <span ng-bind= "m.likes"> </span>
<a class="btn-floating btn-small waves-effect waves-light blue"><i class="material-icons">thumb_down
</i></a><span ng-bind="m.dislikes"> </span>
</div>
</div>
</div>
</div>
</div>
I want to see if m.post_url contains a value. When null, I want to skip adding this variable to my website.
For example, last post, without a picture, I want it to look like this:
Sorry for my bad english, english is not my first language.
first of all, you are mixing angularJs syntax with new angular.
if you are using angularjs use ng-if in your image tag. it works properly.
as I can see you are using ng-repeat and ng-bind you are using angularjs and not angular.
so in your image tag use
<p ng-if="m.photo_url">
<img src="{{m.photo_url}}" width="100" height="100">
</p>
I'm new on bulma css http://bulma.io/
I'm trying to use hamburger menu for mobile user.
I just followed instruction on this page: http://bulma.io/documentation/components/nav/
But it doesn't work. What should I add ?
Actually, I can see hamburger menu, but it doesn't work when I am click it.
Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>test</title>
<link rel="stylesheet" href="css/bulma.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<section class="hero is-fullheight is-primary is-bold">
<!-- Hero header: will stick at the top -->
<div class="hero-head">
<header class="nav">
<div class="container">
<div class="nav-left">
<a class="nav-item" href="/">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item" href="/about">
About
</a>
<a class="nav-item" href="/path">
Path
</a>
<a class="nav-item" href="/blog">
Blog
</a>
</div>
</div>
</header>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container has-text-centered">
</div>
</div>
</section>
</body>
</html>
This solution uses Vue.js to toggle the bulma nav component when viewing on mobile. I hope this helps others that are looking for an alternative solution.
JS
First, I add the cdn for Vue.js which can be found here https://unpkg.com/vue, and include an instance of Vue in the javascript.
new Vue({
el: '#app',
data: {
showNav: false
}
});
HTML
a. Wrap the nav section with the element "app" to make it reactive (this maps to the "el" property of the Vue instance).
<div id="app"> ... </div>
b. Update .navbar-burger using the v-on: directive to listen for the click event and toggle the data property showNav.
<div class="navbar-burger" v-on:click="showNav = !showNav" v-bind:class="{ 'is-active' : showNav }">
c. Update .navbar-menu using the v-bind: directive to reactively update the class attribute with the result of the showNav property.
<div class="navbar-menu" v-bind:class="{ 'is-active' : showNav }">
Solution
I've included the entire solution in this jsfiddle
This may be an issue with the example given in the docs, I was able to get it working by adding ids to the .nav-toggle and .nav-menu.
<span id="nav-toggle" class="nav-toggle"> and <div id='nav-menu' class="nav-right nav-menu">
jsfiddle here.
So to get the example working, you'd have to add 'id's to the respective elements. I'd recommend deep diving into the docs though
(function() {
var burger = document.querySelector('.nav-toggle');
var menu = document.querySelector('.nav-menu');
burger.addEventListener('click', function() {
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
})();
You can get it to work without using jquery or bulma.js. Just simply use your own javascript to add is-active to nav-menu class on click on nav-toggle.
nav-menu is collapsed.
nav-menu is-active is expanded.
I thought someome might be looking for a solution without jquery so there will be everything in one place.
To make the toggle click event work, just add the below js code. You may create a JS folder, then bulma.js file.
// source: https://gist.github.com/Bradcomp/a9ef2ef322a8e8017443b626208999c1
(function () {
var burger = document.querySelector('.burger');
var menu = document.querySelector('#' + burger.dataset.target);
burger.addEventListener('click', function () {
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
})();
At the end of your html page add the script.
ex:
<script async type="text/javascript" src="./js/bulma.js"></script>
There is an easier way! Before I get to that, it looks like there are a few problems with your Html.
First issue. You don't have the navbar structure set up like the documentation suggests. If you replace the nav-left with navbar-brand it will take care of some of your Html for you. In your code example, you have your logo as a nav-item inside of a nav-left. navbar-brand does exactly that. What you've done here may work but, I'm not sure exactly what that would do. From the documentation:
"navbar-brand the left side, always visible, which usually contains the logo and optionally some links or icons"
So if you take that out to the level of the of the container and within that, you can just put your logo inside the first navbar-item. Next thing is to pull the 'navbar-burgerinside of thenavbar-brand`.
"The navbar-burger is a hamburger menu that only appears on mobile. It has to appear as the last child of navbar-brand."
Once that is set up you'll want to put the menu items you wish to collapse inside of the navbar-menu. This container should be a sibling of the navbar-brand so they should be on the same level together. So your code (within your container div) should look something LIKE SO:
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="../assets/icon.png" alt="something">
</a>
<div class="navbar-burger burger" data-target="Options">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" id="Options">
<div class="navbar-end">
<a class="nav-item" href="/about">About</a>
<a class="nav-item" href="/path">Path</a>
<a class="nav-item" href="/blog">Blog</a>
</div>
</div>
</nav>
The final piece to the puzzle is: you gotta set the data-target of your burger to the the id of the navbar-menu. It's not very clear that's what they are talking about in the docs. Whatever the case, after you make those changes, the javascript code from the documentation should work!
I realize that this question was asked many moons ago but I hope this can help SOMEONE.
Bulma Docs
http://bulma.io/documentation/components/navbar/
My simple but functional answer:
function toggleBurger() {
var burger = $('.burger');
var menu = $('.navbar-menu');
burger.toggleClass('is-active');
menu.toggleClass('is-active');
}
And in the burger tag:
<div class="navbar-burger burger" data-target="navMenu" onclick="toggleBurger()">
<span></span>
<span></span>
<span></span>
</div>
Here is an angular solution:
template - button (notice the last two lines)
<a
role="button"
class="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
[class.is-active]="showBurgerMenu"
(click)="showBurgerMenu = !showBurgerMenu">
template - menu (notice the last line)
<div
id="navbarBasicExample"
class="navbar-menu"
[class.is-active]="showBurgerMenu">
component (notice the showBurgerMenu property)
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.sass']
})
export class NavbarComponent {
showBurgerMenu: boolean;
constructor() {}
}
The bulma package does not provide any javascript. So you have to write it yourself. But you do not need anything fancy. Just make the id of toggled element and the data-target of the burger be the same. Something like this:
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="navbar-menu" id="navMenu">
<!-- navbar-start, navbar-end... -->
</div>
And add this javascript snippet into end of your file(note: you do not have to change anything):
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
And that is it! It works!
These codeblocks has been taken from documentation: https://bulma.io/documentation/components/navbar/#navbar-burger
you can also make it work with an inline onclick
<a role="button" onclick="this.classList.toggle('is-active');document.querySelector('#'+this.dataset.target).classList.toggle('is-active');" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="efpnavbar">
I had the same problem with Vue.js and I solved it like this :
<span class="navbar-burger burger" data-target="navbarMenu" #click="show()">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<div class="tabs is-right">
<ul>
<li><a>Home</a></li>
<li>Examples</li>
<li>Features</li>
<li>Team</li>
<li>Help</li>
</ul>
</div>
</div>
</div> </span>
then I added this code in methods section :
methods:{
show()
{
var burger = document.querySelector('.burger');
var menu = document.querySelector('.navbar-menu');
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
}}
I hope this code helps someone .
If you use SCSS and i.e. purge-css for your project, make sure the .is-active class is not stripped out by your css-purging...
For me then the vanilla example worked:
JS:
document.addEventListener("DOMContentLoaded", () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
// Add a click event on each of them
$navbarBurgers.forEach((el) => {
el.addEventListener("click", () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
});
and HTML:
<nav class="navbar headnavi is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
<span class="is-size-3 is-size-5-mobile has-text-weight-semibold ml-2">{{ site.name }}</span>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="top">
<span aria-hidden="true" class="nav-toggle" ></span>
<span aria-hidden="true" class="nav-toggle" ></span>
<span aria-hidden="true" class="nav-toggle" ></span>
</a>
</div>
<div id="top" class="navbar-menu">
<div class="navbar-start">
</div>
<div class="navbar-end">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/">
More
</a>
<div class="navbar-dropdown is-right">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
<div class="navbar-item">
<div class="buttons">
</div>
</div>
</div>
</div>
</nav>
I have an accordion with links in the header. It is in such a way that the accordion can be opened when clicked anywhere on the header. Because of this when clicked on the link, instead of going to that link (href) the accordion is opened.
Desired behaviour:
I want the accodion to be opened when clicked anywhere in the header except the link. (i.e when clicked on the link, the user must be redirected and accordion must not be opened)
<div>
<accordion close-others="false">
<accordion-group is-open="isopen" ng-repeat="ele in arr">
<accordion-heading>
<div>
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
<div style="width: 50%; float: left; padding-left: 6cm;">{{ele.a}}
<span >
link
</span>
</div>
<div style="text-align: center;">
<span>{{ele.b}}</span>
</div>
</div>
</accordion-heading>
</accordion-group>
</accordion>
</div>
Plnkr
You need to call $event.stopPropagation(); in your ng-click -> ng-click="$event.stopPropagation(); fn1();"
The trick is to call Event.stopPropagation() inside ng-click handler of anchor:
link
Here's an updated plunker.
use
ng-click="$event.stopPropagation()"//this will not apply accordion click event on this link tag
instead of
ng-click="fn1()"
This Might not work on plunk try it in your code.
When using accordion-heading, everything in it will be turned into an <a> tag.
Your code will be rendered in brower
<h4 class="panel-title">
<a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">
<div class="ng-scope">
<i class="pull-right glyphicon glyphicon-chevron-right" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
<div style="width: 50%; float: left; padding-left: 6cm;" class="ng-binding">1
<span>
link
</span>
</div>
<div style="text-align: center;">
<span class="ng-binding">2</span>
</div>
</div>
</a>
</h4>
This is solution https://stackoverflow.com/a/14202514/3901308