JavaScript popup window with scrollbars - javascript

I have a function that pops up window in the center and I want it to have a vertical scrollbar.
function popUpCal()
{
var url = "calendar_flight_maint.php";
var width = 700;
var height = 600;
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
var windowFeatures = "width=" + width + ",height=" + height + ",status,resizable,left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top;
window.open(url, "subWind", windowFeatures, "POS", "toolbar=no", "scrollbars=1");
}
I have tried scrollbars=yes, scrollbars=auto, scrollbars=1 but the scrollbars still aren't appearing. Is there something wrong with my code? I'm using Firefox 21.0 and I've already tested it in IE 8. What seems to be the problem?

As seen in the specs for window.open, your parameters are wrong.
Try this:
function popUpCal()
{
var url = "calendar_flight_maint.php";
var width = 700;
var height = 600;
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
var windowFeatures = "width=" + width + ",height=" + height +
",status,resizable,left=" + left + ",top=" + top +
"screenX=" + left + ",screenY=" + top + ",scrollbars=yes";
window.open(url, "subWind", windowFeatures, "POS");
}
Here is a jsFiddle

Related

Can not set center position of window edge when using window.open()

I use javascript method :
var left = ((outerWidth / 2) - (w / 2)) + dualScreenLeft - 8;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var param = "width=" + w + ", height=" + h + ", left=" + left + ", top=" + top + ",toolbar=no,menubar=no,scrollbars=no,location=yes,directories=no";
window.open(url, "new window", param);
to open a new window in center screen position. It worked for all browser except Window Edge.
In
window.open(strUrl, strWindowName, [strWindowFeatures])
top and left parameters ignored in strWindowFeatures
Can someone help me ? Thanks

jquery .css() not applying -webkit-transform

I cannot see what is wrong with this code. Calculate center position of window then transform-translate div there (have to use translate for what i am doing).
Just getting this working for Chrome for a start, hence the -webkit- prefix).
Very confused as to why jQuery does not apply the inline style to the .logo div. Have included my other trouble-shooting experiments, commented out.
A syntax problem? jsfiddle here.
var centerPosition = '';
function centerLogo(){
var w_width = $(window).width();
var w_height = $(window).height();
var hCenter = (w_width / 2) - 150;
var vCenter = (w_height / 2) - 150;
console.log(hCenter);
console.log(vCenter);
var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px);';
console.log(centerPosition);
$('.logo').css('-webkit-transform', centerPosition);
// Try uncommenting the three examples below - they all work ...
// $('.logo').css('background', 'blue');
// centerPosition = 'blue';
// $('.logo').css('background', centerPosition);
// $('.logo').css('-webkit-transform', 'translate(10.85px, 45.56px)');
}
jQuery(document).ready(function($){
centerLogo();
});
The correcy syntax of $('.logo').css('-webkit-transform', centerPosition); does not have semi colons inside the Strings. Try changing this:
var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px);';
to this:
var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px)';
Should work: http://jsfiddle.net/7f7rt/6/
This Will Sure Work.
var posElem = document.getElementById('logo'); // set id to div
var newStyle = '-webkit-transform: translate(' + hCenter + 'px, ' + vCenter + 'px);' +
'transform: translate(' + hCenter + 'px, ' + vCenter + 'px);';
posElem.setAttribute('style',newStyle);

Disable click Youtube iframe in mozilla

I need to disable click of the Youtube iframe or set difference click,.
I tried to put a div in front the iframe but it doesn't work.
Here is my code, works in Chrome but not in Mozilla:
$(".youtube").each(function () {
var div = this;
var offset = $(this).offset();
var x = offset.left;
var y = offset.top;
var height = $(this).height();
var width = $(this).width();
var divInFront = '<div style="position:absolute; height:' + height + '; width:' + width + '; top:' + y + '; left:' + x + ';" ></div>';
$("body").append(divInFront);
});

Cropping an image with a preview using jcrop

