I'm working on a menu system where I want a ul to show as a dropdown when the users does a mouseOver on li in another ul. I thought I'd use position to set the position of the dropdown (so it actually looks like a menu). What I want is the dropdown's top left corner to start at the same place as the bottom left corner of the wrapping listitem.
Unfortunately the positioning fails in several different ways:
In Firefox it seems like the dropdown's are offset with approximately -100 25 pixels
the first item in the list has a different offset on the left side compared to the other items
The offset in IE is not the same as in FF
Doing the positioning repeatedly in explorer results in different positions each time.
I've created a test page where you can see the effects:
http://test.evju.biz/test/test_position.html
We've solved it by not using the jquery.ui.position. Here is the code we ended up using:
$(this).find("ul.subnav").first().css({
left: $(this).position().left + 'px',
top: ($(this).position().top + $(this).height()) + 'px'
});
Related
I have a menu of small menu items tightly packed together.
After upgrading to Material 14.0.5 the matTooltip appears to have an outer active area of about 3 mm outside its borders. In other words, the tool tip does not hide if I point mouse cursor outside the menu item/element and the pointer is still close to the tool tip - witin about extra 3mm outside the tool-tip borders. In my case the tool tip keeps covering the neighboring items and prevents accessing them if my cursor is close to the tool-tip. I would need to have the too-tip hide as soon as the cursor leaves its borders. It worked fine for me before the upgrade as there was no such area around the tool-tips. Is there a way to reduce the active area around the matTooltip to zero? I tried changing the margins and padding but it did not help.
This appears to work:
::ng-deep .mat-tooltip {
margin: -4px !important;
}
I have a CheckBoxGroup that shows 8 items. The default presentation is vertical, which does not really look good in my layout.
But if I set the presentation to horizontal using
checkBoxGroup.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);
then the 8 items do not have enough space. So I am forced to use the vertical style but I am not at all content with that.
Is there a way to show a single CheckBoxGroup horizontally, but using 2 (or more) rows?
Edit:
I have found a quick-fix to the problem by styling the checkboxes to be floating to the left (with horizontal presentation of the group). It now shows 6 Checkboxes on the first line, and 2 on the second line. It is still not beatiful, but better than the other 2 options. I am still looking forward to receiving a better solution! (if there is none, then so be it but at least I then know that it is not possible)
This should be doable with flex box, since CheckBoxOptions are spans in div. So we need to add flex css rules for the checkBoxGroup.
First add stylename
checkBoxGroup.addStyleName("my-flex-checkboxgroup")
Then in your theme
.my-flex-checkboxgroup {
display: flex;
flex-wrap: wrap;
width: XXXpx
height: auto;
}
You need to set the width XXX so that four columns fit
E.g. if you have
CheckBoxGroup checkBoxGroup = new CheckBoxGroup();
checkBoxGroup.setItems("Option 1","Option 2","Option 3","Option 4","Option 5","Option 6","Option 7","Option 8");
You need rougly 500px or so, but if captions are longer, more naturally.
This worked for me atleast.
I am dragging a div within a main div with respect to y-axis.
$("#childdiv").draggable({axis:'y'});
It drags smoothly in y axis. But I want a drag with jerks..
For Example : When I start drag .. the draggable component directly moves to 50px and if I again drag next jump will be to 100px next drag will directly jump to 150px . It should be simillar like sortable with placeholder but using draggable.
You can use the grid option to get this:
Snaps the dragging helper to a grid, every x and y pixels. The
array must be of the form [ x, y ].
eg.
$("#childdiv").draggable({
axis:'y',
grid: [0, 50]
});
Here's an example fiddle: https://jsfiddle.net/g1epL4ea/
I want to display the Highcharts ECG Graph with Position next and previous buttons on far right and left side of the chart so that user could move previous and next graph. I need to move previous and next graph by using > < image on far right and left. Please help
You can add two buttons and use css styles for positions them. You need to catch click event and use setExtremes which allows to define range in xAxis.
http://api.highcharts.com/highcharts#Axis.setExtremes()
EDIT:
http://jsfiddle.net/Q8BHZ/
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setExtremes(0, 5);
});
I've noticed that the CSS3 scale attribute does really bad things to jquery ui, specifically to sortable. The problem is that the mouse still needs to move as much as if the elements were not scaled. Check out this jsfiddle example.
Does anybody have thoughts on how to fix this? Is it possible to change the speed that the mouse moves? I'm going to look into the html5 native drag and drop next, and try to write my own sortable function.
UPDATE:
Jquery ui draggable works ok with CSS3 scaled elements, here is a fiddle for it.
It turns out the real answer does not require writing special move functions. Jquery ui sortable can be used as long as the items being sorted have been wrapped in a div of the appropriate size with overflow hidden. Check this jsfiddle for an example.
The problem was that I had forced the scaled divs to be close to one another using a negative margin. Then when I started to drag an item it was taking up the wrong amount of space. With the scaled item wrapped in a non-scaled div everything works as expected.
I don't have a solution for working with jquery ui but I do have a solution for working with Raphael and by extension other svg objects.
First, using chrome or firefox, go drag the dots around in this jsfiddle. Be sure to drag both dots and to use the slider at the bottom to change the scale of the box. The slider has a default scale range of .4 to 1.2. In Chrome the slider is actually a slider but in Firefox it shows up as a textbox. If you are using firefox enter values that are 100 x the scale, i.e. 70 => 0.7.
What you should have just experienced is that the black dot tracks with the mouse regardless of the scale and the red dot only tracks when the scale is 1.0.
The reason for this is the two dots are using different 'onMove' functions. The black dot moves according to 1/scale while the red dot moves normally.
var moveCorrected = function (dx, dy) {
// move will be called with dx and dy
this.attr({
cx: this.ox + (1/scale)*dx,
cy: this.oy + (1/scale)*dy
});
}
var move = function (dx, dy) {
// move will be called with dx and dy
this.attr({
cx: this.ox + dx,
cy: this.oy + dy
});
}
So, in answer to my original question. You can't (and shouldn't) be able to change how the mouse moves, that is clearly user defined behavior, but you can change the move function of the object being moved to track with the mouse.