Develop Reference

Why is __SCROLLPOSITIONY is not recognized in IE? It throws a JS runtime error of undefined

I have some code to help keep some popup divs in view after a postback because in our asp.net page we have MaintainScrollPositionOnPostback set to true. What I am doing is getting the amount of vertical scroll and offsetting the placement of the div by this value so that after the postback when the vertical scroll is maintained, the new popup div will be centered in view. This works fine in Chrome (of course), but when testing it out in IE 11, I am greeted with this javascript runtime error: 0x800a1391 - JavaScript runtime error: '__SCROLLPOSITIONY' is undefined.
Here's the line of JS code where the issue is occuring, it's pretty simple:
var topValue = parseInt(__SCROLLPOSITIONY.value);
How can I get this value to be found in IE 11? I realize there are (possibly) better solutions for this including using alerts, but for time constraints and consistency, among other reasons, let's not go down this route. Thanks for any help!

When you use MaintainScrollPositionOnPostBack, ASP generates hidden fields for scroll positions and injects some scripts as well, for Microsoft browsers, you must handle this differently by using a check in your JavaScript, called __nonMSDOMBrowser, here's an example I found online of using it.
function WebForm_RestoreScrollPosition() {
if (__nonMSDOMBrowser) {
window.scrollTo(theForm.elements['__SCROLLPOSITIONX'].value, theForm.elements['__SCROLLPOSITIONY'].value);
}
else {
window.scrollTo(theForm.__SCROLLPOSITIONX.value, theForm.__SCROLLPOSITIONY.value);
}
if ((typeof(theForm.oldOnLoad) != "undefined") && (theForm.oldOnLoad != null)) {
return theForm.oldOnLoad();
}
return true;
}
theForm.oldOnLoad = theForm.onLoad;
theForm.onLoad = WebForm_RestoreScrollPosition;
I know this isn't exactly what you're after, but it should be enough to point you in the right direction and give you some things to try.

Resize a dynamically generated iframe

