I would like to display a modal dialog over the entire page, but over a certain div in the DOM. Is this possible? Examples in the docs only show how to display a dialog over the entire page.
Check out the "position" option. Use it like this:
$(".selector").dialog({ position: [350,100] }); // places dialog at x:350, y:100
Then you can line up the x,y to sit above your target div.
You can use jQuery's .offset() to find the div's position and then do what John said
Fit inside Div:
var bg_div = $("#background_div");
var pos = bg_div.offset();
var margin = 10;
$(".selector").dialog({
position: [pos.left+margin,pos.top+margin],
width: bg_div.outerWidth() - margin*2,
height: bg_div.outerHeight() - margin*2
});
Center over Div:
var bg_div = $("#background_div");
var pos = bg_div.offset();
var x = pos.left + (bg_div.outerWidth()/2);
var y = pos.top + (bg_div.outerHeight()/2);
$(".selector").dialog({position: [x,y]});
Related
I'm trying to figure out how to enable visitors to drag to rotate a 3D div using .draggable(). Currently the div rotates but also moves vertically and horizontally making the process touchy and unpredictable. I would like the origin of the div to stay fixed, and the "dragging" to only affect the rotation, so users can "spin" the div around to see the other sides.
here is link to the codepen: http://codepen.io/armandhammer8/pen/IiBga
$('.anime').draggable({
drag: function(event, ui){
var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
$(this).css({
'transform': rotateCSS,
'-moz-transform': rotateCSS,
'-webkit-transform': rotateCSS
});
Thanks in advance!
The div element is a little house:
I want to be able to spin it around
The built in functionality of draggable is giving you the problems.
It's not so hard to get the functionality by yourself and stop using draggable.
Javascript:
var offset = 0, startX;
var elem = document.getElementById("element");
$('.draggable').on('mousedown', function (e) {
startX = e.pageX - offset;
})
.on('mouseup', function() {
startX = null;
})
.on('mousemove', function (e) {
if(startX) {
offset = e.pageX - startX;
elem.style['-webkit-transform'] = 'rotateY(' + offset + 'deg)';
}
});
demo
I am stuck on where to start here. I want to open popovers from the angular controller when something happens.
For example, let's say the user has selected 30 checkboxes, I want to open a popover with two buttons that allow the user to "Action all Items" or "Cancel" and also have a textarea where the user can put in a comment.
Currently, I am calling external javascript function from controller. The issue here is that the popover is defined outside of the current $scope.
Like I said, I am stuck on where to start. Any help is appreciated.
Current angular code:
$scope.showActionCommentPopover = function () {
var elementId = "#CommentPopoverAnchor";
var popoverTitle = "Action Comment";
var popoverContent = "Enter comment: <br/><textarea cols='50' rows='10' id='processComment' ng-model='actionComment'></textarea>";
var width = "600px";
var placement = "right";
ShowPopover(elementId, popoverTitle, popoverContent, width, placement);
};
External js function:
function ShowPopover(elementId, popoverTitle, popoverContent, width, placement) {
$(elementId).popover({
placement: placement,
title: popoverTitle + '<a class="close" data-toggle="popover" onClick="$(\'' + elementId + '\').popover(\'destroy\');">×</a>',
content: popoverContent,
html: true
});
$(elementId).popover('show');
$(".popover").css("width", width);
$(elementId).popover('show');
}
Is it possible to change top and left positions (get current values and change them) of jQuery UI datepicker. Please note that i need to change position, not set margin as it is in other examples.
Sure it is. As there's always only one datepicker active, you can select active datepicker with:
var $datepicker = $('#ui-datepicker-div');
and change its position:
$datepicker.css({
top: 10,
left: 10
});
EDIT
Whoah, tricky one. If you set top or left position in beforeShow, it gets overriden again by datepicker plugin. You have to put css changes in a setTimeout:
$("#datepicker").datepicker({
beforeShow: function (input, inst) {
setTimeout(function () {
inst.dpDiv.css({
top: 100,
left: 200
});
}, 0);
}
});
DEMO: http://jsfiddle.net/BWfwf/4/
Explanation about setTimeout(function () {}, 0): Why is setTimeout(fn, 0) sometimes useful?
If you get really stuck you can edit your jquery-ui-[version].custom.js. The function that controls the position where the calender will appear is:
_findPos: function(obj) {
var position,
inst = this._getInst(obj),
isRTL = this._get(inst, "isRTL");
while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) {
obj = obj[isRTL ? "previousSibling" : "nextSibling"];
}
position = $(obj).offset();
return [position.left, position.top];
},
I have some custom code that uses a CSS3 transformation to zoom the page in or out based on its width. This throws out the screen coordinates that the calendar widget relies on. I added some custom code to the _findPos to detect and handle the zoom level. Modified code looks like this:
_findPos: function(obj) {
var position,
inst = this._getInst(obj),
isRTL = this._get(inst, "isRTL");
while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) {
obj = obj[isRTL ? "previousSibling" : "nextSibling"];
}
position = $(obj).offset();
/* Custom Code for Zoom */
var zoomLevel = 1;
var minW = 1024;
if ($(window).width() > minW)
{ zoomLevel = $(window).width() / minW;}
return [position.left, position.top/zoomLevel];
},
May be an old question, but ran into the problem myself just today and could not get other suggestions to work. Fixed it alternatively (using .click(function(){}) and wanted to add my two cents.
I have an input field with the id sDate which, when clicked, displays the datepicker.
What I did to solve the problem was add a click routine to the #sDate field.
$('#sDate').click(function(){ //CHANGE sDate TO THE ID OF YOUR INPUT FIELD
var pTop = '10px'; //CHANGE TO WHATEVER VALUE YOU WANT FOR TOP POSITIONING
var pLeft = '10px'; //CHANGE TO WHATEVER VALUE YOU WANT FOR LEFT POSITIONING
$('#ui-datepicker-div').css({'left':pLeft, 'top':pTop});
});
your solution works provided you run it after calling the datepicker in the code, I tried calling it before but it didn't work, so I tried to understand how it worked for you.
I have adapted the datepicker in the context of an input field which is fixed at the top of the page to scroll. The datepicker was lost ...
Here is my example code for adaptation in a context of datepicker which becomes dynamically fixed:
Example found on w3schools.com: https://www.w3schools.com/howto/howto_js_sticky_header.asp
HTML:
<div class="padding-16 center" id="resa_nav">
<div style="margin: 24px 0 0;">
<label for="date_selector"
class="text-gray">Choose a date</label>
<input type="text" id="date_selector" name="date_selector" class="padding-small">
</div>
</div>
CSS:
.sticky {
position: fixed;
top: 0;
width: inherit;
background: white;
box-shadow: 0px 0px 7px 4px #69696969;
}
JS:
// init datepicker
$('#date_selector').datepicker();
// When the user scrolls the page, execute myFunction
window.onscroll = function() { myFunction() };
// Get the header
var header = document.getElementById('resa_nav');
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset > sticky) {
// set block sticky
header.classList.add('sticky');
// adjust datepicker position
// attach a namespace for unbind click later in "non-sticky" context
$('#date_selector').on('click.sticked', function(){
var top = '10px';
var left = '10px';
$('#ui-datepicker-div').css({'left': left, 'top': top});
});
}
else {
// remove sticky
header.classList.remove('sticky');
// unbind the second event 'click' for retrieve the
// default of settings in "non-sticky" context
$('#date_selector').off('click.sticked');
}
}
// END FUNCTION
hope to help!
just add css as below for datepicker
.datepicker {
top: -150px;
/* adjust value as per requirement. if not work try with addin !important*/
}
I have a jQuery tabs ctrl, each tab has a textarea in it. I want to maximize the tabs within its parent div, so I set the tabs div to 100% width/height by css, it works. but how can I maximize the textarea in it?
Objective: tabs fill up the parent div, textarea fill up the parent tabs, when parent div is resized, tabs and textarea would be resized, too.
var $tabs = $('tabsSelector');
var $parentPane = $('parentSelector')
var newHeight = $parentPane.height() - 10;
$tabs.height(newHeight);
var navHeight = $tabs.find(".ui-tabs-nav:first").height();
$tabs.children(".ui-tabs-panel").height(newHeight - navHeight);
I've installed Datepicker for Bootstrap and its working nicely. But I can't figure out how to use the place method to position the datepicker above the element instead of below. I'm guessing it works similiar to the bootstrap popovers, but I haven't been able to figure it out.
Any suggestions?
The place function just auto places the date picker under your input box. Its not a function that lets you select where you want to place it.
However you can easily override the default functionality of that function with your own custom placement.
Here is an example of that http://jsfiddle.net/G7sWL/19/
All i did copy the original function and add an additional vertical offset of 10 and horizontal offset of 50.
$(function() {
var picker = $('.datepicker').datepicker();
var widget = picker.data('datepicker');
widget.place = function(){ //the original place function
var offset = this.component ? this.component.offset() : this.element.offset();
this.picker.css({
top: offset.top + this.height + 10, // change #1 = added "+10"
left: offset.left +50 // change #2 = added "+50"
});
}
});
From the page:
.datepicker('place')
Updates the date picker's position relative to the element
It only says it updates the position of the picker (which is absolutely positioned on the page), not that you can change its placement.