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.
Related
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')}
);
Working on making a very standard dropdown menu with the new jquery ui 1.9 menu widget, but having some problems due to the newness of the widget and the presence of only a single extremely basic example at jqueryui.com
Specifically, can anyone here help me to:
Initialize a widget with no icons for submenus? (Default is a right-facing carat and I can't get rid of it)
Make a menu where user has to click on the top menu item (as opposed to just hovering) to make the submenu appear? Any deeper submenus should then expand when the user's pointer hovers over them. This is typical dropdown behavior, e.g., user clicks "edit" to make options appear like "select" or "undo", but any further choices under (for example) "select" would apper just by hovering over "select". I hope that's clear.
Thanks
I don't know how to do the second part of your question but I can answer the first question.
You can change the default icon by setting the icon option of the menu option.
First add a class to your CSS file like this.
.no-icon { display:none;}
Then set the icon option when you create the menu.
$( "#menu" ).menu(
{ icons: { submenu: "no-icon" } }
);
You won't have any icons.
Here is a fiddle
I am using jQuery ui.multiselect.js plugin to order columns in my jqGrid. I have noticed that there are some inconsistencies in the way this plugin behaves. It lets me drag-n-drop from right column to left but not left to right column. Has anyone got a working solution to this problem.
I don't think it is exactly a problem, it is the way the plugin is supposed to work if you set the option sortable: true which is the default:
you can drag column from right list to left to choose which ones you'd like to show in the grid
you can re-order the column on the left list to change the order they appear in the grid
Setting the option sortable to false cancels both these behaviors, you cannot drag to add and sort columns order anymore.
ui.multiselect.js has been updated since this post, and it now allows you to drag from left to right as well. It also allows you to load data from an external source now. You can check it out here.
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).
I want to create a "mouseover" pop-up div dynamically, just like What we get in Stackoverflow (When mouse over a tag)/Google+ (when mouseover a friend image).
Curretly I am able to get the text from AJAX, but i am unable to place that in a "Catchy cool" look & feel.
Is there any wasy way to do this in JQuery?
I know that it's not the right way to help but I wrote some code for you:
http://jsfiddle.net/w8qan/11/
It is not perfect - i recommend reading about jQuery's offset() and position() methods and differences between them.
If you want you popups "stylish" - use CSS the way you want, use jQuery's animate(), show(), slideDown(), etc. I focused on displaying your description where you want it.
You can use the .animate() method to create cool custom animations..
For more widely-used effects have a look at this list of jQuery options http://api.jquery.com/category/effects/