Nodewebkit app: hide cursor - javascript

I'm developing my web app with nodewebkit in fullscreen mode.
It has to be used with touchscreen monitor.
I've used CSS proprerty:
html * {
cursor: none;
}
In nodewebkit's manifest seems that nothing usefull is provided to remove cursor..
Problem is that cursor disappears only when it is moved the first time.
How can I improve this behavior?

I've fixed the problem calling from script:
document.body.style.cursor = 'none';
But I can't understand why doesn't work from css.

I think maybe you need to focus window at first to make the css hiding cursor work?!
I meet the same issue and then have gone with the following code.
var gui = require("nw.gui");
var win = gui.Window.get();
win.focus();

Related

Hide toolbar on mobile browser

I'm working on my responsive website and I'm trying to hide the address bar and toolbar of mobile browsers.
On this picture, you can see which zone I'm trying to hide (red mark)
So as I've seen when I scroll on my mobile this automatically disappear.
What I'm trying to do is once the document is ready to do an auto scroll. Something like this:
$('html, body').animate({
scrollTop: $("#id").offset().top
}, 2000);
This element is practically on the bottom of the website but still don't hide the toolbar of the web browser.
Is there any way to hide it?
EDIT: I've to clarify that this is not on my website, i'm trying to hide de footer of practically all browsers, i know that this is not possible beacause is on client side, but i'm trying to do a "trick" to hide it. I know that when i use my mobile i open safari and i navegate there is a footer to open a new tab or close it etc... But when i scroll down on a website this one disappear, so this is what i'm trying to do. Create an automatically scroll down to make it disappear... But this is not actually running
The only way I can think to solve this would be to use the Fullscreen API as described here.
For example:
// Covering all browsers that support this
var docEl = document.documentElement;
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
// Execute the variable on initalization
requestFullScreen.call(docEl);
use Jquery to add a CSS and display it as none
if(condition that you want){
$(.'your-menu').css({'display':'none'});
}

Why does Firefox fire a mouseenter event on page load?

When hovering over an element and then refreshing the page (without moving the mouse):
Chrome does not fire the mouseenter event on page load
Firefox does fire the mouseenter event on page load
Below is an example snippet. To reproduce the issue, hover over the div and then refresh the page. In Chrome, the div does not contain "mouseenter". In Firefox, it does.
Note that this does not work in the Stacksnippets environment since you need to click "run snippet" first. JSFiddle: https://jsfiddle.net/9fu6cx5d/7/
let div = document.getElementById('my-div');
div.addEventListener('mouseenter', function () {
div.innerHTML = 'mouseenter';
});
#my-div {
width: 150px;
height: 150px;
background-color: #aaaaaa;
}
<div id="my-div">
</div>
Which browser has the correct behaviour? How can I work around the difference in behaviour or at least make them both behave the same?
Chrome version: 59.0.3071.115 (Official Build) (64-bit)
Firefox version: 54.0 (64-bit)
As pointed out in the comments, Chrome's behavior is the correct one according to the specs. Below is an idea on how to work around the difference.
You can make sure you get the value right by checking whether the mouse is inside the bounds of the div on document load. Unfortunately there is no way in JS to check the mouse position without firing events, so you will have to resort to some hack involving CSS hover rules and checking against them on $(document).ready.
To quote this hilarious answer:
Overlay your page with a div that covers the whole document. Inside
that, create (say) 2,000 x 2,000 elements (so that the :hover
pseudo-class will work in IE 6, see), each 1 pixel in size. Create a
CSS :hover rule for those elements that changes a property (let's
say font-family). In your load handler, cycle through each of the 4
million elements, checking currentStyle / getComputedStyle() until
you find the one with the hover font. Extrapolate back from this
element to get the co-ordinates within the document.
N.B. DON'T DO THIS.
While you definitely shouldn't do this, the general idea of using non-effective hover styles for the sake of checking if an element is hovered without needing JS events is a good one if you just need to work around browser quirks. I'm using font-weight in the example below, but you can change it to whatever works for you.
The css
#my-div:hover {font-weight:700;}
The js
// Pseudocode!
var mouseIsInside = false,
div = $('#my-div');
$(document).ready(function(){
if (div.css('font-weight') === 700) {
mouseIsInside = true;
}
doStuffIfMouseInside();
});
div.on('mouseenter', function(){
mouseIsInside = true;
doStuffIfMouseInside();
})
function doStuffIfMouseInside() {
if (mouseIsInside) {
...
}
}
If you add (function(){})(); around your code it seems to work in both browsers.
It seems that firefox might be firing events before the dom is available causing problems with mousein/out events.
See: https://jsfiddle.net/9fu6cx5d/8/

<HTML> is automatically setting inline-style that I think is set by Google's JSAPI

