We Keep Coding

Elements coming on top with safari webkit fullscreen api

Using native fullscreen API for toggling fullscreen on safari MacOS and facing this issue, where the element that is supposed to go to full screen has other elements on top. I have tried playing around with z-index with elements coming on top but didn't get any solution out of that. Here's a screenshot of the issue.
The HTML of the code is too complex to put in here.
Here's the function that is used to toggle fullscreen.
enterFullScreen = (ele?: any): void => {
let doc = document.documentElement;
if (ele != null) {
doc = ele;
}
const docElmWithBrowsersFullScreenFunctions = doc as HTMLElement &
{
mozRequestFullScreen(): Promise<void>;
webkitRequestFullscreen(): Promise<void>;
msRequestFullscreen(): Promise<void>;
};
if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
docElmWithBrowsersFullScreenFunctions.requestFullscreen();
} else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
} else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
} else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
}
}
Tried finding if will-change CSS property is used anywhere in the project as mentioned here, but it's not there. Is anybody facing a similar issue?

Why do certain spots on my tiles break my animation?

http://rockforddriveline.com/newrdl/index.html
Well, I don't even know where to begin. I don't even know whats broken. Its just is broken. Below the header, there are 5 tiles. In specific spots (and I mean specific) on those tiles, when you click, it breaks the animation and causes the description div to appear prematurely. I can't figure out whats causing it. I can't tell you where to click to make this happen, because the spots change depending on resolution and browser. I've managed to produce this problem across Chrome and Firefox, and I assume IE and Opera will do it as well.
If you're running in Chrome or Firefox on a 1080p monitor, than you should take your clicks to the second tile, and click on and around the word "small".
http://imgur.com/umgy6Pl
function bannerFader(currentBanner, otherBanners, expandButton, appendInfo){
var disableHover = false;
$('.append-product-button').hide();
$(currentBanner).mouseenter(function(){
if (disableHover == false) {
$(otherBanners).stop('hoverEvent');
$(otherBanners).fadeTo(200, .8).queue(null,'hoverEvent');
$(otherBanners).dequeue();
}
});
$(currentBanner).mouseleave(function(){
if (disableHover == false) {
$(otherBanners).stop('hoverEvent');
$(otherBanners).fadeTo(200, 1).queue('hoverEvent');
$(otherBanners).dequeue();
};
});
$(expandButton).click(function(){
disableHover = true;
$(otherBanners).hide(200, function(){
$(appendInfo).show(500)
$('.banner-button').hide();
$('.append-product-button').show();
});
});
$('#sub, #heading, .append-product-button').click(function(){
if (disableHover == true) {
$(appendInfo).hide(300,function(){
$(otherBanners).show(200);
$('.banner-one, .banner-two, .banner-three, .banner-four, .banner-five').fadeTo(0, 1);
$('.banner-button').show();
disableHover = false;
});
};
});
};
function autoRunner() {
bannerFader('.banner-one', '.banner-two, .banner-three, .banner-four, .banner-five', '.banner-one','.append-one')
bannerFader('.banner-two', '.banner-one, .banner-three, .banner-four, .banner-five', '.banner-two','.append-two')
bannerFader('.banner-three', '.banner-two, .banner-one, .banner-four, .banner-five', '.banner-three','.append-three')
bannerFader('.banner-four', '.banner-two, .banner-three, .banner-one, .banner-five', '.banner-four','.append-four')
bannerFader('.banner-five', '.banner-two, .banner-three, .banner-four, .banner-one', '.banner-five','.append-five')
};
EDIT 7/31/14: The glitch can be produced across all updated browsers on 1920x1080.

internet explorer javascript style.height not working

I am trying to create a cookie policy alert for a website, just something simple like a bar at the top of the screen. The idea is that the user has to click close before the bar will disappear. The concept works fine in google chrome however in internet explorer 9, it does not alter its height when clicked.
Here is my code (I know it is basic but unfortunately it has to be due to the platform the establishment uses-
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.height= '0px';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.height= '0px';
}
else { // IE 4
document.all.hideShow.style.height= '0px';
}
}
}
function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}
</script>
<style>
#hideShow{
color:white;
font-family:Gill Sans MT;
text-align:center;
font-height:20px;
</style>
<div id="hideShow" ..etc>
My content
Close
</div>
Also, if anyone would be so kind, could you please explain how I could set it up so that the div 'hideShow' shows up until it is clicked, and then never again on that machine?
Please let me know if you need any more details.
Thanks in advance
Rob

The issue was that the height had to be defined within the hideShow css. As well as the font size. Then the javascript had to set height and fontSize to 0px.

How to disable scrolling in outer elements?

I have a vertically-scrolling div within a page that also scrolls vertically.
When the child div is scrolled with the mouse wheel and reaches the top or bottom of the scroll bar, the page (body) begins to scroll. While the mouse is over the child div, I'd like the page (body) scroll to be locked.
This SO post (scroll down to the selected answer) demonstrates the problem well.
This SO question is essentially the same as mine, but the selected answer causes my page contents to noticeably shift horizontally as the scrollbar disappears and reappears.
I thought there might be a solution that leverages event.stopPropagation(), but couldn't get anything to work. In ActionScript, this kind of thing would be solved by placing a mousewheel handler on the child div that calls stopPropagation() on the event before it reaches the body element. Since JS and AS are both ECMAScript languages, I thought the concept might translate, but it didn't seem to work.
Is there a solution that keeps my page contents from shifting around? Most likely using stopPropagation rather than a CSS fix? JQuery answers are welcome as is pure JS.

