I am new to Crossrider and I want be able to trigger events based on the user's interaction with the page.
For example, have a sound played when user hovers over an html input element:
extension.js
appAPI.ready(function() {
//the link to Alarm01 is valid
var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav')
$('input').mouseenter(function(){
Alarm01.play();
})
});
The code above does not work. Does anyone know what is the proper way to do this?
I've also tried to put it in background.js - that does not work either. I am using Chrome as my browser.
The idea is to have the user select an event in a popup (for example, play Alarm01 on hover over an input element) and then have it immediately applied to the current web page. So that the next time the user hovers over an input element Alarm01 is played.
What is the proper way to access HTML page elements in a Crossrider extension?
Thank you!
EDIT: Follow up question
Is it possible to trigger events on user's interaction with JQuery Mobile elements? For example an element of data-role="slider":
appAPI.ready(function($) {
//the link to Alarm01 is valid
var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav');
// Add audio to page
document.body.appendChild(Alarm01);
$('[data-role=slider]').on('change', function(){
Alarm01.play();
})
});
Thank you!!!!
EDIT:
If I include JQuery Mobile in extension.js I get double of every element on a the mobile website. So instead of getting one element of data-role="slider", I get two...
I get this:
as opposed to this:
You're almost there. As your code stands you created the audio object in the extension scope. However, to play the audio you must add it to the page scope (HTML DOM). Hence, simply add it to the body of the page and it works, something like:
appAPI.ready(function($) {
//the link to Alarm01 is valid
var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav');
// Add audio to page
document.body.appendChild(Alarm01);
$('input').mouseenter(function(){
Alarm01.play();
})
});
[Disclosure: I am a Crossrider employee]
Related
So I am creating a form where people can input all sorts of data describing a recipe. One of those data types is a youtube video URL. I want to take the data the user puts into the URL box and generate an iframe with the video so that can preview and make sure it's the right one. This is the code I am using:
function makeVideoPreview(aTable, aTextBox)
{
var aVideo = document.createElement("iframe");
aVideo.setAttribute("width", "560");
aVideo.setAttribute("height", "315");
var theURL = aTextBox.value;
var idIndex = theURL.indexOf("v=") + 2;
var vidID = theURL.slice(idIndex, theURL.length );;
var embedLink = "https://www.youtube.com/embed/"+ vidID;
aVideo.setAttribute("src", embedLink);
aVideo.setAttribute('allowfullscreen', 'true');
aVideo.setAttribute('frameborder', "0");
aTable.appendChild(aVideo);
}
If I use the debugger and step through the code, the iframe gets placed in the right place, begins to load, and then I get a 405 method not allowed error and it reloads the entire page.
If I copy the generated iframe from the debugger and paste it into the html source, it works fine. What in the world is going on?
I'm not a web guy. I mostly do native iOS development, but I am making this as a resource so that the company I am making the app for can add recipe content. I'm sure it is something I just don't understand about the platform.
thanks.
I just found an answer! I think. Apparently every element “button” defaults to submit. I assumed that submit was a submit and button was an action less element unless given a specific onclick or similar function. Apparently one must set the button type to be button or it defaults to submit.
I need to create a blank webpage with the url like: https://www.example.com/callme and we will share the link with our customers.
When someone clicks the link, a blank page will load, and as soon as the document is ready or dom content loaded, it has to automatically dial a specific number on mobile devices.
Basically you can do this with a link tag with href "tel:xxxxx", but i need it to be automatically clicked when the page load, not to click/tap it manually.
Here is what i tried so far but with no success:
document.addEventListener('DOMContentLoaded', function() {
$('#call').trigger('click');
}, false);
and
$(document).ready(function(){
$('#call').click();
});
and
$(document).ready(function(){
$('#call').trigger('click');
});
and here is the simple html:
Call me
Any advice is much appreciated, thanks in advance
Simply include this one-liner to change your client's url to your tel-link
window.location.href="tel:123456789";
If they are on a device that has a handler for tel-links (a mobile-phone for example) their phone app will open and give them the opportunity to call you
I have looked around, but I'm not seeing anything that specifically addresses this. My goal is to have a link, which can be clicked to either add content or "undo" the act of adding that content. I am trying to us the following:
function ShowDiv() {
if (null == window.set) {
document.getElementById("box2").innerHTML = "Some Content";
window.set = "set";
} else
location.reload();
}
Link
<div id="box2"></div>
This allows me to click the link to show some content inside some div. And then to click the link again to remove that content.
However, I am wondering if there is a way to achieve this result, that also allows the user to click the browser's back button to return the page to the state it was in before triggering the function (e.g., to reload the page).
You are looking for the HTML5 history API. This allows you to push state onto the history as if the browser loaded a different location without actually sending a request and replacing all content and javascript state. This allows the back and forward buttons to work, as long as your JavaScript code shows the correct content according to the current URL.
Resources:
W3C
MDN
Dive Into HTML5
I was successful to track all "uiStreamSource" that holds the link associated with each facebook post (status, image, etc) to add one extra button next to the date to do some other tasks using google chrome extensions. This button does a predefined job which not important to mention in this context.
I wrote this content script:
contentscript.js
var nodeslist=document.getElementsByClassName("uiStreamSource");
alert(nodeslist.length);
Each time a facebook page is loaded, the alert shows me 10 detected classes (i.e., 10 posts). But when I scroll down, new posts show up and this code fails to detect them. Since I need to update all uiStreamSource nodes in all posts, how can I solve this?
UPDATE
I tried this code in contentscript.js:
load();
document.addEventListener("DOMNodeInsertedIntoDocument", load, false);
function load(){
var nodeslist=document.getElementsByClassName("uiStreamSource");
alert(nodeslist.length);
}
The first time it runs, I get the correct number of the current nodes (current facebook posts) but once I scroll down and more posts are fetched, the alert shows up indicating that load function is called but the number of nodes printed is 0. Why is that?
Thanks on advance.
You can add a DOMNodeInserted event and check if the element that is going to be inserted is a post by checking its classes.
Or an easy solution is to use the jcade plugin. It can call a callback function when an element with specified selector is inserted.
Listen to the scroll event and add any new posts to nodeslist. You could use setInterval as well to catch any posts that are added when the user is not scrolling.
I've got a simple app that parses Tumblr blog templates. It's modeled after their customization screen and contains a header with some configurable options and an iframe. Every time an option changes, the app reloads the iframe, serializing the config form and updating the iframe's src with the serialized data as a query string.
This all works fine, except every time this happens, I am only able to reload the main index page with the changed options. If the user wants to view, say, a single post page by navigating away from the index, the template renders that page, only with the default options.
In other words, the changed options do no persist while the user navigates the blog.
I've been able to have 'persisting changes' with an $('iframe').load() event like so:
$('iframe').load(function(){
updateTheme();
});
The only problem is, as you can tell, this would wait for the iframe to fully render the page using the default options, then re-renders it with the updated options. I mean... it works, but it's not really a great solution.
Does anybody know how I can prevent the iframe from loading, capturing the users desired location, then re-render the frame with the current options as represented in the header?
Any help would be greatly appreciated. Thanks in advance!
Are you hosting both the top-level page and the embedded iframe page? If so, there are some games you can play, but it's not pretty. For example you can rewrite links within the embedded iframe in order to pre-fill the config options, e.g. with something like:
$('iframe').load(function(){
$('a', $('iframe')).each(function() {
var new_url = this.attr("href");
new_url += config_options;
this.attr("href", new_url);
});
});
Here's what I came up with:
var p = top || parent;
(function($){
$('a').click(function(e) {
var prevent = e.isDefaultPrevented(),
is_local = p.isLocal(this.href),
is_hash = $(this).attr('href').match(/^#/);
if(prevent || ! is_local || is_hash) return;
e.prevenDefault();
p.updateTheme(this.href);
return false;
});
})(jQuery);
My worry was that I would be affecting the javascript events attached to <a/> tags by the user, but apparently jQuery will detect default prevented events, even if they weren't prevented with jQuery itself. I tested it like this:
document.getElementById('test-link').onclick = function() {
return false;
}
jQuery detects that the original event has been prevented, so I am just assuming I shouldn't continue.