How to open A-Frame inspector programmatically when the page loads - aframe

I need to open the inspector automatically when the page loads.

You can invoke the openInspector function manually after a-scene loads:
var sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener('loaded', function () {
sceneEl.components.inspector.openInspector();
});
Working example:
https://glitch.com/edit/#!/brawny-candle-shrine?path=index.html%3A17%3A50

Related

Hiding Submit Button with offline.js

I am using offline.js (0.7.18) and its working fine, when I go on/offline the indicator changes state, all good so far.
I can also see on Offline JS Simulate UI, that a login panel is having its style toggled between display:block and display:none when on/offline is triggered. But I can't discover how this works.
I want to hide a 'Submit' button when offline is triggered.
You can use the sample from the Offline JS Simulate UI page that uses jQuery:
<script>
$(function(){
var
$online = $('.online'),
$offline = $('.offline');
Offline.on('confirmed-down', function () {
$online.fadeOut(function () {
$offline.fadeIn();
});
});
Offline.on('confirmed-up', function () {
$offline.fadeOut(function () {
$online.fadeIn();
});
});
});
</script>
Give the class "online" to any element you want shown when the system is online and give the class "offline" to any element you want shown when the system is offline.
<button class="online">ABC</button>

WordPress External Link Disclaimer Page

I am currently using this script to warn the user they are leaving the current webiste when clicking on an external link on a WordPress website:
<script>
jQuery(function() {
function leave_now(event) {
var choice = window.confirm( 'Leave page?' );
return choice;
}
var select_external = 'a[href*="//"]:not([href*="yourdomain.com"])';
jQuery(document).on( 'click', select_external, leave_now )
});
</script>
It works great, but I actually need to modify this so it takes them to a warning PAGE instead of having a popup window appear. After the warning page is loaded, it waits 5 seconds, then loads the URL that was clicked on.
Any suggestions would be appreciated.
Set the location.href which will navigate you to the url you specify
location.href='http://www.your-url.com'
So, on click, you could have that function run and set that location instead of do a warning

Framework7 starter page "pageInit" NOT WORKING

anyone using framework7 to create mobile website? I found it was great and tried to learn it by myself, now I meet this problem, after I create my App, I want to do something on the starter page initialization, here, my starter page is index.html, and I set data-page="index", now I write this below:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
// in my browser console, no "index page" logged
if (page.name === 'index') {
console.log("index page");
});
// but I changed to any other page other than index, it works
// my browser logged "another page"
if(page.name === 'login') {
console.log('another page');
}
});
Anyone can help? Thank you so much.
I have also encountered with the same problem before.
PageInit event doesn't work for initial page, only for pages that you navigate to, it will only work for index page if you navigate to some other page and then go back to index page.
So I see two options here:
Just not use pageInit event for index page - make its initialization just once (just make sure you put this javascript after all its html is ready, or e.g. use jquery's on document ready event)
Leave index page empty initially and load it dynamically via Framework7's mainView.loadContent method, then pageInit event would work for it (that was a good option for me as I had different index page each time, and I already loaded all other pages dynamically from underscore templates)
I am facing same issue and tried all solutions in various forums.. nothing actually worked. But after lot of RnD i stumbled upon following solution ...
var $$ = Dom7;
$$(document).on('page:init', function (e) {
if(e.detail.page.name === "index"){
//do whatever.. remember "page" is now e.detail.page..
$$(e.detail.page.container).find('#latest').html("my html here..");
}
});
var me = new Framework7({material: true});
var mainview = me.addView('.view-main', {});
.... and whatever else JS here..
this works perfectly..
surprisingly you can use "me" before initializing it..
for using for first page u better use document ready event. and for reloading page event you better use Reinit event.
if jquery has used.
$(document).on('ready', function (e) {
// ... mainView.activePage.name = "index"
});
$(document).on('pageReinit', function (e) {
//... this event occur on reloading anypage.
});

Load multiple pages in a hidden iframe from a xul-based firefox extension

From a xul-based firefox addon, I need to:
programmatically create an invisible iframe (once)
reuse it to load multiple URLs as the addon runs
access the returned HTML after each URL loads
Problem: I can only get the first page-load for any created iframe to trigger an 'onload' or 'DOMContentLoaded' event. For subsequent URLs, there is no event triggered.
Note: I'm also fine with using the hiddenDOMWindow itself if this is possible...
Code:
var urls = ['http://en.wikipedia.org/wiki/Internet', 'http://en.wikipedia.org/wiki/IPv4', 'http://en.wikipedia.org/wiki/Multicast' ];
visitPage(urls.pop());
function visitPage(url) {
var XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
var hiddenWindow = Components.classes["#mozilla.org/appshell/appShellService;1"].getService
(Components.interfaces.nsIAppShellService).hiddenDOMWindow;
var doc = hiddenWindow.document, iframe = doc.getElementById("my-iframe");
if (!iframe)
{
iframe = doc.createElement("iframe");
//OR: iframe = doc.createElementNS(XUL_NS,"iframe");
iframe.setAttribute("id", "my-iframe");
iframe.setAttribute('style', 'display: none');
iframe.addEventListener("DOMContentLoaded", function (e) {
dump('DOMContentLoaded: '+e.originalTarget.location.href);
visitPage(urls.pop());
});
doc.documentElement.appendChild(iframe);
}
iframe.src = url;
}
There are some traps:
The hiddenWindow differs between platforms. It is XUL on Mac, and HTML else.
You should use .setAttribute("src", url); to reliably navigate.
The following works for me (Mac, Win7):
var urls = [
'http://en.wikipedia.org/wiki/Internet',
'http://en.wikipedia.org/wiki/IPv4',
'http://en.wikipedia.org/wiki/Multicast'
];
var hiddenWindow = Components.classes["#mozilla.org/appshell/appShellService;1"].
getService(Components.interfaces.nsIAppShellService).
hiddenDOMWindow;
function visitPage(url) {
var iframe = hiddenWindow.document.getElementById("my-iframe");
if (!iframe) {
// Always use html. The hidden window might be XUL (Mac)
// or just html (other platforms).
iframe = hiddenWindow.document.
createElementNS("http://www.w3.org/1999/xhtml", "iframe");
iframe.setAttribute("id", "my-iframe");
iframe.addEventListener("DOMContentLoaded", function (e) {
console.log("DOMContentLoaded: " +
e.originalTarget.location);
var u = urls.pop();
// Make sure there actually was something left to load.
if (u) {
visitPage(u);
}
});
hiddenWindow.document.documentElement.appendChild(iframe);
}
// Use .setAttribute() to reliably navigate the iframe.
iframe.setAttribute("src", url);
}
visitPage(urls.pop());
Don't reload the hiddenWindow itself, or you will break lots of other code.

iframe browser back button issue for my history.js code

Below is my code working perfectly in my page but when i am calling same page in iframe it is not working
function History.back() { alert('browser Back Clicked!'); History.forward(); };
(function(window, undefined) {
var State = History.getState();
History.replaceState({ state: 4 }, State.title, "?state=4");
})(window);

Resources