We Keep Coding

How to update label of a link in JointJS when i click it?

I've been struggling with this a bit from some days. The situation is the following:
I want that when I click on a link of my graph, I can modify the label that the link has.
So far what I've been able to do is that I have a textinput where I write the text I want and then when I connect two elements, the link I create will have this label but is a bit buggy (Mainly, I have to connect and disconnect again an element to have the label I need in the link).
I guess that this can be done easily if you know which is the appropriate way but I have no idea (Even I've been looking at the doc).
This is the js code I have:
graph.on('change:source change:target', function(link) {
if (link.get('source').id && link.get('target').id) {
// both ends of the link are connected.
$('#link-input').css('display', 'block');
link.attr('text/text', $('#link').val());
}
});
And even I think that is not relevant, the HTML is this one:
<div id="link-input" class="form-group">
<label for="description">Link Condition</label>
<textarea class="form-control" rows="5" id="link"></textarea>
</div>
So what I would be fine with an approach that when I write to that textinput, it refreshes on that link in particular (but somehow I know I should mantain the object I am modifying). If someone know another approach please say, I do in this way because I have no idea how to do in another way.
Thanks for your attention, I hope to be explicit enough

You will need to be able to capture the pointerclick event on the link view
Then on the pointerclick event open up a text box to take an input and save it to the link attributes.
I did something similar for my project
Crete new link by extending the normal link and extend the link view also and override the pointerclick event.
joint.shapes.deviceLink = joint.dia.Link.extend({
vertexMarkup: [
'<g class="marker-vertex-group" transform="translate(<%= x %>, <%= y %>)">',
'<circle class="marker-vertex" idx="<%= idx %>" r="1" />',
'</g>'
].join(''),
defaults: joint.util.deepSupplement({
type: 'deviceLink',
connection: { name: 'orthogonal' },
attrs: {
'.connection': { stroke: '#fe854f', 'stroke-width': 6 },
sourcePort:{text:''},
targetPort:{text:''},
'.link-tools .tool-remove circle': { r: 8, fill:'#fff',position: 0.5 },
customLabel:{text:''},
},
labels: [ { position: 0.5, attrs: { text: { text: '' } } } ]
}, joint.dia.Link.prototype.defaults),
});
joint.shapes.deviceLinkView = joint.dia.LinkView.extend({
pointerclick: function (linkview, evt, x, y){
prompt for new label and change your label
this.model.label(0, { attrs: { text: { text: 'new label' } } });
},
});

Chartist dynamic input

I'm making a website where users can upload data that will be displayed as a graph
HTML:<div id="data"></div>
test1.php outputs:,-0.05,-0.07,-0.07,-0.07,0.14,0.14,0.09,0.07,0.07,0.07,0.07,0.65,0.63,0.63,0.63,0.63,0.63,0.58,0.56,0.56,0.56,0.56,0.84,0.79,0.77,0.77
js/jquery:
$(document).ready(function(){
$("#data").load("test1.php");
var data = $("#data").text().split(",").slice(1);
new Chartist.Line(".ct-chart", {
labels: [data],
series:[ data ]
}, {
fullWidth: true,
height: 650,
chartPadding: {
right: 0
}
});
});
The graph does not show up and I get the error
Uncaught Error: Exceeded maximum number of iterations while optimizing
scale step
But if I type $("#data").text().split(",").slice(1) into the console and paste the output into labels and series it works fine it also works if you make data a normal array and don't get the data from the page

I assume you use the $.load function runs an xhr request. The XHR requests are normally Asynchronous (google the definition of the acronym AJAX) - therefore the data you are trying to input is not present at the time you need it. It is only returned from the php page, after all of the http-request is done - which is most likely after the Charlist.new() function has fired.
Look at the documentation here: http://api.jquery.com/load/
If you instead tried something like this (NOT tested):
$(document).ready(function(){
$.ajax("test1.php", {
success:function(response) {
var data = response.split(",").slice(1);
new Chartist.Line(".ct-chart", {
labels: [data],
series:[ data ]
}, {
fullWidth: true,
height: 650,
chartPadding: {
right: 0
}
});
});
}
});
EDIT: Ok i updated some code. As i said, This is untested. But this should steer you in the right direction. Try it now. If it doesnt work 100% do some testing and debugging, and maybe you'll learn something..

Noty.js removing oldest notification on new notification

I am using this script http://ned.im/noty/
for showing notifications
var n = noty({
text: message,
type: type,
dismissQueue: true,
force: true,
layout : "bottomLeft",
theme: 'newTheme',
maxVisible : 5
});
So this is the current config, it has queued 5 items. The problem is that I can't figure out how to remove the first notification on showing new one, when a button is clicked.
Any ideas are welcome.

Okay I figured it out using the noty.js API: http://ned.im/noty/#api
first I defined the top notification
var notyclose_id = $("#noty_bottomLeft_layout_container>li:first-child>.noty_bar").attr('id');
after that I get the amount of notifications
var noty_list_count = $("#noty_bottomLeft_layout_container li").size();
than I check if this amount is bigger or equal to my notifications setting
if(noty_list_count >= 5)
$.noty.close(notyclose_id);
and if yes I use the api to close it. :)

