i have this javascript function:
print <<"EOT";
<script type="text/javascript">
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
}
</script>
EOT
print "<body onload='alertSize()'>";
print "</body>";
my $windowHeight = $q->param('myHeight');
my $windowWidth = $q->param('windowwidth');
print "<$windowHeight><$windowWidth>";
How to pass the values of and from javascript function to my Perl variables ?
Your Perl is running on the server. It outputs some text which is sent to the client (the browser).
The browser then interprets that text and HTML and JavaScript.
You can't pass data back to Perl without making a new HTTP request.
Your options include:
Finish the processing with JavaScript instead of trying to pass it back to Perl
Use Ajax to make a new HTTP request
Set location.href to load a new page with the data passed in the query string
Find a way to achieve your (unspecified) goal without using your current logic (e.g. you could use CSS media queries to style a page differently based on browser dimensions).
Related
Could somebody tell me why this gives an error?
I moved the code into functions to allow me to delay it so it's not so sensitive (was getting annoying)
Uncaught ReferenceError: hideleftnav is not defined
Uncaught ReferenceError: showleftnav is not defined
function showleftnav()
{
$(".leftnavdiv").css('width','500px');
$("body").css('padding-left','510px');
//get measurements of window
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
$('#maindiv').width(myWidth - 540);
}
function hideleftnav()
{
$(".leftnavdiv").width(10);
$("body").css('padding-left','20px');
//get measurements of window
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
$('#maindiv').width(myWidth - 50);
}
$(".leftnavdiv").live({ //code for autohide
mouseenter:
function () {
setTimeout("showleftnav()", 5000);
},
mouseleave:
function () {
setTimeout("hideleftnav()", 5000);
}
});
Looks like you've found one problem with using setTimeout with a string as the first argument. Here's a condensed example illustrating the same problem:
(function() {
function test() {
console.log('test');
}
setTimeout('test()', 500); // ReferenceError: test is not defined
setTimeout(test, 500); // "test"
setTimeout(function() { // "test"
test();
}), 500);
})();
Demo: http://jsfiddle.net/mXeMc/1/
Using the string causes your code to be evaluated with the window context. But since your code is in a callback function, test isn't accessible from window; it's private and restricted only to the scope of the anonymous function.
Referencing the function with just test avoids this problem because you're pointing directly to the function without using eval.
What is the best way to get the actual page (not window) height in JS that is cross-browser compatible?
I've seen a few ways but they all return different values...
self.innerHeight
or
document.documentElement.clientHeight
or
document.body.clientHeight
or something else?
One way of doing it which seems to work is :
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
Page/Document height is currently subject to vendor (IE/Moz/Apple/...) implementation and does not have a standard and consistent result cross-browser.
Looking at JQuery .height() method;
if ( jQuery.isWindow( elem ) ) {
// Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
// 3rd condition allows Nokia support, as it supports the docElem prop but not CSS1Compat
var docElemProp = elem.document.documentElement[ "client" + name ],
body = elem.document.body;
return elem.document.compatMode === "CSS1Compat" && docElemProp ||
body && body[ "client" + name ] || docElemProp;
// Get document width or height
} else if ( elem.nodeType === 9 ) {
// Either scroll[Width/Height] or offset[Width/Height], whichever is greater
return Math.max(
elem.documentElement["client" + name],
elem.body["scroll" + name], elem.documentElement["scroll" + name],
elem.body["offset" + name], elem.documentElement["offset" + name]
);
nodeType === 9 mean DOCUMENT_NODE : http://www.javascriptkit.com/domref/nodetype.shtml
so no JQuery code solution should looks like:
var height = Math.max(
elem.documentElement.clientHeight,
elem.body.scrollHeight, elem.documentElement.scrollHeight,
elem.body.offsetHeight, elem.documentElement.offsetHeight)
var width = window.innerWidth ||
html.clientWidth ||
body.clientWidth ||
screen.availWidth;
var height = window.innerHeight ||
html.clientHeight ||
body.clientHeight ||
screen.availHeight;
Should be a nice & clean way to accomplish it.
Try this without jQuery
//Get height
var myWidth = 0, myHeight = 0;
if (typeof (window.innerWidth) == 'number') {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
Hope this helps you.
Hope you can help with this problem I've been trying to nut out.
I've found the examples on http://home.comcast.net/~urbanjost/semaphore.html very awesome and work perfectly for what I need.
Only problem is that I'd like the coordinates to dynamically change based on the window size first. The way it works at the moment is that it loads the default coords (works great for resolutions of 1920x1080 but is hugely unaligned on 1024x768) and will then resize on window resize.. I'd like it to detect the size of the browser window for smaller screens first, then display the code accordingly.
Here's my javascript:
<script type="text/javascript" >
//||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| |||||||||||||||||||||||||||||||||||||||||
GLOBAL_AREAS= new Array();
GLOBAL_SUFFIX= "g";
GLOBAL_WIDTH=-1;
GLOBAL_HEIGHT=-1;
GLOBAL_NEW_AREAS= new Array();
//---------------------------------------------------------------------------
function setglobal(){
// place original AREA coordinate strings into a global array, called first time setXY is called
var arrayAreas = document.body.getElementsByTagName("AREA" );
GLOBAL_WIDTH= document.getElementById("tclteam_s1" ).width; // get original width
GLOBAL_HEIGHT= document.getElementById("tclteam_s1" ).height; // get original height
for(var i = 0; i < arrayAreas.length; i++) {
GLOBAL_AREAS[i]= arrayAreas[i].coords;
}
document.body.onresize=setXY('tclteam_s1',XSIZE(),YSIZE());
// alert("GLOBAL_AREAS" + GLOBAL_AREAS );
}
//---------------------------------------------------------------------------
function setXY(elementid,newwidth,newheight){
if (GLOBAL_WIDTH == -1 ){
setglobal();
}
document.getElementById(elementid).width=newwidth;
document.getElementById(elementid).height=newheight;
scaleArea();
}
//---------------------------------------------------------------------------
function XSIZE(){ // get browser window.innerWidth , dealing with ie
var myWidth = 1;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
} else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
return myWidth;
}
//---------------------------------------------------------------------------
function YSIZE(){ // get browser window.innerHeight, dealing with ie
var myHeight = 1;
if( typeof( window.innerHeight ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
return myHeight;
}
//---------------------------------------------------------------------------
function scaleArea() { // using values stored at load, recalculate new values for the current size
var arrayAreas = document.body.getElementsByTagName("AREA" );
message = " "
for(var i = 0; i < arrayAreas.length; i++) {
ii=i+1;
rescaleX= document.getElementById("tclteam_s1" ).width/GLOBAL_WIDTH ;
rescaleY= document.getElementById("tclteam_s1" ).height/GLOBAL_HEIGHT ;
sarray=GLOBAL_AREAS[i].split("," ); // convert coordinates to a numeric array assuming comma-delimited values
var rarray =new Array();
for(var j = 0; j < sarray.length; j += 2) {
rarray[j]=parseInt(sarray[j])*rescaleX; // rescale the values
rarray[j]=Math.round(rarray[j]);
rarray[j+1]=parseInt(sarray[j+1])*rescaleY; // rescale the values
rarray[j+1]=Math.round(rarray[j+1]);
}
message = message + rarray.join("," ) + '\n';
arrayAreas[i].coords=rarray.join("," ); // put the values back into a string
GLOBAL_NEW_AREAS[i]= arrayAreas[i].coords;
}
// alert(rescaleX + " " + rescaleY + "\n" + GLOBAL_WIDTH + " " + GLOBAL_HEIGHT + "\n" + " GLOBAL_AREAS" + GLOBAL_AREAS + "\nSCALED AREAS" + message);
}
//||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</script>
The following script here detects the browser window size. So I'm hoping to include this in the above so the image map will dynamically resize from the browser window size first:
<script type="text/javascript">
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
</script>
Is there a way to code this so it will read the browser window size first (using the code directly above), then load the image map accordingly?
I doubt this is actually possible but Im prepared to be corrected.
What I need is to be able to detect the width and height of an iframe from within the iframe, so if the iframe src is iframeContent.html I need to be able to surface the values on this page.
I have no control over the page that hosts the iframe only the contents of the iframe.
Is this possible?
You can always get the web page dimensions, no matter if the page is loaded inside an iframe or a new window it always works the same way. This is a function I've found used to get window dimensions, you can also use it to get an <iframe> dimensions.
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
}
source (thanks Andy E for adding the link)
jsFiddle example
Nowadays this is as simple as:
<script>
console.log(innerWidth, innerHeight)
</script>
Just make sure to load this JavaScript from within the iframe and it will print the iframe window's width and height in the browser's console.
I've been using the following code to detect browser client area width for ages and it wokred 100% with all browsers, including FF, Safari and various versions of IE. However, now when I switched to a new monitor with widescreen resolution (1280x800) this code fails on IE8. It reports clientwidth of 1024 !!!???
Any ideas how to get the correct client area width ?
function getClientWidth() {
var v=0,d=document,w=window;
if((!d.compatMode || d.compatMode == 'CSS1Compat') && !w.opera && d.documentElement && d.documentElement.clientWidth)
{v=d.documentElement.clientWidth;}
else if(d.body && d.body.clientWidth)
{v=d.body.clientWidth;}
else if(xDef(w.innerWidth,w.innerHeight,d.height)) {
v=w.innerWidth;
if(d.height>w.innerHeight) v-=16;
}
return v;
}
Non-jquery code I used some time ago:
function detectBrowserSize() {
var myWidth = 0, myHeight = 0;
if (typeof (window.innerWidth) == 'number') {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
alert(myWidth + ' - ' + myHeight)
}
The bits in your code where you check for window.opera and subtract 16 pixels are worrying. comp.lang.javascript's FAQ has a decent implementation of this.