I have a kiosk application running on Ubuntu server 14.04.3 and chrome. Currently I have some code which hides the mouse if there was no movement for 2 seconds and once the user attempts to move the mouse again it shows up again. The trick is by using a cursor:none and adding an overlay:
js:
var body = $('body');
function hideMouse() {
body.addClass("hideMouse");
body.on('mousemove', function(){
if(window.hiding) return true;
window.hiding = true;
body.removeClass("hideMouse");
$('div.mouseHider').remove();
clearTimeout(window.hideMouse);
window.hideMouse = setTimeout(function(){
body.addClass("hideMouse");
$('<div class="mouseHider"></div>').css({
position: 'fixed',
top: 0,
left: 0,
height: '100%',
width: '100%',
zIndex: 99999
}).appendTo(body);
redraw(document.body);
setTimeout(function(){
window.hiding = false;
}, 100);
}, 4000);
});
}
function redraw(e) {
e.style.display = 'none';
e.offsetHeight;
e.style.display = 'block';
}
css:
body.hideMouse *, body.hideMouse{
cursor: none;
}
body.hideMouse *{
pointer-events: none !important;
}
This code works perfectly fine but there is only 1 caveat. When the page first loading it attempts to hide the mouse with the same trick but the mouse is still sticking there since it just didn't repainted the layer I guess. If I want it to work, I have to move the mouse a little bit and from then on it will work as expected and hide the mouse. The thing is that the kiosk application is restarting every day which means I boot the X display again and the mouse is being reset to the middle of the screen and it just sticks there until I move it a little bit. I hope you understand what I mean.
Do you guys have any idea how I can fix this?
You don't need all that code to do what you want. You could do:
Create a setTimeout to hide the cursor after 2s as soon as the page is loaded
When someone moves the mouse, you:
2.1. Show the cursor again
2.2. Clear the current setTimeout
2.3. And create the setTimeout to hide the cursor after 2s again.
The code below should work for you:
document.addEventListener('DOMContentLoaded', function() {
var cursorNone = document.getElementById('cursor-none');
var t = setTimeout(hideMouse, 2000);
document.addEventListener('mousemove', function(e) {
showMouse();
clearTimeout(t);
t = setTimeout(hideMouse, 2000);
});
function hideMouse() {
cursorNone.classList.remove('hidden');
}
function showMouse() {
cursorNone.classList.add('hidden');
}
});
#cursor-none {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
cursor: none;
background-color: transparent;
}
.hidden {
display: none;
}
<body>
<div id="cursor-none" class="hidden"></div>
</body>
Related
I'm looking for a performant and also smooth solution for links that scroll their text inside of their inline-block box like a marquee effect.
$(document).ready(function() {
function scroll(ele){
var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);
$(ele).text(s);
}
scrollInterval = null;
function startScrolling(e) {
if (!scrollInterval) {
scrollInterval = setInterval(function(){
scroll(e)
},100);
}
}
function stopScrolling(e) {
clearInterval(scrollInterval);
scrollInterval = null;
}
$(".mali").hover(function(){
startScrolling($(this));
});
$(".mali").mouseout(function(){
stopScrolling($(this));
});
$(".mali").mousedown(function(){
stopScrolling($(this));
});
});
.mali {
display: inline-block;
background: black;
color: white;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Something something darkside, Something something complete.
My solution so far is something I actually found here on stackoverlow in another thread and tried to work with it.
Two problems though.
1.) As this is basically using an interval to loop through the single letters this effect is not very smooth. The effect is stuttering.
Has anyone an Idea on how to make this more smooth? Maybe in that case don't use this method at all and maybe use a CSS transition to animate the text?
2.) Does anyone have a clever solution on how to return to the initial state once I hover off? I want the effect on hover but when moving the mouse off the link it should animate back to the initial text state.
Thanks,
Matt
2) You can save initial state and then just revert it:
$(document).ready(function() {
function scroll(ele){
var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);
$(ele).text(s);
}
scrollInterval = null;
function startScrolling(e) {
if (!scrollInterval) {
$(e).data("text", $(e).text());
scrollInterval = setInterval(function(){
scroll(e)
},100);
}
}
function stopScrolling(e) {
clearInterval(scrollInterval);
scrollInterval = null;
$(e).text($(e).data("text"));
}
$(".mali").hover(function(){
startScrolling($(this));
});
$(".mali").mouseout(function(){
stopScrolling($(this));
});
$(".mali").mousedown(function(){
stopScrolling($(this));
});
});
.mali {
display: inline-block;
background: black;
color: white;
padding: 10px;
transition: all .2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Something something darkside, Something something complete.
1) As a smooth animation, i thought of this as a PoC. Maybe it will help you with further ideas.
$(document).ready(function() {
// Those global data could be stored in element's data.
var indent = 0,
width = 0,
padding = 10;
function scroll(ele){
// Every iteration decrease indent by value
indent -= 1;
// If is indent greater than or equal than real width
// (width with padding) reset indent.
if(-indent >= width+padding)
indent = 0;
// Aplly property
$(ele).css("text-indent", indent);
}
var scrollInterval = null;
function startScrolling(e) {
if (!scrollInterval) {
// Get text and real width
let text = $(e).text();
width = $(e).width()
$(e)
// Set real width & height, so that container stays
.width($(e).width())
.height($(e).height())
// Save text to data for reset
.data("text", text)
// Add 2 spans with text:
// <span>text</span><span>text</span>
// Where second span has defined padding on the left
.html($("<span>").text(text))
.append($("<span>").text(text).css("padding-left", padding+"px"));
resumeScrolling(e);
}
}
function stopScrolling(e) {
pauseScrolling(e);
// Reset
$(e)
// Revert real text and reset indent
.text($(e).data("text"))
.css("text-indent", indent = 0);
}
function pauseScrolling(e) {
clearInterval(scrollInterval);
scrollInterval = null;
}
function resumeScrolling(e) {
if (!scrollInterval) {
// Every 30ms repeat animation. It must be at least 25x per second
// so it runs smoothly. (So 1 - 40).
scrollInterval = setInterval(function(){
scroll(e)
},30);
}
}
$(".mali").hover(function(){
startScrolling($(this));
});
$(".mali").mouseout(function(){
stopScrolling($(this));
});
$(".mali").mousedown(function(){
stopScrolling($(this));
});
$("#start").click(function(){
startScrolling($(".mali"));
});
$("#stop").click(function(){
stopScrolling($(".mali"));
});
$("#pause").click(function(){
pauseScrolling($(".mali"));
});
$("#resume").click(function(){
resumeScrolling($(".mali"));
});
});
.mali {
display: inline-block;
background: black;
color: white;
padding: 10px;
/*
This could help, but you can't reset text-indent without animation.
transition: all .1s;
*/
overflow: hidden;
vertical-align: middle;
}
/* When you hover element, new span elements
can't take pointer events, so your elements
stays hovered. */
.mali span {
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Something something darkside, Something something complete.
<br><br>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="pause">Pause</button>
<button id="resume">Resume</button>
Idea behind this is:
make element overflow:hidden; so no text will overflow
set fix dimension
duplicate text inside
change text indent every x miliseconds (x < 40 so it is smooth, must be at least 25fps)
when it overflows, reset it so it can be in infinite loop
I'm trying to make a website which will keep on adding video players to the page as the page is being scrolled down. Though I have some concerns that large amount of video players on a page can cause lag on the website and cause the website to slow down. I think I have experienced slow down during some tests of my website. So is it possible to detect whether the website is being slowed down due of the amount of elements on the web and so I can start deleting the video elements from the top of the page?
index.html:
window.onbeforeunload = function () {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
timeout = undefined;
for (var x=0;x<50;x++) {
var video = document.createElement("video");
video.style.backgroundColor = "orange";
video.poster = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg";
video.src = "https://dash.akamaized.net/akamai/bbb/bbb_3840x2160_60fps_18000k.mp4";
video.controls = true;
content.appendChild(video);
}
window.addEventListener("scroll", function () {
var $this = this;
window.clearTimeout(timeout);
timeout = setTimeout(function() {
var content_margin_top = $this.innerHeight * 0.11;
var last_player = content.children[content.querySelectorAll("video").length - 1];
if (last_player.offsetTop - content_margin_top <= $this.scrollY) {
for (var x=0;x<10;x++) {
var video = document.createElement("video");
video.style.backgroundColor = "orange";
video.poster = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg";
video.src = "https://dash.akamaized.net/akamai/bbb/bbb_3840x2160_60fps_18000k.mp4";
video.controls = true;
content.appendChild(video);
}
}
}, 250);
});
body {
margin: 0;
}
#nav {
width: 100%;
height: 10%;
position: absolute;
top: 0;
background-color: rgb(108, 171, 247);
}
#content {
height: 100%;
width: 98%;
position: absolute;
top: 11%;
left: 1%;
}
video {
width: 100%;
height: 75%;
border: 1px solid black;
}
<html>
<head>
<title></title>
</head>
<body>
<div id="nav"></div>
<div id="content"></div>
</body>
</html>
I would think about the issue in a slightly different way: What should I do to make that page work as fast as possible, downloading as little data as possible and render only necessary containers when needed?
My recommendations:
1) Don't append and init video containers on during scroll. Render only thumbnails for future video containers using img tags. Making lazy loading for these images should be considered as well. Add "play" button to the center of preview container. Once user clicks on the button - render video tag with a proper src and play it.
2) Don't use a scroll event listener to detect containers offsets and lazy loading. Use Intersection API instead.
take a time To look at this website http://www.thejewelrysource.net/ and stay for like 7 seconds in the bottom left corner there is a small pop up that will appear and disappear again I want to do something like that using Jquery.
I know I could use Slideup and SlideDown Method but the problem I am facing is that How could traverse to the Given data in an Array so that I will Pop up the Data One at a Time. I am using only Static Data. Thank you for your Help in Advance! may someone help me! Thank You So Much
I couldn't understand much from your description. By any chance is this what are you looking are?
I have used setTimeout and setInterval to simulate this and a closure variable to keep track of the next item to display.
$(document).ready(function() {
var $popup = $(".popup"),
aMessages = ["Hello", "This is alert", "Is this what are you look for?"],
counter = 0;
$(".popup").hide();
var interval = setInterval(showMessage, 3000);
function showMessage() {
var iMessageId = counter % aMessages.length;
$popup.text(aMessages[iMessageId]);
$popup.show();
counter++
setTimeout(hideMessage, 1000);
}
function hideMessage() {
$(".popup").fadeOut(100);
}
setTimeout(function() {
clearInterval(interval);
}, 10000);
});
.popup {
width: 200px;
height: 100px;
background-color: yellow;
border-radius: 50px;
padding: 20px;
position: fixed;
left: 10px;
bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="popup"></div>
Demonstration: http://jsfiddle.net/calvintennant/NrJ8T/show/
When I force a window resize by doing: $(window).resize() my listener is called, and everything is fine. However if I actually resize the window, I'm getting multiple resize events called within the same frame.
Timeline during forced resize:
Timeline during natural resize:
Is this a bug in Chrome, or am I misunderstanding something?
As pointed out by #avram-lavinsky, resize events can be called multiple time per frame.
Updated example using Request Animation Frame (seen first here https://developer.mozilla.org/en-US/docs/Web/Reference/Events/resize):
http://jsfiddle.net/calvintennant/v69WW/
# HTML
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
# CSS
html, body {
margin: 0;
}
.box-1 {
background: #00F;
bottom: 0;
position: absolute;
width: 100%;
}
.box-2 {
background: #0F0;
height: 30px;
position: relative;
}
.box-3 {
background: #F0F;
height: 66px;
position: relative;
}
# JS
var box1 = $('.box-1');
var box2 = $('.box-2');
var box3 = $('.box-3');
var drawing = false;
var resizeFired = false;
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame;
$(window).resize(function() {
// set resizedFired to true and execute drawResize if it's not already running
if (drawing === false) {
resizeFired = true;
drawResize();
}
});
function drawResize() {
var height;
// render friendly resize loop
if (resizeFired === true) {
resizeFired = false;
drawing = true;
height = $(window).height();
height -= $(box2).height();
height -= $(box3).height();
$(box1).height(height);
requestAnimationFrame(drawResize);
} else {
drawing = false;
}
}
$(window).resize();
Window resize as a user action is real-time event. It fires many times as the user drags.
I'm having a problem with the background of a pseudo-popup. I use jQuery (1.7) and this tutorial to create popups in my website. Basically I have two preformatted divs (one semi-opaque to hide the rest of the page and the other - with an image as the background - containing the actual popup, with the CSS already loaded in the page) that aren't displayed and that I show when I need them to display the popup, with additional fillings for the second div (to have different popups).
My problem is that the background of the popup doesn't load, and that I end up with only the semi-opaque background and the content of the popup. However, if disable/enable the CSS background property in the console, the background reappears as it should have in the first place.
This problem has appeared relatively recently not after any modification to the actual popup function, so I don't really know where it might come from. It can't be an issue of the background image not yet loaded since it is already there when the page has loaded.
Relevant pieces of code:
HTML:
<div id='popup_container'></div>
<div id='backgroundPopup'></div>
CSS:
#backgroundPopup{
display:none;
position: fixed;
_position:absolute; /* hack for internet explorer 6*/
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
border: 1px solid #cecece;
z-index: 1;
}
#popup_container{
display: none;
position: fixed;
_position:absolute; /* hack for internet explorer 6*/
height: 526px;
width: 718px;
background: url(http://cdn.mojogroups.com/Layout/popup.png) no-repeat !important;
z-index: 2;
color: #000000;
}
Javascript:
//When initializing the page
$(document).ready(function(){
//[...]
popup = new Popup();
popup.initialize();
}
function Popup(){
var popupStatus = 0;
function togglePopup(){
if(popupStatus == 0){
centerPopup();
loadPopup();
}
else
disablePopup();
}
function loadPopup(){
if(popupStatus == 0){
$('#backgroundPopup').css({
"opacity": "0.7"
});
$('#backgroundPopup').fadeIn("fast");
$('#popup_container').fadeIn("fast");
$('body').scrollTop(0);
$('body').css('overflow', 'hidden');
popupStatus = 1;
}
}
this.disablePopup = function(){
if(popupStatus == 1){
$('#backgroundPopup').fadeOut("fast");
$('#popup_container').fadeOut("fast");
$('#popup_container').empty();
$('body').css('overflow', 'auto');
popupStatus = 0;
}
}
function centerPopup(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $('#popup_container').height();
var popupWidth = $('#popup_container').width();
$('#popup_container').css({
"position": "absolute",
"top": windowHeight/2 - popupHeight/2,
"left": windowWidth/2 - popupWidth/2
});
$('#backgroundPopup').css({
"height": windowHeight
});
}
this.initialize = function(){
$('#backgroundPopup').click(function(){
popup.disablePopup();
});
$(document).keypress(function(e){
if(e.keyCode==27)
popup.disablePopup();
});
}
this.contacts = function(){
//Fill the popup container...
centerPopup();
loadPopup();
popupDiv.fadeIn('fast');
}
What could it be?
Thanks in advance for your help!
EDIT: the site (early version) can be found here
UPDATE: At some point I thought it was due to the opacity attribute added by the loadPopup() function, so I removed that part of the code; but the bug still appears (although maybe less frequently, but it's hard to be sure since it was transient in the first place).
I know its not the ways to as query in answer but i we cant add images in comments so i m asking here. I have just gone through with your problem, what i m getting is you cann see the below screen shot. Is it correct output or not.