I'm using jcrop and trying to make a "live" preview of the cropped area on an image.
The movement of the selected area works perfectly if the "Crop Selection" area is the same height and width as the destination preview div.
Check out the issue here: http://jsfiddle.net/fbaAW/
function showCoords(c)
{
var $this = this.ui.holder;
var original = $this.prev();
var preview = original.parent().find(".image");
var oH = original.height();
var oW = original.width();
var pH = preview.height();
var pW = preview.width();
var sH = c.h;
var sW = c.w;
var differenceH = pH - sH;
var differenceW = pW - sW;
//preview.css('width', c.w);
//preview.css('height', c.h);
//preview.css("background-size", Math.round(oW + differenceW) + "px" + " " + Math.round(oH + differenceH) + "px");
preview.css("background-position", Math.round(c.x) * -1 + "px" + " " + Math.round(c.y) * -1 + "px");
}
As you can see, I've commented out a few of my tests and attempts at getting this code to work properly but I just can't wrap my head around the relationship between the position and the size background properties in order to get this effect to work correctly.
Calculate the horizontal and vertical ratios between the selection size and the preview area size:
var rW = pW / c.w;
var rH = pH / c.h;
Then apply them to the background-size and background-position:
preview.css("background-size", (oW*rW) + "px" + " " + (oH*rH) + "px");
preview.css("background-position", rW * Math.round(c.x) * -1 + "px" + " " + rH * Math.round(c.y) * -1 + "px");
http://jsfiddle.net/fbaAW/1/
So, if the preview size is, say, 3 times the size of your jCrop selection area, it means you have scale the original image by 3, and compensate for the scaling when defining the background position.

window.open invalid argument error

So I keep getting an invalid argument error whenever I try to run this script. The error occurs at window.open(url, name, features); Unfortunately I don't know how to fix this. Any ideas?
Common-Utilities.js (where the problem is coming from - line 4)
var wm = new function WindowManager() {
this.open = function (url, features) {
var name = this.getName(url);
var handle = window.open(url, name, features);
handle.focus();
return handle;
};
this.getName = function (url) {
name = getAbsolutePath(url);
return name.replace(/[:.\+\/\?\&\=\#\%\-]/g, "_").toLowerCase();
};
var getAbsolutePath = function (url) {
var a = document.createElement('a');
a.href = url;
return a.href;
}
};
openPopUp.js
function openPopup(url, width, height)
{
if (width == -1) width = 710;
if (height == -1) height = 500;
var left = (window.screen.availWidth - width) / 2;
var top = (window.screen.availHeight - height) / 2;
if (window.screenLeft>window.screen.availWidth)
{
left = left + window.screen.availWidth;
}
// open url in new browser window
var handle = wm.open(url, 'location=0, menubar=0, resizable=1, scrollbars=1, status=0, toolbar=0, width=' + width + 'px, height=' + height + 'px, top=' + top + 'px , left=' + left + 'px');
//tile the windows so user can tell a new window has been opened
if (document.body.clientHeight==height)
{
var metricTop=10;
var metricLeft=10;
var thisTop=self.screenTop+metricTop;
var thisLeft=self.screenLeft+metricLeft;
if (thisTop<0) thisTop=0;
if (thisLeft<0) thisLeft=0;
handle.moveTo(thisLeft, thisTop);
}
}
function popOutOrIn(url, title, width, height, popOut) {
if (width == -1) width = 710;
if (height == -1) height = 500;
if (popOut === 'True') {
openPopup(url, width, height)
}
else {
window.top.popUpRadWindow(url, title, width, height);
}
}
We have the code... here is the fix:
var handle = wm.open(url,'I want a name!', 'location=0, menubar=0, resizable=1, scrollbars=1, status=0, toolbar=0, width=' + width + 'px, height=' + height + 'px, top=' + top + 'px , left=' + left + 'px');
The name argument can not have a space in it so the regular expression needs \s
this.getName = function (url) {
name = getAbsolutePath(url);
return name.replace(/[:.\+\/\?\&\=\#\%\-\s]/g, "_").toLowerCase();
};

Categories

Resources