I need to know how to apply css styles for a notify.js alert.
Here's my code -
$.notify({
message: "Alert!"
}, {
type: 'danger',
animate: {
enter: 'animated fadeInUp',
},
placement: {
from: "top",
align: "center"
},
offset: 20,
spacing: 10,
z_index: 1031,
});
I need to apply some styles for this.
$.notify({
message: "Alert!"
}, {
type: 'danger',
animate: {
enter: 'animated fadeInUp',
},
placement: {
from: "top",
align: "center"
},
offset: 20,
spacing: 10,
z_index: 1031,
style: 'addClassName'
});
then a structure like this will be constructed in html for notifiy
<div class="notifyjs-addClassName-base notifyjs-addClassNamesuccess">
<div class="clearfix">
<div class="title" data-notify-html="title">Would you like some Foo ?
</div>
<div class="buttons">
<button class="no">Cancel</button>
<button class="yes" data-notify-text="button">Confirm</button>
</div>
</div>
</div>
and thereafter you can create 1 css filr as per your need and add css making this .notifyjs-addClassName-base as the base class
.notifyjs-addClassName-base{
}
Related
For our school project, we are working with a client to develop a front-end website in Vue JS. As the work has been split up, I am not quite sure how I can use the filter tool he has recommended to our group: http://tabulator.info/examples/4.0?#filter
From the Tabulator site, we are to use setFilter(), preferably. I believe the client would like us to figure out how the filter parameters bar can be placed into the sidebar on our website (seen in the website image below).
Our Website showing the table and sidebar
I am fairly new to Vue and JS, so the difficulty I am having is taking the example from Tabulator, which is shown in HTML and JS, and converting it into VueJS. Here is some of the code I have tried to set up the sidebar and an image of the structure we have set up in Vue's framework. The ClusterExpansion.vue contains the code for the sidebar, and the MatchList.vue contains the code for the tabulator table.
Overview of our Vue Structure
I am wondering if anyone has any tips on how I can alter the ClusterExpansion.vue code to add the filter parameters bar that will pop up when I have accessed the page with the MatchList.vue code?
I can't wrap my head around how I would take what was done in the function updateFilter() from the Tabulator example and apply it to my code and client's code.
Thank you for any suggestions and advice!
MatchList.vue snippet:
export default {
name: 'TabulatorView',
data() {
return {
example: null,
image: false,
preview: null,
file: null,
tabulator: null,
tabledata: [],
columns: [],
};
},
props: {
dnaMatches: Object,
dnaTest: Object,
groupBy: String,
clusteringId: Number,
matchListHeight: Number,
matchListWidth: Number,
},
created() {
},
methods: {... /*the data below is part of the methods*/...
createTabulatorColumns() {
const test = this.dnaTest;
const that = this;
const printIcon = function (cell, formatterParams) { // plain text value
return "<i style='color:red' class='fa-solid fa-trash-can'></i>";
};
this.columns = [
{
formatter: 'rowSelection',
title: 'Select',
titleFormatter: 'rowSelection',
// width: 30,
headerHozAlign: 'center',
hozAlign: 'center',
headerSort: false,
cellClick(e, cell) {
cell.getRow().toggleSelect();
},
},
{
title: 'Active',
field: 'active',
// width: 95,
headerHozAlign: 'center',
hozAlign: 'center',
formatter: 'tickCross',
cellClick(e, cell) {
// eslint-disable-next-line no-unused-expressions
cell.getValue() ? cell.setValue(false) : cell.setValue(true);
console.log(cell.getRow().getData());
console.log(cell.getValue());
that.updateMatch(cell.getRow().getData());
},
},
{
title: 'Name',
// width: 230,
field: 'name',
formatter: 'link',
headerHozAlign: 'center',
hozAlign: 'center',
headerFilter: true,
headerFilterPlaceholder: 'Search',
// editor: 'input',
formatterParams:
{
// labelField: 'storeId',
// label: this.dnaTest.name,
labelField: 'name',
// url - a string representing the url, or a function which
// must return the string for the url, the function is passed the Cell Component as its first argument
url(cell) {
// cell - the cell component
return `/dnatest/${test.index}/match/${cell.getValue()}`; // return the contents of the cell;
},
},
},
{
title: 'cM',
field: 'cM',
headerHozAlign: 'center',
hozAlign: 'center',
// width: 100,
sorter: 'number',
headerFilter: 'number',
headerFilterPlaceholder: 'Min cM',
headerFilterFunc: '>=',
},...
ClusterExpansion.vue snippet:
<template>
<div class="sidebar">
<v-list-item
prepend-avatar="https://randomuser.me/api/portraits/men/85.jpg"
title="Evert-Jan Blom"
>
<template v-slot:append>
<v-btn
variant="text"
icon="mdi-chevron-left"
#click="rail = !rail"
></v-btn
>
</template>
</v-list-item>
<v-divider></v-divider>
<v-expansion-panels>
test
<v-expansion-panel> test 2 </v-expansion-panel>
test 3
</v-expansion-panels>
<div class="menu-items">
<router-link to="/" active-class="active" tag="button">
<div class="link-container">
Home
</div>
</router-link>
<router-link to="/" active-class="active" tag="button">
<div class="link-container">
About
</div>
</router-link>
<router-link to="/" active-class="active" tag="button">
<div class="link-container">
Tests
</div>
</router-link>
<router-link to="/" active-class="active" tag="button">
<div class="link-container">
Matches
</div>
</router-link>
<router-link to="/" active-class="active" tag="button">
<div class="link-container">
Clustering
</div>
</router-link>
</div>
</div>
</template>
<script>
export default {
methods: {
clicked() {
console.log('i was clicked!');
},
},
mounted() {
},
};
</script>
<style scoped>
.sidebar {
font-family: 'Fira Sans', sans-serif;
/* font-family: 'Roboto', sans-serif; */
font-size: larger;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
I'm trying to use the function: insertHTML
As per manual: editor.insertHTML('TEXTO DE TESTE', true, true);
I created a button and put a jquery
suneditor.insertHTML('Text 1', true, true);
But when clicking the button it does not add the text. But if I click on the editor and then click on the button, the text is added.
What am I doing wrong?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css">
<link href="http://suneditor.com/dist/css/suneditor.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror#5.49.0/lib/codemirror.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button id="text1">Text 1</button>
<button id="text2">Text 2</button>
<button id="text3">Text 3</button>
<textarea id="exampleOptions" style="width:100%; height:200px;">
Teste de Editor
</textarea>
<script src="http://suneditor.com/sample/js/common.js"></script>
<script src="http://suneditor.com/dist/suneditor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror#5.49.0/lib/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror#5.49.0/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror#5.49.0/mode/xml/xml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror#5.49.0/mode/css/css.js"></script>
<script src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.js"></script>
<script>
$(document).ready(function(){
$("#text1").click( function(){
suneditor.insertHTML('Text 1', true, true);
});
$("#text2").click( function(){
suneditor.insertHTML('Text 3', true, true);
});
$("#text3").click( function(){
suneditor.insertHTML('Text 2', true, true);
});
suneditor = SUNEDITOR.create('exampleOptions',{
font : [
'Arial',
'tahoma',
'Courier New,Courier'
],
fontSize : [
8, 10, 14, 18, 24, 36
],
colorList: [
['#ccc', '#dedede', 'OrangeRed', 'Orange', 'RoyalBlue', 'SaddleBrown'],
['SlateGray', 'BurlyWood', 'DeepPink', 'FireBrick', 'Gold', 'SeaGreen']
],
paragraphStyles: [
'spaced',
'neon',
{
name: 'Custom',
class: '__se__customClass'
}
],
textStyles: [
'translucent',
{
name: 'Emphasis',
style: '-webkit-text-emphasis: filled;',
tag: 'span'
}
],
width: '100%',
maxWidth: '600px',
minWidth: 400,
height : 'auto',
videoWidth : '80%',
youtubeQuery : 'autoplay=1&mute=1&enablejsapi=1',
imageWidth : 150,
popupDisplay: 'local',
resizingBar: false,
buttonList : [
[
I believe that insertHTML is working with the last cursor position. So if you don't focus the editor, last position of cursor is undefined and insertHTML will not work until you focus the editor. By the way i believe there is focus method that you can focus the editor then use insertHTML method. Documentation
editor.focus();
editor.insertHTML("...");
I am currently using owl carousel to make a slide with pictures.
But the problem now is, I wanna make the navigation on both side (not on top of the slide).
Below is my script:
$('.teamc').owlCarousel({
items: 4,
margin: 20,
autoHeight : true,
autoWidth: true,
center: true,
nav: true,
loop: true,
autoplay:true,
navText: ['<div class="customNextBtn" style="float:left; margin-left:33px"></div>', '<div class="customPreviousBtn" style="float:right; margin-right:33px"></div>'],
responsiveClass: true,
responsive: {
0: {
center: true,
items: 1,
margin: 20,
autoHeight : true,
autoWidth: true,
nav: false,
loop: true
},
600: {
center: true,
items: 4,
margin: 20,
autoHeight : true,
autoWidth: true,
nav: false,
loop: true
},
1000: {
center: true,
items: 4,
margin: 20,
autoHeight : true,
autoWidth: true,
nav: true,
loop: true
}
}});
Here is the sample picture of what I want it to be:
if you have this:
<div class="main-content">
<div class="owl-carousel owl-theme">
<div class="item">...</div>
<div class="item">...</div>
...
</div>
<div class="owl-theme">
<div class="owl-controls">
<div class="custom-nav owl-nav"></div>
</div>
</div>
you should add below code in js :
$('.main-content .owl-carousel').owlCarousel({
.... ,
navContainer: '.main-content .custom-nav',
....
});
I have an html page contain a div called wowslider-container1. I want to recreate the elements inside the wowslider-container1 when the values of properties such as duration and delay change. If I create another slider, it will create multiple sliders. If I hide, both will hide. What can I do? I don't need multiple sliders.
Duration:<input type="number" id="txtDuration" />
Delay<input type="number" id="txtDelay" />
<button onclick="set()">Set </button>
<br/>
<br/>
<div>
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li>
<a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor: pointer">
<img id="wows1_0" class="imgMain" src="SBG_HomePg_ANA2019_1146x405V3.jpg" len="0" alt="Consign." />
</a>
</li>
</ul>
</div>
</div>
</div>
script
var delay_value=100;
var duration_value=20;
function set() {
var dur=document.getElementById("txtDuration").value;
var del=document.getElementById("txtDelay").value;
setDuration(del, dur);
}
function setDuration(delay,duration) {
delay_value=delay;
duration_value=duration;
jQuery("#wowslider-container1").wowSlider({
effect: "fade",
prev: "",
next: "",
duration: duration_value * 100,
delay: delay_value * 100,
width: 900, height: 640,
autoPlay: true,
autoPlayVideo: false,
playPause: true,
stopOnHover: false,
loop: false,
bullets: 0,
caption: false,
captionEffect: "parallax",
controls: true,
controlsThumb: false,
responsive: 1,
fullScreen: false,
gestures: 2,
onBeforeStep: 0,
images: 0
});
}
setDuration(20,100);
The API shows that options can only be set during slider initialization (and there's no destroy() event), so you'll have to remove the events / elements and restart the slider:
http://wowslider.com/help/wowslider-api-184.html
HTML:
Duration: <input type="number" id="txtDuration">
Delay: <input type="number" id="txtDelay">
<button onclick="set()">Set </button>
<br><br>
<div class="wow-slider-container">
<div class="wow-slider">
<div class="images">
<ul>
<li>
<a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor:pointer">
<img id="wows1_0" class="imgMain" src='SBG_HomePg_ANA2019_1146x405V3.jpg' len='0' alt="Consign.">
</a>
</li>
</ul>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
var wowSliderOptions = {
effect: 'fade',
prev: '',
next: '',
duration: 20,
delay: 100,
width: 900,
height: 640,
autoPlay: true,
autoPlayVideo: false,
playPause: true,
stopOnHover: false,
loop: false,
bullets: 0,
caption: false,
captionEffect: 'parallax',
controls: true,
controlsThumb: false,
responsive: 1,
fullScreen: false,
gestures: 2,
onBeforeStep: 0,
images: 0
}
var wowSliderContent = jQuery('.wow-slider').html();
var wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
function set() {
// Set user-defined options
wowSliderOptions.duration = document.getElementById('txtDuration').value;
wowSliderOptions.delay = document.getElementById('txtDelay').value;
// Remove original WOW Slider instance
wowSlider.remove();
// Recreate original HTML slides
jQuery('.wow-slider-container').html(wowSliderContent);
// Start WOW Slider
wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
}
</script>
I am working on an angular.js application that displays various widgets in a dashboard. One of these widgets uses a Highcharts half-doughnut. I have created a prototype in straight HTML and it works as expected. I am now porting things over to my angular.js application using highcharts-NG. Everything in my widget is displaying EXCEPT the half-doughnut. Here is the code from my partial:
<div class="row container">
<div class="col-md-2 greyBack loanWidget">
<div class="calendarContainer">
<div class="calendarTitle">{{myLoan.LoanStatus.Month}}</div>
<div class="calendarDay">{{myLoan.LoanStatus.Day}}</div>
<div class="calendarYear">{{myLoan.LoanStatus.Year}}</div>
</div>
</div>
<div class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 300px; vertical-align: top;">
<div ng-controller="LoanStatusChart">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
<!--<div id="container" class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 300px; vertical-align: top;"></div>-->
<div class="col-md-3 greyBack loanWidget balance">
<span class="balanceText">{{myLoan.LoanStatus.OriginalPrincipalBalance}}</span><br />
<span class="balanceTextLabel">Outstanding Balance</span><br />
<span class="borrowedText">{{myLoan.LoanStatus.BorrowedAmt}}</span><br />
<span class="borrowedTextLabel">Borrowed</span>
</div>
<div class="col-md-3 loanWidget"><img src="../images/c4l/cfl-banner.png" /></div>
</div>
Here is the code in my controller:
cflApp.controller('LoanStatusChart', function ($scope) {
$scope.options = {
type: 'pie',
colors: ['#971a31', '#ffffff']
}
$scope.swapChartType = function () {
if (this.highchartsNG.options.chart.type === 'line') {
this.highchartsNG.options.chart.type = 'bar'
} else {
this.highchartsNG.options.chart.type = 'line'
}
}
$scope.highchartsNG = {
options: {
plotOptions: {
pie: {
borderColor: '#000000',
size: 115,
dataLabels: {
enabled: false,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black',
}
},
startAngle: -90,
endAngle: 90,
center: ['30%', '75%']
}
},
colors: ['#971a31', '#ffffff'],
chart: {
type: 'pie',
backgroundColor: '#f1f1f2',
height: 150
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Hello',
style: {
color: '#971a31',
fontWEight: 'bold',
fontSize: '15px'
},
verticvalAlign: 'middle',
y: 20,
x: -24
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
loading: false
}
});
My two questions are:
Why won't this display?
Currently the data is "hard-coded" in these lines:
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
How can I set this up so I can pass in the percentages? These come from another controller as you can see in the code in my partial.
UPDATE: I have managed to get the chart area to populate with something by adding Jquery prior to the Highcharts.js. However, it is ignoring every single option I pass to it and simply displaying "Chart Title" and a very tall div where the chart should be. Ideas?
I tried your code its running fine. Might be you have some javascript file ordering or CSS issue. Be sure to follow the correct order
jquery
Highcharts.js
AngularJS
Highchart-ng.js
Secondly you declared series:[{}]object twice in your chart configuration.
Here's the fiddle you can check your code here http://jsfiddle.net/Hjdnw/1018/