I have this code (below) on a buton to force my HTML5 game to fullscreen, but I'd like to have it turn back also with the button - right now it only works using ESC key. Is it possbile?
this.fsbtn.addEventListener("click", doFullscreen);
function doFullscreen() {
var i;
var elem = document.getElementById("animation_container");
var fs = ["requestFullscreen", "webkitRequestFullscreen", "mozRequestFullScreen", "msRequestFullscreen"];
for (i = 0; i < 4; i++) {
if (elem[fs[i]]) {
elem[fs[i]]();
break;
}
}
}
Sure it's possible. Change your doFullscreen function to a toggle one that checks if it's fullscreen or not:
function toggleFullscreen(event) {
var element = document.body;
if (event instanceof HTMLElement) {
element = event;
}
var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;
element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function () {
return false;
};
document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function () {
return false;
};
isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();
}
Read the documentation here for fullscreen API
You can exit from fullscreen mode using functions listed below(for more read documentation)
In JS/HTML code you can add button with absolute position and high z-index. Write new click listener for added button and run cancelFullscreen function, that's all.
Example JS function for FullScreen mode:
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
videoElement.mozCancelFullScreen();
} else {
videoElement.webkitCancelFullScreen();
}
}
}
Working example you can see here: https://developer.mozilla.org/samples/domref/fullscreen.html
Related
In my application, there are multiple cards to show different details. Now, there are two paddles(left/right) to scroll cards . For normal browsing(safari,firefox,chrome) in desktop/laptop, that left/right paddles are visible while hovering over those cards. Inside those cards all the link/hyperlink are working fine in desktop/laptop.
But, when i check that same application in ipad, we had to double click for any link on those cards. Because on first click those paddles are visible then on second click those link routes to the correct path. I want to disable that hover effect and show the paddles initially.
here is my template code snippet
<div
v-show="grid"
class="second-row"
#mouseover="showPaddle"
#scroll.passive="setScrolledLeft"
>
<Paddles
:margin-top="secondRowHeight/2"
:showRightPaddle="showRightPaddle"
:showLeftPaddle="showLeftPaddle"
#scroll-cards="scrollCards"
/> ..... </div>
Now, i am trying to check the touch devices and remove the hover effect on paddles and display them.
method to show paddles
// checking the device is touch or non-touch
isTouchDevice() {
if ('ontouchstart' in window ||
(window.DocumentTouch && document instanceof window.DocumentTouch) ||
(navigator.maxTouchPoints > 0 || window.navigator.msMaxTouchPoints > 0)
) {
return true;
}
return window.matchMedia( "(pointer: coarse)" ).matches;
},
showPaddle() {
const secondRowEl = this.$el.querySelector('.second-row');
const gridWidth = this.$el.querySelector('.grid').clientWidth; // to scroll cards
const scrollMax = gridWidth - secondRowEl.clientWidth;
if (gridWidth > secondRowEl.clientWidth) {
if (secondRowEl.scrollLeft > 0 && secondRowEl.scrollLeft < scrollMax) {
this.showLeftPaddle = true;
this.showRightPaddle = true;
if(window.innerWidth < 768) {
if(this.isTouchDevice) {
try {
for (let sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI-=1) {
const sheet = document.styleSheets[sheetI];
if (sheet.cssRules) {
for (let ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI-=1) {
const rule = sheet.cssRules[ruleI];
if (rule.selectorText) {
if (sheet.rules[ruleI].selectorText.match(':hover')) {
sheet.deleteRule(ruleI);
}
}
}
}
}
} catch(e) {
Logger.error(e);
}
}
}
} else if (secondRowEl.scrollLeft >= scrollMax) {
this.showLeftPaddle = true;
this.showRightPaddle = false;
} else if (secondRowEl.scrollLeft <= 0) {
this.showLeftPaddle = false;
this.showRightPaddle = true;
}
} else {
this.showLeftPaddle = false;
this.showRightPaddle = false;
}
if (!this.secondRowHeight) {
this.secondRowHeight = secondRowEl.offsetHeight;
}
}
How will i solve that #mouseover issue and display paddles normally ?
No error in the console , Iam using the below Function for changing the position of shape in the paper if I change the position and release the mouse button It still in dragging once click the shape then it will placed in the position
graph.on('change:position', function(cell) {
});
// click function
paper.on('cell:pointerdown', function (cellView, evt, x, y) {
if(aliasthis.selectedPipelineId!=""){
cellView.options.interactive == false;
}
else{
aliasthis.cellId = cellView.model.id;
if( cellView.options.interactive == false)
{
console.log('----drag true---')
cellView.options.interactive = true;
} else if( cellView.options.interactive == true)
{
console.log('----drag false---')
//aliasthis.cellId = '';
cellView.options.interactive = false;
}
if( cellView.model.id )
{
// aliasthis.cellId = cellView.model.id;
if( cellView.model.attributes.type == "connection")
{
aliasthis.connOpt = cellView.model.attributes.typeLabel
aliasthis.pipeOpt = '';
}
else if( cellView.model.attributes.type == "dataaggregate")
{
aliasthis.pipeOpt = cellView.model.attributes.typeLabel;
aliasthis.connOpt = '';
}
aliasthis.labelChange(cellView)
aliasthis.graphdesign = aliasthis.connectFlowSchemaJson;
console.log('----flowjson----');console.log( aliasthis.connectFlowSchemaJson )
}
}
});
I'm using a Owl Carousel slider.
When you reach the last or first item of the slider you can still drag the slider although there aren't anymore items. Instead there is a bounce effect like when you pull down a native mobile app to refresh the content.
Demo: (link removed since the official docs aren't there anymore)
Drag the slider to the right and it will bounce back.
Is there a possibility to disable that bounce effect?
Yes, you can disable the bounce effect. I struggled finding it but I did it.
Just remove or comment out this lines code in owl.carousel.js:
base.newPosX = Math.max(Math.min(base.newPosX, minSwipe()), maxSwipe());
if (base.browser.support3d === true) {
base.transition3d(base.newPosX);
} else {
base.css2move(base.newPosX);
}
E.g.
owl.carousel.js
function dragMove(event) {
var ev = event.originalEvent || event || window.event,
minSwipe,
maxSwipe;
base.newPosX = getTouches(ev).x - locals.offsetX;
base.newPosY = getTouches(ev).y - locals.offsetY;
base.newRelativeX = base.newPosX - locals.relativePos;
if (typeof base.options.startDragging === "function" && locals.dragging !== true && base.newRelativeX !== 0) {
locals.dragging = true;
base.options.startDragging.apply(base, [base.$elem]);
}
if ((base.newRelativeX > 8 || base.newRelativeX < -8) && (base.browser.isTouch === true)) {
if (ev.preventDefault !== undefined) {
ev.preventDefault();
} else {
ev.returnValue = false;
}
locals.sliding = true;
}
if ((base.newPosY > 10 || base.newPosY < -10) && locals.sliding === false) {
$(document).off("touchmove.owl");
}
minSwipe = function () {
return base.newRelativeX / 5;
};
maxSwipe = function () {
return base.maximumPixels + base.newRelativeX / 5;
};
// base.newPosX = Math.max(Math.min(base.newPosX, minSwipe()), maxSwipe());
// if (base.browser.support3d === true) {
// base.transition3d(base.newPosX);
// } else {
// base.css2move(base.newPosX);
// }
}
Hope it helps.
In my app, I want users to be able to press a button or F11 to go full screen. However the call to browser to go full screen should go through my custom function as there is additional code which recalculates some variables.
The updated code & link demonstrate that the browser ignores our wrapper function & calls its own fullscreen function immediately with F11 press.
David Walsh has an intro but I cannot seem to be able to pull it off our custom function bit.
The demo works on Chrome but not on Firefox...
David Walsh article on Full screen API
document.addEventListener('keydown', keyInput, false);
var fullscreen_flag = false;
function keyInput(event) {
event.preventDefault();
console.log('user press key');
var code = event.keyCode || event.which;
if (code === 122) { // F11 pressed
requestFullScreen('key request');
}
}
function requestFullScreen(text) {
if (fullscreen_flag) {
exitFullscreen(text);
}
else {
triggerFullScreen(text);
}
}
function triggerFullScreen(text){
fullscreen_flag=true;
//alert('Fullscreen Enabled!');
console.log(text);
var elementDom = document.getElementsByTagName('body')[0];
elementDom.requestFullscreen = elementDom.requestFullscreen ||
elementDom.mozRequestFullScreen || elementDom.webkitRequestFullscreen ||
elementDom.msRequestFullscreen;
elementDom.requestFullscreen();
}
function exitFullscreen(text) {
console.log(text);
fullscreen_flag = false;
//alert('Exiting Fullsreen!');
document.exitFullscreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
document.exitFullscreen();
}
Now it should work.
<div onclick="exitFullScreen()" style='cursor: pointer'>Exit Full Screen</div>
<div onclick="triggerFullScreen()" style='cursor: pointer'>Enter Full Screen</div>
document.addEventListener('keydown', keyInput, false);
var fullscreen_flag = false;
function keyInput(event) {
var code = event.keyCode || event.which;
if (code === 122) { // F11 pressed
event.preventDefault();
requestFullScreen();
}
}
function requestFullScreen {
if (fullscreen_flag) {
exitFullscreen();
}
else {
triggerFullScreen();
fullscreen_flag = true;
}
}
document.triggerFullScreen=function(){
alert('Fullscreen Enabled!');
var elementDom = document.getElementsByTagName('body')[0];
elementDom.requestFullscreen = elementDom.requestFullscreen ||
elementDom.mozRequestFullScreen || elementDom.webkitRequestFullscreen ||
elementDom.msRequestFullscreen;
elementDom.requestFullscreen();
}
document.exitFullScreen=function() {
alert('Exiting Fullsreen!');
document.exitFullscreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
document.exitFullscreen();
}
I'm trying to mimic the Google suggestions list with this:
function el(tid) {
return document.getElementById(tid);
}
function addScript(u) {
var head = document.getElementsByTagName('head')[0],
sc2 = document.createElement('script');
sc2.src = u;
head.appendChild(sc2);
setTimeout(function () {
head.removeChild(sc2);
sc2 = null;
}, 600);
} //end addScript()
function suggest(data) {
var sel = el("test");
sel.innerHTML = '';
for (x = 0; x < data[1].length; x++) {
sel.innerHTML += '<li class="uli" >' + data[1][x][0] + '</li>';
}
}
el("inp").onkeyup = function () {
addScript("http://www.google.nl/complete/search?callback=suggest&q=" + this.value);
};
The problem is that I want to be able to come down in the suggestions list using the arrow keys, and secondary I want to show the 'current' suggestion value inside the input field. So I tried something like this using Jquery:
$("#inp").live("keydown", function (e) {
var curr = $('#test').find('.current');
if (e.keyCode == 40) {
if (curr.length) {
$(curr).attr('class', 'uli');
curr = $(curr).next();
}
if (curr.length) {
curr.attr('class', 'uli current');
} else {
$('#center li:first-child').attr('class', 'uli current');
}
}
if (e.keyCode == 38) {
if (curr.length) {
$(curr).attr('class', 'uli');
curr = $(curr).prev();
}
if (curr.length) {
curr.attr('class', 'uli current');
} else {
$('#center li:last-child').attr('class', 'uli current');
}
}
$("#inp").live("keydown", function (e) {
var search_terms = $('li.current').text();
if (e.keyCode == 40) {
$('#inp').val(search_terms);
}
if (e.keyCode == 38) {
$('#inp').val(search_terms);
}
It doesn't work because (I think..) the 'current' suggestion is immediately being requested by the previous code.
I have put everything over here: JS Bin
Why recreate the wheel?
jQuery UI Autocomplete
Or look at other plugins
The problem with your code is you need to cancel out the arrow keypresses when you call to get the values.
el("inp").onkeyup = function () {
//if not the arrow keys, fetch the list
if( ... ){
addScript("http://www.google.nl/complete/search?callback=suggest&q=" + this.value);
}
}
Also what is with el("inp") when you are using jQuery? I expected to see $("foo").keyup( function(){} );