I have a report generated by Oracle Apex (A UI tool operating against the Oracle database). I have customized it to have a hyperlink on each record, which when clicked opens a detail report in an iframe right under the current record. This, I am doing by using the Javascript insertRow method on the html table element (Condensed Javascript code below. Oracle APEX allows use of JS/Jquery)
var pTable= html_CascadeUpTill(t,'TABLE');
var myNewRow = pTable.insertRow(pTR.rowIndex+1);
var myNewCell = myNewRow.insertCell(0);
myNewCell.innerHTML = '<iframe src="detail report url" height="0"></iframe>';
In order to resize the height of the iFrame that is different for different detail records, I have the following code in the document).ready(function() of the page
$('iframe').load(function()
{
setTimeout(iResize, 1000);
}
function iResize()
{
// Iterate through all iframes in the page.
for (var i = 0, j = iFrames.length; i < j; i++)
{
var y=(iFrames[i].contentWindow || iFrames[i].contentDocument);
if (y.document)y=y.document;
var docHt = getDocHeight(y);
if (docHt) iFrames[i].height = docHt + "px";
}
}
);
Without the setTimeout call to iResize function, the iframe resize is not happening. But this setTimeout is adding a delay in the resized iframe to appear which I want to avoid. Is there a way to do this? All the related posts/articles I have seen online deal with iframes that are built into the page but not generated on-the-fly as in my case.
Let me know if you need more information. Please help. Thank you.

You should consider putting the details in a <div> block, then showing or hiding the <div> with JQuery. You can set dimensions for your block with CSS, or just let the content flow normally inside of the block. Sounds like a much simpler way to achieve the same effect.

The issue is that if you perform the resize too soon it will get the dimensions of the child document before it has been fully rendered, hence the use of a timer.
If your detail reports are other APEX pages that you control, then you could call the iResize function from the "Execute when page loads" section of the detail page:
parent.iResize();
That seems to work for me.

It sounds to me like the iframes don't even exist when the page first loads.
Instead of calling the iResize function on page load and then every second you could place the call to iResize in the code that creates the iframe.

Works on browser but not as app

I have a problem.
A strange problem.
I have this part of code:
Actions.loadWizzard = function(href)
{
alert(1);
var wizardTimer;
var wizardTimer2;
if (navigationObject.getLocation(href) === "ProductInformationWizzard") {
navigationObject.newPage("loading");
wizardTimer = setTimeout("navigationObject.newPage('contentProductInformationWizzard');", 3000);
wizardTimer2 = setTimeout("window.productInformationWizzardObject.init()", 1000);
} else if (navigationObject.getLocation(href) === "contentAdviceWizzard") {
navigationObject.newPage("loading");
wizardTimer2 = setTimeout("window.adviceWizzardObject.init()", 10000);
}
return;
};
And on the normal browser it works excactly as it should work.
As a WRT though (or phonegap app) it doesn't.
It doesn't give me the alert (used for debugging). It doesn't use the setTimeout. evaluates instantly or something. And the loading page is not shown.
yeah, sometimes it shows up once.
Another problem is that the loading div has a GIF img. It;s like a loading img.
But the thing is just static. It's like normal image instead of a animated GIF.
How is this possible.
Some notes to the code:
navigationObject.newPage(page);
This hides the current div i'm viewing and shows the div i pass to it.
window.adviceWizzardObject.init();
This makes an ajax request to a jsonrpc server and then evaluates the data json retreived and set's up the wizard.
Thanks in advance,
Erik

It does work,
But becouse of some caching or something the old versions were loaded or something like that.
Restarting my phone solved the problem.

JavaScript greybox -- slidehow won't work in FF/Safari

is anybody familiar with greyBox JavaScript plugin?
orangoo.com/labs/GreyBox/
it's for slideshows and stuff.. I can't get it to work in FF/Safari; it works great in IE, but FF/Safari won't play ball..
orensanz.org/photos.html
would very much appreciate some suggestions..
supposedly there's a google group (forum) for this thing (can't post url.. this thing limits how many urls u can include in a post, it's linked to from their home pg (url above.. oh brother..) but when you link to it you land on a pg that says they've been booted out b/c they violated google's terms of service....;-)
thank you..

It looks to me as if there's a race condition in some of that Javascript code. If the image isn't in cache, then this looks to me like it'll never make the image box visible:
if(gb_type == "image") {
if(img_holder.width != 0 && img_holder.height != 0) {
var width = img_holder.width;
var height = img_holder.height;
GB.width = width;
GB.height = height;
setupOuterGB();
if(GB.use_fx) {
AJS.setOpacity(frame, 0);
AJS.fx.fadeIn(frame);
}
}
}
else {
GB.width = frame.offsetWidth;
GB.height = frame.offsetHeight;
setupOuterGB();
}
In think that code should be called as the "load" handler for the image. Note that your page works fine in Firefox the second time you click on any particular image.

if(GB.show_loading) {
AJS.AEV(window, 'load', function(e) {
loaded();
});
}
else {
loaded();
}
Try putting these lines on either a timeout or replace the lower loaded() with AJS.AEV(window, 'load', function(e) {loaded();});

(I couldn't add comment, nothing happens when click on 'add comment'..)
yes I know I can use other lightboxes.. but what I do need is one in which slideshow lands in photo the user CLICKED.. at work I've been using this one, flowplayer.org/tools/demos/scrollable/easing.html, but when you tell it to start at a given photo (not photo 1) it SLIDES towards it.. I need one in which it just lands on specified photo without the sliding effect -- other than that this one would be perfect
a lot of slick JS lightboxes out there have 'next' button on top of photo itself and other stuff obstructing photo a bit, I don't want that.. ) oh man, I still can't get this thing to work AT ALL in Safari, whereas examples they have online (orangoo.com/labs/GreyBox/) work fine in Safari, I don't get this.. thank you for your help (btw: I tried many diff settings for setTimeout, all the way from 1000 milliseconds to about 30,000.. either way Safari won't touch it.. :-(

Toggling link text when navigating between pages based on selected stylesheet

I have installed a script on my website that allows for a low contrast setting and a high contrast setting, as my site will be used by sight impaired persons. The script works perfectly. The only problem is when a visitor visits multiple pages of the site.
When you first visit the site, the low contrast setting is in effect by default and only the link to the high contrast setting appears. If you then visit other pages of the website, the low contrast setting is in effect by default and only the high contrast link appears (this is perfect and as it should be). The website does this by using a cookie.
Here is the problem. If you click on the high contrast link to view the page in the high contrast setting and then go to another page, the other page appears in the high contrast setting (as it should), but instead of a link to the low contrast setting appearing (which I would like to happen), a link to the high contrast setting appears (which does not make sense, given the page is already in the high contrast setting).
My site is not done, but I published a few pages at http://www.14kt.eu/ so you can see what I am talking about. A number of the members of this site were kind enough to help me with the code/script and things were working perfectly for a bit, but then it just stopped working. I suspect I changed something in the rest of the html that caused this. Rather perplexed over this issue.
If anybody can please tell me how to fix this problem, I would be most grateful.
Thank you for your time, Chris

It looks like you just need your stylesheet buttons to be conditionally hidden based on the cookie.
You can do this with the code below (updated):
function setStylesheetFromCookie() {
var stylesheet = readCookie('mysheet') || 'none';
if( stylesheet == 'highcontrast' ) {
console.log('high');
document.getElementById('Lc').style.display = 'block';
document.getElementById('Hc').style.display = 'none';
} else {
console.log('low');
document.getElementById('Hc').style.display = 'block';
document.getElementById('Lc').style.display = 'none';
}
}
Add that code somewhere in script_1.js.
In order for that to work, it needs to run on window load.
This brings us to problem two. You have two different window.onload assignments in script 1.
You need to consolidate the two. Delete the line
window.onload = FixRows;
And modify the second window.onload = function() to look like the following:
window.onload = function() {
var el = document.getElementById('mydiv');
var size = readCookie('fontsize');
if(size) {
doChangeSize(el, size);
}
var original = readCookie('originalsize');
if(original) {
el.originalSize = original;
}
FixRows(); //You are adding this line
setStylesheetFromCookie(); //and adding this line to the end of the function
}
Notice the two new function calls at the end.
This should solve your problem.
Cheers!

Just kind of poking around and it appears as though you've got javascript running in a couple different directions at the same time. window.onload is tied separately to two different functions. The first one calls FixRows which should work to display 'low contrast'/'high contrast' appropriately (from the cookie you set). I'm thinking the second window.onload is overriding the first.
I don't think this is directly affecting your code, but you have setCookie() in styleswitcher.js and createCookie() in script_1.js - they are doing the same thing. I'd say you should at least consolidate you cookie functions in one or the other library to cut down on confusion.
Hope I've been helpful.