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" },
Related
I have a multi-series column chart in Highcharts with three series ("Western", "Eastern", and "Central"). Clicking the label of a series in the legend shows or hides the series. I'd like to add a little link at the end of each label with a link to download details about the underlying data for that series.
So a label would look like: Western (details)
I tried simply adding an <A> link to the "name" of the series, and the link appears, but clicking on it doesn't open the link. Instead, it merely toggles the series display as before. I guess the "onClick" event for the label itself supersedes the <A> behavior.
Is there any way, without hacking Highcharts or creating a whole custom legend, to make a link in a series label functional? Maybe something with CSS to make the link jump out of its parent element?
Your idea is very good. You need to only call e.stopPropagation() after click on a link to prevent toggling series.
Highcharts.chart('container', {
series: [{
name: 'Series name <a id="seriesDetails" href="https://www.google.pl/">Details</a>',
...
}]
});
document.getElementById('seriesDetails').addEventListener('click', function(e) {
e.stopPropagation();
// prevent redirect
//e.preventDefault();
console.log('click');
});
Live demo: http://jsfiddle.net/BlackLabel/kaLrmjd7/
API Reference: https://api.highcharts.com/highcharts/series.line.name
I'd like to position my autocomplete (menu) properly in relation to the browser window. That is, when the autocomplete is at the top of the page get the menu going down and if at the bottom of the page get the menu going up (even if we have some vertical scrollbar).
Thx.
Use the position option to activate collision detection:
$( "#someElement" ).autocomplete({
source: [...]
position: { collision: "flip" }
});
DEMO
The autocomplete uses the jQuery UI Position utility to easily place the menu relatively to the input element.
The option collision to automatically move the element to an alternative position in case the element would not be viewable in the default direction in the viewport.
The value flip will show the menu below or above, in the direction is will be fully viewable.
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).
Here is code:
<script type="text/javascript">
$(function(){
var dialogOptions = {
title: "Header",
autoOpen: false,
modal: true,
width: 400,
height: 1000
};
$(".wnd").dialog(dialogOptions);
$("#btn").click(function(){ $(".wnd").dialog("open"); });
});
</script>
<style>
.wnd {background:yellow;height:900px;width:300px;}
</style>
<div class="wnd"></div>
<button id="btn">click me</button>
When dialog is opened and it higher than main window there is a side slider and it doesn't slide down if you try to drag it with the help of mouse cursor (it seemes like locked).
But it slides fine when to put down button (arrow) on keyboard or scroll down with mouse wheel.
Here is demo on jsfiddle.
How to activate that side slider?
Thanks!
A clean solution would be like this one:
http://jsfiddle.net/4fc33/6/
What I'm doing is wraping the jQuery UI overlay create method to turn off the event that prevents scrolling to work correctly.
An alternative approach to not being able to use the window's sliders is to enable sliders on the dialog window, itself. These will show up automatically if you place a cap on the maximum height of the dialog but can be a little tricky with some versions of jQueryUI.
At least on the version of jQueryUI that I am on (1.9) I needed to specify the maximum height on my own because the maxHeight property that should be able to be used according to the documentation didn't work*.
Here's what worked:
$("#dialog").dialog({
modal: true,
width: "auto",
height: "auto"
/* maxHeight: whatever won't work, */
}).css("maxHeight", window.innerHeight-120);
I subtracted 120 pixels off of the window's height to accommodate for the Dialog window's header -- and footer section with its "ok" button.
* The max-height actually would take affect if the dialog was attempted to be resized -- but not upon display.
I am stuck with a minor problem in aligning the dialog window to the center of the screen.
Position is set to center, but the problem is, the dailog window's left top corner is the one is aligned to the center of the screen... is there any way that i can overcome this.
// Dialog box properties for Select drive
$(".Drive").dialog({
title: 'Form Design'
, width: 'auto'
, height: 'auto'
, autoOpen: false
, position: 'center'
, closeOnEsc: true
, modal: true,
});
$('.driveChoose').click(function(){
var modalUrl = $(this).attr('title');
$('.Drive').load(modalUrl).dialog('open');
return false;
});
this works fine for me:
<script type="text/javascript" src="/js/jqueryui/jquery.ui.position.js"></script>
$(".Drive").dialog({
position: ['center', 'center']
});
Ancient question, but there are a couple of very common culprits for this.
The centering is done based on the content of the dialog when you open it. If you're adding the content after .open then that would explain top-level being in the center (because the div was emtpy originally).
You may be missing some files from jquery-ui, or you may have jquery.dimensions.js which should NOT be in there. More info here: Dialog box not positions center screen