Change thickbox popup size dynamically - javascript

I'm using ThickBox to open popup in my page. In popup there is a tab on click on which i need to change the size of ThickBox popup window. How can i do that ?
Thanks in advance.

This is the code they use
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
so you can use the same with a slight change (assuming you use a modern version of jQuery)..
$('#yourbutton').click(function() {
var TB_WIDTH = 100,
TB_HEIGHT = 100; // set the new width and height dimensions here..
$("#TB_window").animate({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
});
Demo at http://jsfiddle.net/gaby/rrH8q/

Attach a click event handler to said tab that changes the TB_Window dimensions and margins to center it again, e.g.
$("#tab").click(function() {
$("#TB_window").css("height", newHeight);
$("#TB_window").css("width", newWidth);
$("#TB_window").css("margin-top", ($(window).height()-newHeight)/2 );
$("#TB_window").css("margin-left", ($(window).width()-newWidth)/2);
});

A little correction in Gaby aka G. Petrioli's answer so that popup should set the margins also correctly :
var TB_WIDTH = 500, TB_HEIGHT = 400;
// set the new width and height dimensions here..
$("#TB_window").animate({marginLeft: '"'+parseInt((($vitjs(window).width()-TB_WIDTH) / 2),10)
+ 'px"', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px',marginTop:'"'+parseInt((($vitjs(window).height()-TB_HEIGHT) / 2),10) +
'px"'});

I did something like this.
This needs to be re-launched if the wiewport is resized while the popup is open.
function tb_position() {
if(TB_WIDTH > $(window).width())
{
$("#TB_window").css({marginLeft: 0, width: '100%', left: 0, top:0, height:'100%'});
$("#TB_ajaxContent, #TB_iframeContent").css({width: '100%'});
$("#TB_closeWindowButton").css({fontSize: '24px', marginRight: '5px'});
}
else
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
}

You have to enclose this inside a setTimeout so that this will be done after the thickbox is opened, not when the button is click. Usually, it happens in between of "Clicking of button" and "opening of thickbox".
var TB_WIDTH = jQuery(window).width() > 400 ? 400 : jQuery(window).width(),
TB_HEIGHT = 400; // set the new width and height dimensions here..
setTimeout(function() {
jQuery("#TB_window").css({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
}, 0);

Related

jquery offset left property not working

I have this line:
$("#"+genId).css({"border":"2px solid black", "background-color":"white", "position":"fixed", "z-index": "10000000000", "top": (pos.top + h + 10)},"left", pos.left + w + 10);
When I remove the left part at the end it works, but when I add the left part the element disappears.
Not sure what is happening:
Full Function:
function showPopUp(element){
var pos = element.offset();
var h = element.height();
var w = element.width();
var newDiv = document.createElement('div');
var genId = ("a" + (new Date).getTime() + Math.floor(Math.random() * 20));
newDiv.id = genId;
document.getElementsByTagName('body')[0].appendChild(newDiv);
$("#"+genId).css({"border":"2px solid black", "background-color":"white", "position":"fixed", "z-index": "10000000000", "top": (pos.top + h + 10), "left": (pos.left + w + 10)});
$("#"+genId).append("<p> Tag:" + element.prop("tagName") + " || Em: "+ getEm(element) + "em || Px: " + getPixel(element) + "</p><p>Font Family: " + getFontFam(element) + "</p>");
}
EDIT
Fixed typo in code from copying from file
... "top": (pos.top + h + 10), "left": (pos.left + w + 10)});
You're using css() method wrong. It can't look like that. css() method takes only one argument like that(a string or an array). So this:
$("#" + genId).css({
"border": "2px solid black",
"background-color": "white",
"position": "fixed",
"z-index": "10000000000",
"top": (pos.top + h + 10)
}, "left", pos.left + w + 10);
Should look like this:
$("#" + genId).css({
"border": "2px solid black",
"background-color": "white",
"position": "fixed",
"z-index": "10000000000",
"top": (pos.top + h + 10),
"left": (pos.left + w + 10)
});
Please read the documentation from here and you will understand.
It's like .css( propertyName )
So you can either have this:
.css('display', 'block')
Or this:
.css({'display': 'block', 'color': '#f00'})
Not sure if this is the best fix but it worked for me.
I used the margin-left property instead of the left property and it is working now.

Extend Bootstrap Popover Plugin

I'm using Bootstrap 3's popover js file and by default when you hover/click the popover trigger (I only care about the left/right placement), the popover is vertically aligned in the middle from where the element is.
See this:
However, I'd like to modify this default positioning regardless of the height of the popover.
Like this:
I tried the following, but because the popover's heights can be different I don't get exactly where I want it, which is like the second image above.
$('.trigger').popover({
trigger: 'hover',
container: 'body'
}).hover(function(){
var off = $('.popover').offset(),
delta = 50,
newY = parseInt( off.top ) + delta + 'px';
$('.popover').css({top: newY });
});
Any help?
EDIT: Is there a way to extend the Bootstrap tooltip js? I ended up having to change the source code by changing the Tooltip.prototype.getCalculatedOffset function. All I did was change the left/right placement to not subtract the actualHeight
Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
// return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
// placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
// placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
// /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'left' ? { top: pos.top + pos.height / 2, left: pos.left - actualWidth } :
/* placement == 'right' */ { top: pos.top + pos.height / 2, left: pos.left + pos.width }
}
Is there a way that I could create my own placement type - like placement == 'custom-left' and placement = 'custom-right' ??
This did the trick for me (for popovers, not toolips)
$.fn.popover.Constructor.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement == 'bottom'? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 }:
placement == 'top'? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 -actualWidth / 2 }:
placement == 'left'? { top: pos.top + pos.height / 2, left: pos.left - actualWidth }:
{ top: pos.top + pos.height / 2, left: pos.left + pos.width };
};
theNeoteric has the correct answer.
I also added the following to top align the popover arrow.
$.fn.popover.Constructor.prototype.replaceArrow = function (delta, dimension, isHorizontal) {
var intOffset = 32;
if (delta != 0) { intOffset = intOffset - (delta / 2) } ;
this.arrow()
.css(isHorizontal ? 'left' : 'top', intOffset + 'px')
.css(isHorizontal ? 'top' : 'left', '')
}
Maybe this will help? (not tested). In short: wait until "shown" event fired and the setup position.
$('.popover').on('shown.bs.popover', function () {
var off = $(this).offset(),
delta = 50,
newY = parseInt( off.top ) + delta + 'px';
$(this).css({top: newY });
})

