Am trying to use this script found here to detect if my app has been installed on a phone. If so, it should prompt them to open app, if not, it should prompt them to download app. I've followed the tutorial to the letter, from installing manifest.json on server, to adding the script to my app and uploading to playstore and I have added the follow script to my index...
const status = document.getElementById('status');
const ul = document.getElementById('installedApps');
window.addEventListener('load', () => {
// Check to see if the API is supported.
if ('getInstalledRelatedApps' in navigator) {
const divNotSupported = document.getElementById('notSupported');
divNotSupported.classList.toggle('hidden', true);
checkForRelatedApps();
}
});
function checkForRelatedApps() {
navigator.getInstalledRelatedApps().then((relatedApps) => {
status.textContent = `resolved (${relatedApps.length})`;
relatedApps.forEach((app) => {
const lines = [];
lines.push(`<b>id:</b> <code>${app.id}</code>`);
lines.push(`<b>platform:</b> ${app.platform}`);
lines.push(`<b>url:</b> ${app.url}`);
const li = document.createElement('li');
li.innerHTML = lines.join('<br>');
ul.appendChild(li);
});
});
}
<div>
<b>Installed Apps:</b> <span id="status"></span>
<ul id="installedApps">
</ul>
</div>
But when I view page, scroll to the bottom, not is showing.
But on his page, without installing the app, when you visit the page, it says resolved (0).
So I want to know if am doing something wrong with the script? Am I suppose to change something?
His demo can be found here
Related
Ok so my index page has this header with the login option and i selected the buttons using these two functions
function getHeaderButtons() {
const showHidePopUp = document.querySelector('.titleAndMenuIcon > img')
const windowPopUP = document.querySelector('.mobilePopUp')
const main = document.querySelector('main')
showHidePopUp.addEventListener('click', () => {
windowPopUP.classList.toggle('moveUpAndDown')
console.log('ok')
})
}
function getLoginAndSubscribeButtons() {
const login = document.querySelector('.mobilePopUp__login')
const subscribe = document.querySelector('.mobilePopUp__subscribe')
login.addEventListener('click', () => {
window.location.href = "./src/pages/loginPage.html"
})
subscribe.addEventListener('click', () => {
window.location.href = './src/pages/subscribePage.html'
})
}
and these are working perfectly fine in my HOME PAGE, the problem begins when i export these functions to other pages (so i don't have to rewrite 'em all over again)
This is the message that is shown enter image description here
i wanted a manner to, even the subscribe button is clicked within the subscribe page it redirects again to the subscribe page. Is there a manner to do that?
I tried to look into an wildcard that represents the home page so it could alawys refers to my index page
use absolute path
/src/pages/loginPage.html
Problem: You are using a relative path, which means that the file URL will be based on the CURRENT location.
RELATIVE Example:
CURRENT PAGE: domain.com/index.html
window.location.href = "./src/pages/loginPage.html"
FINAL URL: /src/pages/loignPage.html
CURRENT PAGE: domain.com/blogs/pets.html
window.location.href = "./src/pages/loginPage.html"
FINAL URL: /blogs/src/pages/loignPage.html
Solution:
Use an absoulte path, that way the current file location doesn't matter and the file URL will remain the same.
window.location.href = "/src/pages/loginPage.html"
To continue my script I'm trying to close this small window on this page https://mom.maison-objet.com/fr/marque/16604/britop-lighting-poland?request_type=meeting#xtor=AL-1459
To close it, I'm using JavaScript and the module "selenium-webdriver"
This is what I did:
require("chromedriver");
let swd = require("selenium-webdriver");
let browser = new swd.Builder();
let tab = browser.setChromeOptions().forBrowser("chrome").build();
let tabToOpen =
tab.get("https://mom.maison-objet.com/fr/marque/16604/britop-lighting-poland?request_type=meeting#xtor=AL-1459");
tabToOpen.then(function () {
tab.manage().setTimeouts({ implicit: 1000 })
let click_on_close = tab.findElement(swd.By.css(".icon.icon__cross.lightbox__close"))
;
click_on_close.click()
return;
})
I'm having this error: ElementNotInteractableError: element not interactable.
I don't seem to find how to solve this error. If someone can help me?
I'm writing a chrome extension and from that extension i want to click on a particular anchor tag in a webpage on a particular website.
let helpRequestButton = document.querySelectorAll(".live-doubt-item-resolve.ng-scope a");
Using this query selector i'm able to get the anchor tag from the web page which looks like.
<a data-ga-label="resolve_now_live" data-ga-action="clicked" ng-if="helpRequestObj.item_type === 'Topic'" ng-click="claimLiveRequest($event, true, helpRequestObj.id)" target="_blank" class="content-heading ng-scope" data-ga-category="HelpRequestDashboardLive"> </a>
I just want to click on this tag using java script.
But helpRequestButton.click() dosent work.
I have tried the same solution with jQuery(did'nt work).
Also i tried to search a lot on web on how to simulate a mouse click and none of the solutions worked uptill now.
Just for refrence i'm giving the code snippet of my extension what chrome would call one the webpage is loaded. The button which i have to click is present on the web page.
let timeOut;
function stopTimeout() {
clearTimeout(timeOut);
}
function checkIncomingHelpRequests() {
let helpRequestButton = document.querySelectorAll(".live-doubt-item-resolve.ng-scope a");
console.log(helpRequestButton[0]);
if (helpRequestButton.length > 0) {
> ***// This is the place i want to click the button.***
// helpRequestButton.
//helpRequestButton.click();
}
}
function selectTag() {
// var object = document.querySelector(".main-class");
// console.log(object);
let liButton = document.querySelectorAll(".pointer.tab.ga-event-tracker")[0];
//let liButton = $("li.pointer.tab.ga-event-tracker")[0];
//console.log(liButton);
if (liButton !== undefined) {
liButton.click();
checkIncomingHelpRequests();
}
timeOut = setTimeout("selectTag()", timeOutInterval);
}
$(document).ready(function () {
selectTag();
});
Please help me. Thanks in advance.
i'm a beginner in terms of Javascript.
For my project I tried/recreated some tutorials and pasted them in the script Tag in the html file. Now I noticed that 2 of them are not working. It seems like they cancelling each other out: When I delete one script, the other is working and the other way around.
The problem must be pretty basic, but as a beginner I'm not sure what I'm overlooking.
These are the two scripts. The first one is for a toggle button and the second one for the mobile hamburger menu.
var switchButton = document.querySelector('.switch-button');
var switchBtnRight = document.querySelector('.switch-button-case.right');
var switchBtnLeft = document.querySelector('.switch-button-case.left');
var activeSwitch = document.querySelector('.active');
function switchLeft(){
switchBtnRight.classList.remove('active-case');
switchBtnLeft.classList.add('active-case');
activeSwitch.style.left = '0%';
}
function switchRight(){
switchBtnRight.classList.add('active-case');
switchBtnLeft.classList.remove('active-case');
activeSwitch.style.left = '50%';
}
switchBtnLeft.addEventListener('click', function(){
switchLeft();
}, false);
switchBtnRight.addEventListener('click', function(){
switchRight();
}, false);
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
hamburger.addEventListener("click", () => {
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle('fade')
});
//burger animation
hamburger.classList.toggle('toggle');
}```
I can only see that you are missing ); at the end of your code, the closing part of hamburger.addEventListener(.
Also i guess these ``` at the end are typos while trying to format your code in the editor here.
Make sure there is no error printed in your browser console.
I am trying to combine ContentFlow (http://jacksasylum.eu/ContentFlow/) and ColorBox (http://www.jacklmoore.com/colorbox/): when the user clicks on an image in ContentFlow I want an HTML page to be displayed in ColorBox.
I have tried using the code provided by the ColorBox examples' section to no avail. The HTML page is loaded by the browser as a normal link (not in ColorBox.)
I have even tried creating a ContentFlow addon (using the LightBox addon as an example) without any luck - nothing is displayed, not even simple images:
onclickActiveItem: function (item) {
var content = item.content;
if (content.getAttribute('src')) {
if (item.content.getAttribute('href')) {
item.element.href = item.content.getAttribute('href');
}
else if (! item.element.getAttribute('href')) {
item.element.href = content.getAttribute('src');
}
if (item.caption)
item.element.setAttribute ('title', item.caption.innerHTML);
colorbox.show(item.element);
}
}
Edited on 01/Oct/2013
The problem only manifests itself when an item contains an href. To prove this I changed the code above to show a static web page:
$.colorbox({open:true, href:"http://mysite.gr/colorbox/content/static.html"});
It the item is just a simple image the static web page is displayed in ColorBox. But if the item contains an href to the web page I want displayed in ColorBox the browser follows the link and loads the specified page. Any ideas on how to stop this from happening?
Thank you in advance for your help!
I have finally solved the problem I have described in my question. The solution involves creating a ContentFlow addon as follows:
new ContentFlowAddOn ('colorbox', {
init: function () {
var colorboxBaseDir = this.scriptpath+"../colorbox/";
var colorboxCSSBaseDir = colorboxBaseDir;
var colorboxImageBaseDir = colorboxBaseDir;
this.addScript(colorboxBaseDir+"jquery.colorbox.js");
this.addStylesheet(colorboxCSSBaseDir+"example3/colorbox.css");
},
ContentFlowConf: {
onclickInactiveItem: function (item) {
this.conf.onclickActiveItem(item);
},
onclickActiveItem: function (item) {
var content = item.content; // ContentFlow's content class
var theItem = item.item; // ContentFlow's item class - if you need access to it
var hrefToDisplay = '';
if (content.getAttribute('src')) {
if (content.getAttribute('href')) {
hrefToDisplay = item.content.getAttribute('href');
}
else if (!item.element.getAttribute('href')) {
hrefToDisplay = content.getAttribute('src');
}
$.colorbox({iframe:true, href:hrefToDisplay, title:item.caption});
}
}
}
});
The secret is to open the HTML page in an iframe.
Hope this helps!