here's what i ended up with. very similar to #mrtsherman's answer here, only pure JS events instead of jQuery. i still used jQuery for selecting and moving the child div around, though.
// earlier, i have code that references my child div, as childDiv
function disableWindowScroll () {
if (window.addEventListener) {
window.addEventListener("DOMMouseScroll", onChildMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = onChildMouseWheel;
}
function enableWindowScroll () {
if (window.removeEventListener) {
window.removeEventListener("DOMMouseScroll", onArticleMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = null;
}
function onChildMouseWheel (event) {
var scrollTgt = 0;
event = window.event || event;
if (event.detail) {
scrollTgt = -40 * event.detail;
} else {
scrollTgt = event.wheelDeltaY;
}
if (scrollTgt) {
preventDefault(event);
$(childDiv).scrollTop($(childDiv).scrollTop() - scrollTgt);
}
}
function preventDefault (event) {
event = event || window.event;
if (event.preventDefault) {
event.preventDefault();
}
event.returnValue = false;
}
i've noticed the scrolling doesn't match normal scrolling exactly; it seems to scroll a bit faster than without this code. i assume i can fix by knocking down wheelDeltaY a bit, but it's odd that it would be reported differently by javascript than it's actually implemented by the browser...

I usually do it with a small hack listening to the scroll event on the document: it resets the scroll height back to the original one - effectively freezing the document from scrolling but any inner element with overflow: auto will still scroll nicely:
var scrollTop = $(document).scrollTop();
$(document).on('scroll.scrollLock', function() {
$(document).scrollTop(scrollTop);
});
and then when I'm done with the inner scroll lock:
$(document).off('scroll.scrollLock');
the .scrollLock event namespace makes sure I'm not messing with any other event listeners on scroll.

Although this is an old question, here is how I do it with jQuery. This allows you to scroll a list within an outer list, or you can change the outer list to the document to do what the OP asked.
window.scrollLockHolder = null;
function lockScroll(id){
if (window.scrollLockHolder == null){
window.scrollLockHolder = $('#' + id).scrollTop();
}
$('#' + id).on('scroll', function(){
$('#' + id).scrollTop(window.scrollLockHolder);
});
}
function unlockScroll(id){
$('#' + id).off('scroll');
window.scrollLockHolder = null;
}
And you can use it like this:
<ul onmousemove="lockScroll('outer-scroller-id')" onmouseout="unlockScroll('outer-scroller-id')">
<li>...</li>
<li>...</li>
</ul>

what about this:
div.onmousemove = function() { // may be onmouseover also works fine
document.body.style.overflow = "hidden";
document.documentElement.style.overflow = "hidden";
};
div.onmouseout = function() {
document.body.style.overflow = "auto";
document.documentElement.style.overflow = "auto";
};

Flash Stage Losing Focus

I built this incredibly brilliant scrolling thumbnail image viewer for a client in Flash Actionscript 3. (Basically it just scrolls up or down depending on the mouse position). It works so so, (I can never get the percentages right so that it shows the top most image) but, that's beside the point. What is REALLY irking me is when I have the browser window open with my .swf loaded and I click on another app on my desktop, the stupid scrolling thumbnail area in the browser window starts to freak out.
"Where is my mouseY??!?!?!?" I assume it is thinking.
Is there a stage.Unfocus event I can tell my scrolling thumbnail area to STFU with?
I'd even consider writing some Javascript to call a flash function, if that's a preferred technique.
function checkMousePos(e:Event):void
{
if(mouseX < 145){
try{
var sHeight:int = MovieClip(root).stageHeight;
}catch(Error){
trace("stage not loaded");
}
if(mouseY > (sHeight/2) + 100){
if(tHolder.y-50 > - (compHeight-sHeight)){
Tweener.addTween(tHolder, {y:tHolder.y - 90, time:1,transition:"easeOutCubic"});
}
}else if(mouseY < (sHeight/2) - 100){
if(tHolder.y+50 < 80){
Tweener.addTween(tHolder, {y:tHolder.y + 90, time:1,transition:"easeOutCubic"});
}else{
Tweener.addTween(tHolder, {y:80, time:1,transition:"easeOutCubic"});
}
}
}
}

I suggest detecting the window focus events onblur and onfocus ( http://www.devguru.com/technologies/ecmascript/quickref/evHan_onBlur.html ) in Javascript then sending an enable / disable call through to the SWF file using ExternalInterface ( http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/external/ExternalInterface.html ) So inside your HTML you might have something like this (assuming swfobject here, but this isn't necessary http://code.google.com/p/swfobject/ ):
swfobject.embedSWF("mySWF", "mySWFId", swfWidth, swfHeight, "10.0.0", "", flashvars, params, attributes);
window.onblur=function () {
if ( document.getElementById("mySWFId").disableMouseScrolling) {
document.getElementById("mySWFId").disableMouseScrolling();
}
}
window.onfocus=function () {
if ( document.getElementById("mySWFId").enableMouseScrolling ) {
document.getElementById("mySWFId").enableMouseScrolling();
}
}
And inside your SWF file some equivalent ExternalInterface code to hook up the methods:
public class MyApplication extends ...
{
public function MyApplication ():void
{
ExternalInterface.addCallback("disableMouseScrolling", disableMouseScrolling);
ExternalInterface.addCallback("disableMouseScrolling", enableMouseScrolling);
...
}
private function disableMouseScrolling ():void
{
}
private function enableMouseScrolling ():void
{
}
...
}
Hope this helps. I've used it with IE8, Firefox 3 and Crome 4.
Regards,

stage.addEventListener(Event.MOUSE_LEAVE, function(e:Event):void {});