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();
};
Related
I created this Vanilla Javascript function for a parallax effect on my website's landing page and it is pretty efficient but could be one step better.
function parallaxTop(direction, id, startingNumber, scrollVariable){
var scrolled = window.pageYOffset;
var element = document.getElementById(id);
element.style.top = (startingNumber + (scrolled * scrollVariable)) + 'px';
}
function parallaxLeft(direction, id, startingNumber, scrollVariable){
var scrolled = window.pageYOffset;
var element = document.getElementById(id);
element.style.left = (startingNumber + (scrolled * scrollVariable)) + 'px';
}
window.onscroll = function() {
parallaxTop('element1', 0, 0.5);
parallaxLeft('element2', 200, -0.25);
}
I want to know if there is any way I could use a variable to select which type of css attribute is being changed. This would be my best guess but I can't find a solution.
function parallax(direction, id, startingNumber, scrollVariable){
var scrolled = window.pageYOffset;
var element = document.getElementById(id);
element.style.direction = (startingNumber + (scrolled * scrollVariable)) + 'px';
}
window.onscroll = function() {
parallax('top','element1', 0, 0.5);
}
You should change this
element.style.direction = (startingNumber + (scrolled * scrollVariable)) + 'px';
to
element.style[direction] = (startingNumber + (scrolled * scrollVariable)) + 'px';
PROBLEM: I have 2 images, one is taken from my database using src=data:image;base64,$row[2] and has given dimensions.
The other image is taken from an HTML element with ID=img00 and it is a transparent image. I need the transparent image to have the same width and height of the image taken from my database.
MY GUESS: I would like to save getMeta output to 2 variables for width and height, that I would later use instead of '200px'.
Do you believe there's a smarter way than this code?
Else, what would I have to do to save getMeta output and use it instead of that 200px?
function getMeta(url, callback) {
var img = new Image();
img.src = url;
img.onload = function() { callback(this.width, this.height); }
}
getMeta(
"data:image;base64,$row[2]",
function(width, height) { alert(width + 'px ' + height + 'px') }
);
var img00 = document.getElementById('img00');
if(img00 && img00.style) {
img00.style.height = '200px';
img00.style.width = '200px';
}
If you want to use the values from inside getMeta, you are going to have to change the timing of the execution of the last block of code. Perhaps something like this?
function getMeta(url, callback) {
var img = new Image();
img.src = url;
img.onload = function() { callback(this.width, this.height); }
}
function sizeImg00(w,h){
var img00 = document.getElementById('img00');
if(img00 && img00.style) {
img00.style.height = h + 'px';
img00.style.width = w + 'px';
}
}
getMeta(
"data:image;base64,$row[2]",
function(width, height) {
console.log(width + 'px ' + height + 'px');
sizeImg00(width, height);
}
);
I am trying to scale my iframe with it's content to change dynamically with proportion to the change in the browser window size. I have the following code which scale the height but my problem is the variable I define outside the window.resize() function do not have values inside the function. Am I missing something? Shouldn't they be global?
var windowHeight = $(window).height();
var iframeHeight = $('iframe').height();
var heightScale = windowHeight/iframeHeight;
//define resize function
$(window).resize( function() {
/*test*/ console.log("I have triggered");
//define dimensions for window and iframe
var newWindowHeight = $(window).height();
var newIframeSize = null;
var hScale = 1.01;
var sScale = .09;
//window size getting bigger
/*test*/ console.log("windowHeight is " + windowHeight);
/*test*/ console.log("newWindowHeight is " + newWindowHeight);
if ( windowHeight < newWindowHeight )
{
console.log("i'm in the first if")
windowHeight = newWindowHeight;
newIframeSize = iframeHeight*heightScale;
/*test*/ console.log("iframe"+iframeHeight);
/*test*/ console.log("heightScale"+heightScale);
/*test*/ console.log("newiframe"+newIframeSize);
while ( newIframeSize < iframeHeight )
{
console.log("While loop in progress");
$('iframe').css('transform' , 'scale(' + hScale + ')');
newIframeSize = $('iframe').height();
}
}
//window size getting smaller
else if ( windowHeight > newWindowHeight )
{
console.log("i'm in the first if")
windowHeight = newWindowHeight;
newIframeSize = iframeHeight/heightScale;
/*test*/ console.log("hey"+iframeHeight);console.log("hi"+heightScale);console.log("ho"+newIframeSize);
while ( newIframeSize > iframeHeight ) //can use newIframe < iframeHeight
{
console.log("While loop in progress");
$('iframe').css('transform' , 'scale(' + sScale + ')');
newIframeSize = $('iframe').height();
}
}
Appreciate the help. Thanks
How is the document height is smaller than the window scroll top value + the viewport height, when I scrolled down to the end of document. Should not they be the same? I am struggling with this for last couple of hours but still not getting the hang of it.
$(function(){
vpw = parseFloat($(window).width());
vph = parseFloat($(window).height());
appearh = parseFloat(vph*0.4);
dh = $(document).height();
footerh = $('#footer-area').height();
footTop = dh - footerh;
resizeDiv(vpw, vph, appearh);
$(window).scroll(function(){
scrollPos = $(window).scrollTop();
jj = vph + scrollPos;
console.log(scrollPos + '+' + vph + '=' + jj + ' is (at the bottom) ' + dh);
if(scrollPos > appearh){
addWin = parseFloat(dh - vph);
$('#trends').removeClass('hidetrends',2000).addClass('showtrends',2000);
/*console.log( dh + '>' + scrollPos + ';' + addWin );
if(scrollPos >= 1672){
$('#trends').css('position', 'relative');
}else if(scrollPos <= 1672){
$('#trends').css('position', 'fixed');
}*/
}else{
$('#trends').removeClass('showtrends',2000).addClass('hidetrends',2000);
}
});
});
window.onresize = function(event) {
resizeDiv(vpw, vph, appearh);
}
function resizeDiv(vpw, vph, appearh) {
$("#full-width").css({"height": vph + "px"});
}
Try this:
$(window).scroll(function(){
vpw = parseFloat($(window).width());
vph = parseFloat($(window).height());
appearh = parseFloat(vph*0.4);
dh = $(document).height();
footerh = $('#footer-area').height();
footTop = dh - footerh;
resizeDiv(vpw, vph, appearh);
scrollPos = $(window).scrollTop();
jj = vph + scrollPos;
console.log(scrollPos + '+' + vph + '=' + jj + ' is (at the bottom) ' + dh);
....
The reasoning behind this is I think it'd be wise to actually set your variables as you scroll
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