How to do a reversed resize with jquery UI? (Enlarge instead of minimize and vice versa) (needs to be to done after rotation done be the user - it could be any degrees) because no consideration is take into account when rotating divs
newItem is a div.
newItem.resizable({
handles: {
'nw': '.nwgrip',
'ne': '.negrip',
'sw': '.swgrip',
'se': '.segrip'
},
aspectRatio: true,
resize: function( event, ui ) {
//Original size
var origWidth = ui.size.width;
var origHeight = ui.size.height;
//Fumbling in the dark... ...How do I do "reversed" resize?
//Tried this:
ui.helper.css("width", (origWidth - ui.helper.css("width") *-2) + "px");
ui.helper.css("height", (origHeight - ui.helper.css("height") *-2) + "px");
}
});
Related
I have a chart with some indicators below it. Each indicator area consists
of a svg renderer button. so when I use resize property to drag and resize
the panes, the series resized perfectly but the button remains in its same
position, Can we move the button with the resizer?
Here I created a sample link to regenerate
https://jsfiddle.net/q0ybpnvx/2/
Any help will be appreciated. I am having great trouble. Thank you
You can add and position the custom button in render event:
chart: {
events: {
render: function() {
var chart = this;
if (chart.customBtn) {
chart.customBtn.attr({
y: chart.yAxis[1].top,
});
} else {
chart.customBtn = chart.renderer.button(
'sometext',
5,
chart.yAxis[1].top,
function() {
console.log('some task')
}).add()
}
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/b7vq4ecy/
API Reference:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I was able to do something by manually changing the x/y attributes of my svgRenderer label, the same should apply to buttons.
I'm in angular and have a listener for screen resizing:
Also Note that you can change the entire SVGRenderer label with the attr.text property.
this.chart = Highcharts.chart(.....);
// I used a helper method to create the label
this.chart.myLabel = this.labelCreationHelperMethod(this.chart, data);
this.windowEventService.resize$.subscribe(dimensions => {
if(dimensions.x < 500) { //this would be your charts resize breakpoint
// here I was using a specific chart series property to tell where to put my x coordinate,
// you can traverse through the chart object to find a similar number,
// or just use a hardcoded number
this.chart.myLabel.attr({ y: 15, x: this.chart.series[0].points[0].plotX + 20 });
} else {
this.chart.myLabel.attr({ y: 100, x: this.chart.series[0].points[0].plotX + 50 });
}
}
//Returns the label object that we keep a reference to in the chart object.
labelCreationHelperMethod() {
const y = screen.width > 500 ? 100 : 15;
const x = screen.width > 500 ? this.chart.series[0].points[0].plotX + 50 :
this.chart.series[0].points[0].plotX + 20
// your label
const label = `<div style="color: blue"...> My Label Stuff</div>`
return chart.renderer.label(label, x, y, 'callout', offset + chart.plotLeft, chart.plotTop + 80, true)
.attr({
fill: '#e8e8e8',
padding: 15,
r: 5,
zIndex: 6
})
.add();
}
In Highcharts there is a nice feature to zoom and pane the area. But in order to use panning - it should be in combination with a shift key as mentioned in the example here. Is there a way to display a scroll bar on zoom in instead of panning?
You can use renderer and make your custom scrollbar with it:
http://api.highcharts.com/highcharts#Renderer.rect
You can make two rectangles, one for your scrollbar background and second for your scrolling button.
You can change their attributes using attr():
http://api.highcharts.com/highcharts#Element.attr
chart.renderer.rect(0, height - 60, width, 20)
.attr({
fill: '#666',
zIndex: 3,
visibility: 'hidden'
}).addClass('scroll')
.add();
You can use afterSetExtremes event and inside its callback function you can connect visibility of your scrollbar with visibility of your reset zoom button:
http://api.highcharts.com/highcharts#xAxis.events.afterSetExtremes
You need to calculate width of your scrollbar and x position. You can do it by simple math proportion of your axis min and max and width of your chart. For example you can set your width inside redraw event callback function:
redraw: function() {
var chart = this;
this.xAxis[0].displayBtn ? ($('.scrollBar').show() && $('.scroll').show()) : ($('.scrollBar').hide() && $('.scroll').hide())
width = chart.chartWidth;
newWidth = width * (max - min) / (oldMax - oldMin);
$('.scroll').attr({
width: width
});
$('.scrollBar').attr({
width: newWidth,
x: width * min / oldMax,
});
}
You need to add mousedown and mousemove events to your scrollbar. You can do it using jQuery. Inside mousemove event you need to recalculate x position of your scroll button basing on your mouse position:
$('.scrollBar').on('mousedown', function() {
var mousePos;
$(this).bind('mousemove', function(e) {
$(this).attr({
x: e.clientX + 70,
})
chart.xAxis[0].setExtremes(min - ((mousePos || e.clientX) - e.clientX) * oldMax / width, max - ((mousePos || e.clientX) - e.clientX) * oldMax / width, true, false);
mousePos = e.clientX;
});
})
Here you can see an example how it work:
http://jsfiddle.net/LnneuLoy/8/
Kind regards.
So I've managed to add scrollbars to large jQM popups with css('overflow-y', 'scroll'). But how to do this only when the popup is larger than the user's viewport?
I'm trying with the jquery-visible plugin but I can't get it to respond:
http://jsfiddle.net/mmRnq/124/
$('#test-button').on('click', function(e) {
$('#confirmDialog').popup('open');
// https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport
if(!$('#confirmDialog').visible(true)) {
alert('Popup not fully visible - add overflow scrolling');
$('#confirmDialog').css('overflow-y', 'scroll');
}
});
You can use
overflow-y: auto
This makes the scrollbar only visible when it is needed.
Updated FIDDLE
UPDATE:
You can also just make the content of the popup scrollable so the titlebar remains in view:
#confirmDialog .ui-content {
overflow-y: auto;
}
$('#confirmDialog').on({
popupbeforeposition: function() {
var maxHeight = $(window).height() - 120;
$('#confirmDialog .ui-content').height(maxHeight);
}
});
DEMO
I had a popup too large, although it was because of a searchable list. As I wanted to keep the search field at the top whilst scrolling the list only, I had to do this:
$("#confirmDialog").on({
popupbeforeposition: function (e, ui) {
var maxHeight = $(window).height() - 100 + "px";
$("#confirmDialog .ui-content").css("max-height", maxHeight);
},
popupafteropen: function (e, ui) {
var maxHeight = $(window).height() - 150 + "px";
$("#confirmDialog .ui-content ul").css("max-height", maxHeight).css("overflow-y", "scroll");
}
});
Remember do not perform arithmetic on maxHeight once assigned as it's a string, so this doesn't work:
$("#confirmDialog .ui-content").css("max-height", maxHeight - 50);
I'm trying to figure out how to enable visitors to drag to rotate a 3D div using .draggable(). Currently the div rotates but also moves vertically and horizontally making the process touchy and unpredictable. I would like the origin of the div to stay fixed, and the "dragging" to only affect the rotation, so users can "spin" the div around to see the other sides.
here is link to the codepen: http://codepen.io/armandhammer8/pen/IiBga
$('.anime').draggable({
drag: function(event, ui){
var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
$(this).css({
'transform': rotateCSS,
'-moz-transform': rotateCSS,
'-webkit-transform': rotateCSS
});
Thanks in advance!
The div element is a little house:
I want to be able to spin it around
The built in functionality of draggable is giving you the problems.
It's not so hard to get the functionality by yourself and stop using draggable.
Javascript:
var offset = 0, startX;
var elem = document.getElementById("element");
$('.draggable').on('mousedown', function (e) {
startX = e.pageX - offset;
})
.on('mouseup', function() {
startX = null;
})
.on('mousemove', function (e) {
if(startX) {
offset = e.pageX - startX;
elem.style['-webkit-transform'] = 'rotateY(' + offset + 'deg)';
}
});
demo
I am using jQuery UI to make some elements draggable and droppable. Much like a sortable, I'm trying to arrange the dragged element left/right/above/below to a hovered element when it's dropped. Also, I want to show an indicator on hovering another element, where the element will be arranged to, when it's dropped.
The behaviour should be, the the element will be dropped left of the hovered element if the cursor hovers the left third of the element. It should be dropped right of the hovered element if the cursor is above the right third of the hovered element. In script.aculo.us, there's a parameter called 'overlap' which indicates the mouse-overlap in percent of the hovered element.
Is there something similar in jQuery UI or how can this be done?
Ok, here's one way to do this. Basically, the idea is to read the offset, width and height of a droppable once a draggable is dragged over it. And while an element is dragged and the other element is hovered, the overlap is calculated using the mouse-position, the offset and the dimensions of the element (the offset is subtracted from the mouse-position and compared to the droppable's dimensions):
$(function() {
var offx, offy, w, h,
isOverEl = false;
$( ".component" ).draggable({
drag: function(event, ui) {
if(!isOverEl) return;
console.log(
((event.pageY-offy)/h)*100, // returns vertical overlap in %
((event.pageX-offx)/w)*100 //returns horizontal overlap in %
)
}
});
$( ".component" ).droppable({
over: function(event, ui) {
var $this = $(this),
offset = $this.offset();
offx = offset.left;
offy = offset.top;
w = $this.outerWidth();
h = $this.outerHeight();
isOverEl = true;
},
out: function(event, ui) {
isOverEl = false;
}
});
});