I am using this plugin: http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html (dropdown style)
And it is working well but when i add a selectmenu at the bottom of my page then this happends:
How can i fix this that when the selectmenu is on the bottom that the dropdown comes above instead of under?
The JS i use:
$('select').not("select.multiple").selectmenu({
style: 'dropdown',
transferClasses: true,
width: null
});
I think the version you are using is not the very latest. You should check the source from the GitHub repository, which is the official repository.
The version from GitHub uses jquery.ui.position from jQuery UI, which allows you to specify where to display the menu relatively to the element ("top top", "left bottom"...) and also allows collision detection.
From the documentation:
When the positioned element overflows the window in some direction,
move it to an alternative position. Similar to my and at, this accepts
a single value or a pair for horizontal/vertical, eg. "flip", "fit",
"fit flip", "fit none".
So you'd rather use the plugin this way:
$('#myelement').selectmenu({
...
position: {
my: "left top", // default
at: "left bottom", // default
// "flip" will show the menu opposite side if there
// is not enough available space
collision: "flip" // default is ""
}
});
Check the following question for similar problem explained (the method _refreshPosition() seems to not exist anymore as is but the option position is of course still there).
Related
The web application that I'm working with consists of a jsTree (v3.1.1) with the contextmenu plugin. This is all working correctly, but when I right click on a node that is close to the bottom of the page it cuts off some options. See image below:
Contextmenu on jsTree getting cut off if too close to the bottom of the browser window
I have had a look at the jsTree API Show at Node, but this just specify whether the context menu should display below the selected node or at the position of the mouse click.
If someone could please provide me with some guidance on how to calculate that if there is not enough space for the entire context menu to be displayed (all options visible), to display it in such a way that the user is able to see all the options. If a node is selected and there is enough space for the context menu, it should work like it is currently by default.
So I know what to do, but it is the how & where I'm not sure on how to implement it on the jsTree where I'm struggling:
Get location of the node selected
Determine height of the context menu
Determine available space from the select node to the bottom of the browser window
If available space is less that that of the context menu, display the context menu to the top of the node. If there is no space issue, display as it does currently.
Any assistance would be appreciated.
Surely there is a more elegant solution but you may wait for it quite long.
As a quick fix I propose simply to move the context menu to the position you want after it is shown. A user won't notice it anyway. See below and check fiddle - Fiddle. Probably you would want to check if node is at screen bottom before moving menu which I haven't done.
$("#dutchData")
.on("show_contextmenu.jstree", function (e, data) {
var $node = $('#'+data.node.id),
$menu = $('.vakata-context').first(),
nodeTop = $node.offset().top,
menuTop = nodeTop + $node.height() - $menu.height(),
menuLeft = 200,
$subMenu = $menu.find('ul'),
subMenuTop = $menu.height()-$subMenu.height();
$menu.offset({left: menuLeft, top: menuTop });
$subMenu.offset({top: subMenuTop });
})
.jstree({
"core" : {
"data" : data,
"themes": {
"url": true,
"icons": true
}
},
plugins: ['contextmenu']
});
How can I adjust the position of Select2 container so that the search box is position right over the original select element like in this website
http://www.jobnisit.com/en
It look cleaner in terms of UI in my opinion.
Ps. sorry, I can't post the image now.
There is 2 ways to do this.
1) With css:
.select2-dropdown--below {
top: -2.8rem; /*your input height*/
}
This will not affect a container (.select2-container), but will move dropdown and search field, so you will have a desired effect.
2) With js:
$('select').select2().on('select2:open', function() {
var container = .$('.select2-container').last();
/*Add some css-class to container or reposition it*/
});
This code attaches a handler to 'select2:open' event, which will be fired every time when user opens a dropdown. This method is better if you have more than one select on page.
Tested with select2 4.0.0
The proper way of positioning the dropdown is using the core feature provided by select2 plugin.
It provides us with 'dropdownParent' property to place to dropdown inside the particular element
select field: #edit-field-job-skillsets-tid
parent item: div.form-item-field-job-skillsets-tid
jQuery("#edit-field-job-skillsets-tid").select2(
{dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')}
);
I've been working on this for literally days now. I have an application that's using jQuery UI for datepickers. Now, I also need some enhanced tooltips, so I was happy to see a tooltip widget added to jQueryUI.
I still need to support older versions of IE, so I can't use jQuery 2.0. I've upgraded to jQuery 1.9.1 and jQuery UI 1.10.3.
Anyway, the tooltip isn't behaving at all like I expect. I am creating the tooltips with this code:
$(document).ready(function() {
$('.tooltipStyle').tooltip({
position: { my: "top left", at: "bottom center" },
content: function() {
return "This tooltip is a function return value with <b>HTML content</b>";
}
});
});
Full demo at jsFiddle: http://jsfiddle.net/2agHC/4/. (Note that I've used the External Resources on the left to load the matching versions of jQuery and jQuery UI.)
First, I can't get the position property to work. I expect that the tooltip will appear starting just below the control to which it's attached, with its top left corner centered on the control. (I've made the gray so it's visible.) However, the tooltip appears up against the left edge of the window.
Secondly, I have to click on the div in order for the tooltip to display, while I'm expecting that it will appear with a hover.
I feel like I'm missing something bery fundamental about how the tooltip is supposed to be used, but like I said, I've been at this for days now. Can anyone explain what I'm missing?
Do you want it like this? jsfiddle
$(document).ready(function() {
$('.tooltipStyle').tooltip({
position: { my: "left top", at: "bottom" },
content: function() {
return "This tooltip is a function return value with <b>HTML content</b>";
}
});
});
If it's not your desired behaviour please respond.
Also reading the documentation on the jQuery UI Position utility might be helpful.
I guess the click you were speaking of was just there because the tooltip was hovering directly over the element.
Although in your example I didn't need to click...the tooltip pops up, immediately hides and then shows again.
To make it complete (like eclps' extract from docu)
my (default: "center")
Type: String
Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment.
[...]
Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". Example: "left top" or "center center". Each dimension can also contain offsets, in pixels or percent, e.g., "right+10 top-25%". Percentage offsets are relative to the element being positioned.
From the jQuery UI Position docs for 'my':
Defines which position on the element being positioned to align with
the target element: "horizontal vertical" alignment. [...] Acceptable
horizontal values: "left", "center", "right". Acceptable vertical
values: "top", "center", "bottom". Example: "left top" or "center
center".
You need to swap your position values. As shown in SirDerpington's answer.
position: { my: "left top" },
i am using jquery-ui 1.9.2 version which has a new menu option in there.
Is there any way that i can change the menu style to be a drop-down just like
http://onehackoranother.com/projects/jquery/droppy/#
I referred to http://wiki.jqueryui.com/w/page/12137997/Menu ,but those are plug-ins.
I do not want to use another plugin for this, i want to alter the same jquery-ui itself, is there any way to do this?
You can use the position option to accomplish this. I'll whip up and add a fiddle with the details when I'm less busy, but the gist is:
$('#menu').menu({
position: { my: 'left top', at: 'left bottom' }
});
Essentially that is telling jQuery UI to put the sub menu's top-left corner (my: 'left top') on the bottom-left corner of the parent element (at: 'left bottom').
You'll probably need to fiddle with the jquery.ui.menu.css file to get it exactly right. I actually ignore that CSS altogether most of the time.
I'm trying to build an interface tool which essentially allows users to build a grid out of common UI elements.
Here's a jsFiddle: http://jsfiddle.net/FX4Fw/
Essentially, the idea is that you drag content elements (picture, headline, standfirst, etc) into the grey placeholder at the bottom. Once they're in there, they should no longer be Draggables (because this breaks the CSS grid system they inherit) and they can then be resized. The original items in the UI should stay where they are, so the user is essentially cloning them into the box to be positioned.
This almost works in my demo, but when the user grabs a UI element and drags it into the placeholder, I then remove the ui-draggable class from the cloned element that ends up inside the placeholder. This also removes it from the original source element (I want this to stay where it is) so it's no longer usable.
Is there a way to combine these things so they work in tandem? Hopefully it's clear what I'm trying to do.
Never mind - found the answer here: https://stackoverflow.com/a/3041887/176615
(basically this code)
stop: function(event, ui) {
//check it wasn't here previously
if(!ui.item.data('tag') && !ui.item.data('handle')) {
ui.item.data('tag', true); //tag new draggable drops
ui.item.removeClass('ui-draggable'); // dirty hack
}
},