I am trying to make my autocomplete menu open above the input box if there is not enough space below the input box to display the menu. The code works fine except for on the initial render.
This means that it always displays at the bottom when:
1. Start searching
2. Click in the field and fire the search for the existing text in field
I have it output the position.my and position.at contents and they both are correct for "above" placement but it still displays below the input box.
I have the function called resize that is binded to window scroll and resize also. The moment you scroll the page, the menu gets positioned correctly. My suspect is that it is positioning before fully rendering.
Code
_renderMenu function hook
// Autocomplete _renderMenu function
$(autocomplete_object)._renderMenu = function( ul, item ) {
var that = this;
jQuery.each( items, function( index, item ) {
that._renderItemData( ul, item );
});
// Make sure the menu is now shown to calculate heights and etc (menu is now rendered, position rendering next)
jQuery(ul).show();
autocomplete.resize(ul, options);
autocomplete.create_dropdown_handlers(ul, options);
}
Resize Function
// Resize function
function resize( ul, options ) {
var height;
// If the height of the results is smaller than the space available, set the height to the results height
var ul_height = 0;
jQuery(ul).find('li').each(function(i, element){
ul_height += jQuery(element).height();
});
// Make the height the full height available below the input box but above the window cut off
// Move the dropdown above the input box if there is not enough room below the input box
var $parent = jQuery("#" + options.name);
var padding = 25; // arbitrary number to prevent dropdown from hitting the window border in either direction
var bottom_distance = autocomplete.getViewportHeight() - ($parent.offset().top + $parent.height()) - padding;
var bottom_limit = 200;
var ul_position = {
my: "left top",
at : "left bottom",
of: $parent,
collision: 'none'
};
height = bottom_distance;
if (bottom_distance < bottom_limit) {
var top_distance = $parent.offset().top - padding;
height = top_distance;
// ----- It is getting here fine! -----
ul_position.my = "left bottom";
ul_position.at = "left top";
}
// We have room to show the entire dropdown results without a scrollbar
if (ul_height < height) {
height = 'auto';
}
// Position below or above parent depending on space
jQuery(ul).position(ul_position);
jQuery(ul).css({height: height == 'auto' ? height : height + 'px'});
}
TLDR:
Jquery position is set to show above input field, but it still shows below?
I ended up having to update the autocomplete object's position value as well as the ul position. I believe the issue was that the initial render would inherit the autocomplete's position variable (Which defaults to showing below the input box).
Here is the new line:
// In the resize function after jQuery(ul).position(ul_position);
$parent.autocomplete("option", "position", ul_position); // Now the rendering is correct!
Resize function addition
function resize (ul, options) {
...
calculate the height and position requirements
...
jQuery(ul).position(ul_position);
$parent.autocomplete("option", "position", ul_position); // <-- Addition to honor position for rendering
}
Related
I'm trying to position the dialog/modal window of CKEditor within my iframe but it seems to want to default to going middle center of my window. In the case of the site I'm working on, the iframe in question is 1000+ px in height, so the modal is way too far down the page and is causing confusion.
Based on this post (ckeditor dialog positioning) I have added the following code to my config file
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
dialogDefinition.onShow = function() {
var x_pos = this.getPosition().x;
var y_pos = 10;
this.move(x_pos, y_pos); // Top center
};
});
Which works great on initial load, but in the case of a hyperlink in the editor, once you change the "type" (URL, email, etc) it seems that the dialog content refresh also causes a recalculation of the dialog position, which throws it back to the middle center of the window.
So bottom line is I want to make all dialogs stick to the top (maybe 20px offset) and center of my window regardless of the iframe height and have it stay there through a dialog refresh, but not finding much supporting documentation to help with that.
Example of this in action here. Click on the link icon and the dialog appears at the top of the page. Change the "type" from URL to Link and the modal will jump to the middle of the 10000 px height iframe the page is inside of
Further Edit
So the accepted answer worked perfect, but there was still an issue that the hyperlink dialog would now show all fields on initial load, and then once you changed the link type it would remove fields not related to the current selection. So looking further into the documentation, it looks like the correct way to call a dialog is as follows:
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialog = e.data.definition.dialog;
dialog.on('show', function () {
var x_pos = this.getPosition().x;
var y_pos = 10;
this.move(x_pos, y_pos); // Top center
this._.moved = 1;
});
});
It looks like the dialog won't try reposition itself if the user has moved it. It tracks this using a variable called moved. You can trick it into thinking it has been moved by setting this variable to 1:
dialogDefinition.onShow = function() {
var x_pos = this.getPosition().x;
var y_pos = 10;
this.move(x_pos, y_pos); // Top center
this._.moved = 1;
};
Note that as per this post, there are negative side-effects to overriding the onShow method that you may want to consider.
Another option (besides the one the user1620220 gave), and an option to re-set the position of the dialog even on layout change is to override the layout function of the dialog:
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
// Save the old layout function
dialogDefinition.dialog.oldLayout = dialogDefinition.dialog.layout
dialogDefinition.dialog.layout = function() {
// first we need to call the layout function
dialogDefinition.dialog.oldLayout();
// Now we can reposition the way we want:
var x_pos = this.getPosition().x;
var y_pos = 10;
this.move(x_pos, y_pos); // Top center
}
dialogDefinition.onShow = function() {
var x_pos = this.getPosition().x;
var y_pos = 10;
this.move(x_pos, y_pos); // Top center
};
});
I am trying to find out the coordinates of a div with an id of #23 when a button is clicked, the button is called arrowR. Problem is it keeps returning the coordinates of where the mouse is on the button. Is there any way to get the coordinates of the div within the page when the button is clicked? The script which I am using is below:
$('#arrowR').click(function(e)
{
var offset_l = $(this).offset().left - $('#23').scrollLeft();
var left = Math.round( (e.clientX - offset_l) );
if (left != 62) {
alert("Left: " + left );
} else {
alert("works");
}
});
You are getting the offset of the button, you want the offset of the div:
FIDDLE
$('#arrowR').click(function (e) {
var coords = $('#23').offset(); // <-- This.
$('#coords-left').val(coords.left);
$('#coords-top').val(coords.top);
});
I've positioned an element absolutely at the coordinates so you can see in the fiddle that it matches.
Taken from How do I find the absolute position of an element using jQuery?
var position = $(element).offset();
On home page (pocetna) when you go over "dizajn" vertical menu working fine, but the problem appears when you go in "kontakt" page, menu is just behind google map, and i dont know how to fix it. If someone know solutio i will be grateful. Thank you
code for javascript is like this ( this code was copied from video how to create vertical menu, because i dont know that much staff about coding. Thank you for understanding )
$("document").ready(function() {
// Function triggered when mouse hovers over a menu item
// Looking for a LI item that has a UL for a child element
// If it does trigger the function on mouseover
$('#sidebarmenu li a').parent().has('ul').mouseover(function() {
// offset() returns the top & left relative position on the doc for LI
tagOffset = $(this).offset();
/* I use the following to get the tag name for this
getTagName = $(this).get(0).tagName;
alert(getTagName); */
// Get distance from the left for the LI
offsetLeft = tagOffset.left;
// Get distance from the top for the LI
offsetTop = tagOffset.top;
// Move the new popup 180px to the left (Width of parent UL)
popOutOffsetLeft = offsetLeft + 226;
// Get the id for the first UL contained in the LI
closeParent = $(this).closest("ul").attr("id");
// Checking if the UL is a second level of third level popup menu
if (closeParent == 'sidebarmenu')
{
// Make menu visible and move it into position on the document
$(this).find('ul').first().css({'visibility' : 'visible', 'left' : popOutOffsetLeft + 'px', 'top' : offsetTop + 'px'});
} else {
// Find offset for the UL that surrounds the third level popup
secondOffset = $(this).find('ul').last().parent().offset();
// Subtract the top offset from the second menu to position properly
secondOffsetTop = secondOffset.top - offsetTop;
// Correct the positioning on offset left
secondOffsetLeft = offsetLeft - 10;
// Make menu visible and move it into position on the document
$(this).find('ul').last().css({'visibility' : 'visible', 'left' : secondOffsetLeft + 'px', 'top' : secondOffsetTop + 'px'});
}
});
// When the mouse moves off the menu hide everything
$('#sidebarmenu li a').parent().has('ul').mouseout(function() {
$(this).find('ul').css({'visibility' : 'hidden'});
});
});
Check out the console, you have not included jquery in kontakt page.
Insert this in your kontakt.php
<script src="js/vendor/jquery-1.10.1.min.js"></script>
Uncaught ReferenceError: $ is not defined Got this message while inspecting
jQuery File is missing in kontakt.php
Assign "z-index" css properties both for map and for menu containers, and the menu's one must be greater than map's one, e.g. 100 for menu and 99 for map.
The site in question is this one:
http://www.pickmixmagazine.com/wordpress/
When you click on one of the posts (any of the boxes) an iframe will slide down from the top with the content in it. Once the "Home" button in the top left hand corner of the iframe is clicked, the iframe slides back up. This works perfectly the first 2 times, on the 3rd click on of a post, the content will slide down, but when the home button is clicked, the content slides back up normally but once it has slid all the way up to the position it should be in, the iframe drops straight back down to where it was before the home button was clicked, I click it again and then it works.
Here is the code I've used for both sliding up and sliding down functions:
/* slide down function */
var $div = $('iframe.primary');
var height = $div.height();
var width = parseInt($div.width());
$div.css({ height : height });
$div.css('top', -($div.width()));
$('.post').click(function () {
$('iframe.primary').load(function(){
$div.animate({ top: 0 }, { duration: 1000 });
})
return false;
});
/* slide Up function */
var elm = parent.document.getElementsByTagName('iframe')[0];
var jelm = $(elm);//convert to jQuery Element
var htmlElm = jelm[0];//convert to HTML Element
$('.homebtn').click(function(){
$(elm).animate({ top: -height }, { duration: 1000 });
return false;
})
Have you considered using Ajax, like load(), ready() in jquery to control them better?
I am also not sure what you are trying to do with this.
var height = $div.height();
$div.css({ height : height });
may be you want to get the height of the current window? Where you can get it this way
var $dDiv = $('iframe.primary');
var innerH = window.innerHeight;
$dDiv.height(innerH);
Also try avoiding naming your custom var with default names like height, width, div, etc... You will confuse yourself and make debugging a pain.
I have a jQuery UI draggable element. It's extremely simple. It's just a div (container) with another div inside (draggable piece) set to a grid. The problem is after I move the element one time I can't go back to the first point. If i change the grid size it works, but I need it to work on this grid as it's matching some element below it
Relevant JS:
$('<div class="slider_wrap"><div class="slider"></div></div>').appendTo('#chart');
$('#chart .slider')
.draggable({
containment:'parent',
grid:[distanceBetweenPoints,0],
opacity: 0.25
})
.bind('mousedown', function(e, ui){
// bring target to front
$(e.target.parentElement).append( e.target );
})
.bind('drag', function(e, ui){
// update coordinates manually, since top/left style props don't work on SVG
e.target.setAttribute('x', ui.position.left);
})
.bind('dragstop',function(e, ui){
//a = true offset of slider piece
var a = ui.position.left + distanceBetweenPoints;
var b = containerWidth;
var c = thePoints.length;
var d = b / c;
var x = a / d;
//Since the points are in an array which starts at 0, not 1, we -1 from the currentPoint
console.log(x)
var currentPoint = Math.round(x)-1;
thisPointIndex = currentPoint;
chart.series[0].data[currentPoint].select(true);
});
Any ideas?
Example:
http://jsbin.com/ucebar
You're using a fractional grid size, for example 39.7 px. So, with each drag, the div gets offset a pixel to the left. This means that position zero quickly becomes unavailable:
That is: at point 1, ui.position.left will be 38 pixels or less.
Since moving the minimum jump (39.7px) -- towards point 0 -- will take the div outside the bounding rectangle, that move is not allowed.
And, using the nearest integer for grid size will quickly result in misalignment between the grid and the data points.
One way around all this is to:
Delete the grid:[distanceBetweenPoints,0], parameter.
Instead, snap the div upon drag stop, like so:
/*--- Snap to nearest grid.
*/
var gridPos = Math.round (
Math.round (ui.position.left / distanceBetweenPoints)
* distanceBetweenPoints
);
var delta = gridPos - ui.position.left;
var newOffset = $(this).offset ().left + delta;
$(this).offset ( {left: newOffset} );
See it in action at jsBin.
I didnt have time to work out a real solution, but I found that if you drag and drop the slider moves slightly more to the left each time. The reason it can't go back into first place is that after the first drop, there is not enough room anymore. Good luck!
I was able to solve it with the following:
.draggable({
...
drag : function(event, ui) {
ui.position.left = Math.round(ui.position.left / distance_between_points) * distance_between_points;
}
});