Was looking for this and ended up here; current version for the time being (3.1.0) allows you to use the killer option:
noty({
text: 'I have just killed it',
type: 'success',
killer : true
})
Looks like it "kills" all previous notifications in the queue, making "this one" the only one displayed.

You can also consider an auto removal timeout. That's what I do with information and success messages: they disappear automatically after 3 seconds (timeout: 3000). I leave the error and warning messages permanent (user has to click it to be removed, timeout: false, that's the default).
This way it's less likely that things pile up and requires less user interaction. Less friction. I don't know if it fits your use-case though.
noty({
text: 'Sucessfully persisted xy value',
layout: 'bottomRight',
type: 'success',
timeout: 3000,
animation: {
open: 'animated zoomInUp', // Animate.css class names
close: 'animated zoomOutUp' // Animate.css class names
}
});
noty({
text: 'Error while writing value xy',
layout: 'bottomRight',
type: 'error',
animation: {
open: 'animated zoomInUp', // Animate.css class names
close: 'animated zoomOutUp' // Animate.css class names
}
});

if your are using layout as 'topRight' then given below code is helpful.
var notyclose_id = $("#noty_topRight_layout_container>li:first- child>.noty_bar").attr('id');
var noty_list_count = $("#noty_topRight_layout_container li").size();
if(noty_list_count >= 6) {
$.noty.close(notyclose_id);
}
you also need to call $.notyRenderer.show() to show a new message, it's already there but you need to call it everytime
if(instance.options.maxVisible > 0) {
//if($(instance.options.layout.container.selector + ' > li').length < instance.options.maxVisible) {
$.notyRenderer.show($.noty.queue.shift());
//}
//else {
//}
}

Modifing the "X" close button of highslide popups

I'm using highslide in conjunction with highcharts and I want to modify the close button, more specifically, I want to call an additional function when a user clicks that "X" button.
When I inspect that "X" button, I get this in my console
<span>Close</span>
I want to do something like this
<span>Close</span>
But I am unable to find where the code for that is located.
I have tried adding this to my header in the html file itself, in addition to the highslide.config.js to manually override but it has not worked.
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2 // fading the semi-transparent overlay looks bad in IE
});
Could somebody give me a helping hand?
////////////////////////////// updated
Thanks to Jeff B, I was able to accomplish the desired task using code that looks like this (although the example shown by Jeff B also works):
cursor: 'pointer',
point: {
events: {
click: function(event) {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.ticker,
maincontentText: '<b>Detail:</b> ' + this.info,
width: 250
});
alert('function goes here');
hs.Expander.prototype.onBeforeClose = function(sender) {
alert('function goes here');
}
},
}
},

Why modify the button? Highslide provides an onBeforeClose prototype:
hs.Expander.prototype.onBeforeClose = function (sender) {
myotherfunction();
}
There is also an onAfterClose prototype if you want different timing.
onBeforeClose Documentation
Demo: http://jsfiddle.net/xjKFp/

Twitter feed in a regular div?

Twitter's embed code is a big clunky if you ask me. It appears you have to load the js and put the js embed code (javascript) in the page where you want it in order for it to show up. I would like to load the js right before the end of my </body> and also put the js script in there as well. I would then like to just place an empty div anywhere on my page and the twitter feed will display there. Like <div id='twitter_feed'></div> Is that possible adjusting the code that Twitter gives us?
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('example').start();
</script>
My question is not how to using different tools to render a feed. My question is how do I make the above code that twitter provides and write it in a way that it will render in a div that I specify.
After reading though this...http://www.dustindiaz.com/twitter-widget-doc I found that you can specify an id.

This sounds like what you want, using jQuery tweets plugin found on http://plugins.jquery.com/project/jQuery-Tweets
HTML
<div id="tweets">
</div>
jQuery
$('#tweets').tweets({
tweets:4,
username: "jquery"
});
or using your current widget http://jsfiddle.net/mazlix/dZ2aP/
<div class="content_up_here">
There's so much stuff here.
</div>
<script>twitterwidget();</script>
<div class="content_down_here">
Lorem and Ipsum sitting in a tree. D O L O R S I T.
</div>

var username = "username";
$.getJSON("http://twitter.com/statuses/user_timeline/"+username+".json?callback=?",
function(data) {
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}
$("#tweet").html(replaceURLWithHTMLLinks(data[0].text));
});
The above script will parse links and usernames and make them actual links. All you need to do is have a div with the id of #tweet. Make sure you load jQuery too. This also get only one lastest tweet.