I'm trying to find a way to change the lnr-chevron-left to lnr-chevron-down when the user click in the chevron and expand the view.
This is the code that I have in the gsp and don't work:
<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed lnr-chevron-down">
UPDATED
This is last code that I'm trying....
<body>
<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" id="changeChevron" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed"></div>
</div>
<script type = "text/javascript">
var clicked=false;
$('#changeChevron').click(function(){
clicked=true;
});
if (clicked) {
$('#changeChevron').removeClass('lnr lnr-chevron-left').addClass('lnr lnr-chevron-down');
} else {
$('#changeChevron').removeClass('lnr lnr-chevron-down').addClass('lnr lnr-chevron-left');
}
</script>
</body>
Thanks in advance
Try something like this:
<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" id="myId" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed">
This is an example and it is all off the top off my head as in not tested but it will give you the idea
<g:javascript>
////$('.lnr-chevron-left').on('click', function() {
$('#myId').on('click', function() {
$(this).removeClass('lnr-chevron-left').addClass('lnr-chevron-down');
event.stopPropagation();
});
</g:javascript>
You will then need to change it back when the user no longer is clicking it it
So instead you could try something like:
<g:javascript>
var clicked=false;
$('#myId').click(function(){
clicked=true;
});
if (clicked) {
$('#myId').removeClass('lnr-chevron-left').addClass('lnr-chevron-down');
} else {
$('#myId').removeClass('lnr-chevron-down').addClass('lnr-chevron-left');
}
</g:javascript>
That clicked function may not work, a much neater way seems to be focus:
https://api.jquery.com/focus-selector/
Maybe I'm late but if you have a css you can override the css like this:
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e875";
float: right;
}
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Linearicons-Free';
content: "\e874";
float: right;
font-size:19px;
}
Related
So, I am trying to add background color change to my navbar when the scrollY goes more than 30px, and it works though. But I'm getting this error on my console as it is not able to add the new classList to the header when it goes over 30px.
This is my .ts file
ngOnInit(): void {
function scrollHeader(){
const nav = document.getElementById('header');
if(window.scrollY >= 30){
nav.classList.add('scroll-header');
}else{
nav.classList.remove('scroll-header');
}
}
window.addEventListener('scroll', scrollHeader);
}
this is the style file:
.scroll-header{
background: #242526;
color: white;
}
.scroll-header .wrapper .logo a{
color:white;
}
This is the HTML File:
<nav id="header">
<div class="wrapper">
<div class="logo">
<a [routerLink]="'/'">InsuranceBazaar</a>
</div>
<input type="radio" name="slider" id="menu-btn">
<input type="radio" name="slider" id="close-btn">
<ul class="nav-links">
<label for="close-btn" class="btn close-btn">
<i class="fa fa-times"></i>
</label>
<li>
....
I don't know what the error is, but I guess it is because of ngOnInit(). Please if anyone knows how to solve this error do share the answer.
Is your function correctly called ?
Maybe you should try without ngOnInit().
Then try to check the scroll with console.log()?
Or maybe try more specifically #header.scroll-header then your style ...
I'm using bootstrap 3. My idea is to expand/collapse some words between other words (transcriptions in dictionary) by clicking on one button.
Words and transcriptions between them all have class display: "inline-block". It's there a way to make strictly horizontal transition, and avoid this display:"block" part of it? Panel heading should be always in one line. (And avoid to write additional js)
<div class="panel-heading">
<div class="note">{{note}} </div>
<div class="word -arabic-text-big">{{word}}</div>
<div class="collapse transcription">[******]</div>
</div>
<button type="button" class="btn btn-info"
data-toggle="collapse" data-target=".transcription">
Transcipt
</button>
Sorry, the answer was too simple. But before i did something wrong...
.note, .word, .transcription {
display: inline-block;
}
.transcription.collapse.in {
display: inline-block;
}
.transcription.collapse {
display: none;
}
Suppose one of my keys has value Green/Red and I want to show bootstrap btn-success when its value is green and btn-danger when its red.
You need to update ng-class
<div ng:controller="CartForm">
<ul>
<li ng-repeat='country in countries'><a class="btn" ng-class="{'btn-primary': country.color == 'green', 'btn-danger': country.color == 'red'}" href="">{{country.name}} - {{country.population}}</a></li>
</ul>
</div>
and delete appliedClass function
Working jsFiddle
I think you are looking for ng-class. You can use the following synthax:
<p ng-class="condition ? 'classIfTrue' : 'classIfFalse'">Foo</p>
In your case, it would be something like:
<p ng-class="myVariable ? 'btn-success' : 'btn-danger'">Foo</p>
As you did not provide a code sample, here is how it works with an example:
angular.module('app', []).controller('MyCtrl', function() {
this.valueSuccess = false;
this.valueDanger = true;
});
.danger { background-color: red; }
.success { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="app">
<div ng-controller="MyCtrl as vm">
<p ng-class="vm.valueSuccess ? 'danger' : 'success'"> {{vm.valueSuccess}}</p>
<p ng-class="vm.valueDanger ? 'danger' : 'success'">{{vm.valueDanger}}</p>
</div>
</section>
I have a bootstrap column with a button for print which uses media attribute.
<div class="panel-footer">
<div class="row">
<div class="col-md-offset-5 col-md-2">
<button class="btn btn-primary btn-wordwrap" ng-click="$print()" media="print"><span class="glyphicon glyphicon-print"></span> Print</button>
</div>
</div>
</div>
The #media is defined in css as below.
#media print {
button {
display: none !important;
}
}
The $Print() is defined as below in angular controller.
$scope.$print = function () {
window.print();
};
It still prints the Print button in the print out. Any ideas what I am missing here? Thank you!
.hidden-print
See Bootstrap 3 Documentation on Responsive Utilities, Print
http://getbootstrap.com/css/#responsive-utilities-print
I have a question about my CCS code.
I got a button with above that a loading bar (that shows when you click on the button).
If I press the button, the loading bar comes but it pushes the button down and I've tried to make the button to position `fixed'.
Can someone tell me if there is another way or can you give a solution to my own code.
My HTML code with the button and loading bar:
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right">add</i>
</a>
</div>
</div>
This is my CSS for the button, the .btn selector is a class from materialize:
.btn{
background-color: #88969c !important;
position: fixed !important;
margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right"></i>
</a>
</div>
</div>
<script>
(function () {
$('#submitForm').on('click', function (e) {
e.preventDefault();
if($("#submitForm").hasClass('disabled')){
return;
}
$('#submitForm').addClass('disabled');
var randId = Math.floor((Math.random() * 19990307) + 1);
$('#loader').append('<div id="'+ randId +'" class="progress"><div class="indeterminate"></div></div>');
var name = $("#name").val();
var phonenumber = $("#phonenumber").val();
$("#name").val('');
$("#phonenumber").val('');
var data = {
name: name,
phonenumber: phonenumber
};
$.ajax({
url: 'addNew',
data: data,
method: 'post',
success: function (data) {
Materialize.toast(' '+ data +' ', 4000, 'cool white-text');
console.log(data);
$('#'+ randId +'').fadeOut(150, function () {
$('#'+ randId +'').remove();
$('#submitForm').removeClass('disabled');
});
},
})
})
})();
</script>
First of all you should make .btn { position: static; }. So that when ever loading bar comes your btn also shift itself down. And for making this happen (shifting and all). You have to use javascript or jquery.