Develop Reference

Setting Page Scroll Cross-Browser

I've been working on a project for work where I need to create a Javascript "jump-menu" within a page.
(Q:Wait, a jump-menu? Why don't you just use a elements and namespaces to navigate within your page?
A: Because that would defeat the purpose! So please, don't provide answers like that. I need to do this with Javascript (AND I'M NOT USING JQUERY!!!))
So, here is what I do:
I make a list at the top of the page, and a list at the bottom of the page.
I add an event listener to each list item at the top of the page and I attach a reference to that list items corresponding content item within the page.
When the link at the top is clicked, I grab to offsetTop of the item I want to scroll to, and I set either the document.body.scrollTop or the window.pageYOffset.
I've never actually needed the window.pageYOffset, but somewhere told me it would work and I never removed it from my code. Either way, this appears to work with the document.body.scrollTop in Chrome, Safari, and Opera, yet it doesn't work in Firefox or IE. Why?
Here is the code block where I set the document.body.scrollTop:
if(elem.jump_ref)
{
if(document.body.scrollTop || document.body.scrollTop === 0)
{
document.body.scrollTop = elem.jump_ref.offsetTop - page_top_padding;
}
else if(window.pageYOffset || window.pageYOffset === 0)
{
window.pageYOffset = elem.jump_ref.offsetTop - page_top_padding;
}
}
And Heres The Project In JSFIDDLE
I've stepped through and found that "Yes, I am grabbing the right element." and "Yes, I am setting the document.body.scrollTop, and "No, I am not setting the document.body.scrollTop to zero." and yet it still doesn't work! Please help! My webpage is supposed to go public on Tuesday!

Well, I believe I have found my answer. So far, it appears to work in Chrome, Firefox, IE, Opera, and Safari (these were the only ones I was able to test). I don't know what type of mobile support this feature will have (if any), but my page already has an entirely different functionality for mobile anyway.
Either way, here's the fix. Its the window.scrollTo method!:
this.jump = function(evt)
{
var elem = evt.srcElement || evt.currentTarget;
var page_top_padding = 100;
if(elem.jump_ref)
{
window.scrollTo(0, (elem.post_ref.offsetTop - page_top_padding));
}
}.bind(this);
And like I said, it works great in nearly everything! Everything except JSFiddle. lol. I don't quite get it, but luckily no one is going to be visiting my webpage in JSFiddle.

Is there a way to get IE 10+ to fire an event when the overflow of an element changes?

I want to test if a div is overflowing. The following code works for webkit and Firefox.
var div = $("#myDivWithOverflow")[0];
var OnOverflowChanged = function(){
alert("OnOverflowChanged");
}
if (div.addEventListener) {
// webkit
div.addEventListener ('overflowchanged', OnOverflowChanged, false);
// firefox
div.addEventListener ('overflow', OnOverflowChanged, false);
}
As far as I can see IE10+ has support for the addEventListener method, but does not react on either of the above events.
Is there a way to achieve this in IE?
Update: I've created a fiddle which illustrates clearer what I want to achieve:
http://jsfiddle.net/AyKarsi/sB36r/1/
Unfortunately, the fiddle does not work at all in IE due to some security restrictions

Currently, overflowchanged are only supported on Webkit browsers.
A work around can be to check for mutation events (notably DOMAttrModified) and check if the overflow changed.
div.addEventListener("DOMAttrModified", function() {
// check overflow value
}, false);
This won't trigger on screen resize, so it may not do exactly what you're looking for. But it's somewhere you can dig for a solution.
On MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events
On Microsoft site: http://msdn.microsoft.com/en-us/library/ie/dn265032(v=vs.85).aspx

Safari Scrolling issue with jQuery .remove()

I'm developing a plugin for a website building program, and am building the preview page for it. It's sort of a parallax scrolling plugin and the issue I'm having is that in Safari, when you scroll down to a certain point, it wont allow you to scroll any further. It's fine in firefox and chrome, but I saw the same issue in opera. I've managed to narrow it down to the function that's causing it, but I have no idea why or how to fix it.
When I comment out this function, the page scrolls fine, but it doesn't remove the empty divs like I need it to do:
function removeStuff() {
$('.conP').each(function(){
var divDad = $(this),
divses = $(this).children();
if (divses.hasClass('empty'))
divDad.remove();
});
}
here's the preview page where the issue can be observed:
http://reveriesrefined.com/myftp/dack_stev/
//////////EDIT:
I've simplified the code to this:
$('.conP_%id% > .empty').parent().remove();
however, it's still causing scrolling issues in safari and opera, but not the other browsers.
Any help is VERY VERY appreciated!