disabling more that one element in a page by cover overlay

I have some elements in one page which I want to have cover overlay on those in order to disable those elements.
I have an ajax call which in success, I used the coverWithOverlay($('.disable')); to disable all the elements that have .disable class.
Here is the function:
function coverWithOverlay($element) {
var pos = $element.offset();
var $overlay = $('<div class="inside"></div>').attr({
title: 'this is disabled'
}).css({
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
top: pos.top + 'px',
left: pos.left + 'px',
width: $element.outerWidth() + 'px',
height: $element.outerHeight() + 'px'
});
$(document.body).append($overlay);
return $overlay;
}
It works if I have just one element in the page. How can I investigate that to several elements?
Some pages have one some pages have more than one elements to be disabled.
Why don't you try something like this?
function coverWithOverlay($elements) {
$($elements).each(function () {
var $element = $(this);
var pos = $element.offset();
var $overlay = $('<div class="inside"></div>').attr({
title: 'this is disabled'
}).css({
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
top: pos.top + 'px',
left: pos.left + 'px',
width: $element.outerWidth() + 'px',
height: $element.outerHeight() + 'px'
});
$(document.body).append($overlay);
});
}
Working fiddle: http://jsfiddle.net/codovations/23FtA/
That being said, jQuery BlockUI plugin will be a more generic way to do this.
Fiddle: http://jsfiddle.net/codovations/X5DfK/

How to add symmetric values with jquery

I have this markup:
<div class="container">
<figure></figure>
<figure></figure>
<figure></figure>
</div>
Now: I need to add for each of figures a symmetric element, but with different height and width value. For each item next I need to remove about 10% in width and height. So that the first has 90%, the second 80% and the third has 70% of initial size. I'm using the following code but it does not work, can anyone help?
var inside_element = $(figure);
var indx = 10;
inside_element.each(function(indx){
$(this).css({
width: '90%' - indx,
height: '90%' - indx
});
});
Thx.
You working on string '90%' and trying to complete math operation, which will fall. This should work:
var inside_element = $('figure');
var indx = 10;
inside_element.each(function(indx){
$(this).css({
width: (90 - (10*indx)) + '%' ,
height: (90 - (10*indx)) + '%'
});
});
Also declaration var indx = 10; is not necessary. This value will be overrided inside function.
EDIT: Also there can be more containers. Then code should look like this:
var inside_container = $('.inside_container');
inside_container.each( function(i) {
var inside_element = $(this).find('figure');
var step = 10;
inside_element.each(function(indx){
$(this).css({
width: (90 - (step*indx)) + '%' ,
height: (90 - (step*indx)) + '%'
});
});
});
You are calulating the next width and hight by substracting indx from a String.
try:
var width = 100;
var height = 100;
inside_element.each(function(indx){
width = width - 10;
height = height - 10;
$(this).css({
width: width + '%',
height: height + '%'
});
});
You are not selecting figure you need this $('figure');
var inside_element = $('figure');
inside_element.each(function(index){
$(this).css({
width: (90 - index * 10) +"%",
height:(90 - index * 10) +"%"
});
});
Try this:
var inside_element = $('figure');
var width = '90',
height = '90';
inside_element.each(function(indx){
$(this).css({
width: width + '%',
height: height + '%'
});
width = width - 10;
height = height - 10;
});

Attaching a function to the parent window from an iframe and getting proper scope

I working on adding file uploading to my web application. I'm using an iframe to post my upload. When my php script processes the upload it writes some JavaScript to the iframe. This JavaScript is attempting to attach a function to the parent, this works, but when this function actually gets called it doesn't have the correct scope. Here is the code I'm attaching to the parent window:
parent.window.showPreview = function(coords)
{
if (parseInt(coords.w) > 0)
{
var rx = 200 / coords.w;
var ry = 250 / coords.h;
$('#preview').css({
width: Math.round(rx * 400) + 'px',
height: Math.round(ry * 533) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
}
When this function gets executed I get an error that says $ is not defined. I've tried adding changing the JQuery call to parent.$('#preview').css..., but then it says that parent is undefined. Any ideas?
Try this:
var p$ = parent.window.$;
parent.window.showPreview = function(coords) {
if (parseInt(coords.w) > 0)
{
var rx = 200 / coords.w;
var ry = 250 / coords.h;
p$('#preview').css({
width: Math.round(rx * 400) + 'px',
height: Math.round(ry * 533) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
}
If you're making a function for the parent window, you probably want it to use the parent window's jQuery instead of the child window's. You'll also need to make sure the parent page has its own copy of jQuery. (If it doesn't, and you're brave, you could try dynamically giving it one!)
edit
Here's how you could do it with a closure instead of the global p$:
parent.window.showPreview = (function(p$) {
return function(coords) {
// ... same as above
};
})(parent.window.$);

Categories

Resources