So, I bought the Roker theme from themeforest.net and created my website. It works fine and looks great but when I try to open my website on a Windows touch device - Surface Pro (IE and Firefox) or Windows Phone, I cannot scroll with my finger i.e. touch is not working.
When I look at the HTML code, the rendered page’s tag is adding this style
-ms-overflow-x: hidden; -ms-overflow-y: hidden; -ms-touch-action: auto !important;
And the overflow is set as an inline style.
This seems to get set automatically when I include the Google's JSAPI, because when I comment the <script type="text/javascript" src="http://www.google.com/jsapi"></script>, then everything works fine.
Any suggestions on how can I overcome this? I can share the link of my website if you want to see what is happening yourself.
Ideally you would want to track down the js file and find out why it is adding those inline styles.
I have a feeling it may have to do with the 'no-touch' class. You may want to use something like the following JS:
$(document).ready(function(){
detectMsTouch();
function detectMsTouch() {
var touchPoints = window.navigator.msMaxTouchPoints;
if (touchPoints) {
$('html').removeClass('no-touch').addClass('touch');
}
else {
return;
}
}
});
Another thing that may work is forcing the style with a CSS override.
ms-overflow-y: visible !important;
Hope it works for you.

Iframe and absolute positioned elements

I have a small issue with absolute positioned elements inside of iframe.
So I have a page, on the page I have a iframe with small game. In the game is a guy and the guy has absolute positioned pupils. The pupils are moving by javascript.
Everything works just fine, but if I open that page, and go ahead and browse other pages in different tabs, After I come back the pupils are on other place than before (completely ut form eyes.)
There are more elements positioned absolutely in that iframe and none have the same problem I guess it is because of the Javascript animation. Did someone encouter similar problem? Im sorry but for many reasons I cannot post the page here.
I can post script for pupils animation:
function eyes_sides(){
$('.eyes').animate({
left:parseInt($('.eyes').css('left'))-9
},{duration:1500});
$('.eyes').animate({
left:parseInt($('.eyes').css('left'))
},{duration:1000});
}
function eyes_roll(){
$('.eyes').animate({
left:parseInt($('.eyes').css('left'))-7,
top:parseInt($('.eyes').css('top'))-18
},{duration:1800});
$('.eyes').animate({
left:parseInt($('.eyes').css('left')),
top:parseInt($('.eyes').css('top'))
},{duration:1300});
}
function animate_eyes(){
var animation = random_number(1,2);
//alert(animation);
switch(animation){
case 1:
eyes_roll();
break;
case 2:
eyes_sides();
break;
}
var delay = random_number(4000,12000);
window.animateEyes = setTimeout(function(){animate_eyes()},delay);
}
The script is not perfect, but does what requires.
I was thinking what could cause the problem, and maybe it is somehow connected to that animation runs when the tab is not active? Maybe adding "onBlur" and "onFocus" to stop / start animation would help?
Thanks for advice!
This code is supposed to stop the animation. At least it triggres onblur on your IFRAME. You'll figure out easily, how to start the animation again.
I'm not familiar with jQuery, but you can "translate" the code.
window.onload=function (){
var ifr=document.getElementById('your_iframe');
(function (x){x.onblur=function (){clearTimeout(x.contentWindow.animatedEyes);return;}}(ifr));
return;
}

jQuery scrolling DIV is jumpy and positioned incorrectly

Not too long ago I asked about setting up a DIV which scrolls with the rest of the page. Post can be found here.
I've set this up, using the following code:
JS..
jQuery(function ($) {
var el = $('#sidebar'),
pos = el.position().top;
alert(pos);
$(window).scroll(function() {
el.toggleClass('fixed', $(this).scrollTop() >= pos);
});
});
CSS..
/* profile sidebar */
#sidebar>div{ width: 300px; margin-top: 10px; }
#sidebar.fixed>div{position:fixed;top:0}
A copy of the page can be found here. The alert was just some debugging.
The problem is, when you scroll a small amount, #sidebar suddenly appears at the very top of the page. In addition, sometimes as you scroll further down, the sidebar appears - and sometimes it doesn't.
Any idea what might be causing such seemingly random functionality?
I'm still trying to figure out why it works in the first place in the jsfiddle example, but anyway, I know how to fix it:
$(window).scroll(function() {
if($(this).scrollTop() >= pos){
el.addClass('fixed');
}else{
el.removeClass('fixed');
}
});
I tested this by unbinding the event you had and replacing it with this code. It seemed to work fine.
The reason I can't understand why it works in the example: toggleClass should be constantly adding and removing "fixed" if you have scrolled enough, because the conditional is true (true here means whether to toggle). The constant adding and removing of the fixed class causes the jumpy behavior.
You can watch this on your page: open up some dev tools (firegubg or Chrome) and watch what happens to your sidebar element.
[UPDATE]
Actually, I misread the docs. True means the class should be added (I don't think the docs are very clear though). Thus... the only way I could explain this is if #dunc was running jQuery v1.2 and the switch was getting ignored completely...

Categories

Resources