Actually, I found the issue already. Somehow even though commenting out the function mentioned above seemed to solve it, it was actually a line of code in another function.
I had this function:
function autoPlay() {
var backDiv = $('#outterLax div:first');
backDiv.hide();
$('.conP').hide();
backDiv.remove();
$('#outterLax').append(backDiv);
backDiv.show();
}
but the line:
$('.conP').hide();
was unnecessary as that was already being accomplished elsewhere in my code.

jQuery removeClass re-renders video player in Firefox

I have this most annoying issue with removeClass in Firefox.
I am using it to change some of the elements on the page so that when I resize my player the layout looks good. I am using JW player API to resize the player using the jQuery click method, then it starts playing automatically or from the position it was at.
Now all of that works perfectly in IE (surprising), Chrome, Opera, Safari. It's seemless with no hiccup. But Firefox will reinitialize the player and it starts over. I have a removeClass that I perform on a div that surrounds the player. If I take that out, Firefox does what it's supposed to do. I have to use the removeClass to realign my layout. It works fine with addClass, just not with removeClass.
Any ideas why it won't work with removeClass() properly?
Below is my code how I want it to work and it does for EVERY browser but FF.
jQuery(document).ready(function(){
jQuery("#expand").live("click",function(event){
var time = jwplayer().getPosition();
var cont = $('#lcontents').html();
$('#tleft').html(cont);
$('#pleft').addClass("centerText videoWide");
$('#pleft').removeClass("column-video-left");
$('#lcontents').html("");
$('#tleft').addClass("column-video-left");
jwplayer().resize("854","480");
if(time > 0){
jwplayer().onReady(function() {
jwplayer().seek(time);
});
}else if(time < 1){
jwplayer().play();
};
event.preventDefault();
});
});
Edit- The code below is the html
<div id="pleft" class="column-video-left">
<div id="rsplayer" class="video">jwplayer code renders here</div>
<div id="expand" style="text-align:center">Expand Player</div>
<div id="lcontents">
regular html code here.... which gets moved to div tleft
</div>
</div>
<div id="expand1"></div>
<div id="tleft"></div>

Have you tried manually modify the class attribute and seeing if that works?

It's possible this is a known bug in Firefox 3.6. You could try it in the Firefox 4 release candidate and see if you still have the same problem. If you don't, then someone who's good at doing Bugzilla searches could figure out what the bug was, and whether the fix will be backported to the 3.6 branch.

Setting Focus to an iFrame in IE

There is a tree menu in my application and on click of the menu items, it loads a url in a iFrame. I like to set the focus in an element of the page loaded in the iFrame.
I'm using this code, and it works perfectly in all the browsers except IE:
var myIFrame = $("#iframeName");
myIFrame.focus();
myIFrame.contents().find('#inputName').focus();
I have tried all different options like using setTimeout, but no chance.
After the page loads, when I hit the tab key, it goes to the second input, which means it's been on the first input, but it doesn't show the cursor!
I am using ExtJS and the ManagedIFrame plugin.
Any help is appreciated.

You need to call the focus() method of the iframe's window object, not the iframe element. I'm no expert in either jQuery or ExtJS, so my example below uses neither.
function focusIframe(iframeEl) {
if (iframeEl.contentWindow) {
iframeEl.contentWindow.focus();
} else if (iframeEl.contentDocument && iframeEl.contentDocument.documentElement) {
// For old versions of Safari
iframeEl.contentDocument.documentElement.focus();
}
}

Is the iFrame visible onload, or shown later? The elements are created in different order which is the basis of the setTimeout approach. Did you try a high value wait time on a set timeout?
Try something like at least a half second to test...IE tends to do things in a different order, so a high timeout may be needed to get it not to fire until render/paint finishes:
$(function(){
setTimeout(function() {
var myIFrame = $("#iframeName");
myIFrame.focus();
myIFrame.contents().find('#inputName').focus();
}, 500);
});

Difficult to troubleshoot without a working example, but you might try hiding and showing the input as well, to force IE to redraw the element.
Something like:
var myIFrame = $("#iframeName");
myIFrame.focus();
myIFrame.contents().find('#inputName').hide();
var x = 1;
myIFrame.contents().find('#inputName').show().focus();
This might jolt IE into displaying the cursor.

I could get IE to focus an input field in an iframe with:
iframe.focus();
var input = iframe...
input.focus();
iframe.contentWindow.document.body.focus();
input.focus();