This is not a perfect one, because I already discover the use of youtube API right now. This was the previous research I’ve done. But it is worth to put here as post as journal. It runs good already. Much better then the previous I have done for youtube playlist. It already can pause directly…
Move cursor to edge left of the screen. and this concept will appear. I will put my previous Fullscreen toggle in here… button 1button 2button 3
FullScreen API Testing
|
1 2 |
I am using "body" as parent/root fullscreen element by select body "document.body".<br> I can use other element too: "document.getElementById('#elm')" for example. |
Status: YES: Your browser supports FullScreen CODE
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<script> /* Native FullScreen JavaScript API ------------- Assumes Mozilla naming conventions instead of W3C for now */ (function() { var fullScreenApi = { supportsFullScreen: false, isFullScreen: function() { return false; }, requestFullScreen: function() {}, cancelFullScreen: function() {}, fullScreenEventName: '', prefix: '' }, browserPrefixes = 'webkit moz o ms khtml'.split(' '); // check for native support if (typeof document.cancelFullScreen != 'undefined') { fullScreenApi.supportsFullScreen = true; } else { // check for fullscreen support by vendor prefix for (var i = 0, il = browserPrefixes.length; i < il; i++ ) { fullScreenApi.prefix = browserPrefixes[i]; if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) { fullScreenApi.supportsFullScreen = true; break; } } } // update methods to do something useful if (fullScreenApi.supportsFullScreen) { fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange'; fullScreenApi.isFullScreen = function() { switch (this.prefix) { case '': return document.fullScreen; case 'webkit': return document.webkitIsFullScreen; default: return document[this.prefix + 'FullScreen']; } } fullScreenApi.requestFullScreen = function(el) { return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen'](); } fullScreenApi.cancelFullScreen = function(el) { return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen'](); } } // jQuery plugin if (typeof jQuery != 'undefined') { jQuery.fn.requestFullScreen = function() { return this.each(function() { var el = jQuery(this); if (fullScreenApi.supportsFullScreen) { fullScreenApi.requestFullScreen(el); } }); }; } // export api window.fullScreenApi = fullScreenApi; })(); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<script> // do something interesting with fullscreen support var fsButton = document.getElementById('fsbutton-test'), fsElement = document.body, fsStatus = document.getElementById('fsstatus-test'), fsExit = document.getElementById('fsexit-test'); if (window.fullScreenApi.supportsFullScreen) { fsStatus.innerHTML = 'YES: Your browser supports FullScreen'; fsStatus.className = 'fullScreenSupported'; // handle button click fsButton.addEventListener('click', function() { window.fullScreenApi.requestFullScreen(fsElement); }, true); // handle exit fsExit.addEventListener('click', function() { window.fullScreenApi.cancelFullScreen() }, true); fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() { if (fullScreenApi.isFullScreen()) { fsStatus.innerHTML = 'Whoa, you went fullscreen'; fsElement.style.overflowY = "scroll"; /* ini biar bisa scroll */ fsButton.style.display = 'none'; fsExit.style.display = 'block'; } else { fsStatus.innerHTML = 'Back to normal'; fsElement.style.overflowY = "unset"; /* backto normal tanpa scroll */ fsButton.style.display = 'block'; fsExit.style.display = 'none'; } }, true); } else { fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen'; } </script> |
It is finally done, I can do grouping this products…
find and select juga part words in attribute tujuannya digunakan untuk sorting product2 dari sprdshrt biar aku bisa collecting image/link untuk digunakan di ad. karena yang ada hanya nama aria product yang separated dengan “-“. Setelah klik akan ada attr baru yang nantinya akan digunakan untuk grouping nantinya. ..And this is the real use
find and select juga part words in attribute
Just a way to make copying easy.. I use it copy tags and information of my products whic is many….
..test again, using data
..And this is the best way method I found so far…
