I'm very new to using HTML. I'm required to use it for a project and I have no education on it at all. Here's a break down of what I need to do. I need to have a graph of text boxes (I have added some features to some of them provided by webix) and I would like to have buttons that allow me to add or delete rows. I'm using a webix datatable as well. Here is my code for the button. At the moment, I just want to add a row to the top of the chart. Right now I just have the add rows button. Once I figure this out, I can easily do the remove.
input type='button' class="sample_button" value='add row' onclick= grida.addRowCss(1, getElementById('grida').style.color = "black");
Here is my datatable code.
webix.ready(function(){
grida = webix.ui({
container:"testA",
view:"datatable",
columns:[
{ id:"stage",editor:"text", header:"Stage", width:150},
{ id:"component",editor:"text", header:"Component",width:200},
{ id:"epic",editor:"text", header:"Epic" , width:200},
{ id:"engineering", editor:"text", header:"Engineering", width:200, suggest:numSuggest},
{ id:"design", editor:"text", header:"Design", width:200, suggest:numSuggest},
{ id:"research",editor:"text", header:"Research", width:200, suggest:numSuggest},
{ id:"notes", editor:"popup", header:"Notes", width:200}
],
editable:true,
autoheight:true,
autowidth:true,
data: [
{id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"},
]
});
});
Everything is functional except for the button, which appears, but does nothing.
This is a link for the addRow webix function.
http://docs.webix.com/api__ui.datatable_addrowcss.html
Any and all help is appreciated, especially because I'm completely new to this.
Thanks
Edit1:
Thank you for the answer. So at the moment I make my button like this (before the script)
input type="button" value="Add row" onclick= 'add_row()'
And the table remains the same as before, however I've included the add_row function after the conclusion of the table. I'll include the last bit of the table for context
data: [
{id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"}
]
});
function add_row(){
grida.add({
stage:"Test 2",
component:"Strategy",
epic:"Design",
engineering:2,
design:0,
research:0,
notes: "This is a test"
},2)
}
I've also tried
$$("grida").add(...)
to no avail. The button is on screen, but doesn't work. I imagine I'm doing something out of order, but I'm not sure what.
You need to use add not addRowCss as in your code snippet
http://docs.webix.com/api__link__ui.datatable_add.html
add adds the new row
addRowCss adds css class to the row
grida.add({ stage:"Test 2", component:"Second Component"})
Related
I would like to make a custom toolbar for my quill editor. Therefore I would like to add another button to the toolbar for converting the text I enter into html code. I have tried several methods but they didn't work out. Please help me with an idea.
What i have in component.html:
<quill-editor [styles]="{height: '200px'}" [modules]="editorModules" (onEditorChanged) = "changedEditor($event)"></quill-editor>
And here is what i have in component.ts:
editorText='';
editorModules = {
toolbar: [
['bold', 'italic', 'underline'],
[{align:''}, {align:'center'}, {align:'right'}, {align: 'justify'}],
[{'indent': '-1'},{'indent': '+1'} ],
[{'size' : ['small', false, 'large', 'huge']}],
['color'],
['link'],
[{'list': 'bullet'}, {'list': 'ordered'}],
['image']
]
}
changedEditor(event: EditorChangeContent | EditorChangeSelection) {
console.log('editor got changed');
this.editorText = event['editor']['root'];
}
Here is a photo of my current Text Editor:
Text Editor
I would very much appreciate if you would try to help me, thank you.
While using DataTables for my project, When i align the Export buttons to the right side of the table using float:right. It is not properly aligned with the right edge of the table. Whereas it is properly aligned when i set float:left.
Please suggest a solution for this.
$(" #adminMainTable,#managerMainTable").DataTable( {
scrollY: '50vh',
scrollCollapse: true,
paging: false,
dom: 'frtpB', //This changes the position to Bottom
buttons: [
{ extend: 'excelHtml5', text: 'To Excel' },
{ extend: 'csvHtml5', text: 'To CSV' },
{ extend: 'pdfHtml5', text: 'To PDF' }
]
});
//The below code is for changing the position of buttons to right side of the table
$("div#adminMainTable_wrapper,div#managerMainTable_wrapper").find($(".dt-buttons")).css("float","right");
Using a similar approach to your code for floating right, you can do this:
$(your selector in here).find($(".dt-buttons button.dt-button:nth-child(3)")).css("margin-right","0");
In other words, remove the right-padding from the final button.
Instead of :nth-child(3), you can use :last-child. That may be safer if the number of buttons ever changes.
I have a chat on my website that reads from a JSON file and grabs each message and then displays it using Vue.js. However, my problem is that when a user posts a link, it is not contained in an anchor tag <a href=""/>. Therefore it is not clickable.
I saw this post, and I think something like this would work, however, I am not allowed to add any more dependencies to the site. Would there be a way for me to do something similar to this without adding more dependencies?
Code for displaying the message.
<p v-for="msg in messages">
<em class="plebe">
<b> [ {{msg.platform.toUpperCase()}} ]
<span style="color: red" v-if="msg.isadmin">{{msg.user.toUpperCase()}}</span>
<span style="color: #afd6f8" v-else="">{{msg.user.toUpperCase()}}</span>
</b>
</em>:
{{msg.message}}
</p>
In a situation like this, its preferred to write a custom functional component.
The reason for this is the fact that we are required to emit a complex html structure, but we have to make sure to properly protect against xss attacks (so v-html + http regex is out of the picture)
We are also going to use render functions, because render functions have the advantage to allow for javascript that generates the html, having more freedom.
<!-- chatLine.vue -->
<script>
export default {
functional: true,
render: function (createElement, context) {
// ...
},
props: {
line: {
type: String,
required: true,
},
},
};
</script>
<style>
</style>
We now need to think about how to parse the actual chat message, for this purpose, I'm going to use a regex that splits on any length of whitespace (requiring our chat urls to be surrounded with spaces, or that they are at the start or end of line).
I'm now going to make the code in the following way:
Make a list for child componenets
Use a regex to find url's inside the target string
For every url found, do:
If the match isn't at the start, place the text leading from the previous match/start inside the children
place the url inside the list of children as an <a> tag, with the proper href attribute
At the end, if we still have characters left, at them to the list of children too
return our list wrapped inside a P element
Vue.component('chat-line', {
functional: true,
// To compensate for the lack of an instance,
// we are now provided a 2nd context argument.
// https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
render: function (createElement, context) {
const children = [];
let lastMatchEnd = 0;
// Todo, maybe use a better url regex, this one is made up from my head
const urlRegex = /https?:\/\/([a-zA-Z0-9.-]+(?:\/[a-zA-Z0-9.%:_()+=-]*)*(?:\?[a-zA-Z0-9.%:_+&/()=-]*)?(?:#[a-zA-Z0-9.%:()_+=-]*)?)/g;
const line = context.props.line;
let match;
while(match = urlRegex.exec(line)) {
if(match.index - lastMatchEnd > 0) {
children.push(line.substring(lastMatchEnd, match.index));
}
children.push(createElement('a', {
attrs:{
href: match[0],
}
}, match[1])); // Using capture group 1 instead of 0 to demonstrate that we can alter the text
lastMatchEnd = urlRegex.lastIndex;
}
if(lastMatchEnd < line.length) {
// line.length - lastMatchEnd
children.push(line.substring(lastMatchEnd, line.length));
}
return createElement('p', {class: 'chat-line'}, children)
},
// Props are optional
props: {
line: {
required: true,
type: String,
},
},
});
var app = new Vue({
el: '#app',
data: {
message: 'Hello <script>, visit me at http://stackoverflow.com! Also see http://example.com/?celebrate=true'
},
});
.chat-line {
/* Support enters in our demo, propably not needed in production */
white-space: pre;
}
<script src="https://unpkg.com/vue#2.0.1/dist/vue.js"></script>
<div id="app">
<p>Message:</p>
<textarea v-model="message" style="display: block; min-width: 100%;"></textarea>
<p>Output:</p>
<chat-line :line="message"></chat-line>
</div>
You can watch or write computed method for the variable having url and manupulate it to html content and then use v-html to show html content on the page
v-html
I would like to know how to implement a simple LinkedIn HopScotch.
I tried to implement, but was unsuccessful in getting it done.
Below is my attempted implementation;
<h1 id="header">My First Hopscotch Tour</h1>
<div id="content">
<p>Content goes here...</p>
</div>
<button id="myBtn">Click Me</button>
<script>
var tour = {
id: "hello-hopscotch",
steps: [
{
title: "My Header",
content: "This is the header of my page.",
target: "header",
placement: "right"
},
]
};
$("#myBtn").click(function() {
hopscotch.startTour(tour);
});
</script>
Should I add a <div> with an id as hello-hopscotch as per tour object?
http://cdnjs.com/libraries/hopscotch is the source of my libraries; I've implemented hopscotch.min.css and hopscotch.min.js.
What am I doing wrong and how can I fix it?
Actually, you have set the placement to the "right" which is fine, but it is displaying the step off the screen. Because the step is displayed to the right of the element, which happens to be a block element. Switch it to bottom and you will see the item.
You can configure the placement per the documentation.
As I know from last day I've started with this plugin, hopscotch will not render if element that you targeted not found. If your target is an element with Id, you just need to set target with "#".
I'm working with raphael.js to draw and I want to modify the title attribute (change color, font size, etc., ).
circle.attr({
title: 'This is a circle.',
fill: 'red'
});
Here's my jsfiddle.
Is there a way to do this? Or maybe add custom tooltips to raphael objects?
Edit: Here's an expected modification: I wanna print "Hello World" on my tooltip. "Hello" in red, then a "new line" character and finally, "World" in blue color.
This doesn't work but might help to get an idea on what I'm trying to do.
circle.attr({
title:"<font color="red">Hello</font><br><font color="blue">World!</font>"
});
Raphael does not have shorthand functions for this, but you can very easily alter the rendered SVG elements by simple DOM manipulation :
circle.node.onmouseover = function() {
this.style.cursor = 'pointer'
this.querySelector('title').textContent = 'This is a new title';
}
forked (now actually working) fiddle -> http://jsfiddle.net/nheL8add/
Update : I now realize that you are actually asking : "does a HTML element title attribute supports HTML?" (I was totally focusing on changing the title element, not the part efter "Edit"). The answer is no. The title attribute of a circle element is completely the same as any other title attribute in all other HTML elements. But you can use a tooltip script like qTip2 or similar to get the desired effect. I recommend qtip2 since it support <SVG> elements. Skip the title attribute on the circle element itself and use qTip2 instead :
$("#canvas circle").qtip({
style: { classes: 'tooltip' },
content: { text: '<font color="red">Hello</font><br><font color="blue">World!</font>' },
position:{ my:'center center', at:'center center' },
show: 'mousemove mouseenter mouseover'
});
yet another forked fiddle -> http://jsfiddle.net/ajLnhete/