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/
Related
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' } } });
},
});
We are working with software supplied by a third party, and we are not allowed to modify it, can use only overrides.
I would like to create a new button and overlay it on top of a text input so that they are close together.
I'm having trouble getting the overlay to align, instead it appears top left on the screen. So of course it doesn't align to the text input. Sample code is below, in this case implemented in the view initComponent override after this.callParent([]); is called.
var viewport = Ext.ComponentQuery.query('viewport')[0];
var overlay = viewport.add({
xtype: 'panel',
fullscreen: true,
left: 0,
top: 0,
width: 120,
height: 40,
items:[{
xtype: 'button',
text: 'Find Address',
handler: function() {
alert('Got it!');
}
}],
styleHtmlContent: true
});
var textField = this.query('*[itemId=textField]')[0];
overlay.showBy(textField, 'c-c?');
I've tried using floating: true and lots of other approaches.
Once I get it to position properly, is there a way to have the button respond to tab order correctly? That is, tab out of the text field, then have the button get focus?
As I understand from your question, you have trouble with setting position to a component. If it is the problem, you can set xy coordinate. Look at this fiddle:
https://fiddle.sencha.com/#fiddle/tpl
viewport.down('#idOverlay').setXY([150, 140]);
Edit:
Ext.define('OverriddenViewport', {
override: 'ExampleViewPort',
initComponent: function() {
// Set up first
this.callParent([]);
this.add(overlay);
this.addListener('afterrender', function(viewport) {
viewport.down('#idOverlay').setXY([220,50]);
viewport.down('#idButton').addListener('blur', function(button) {
viewport.down('#idTextfield').focus();
console.log('textfield is focussed');
});
viewport.down('#idTextfield').addListener('blur', function(button) {
viewport.down('#idButton').focus();
console.log('button is focussed');
});
});
}
});
If you can access the source (just to look around) you maybe can create an override of the corresponding class. Create a override, and copy all of the code of the class (form?) into your override.
Here some additional info about creating overrides in ExtJs:
http://moduscreate.com/writing-ext-js-overrides/
https://sencha.guru/2014/12/04/abstract-vs-override/
In your override create a trigger (on the field you want to expand) with your functionality:
{
fieldLabel: 'My Custom Field',
triggers: {
foo: {
cls: 'my-foo-trigger',
handler: function() {
console.log('foo trigger clicked');
}
}
}
}
Im looking for a solution too open the PhotoSwipe gallery with a
img link. So there is a IMG with a gallery icon. And i want if the
user click on it that the gallery open.
Have someone an idea how i can handel that?
I found this out. But this open on load the gallery.
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {
preventHide: true
},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
instance.show(0);
}, false);
}(window, window.Code.PhotoSwipe));
</script>
Best regargs
I just started working with photoSwipe so I am not positive this will work but it seems to me you only have to call instance.show(0) on a click event.
Assuming I have this element on the page: <a id="launch-gallery" href="#">Click to launch gallery</a> I could add this jQuery click event to launch the gallery:
$('#launch-gallery').click(function(evt){
evt.preventDefault(); // prevent regular click action
instance.show(0); // Make sure 'instance' variable is available to this function
});
If you are not using jQuery, you can do the same thing in native JavaScript (but a little more verbose).
I hope this helps.
Note that I use php (ajax) to deliver the image locations and sizes, so you'll still have to define the json data yourself.
This is how I did it with Jquery:
$('.element').off(); //in case it's a dynamically changing element
$('.element').on("click tap", function () {
var dataForPhpScript = $(this).parents('.gallery').attr("data-attr"); //data for php script
$.getJSON('urlToPHPFunction?dataID=' + dataForPhpScript, function (json) {
openPhotoSwipe(json);
});
});
And here is the photoswipe opening function:
function openPhotoSwipe(jsonData) {
var pswpElement = document.querySelectorAll('.pswp')[0];
// define options (if needed)
var options = {
// history & focus options are disabled on CodePen
history: false,
focus: false,
showAnimationDuration: 0,
hideAnimationDuration: 0
};
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, jsonData, options);
gallery.init();
}
note that jsonData is supposed to look somewhat like this:
[
{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400
},
{
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}
];
I realise this answer is late, but since this came on top while just googling something entirely different (but photoswipe related), I thought maybe this would be useful!
I saw this technique at the bottom of a web page where the TAB stays in place at the bottom of the page and can be opened and closed to display more info. I assume it can be rotated to display a different special for different days. Can you point me to anything like it or explain the technique ? thanks. Here is a sample: http://www.tmdhosting.com/ look at the bottom of the page .
position: fixed is how you manage to keep something at the bottom or top of the page, regardless of scrolling.
This is easily discoverable using firebug's (http://getfirebug.com/) inspect element feature
You can check out my version of this at uxspoke.com
I wrote a jQuery plugin to do it, and calling it is straightforward:
$('#about').pulloutPanel({open:true}).
click(function() { $(this).trigger('toggle'); }) });
I basically instrument the panel to support "open", "close" events, and the implement the appropriate animations around them. The only "hard" part is getting the height right. It also supports "toggle" so you can add a generic click handler to it to open or close it. Finally, it uses opened/closed classes to keep track of its current state. That's it!
The code's pretty coupled to the technologies on the page (Csster) and the design it is in, so I'm not sure it will work for you. You can either use Csster, or just put the CSS rules into your stylesheet and remove them from the code. The important Css attributes are the positioning and bottom.
Here it is:
$.fn.pulloutPanel = function(options) {
var settings = $.extend({}, {
attachTo: 'bottom',
css: {
left: 0,
minHeight: 390,
border: '1px 1px 1px 0 solid #666',
has: [roundedCorners('tr', 10),boxShadow([0,0], 10, phaseToColor('requirements').saturate(-30).darken(50))],
cursor: 'pointer'
}, options);
return $(this).each(function() {
var $this = $(this);
$this.addClass('pullout_panel');
$this.bind('open', function(event) {
$this.animate({bottom: 0}, 'slow', 'easeOutBounce', function() {
$this.removeClass('closed').addClass('opened');
$this.trigger('opened');
});
});
$this.bind('close', function(event) {
var height = $this.innerHeight();
$this.animate({bottom: -height + 50}, 'slow', 'easeOutBounce', function() {
$this.addClass('closed').removeClass('opened');
$this.trigger('closed');
});
});
$this.bind('toggle', function(event) {
$this.trigger($this.hasClass('opened') ? 'close' : 'open');
});
once(function() {
Csster.style({
'.pullout_panel': {
position: 'fixed',
bottom: 0,
has: [settings.css]
}
});
});
$this.trigger(settings.open ? 'open' : 'close');
});
};
One of the nice things about the jQuery UI Dialog is that it has an option for Buttons, which automatically positions them correctly. I just wonder: Can I somehow place elements next to the buttons? I have a little Ajax-Loader gif that I would like to display in the lower left corner of the dialog, while the buttons stay at the lower right?
I know I can just remove the buttons and create them manually in HTML, but as jQuery takes care of positioning and styling already for me, I'd like to keep that functionality if it makes sense.
$("#newProjectDialog").dialog({
bgiframe: true,
resizable: false,
width: 400,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Create': function() {
$("#ajax-loader").show();
// Make the Ajax Call and whatever else is needed
$(this).dialog('destroy');
},
Cancel: function() {
$(this).dialog('destroy');
}
}
});
All you basically need to do is
//depending on what #ajax-loader is you maybe need to style it (float:left, ...)
$("#ajax-loader").clone(true).appendTo("div.ui-dialog-buttonpane").show();
Below a fancier version with a few considerations incorporated.
I imagine #ajax-loader to look similar to this
<div id='ajax-loader'><img src='loader.gif' /><span>loading...</span></div>
or just this
<img id='ajax-loader' src='loader.gif' />
javascript can look like this
...
'Create': function() {
var btnpane = $("div.ui-dialog-buttonpane");
//prevent bad things if create is clicked multiple times
var there = btnpane.find("#ajax-loader").size() > 0;
if(!there) {
$("#ajax-loader").clone(true).appendTo(btnpane).show();
// Make the Ajax Call and whatever else is needed
// if ajax call fails maybe add $("#ajax-loader", btnpane).remove();
$(this).dialog('destroy');
}
},
...
A note
You should call .dialog('destroy') in the complete event of the ajax request else the dialog may get destroyed before the ajax request finished and the user may not even see the "loader".
How about just inserting your spinner before the first ui-dialog-button?
buttons: {
'Create' : function() {
$('<img src="spinner.gif" style="float: left;" />').insertBefore('.ui-dialog-buttonpane > button:first');
...ajax stuff...
$(this).dialog('destroy');
}
}
The best way to do this, is to create another button, make it totally transparent with no border, and add the animated gif as its background image. By using another button, you can easily locate its position relative to all your other buttons.
First, to be able to style buttons more, you need to create them with one level higher of definition. So instead of:
buttons: {
'Create': function() {
$("#ajax-loader").show();
// Make the Ajax Call and whatever else is needed
$(this).dialog('destroy');
},
Cancel: function() {
$(this).dialog('destroy');
}
}
Do it like this (notice square brackets and one more level of indent):
buttons: [
{
id: 'create-button',
class: 'create-button-class',
text: 'Create',
click: function() {
$("#ajax-loader").show();
// Make the Ajax Call and whatever else is needed
$(this).dialog('destroy');
}
},
text: 'Cancel',
click: function() {
$(this).dialog('destroy');
}
}
]
You can assign an id and class to each button or not. If you assign either id and/or class, then you can apply CSS styling to it.
<style>
.create-button-class{
height:50px;
width:50px;
left:-300px; /* Pushes it left, change value for desired location. */
}
.ui-dialog .ui-dialog-buttonpane #create-button {
color: transparent; /* no inner color and also hides text */
border: none; /* removes border */
background-image:url(images/spinner-gif-25px.gif); /*replaces default image */
background-size: 50px;
background-repeat: no-repeat;
}
</style>
If you like, create a normal additional button and use CSS property left to push it as far left in the button panel as you like, before making it transparent and no border.