I took the sample HTML5 and tried in iOS Safari.
The sample photo appears but keeps loading continuously and no Aviary editing actions can be performed.
Does anybody have a solution?
Here's the sample code directly from the Aviary site at http://www.aviary.com/web-documentation
<!-- Load Feather code -->
<script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>
<!-- Instantiate Feather -->
<script type="text/javascript">
var featherEditor = new Aviary.Feather({
apiKey: '12345678',
apiVersion: 2,
tools: 'all',
appendTo: 'injection_site',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
<div id="injection_site"></div>
<img id="image1" src="http://images.aviary.com/imagesv5/feather_default.jpg"/>
<!-- Add an edit button, passing the HTML id of the image and the public URL ot the image -->
<p><input type="image" src="http://advanced.aviary.com/images/feather/edit-photo.png" value="Edit photo" onclick="return launchEditor('image1', 'http://images.aviary.com/imagesv5/feather_default.jpg');" /></p>
I contacted Aviary at api#aviary.com and they mentioned that there was a bug that they fixed today. It works now.
You have to put this code on live server, local does't seem to work here. Aviary web documentation says that "Set a location on your server for Aviary to send a server-to-server HTTP POST".
Just in case...
You must add the complete 'src' in the photo.
Instead us using "src='/upload/miPhoto.png'" you must use "src='http://localhost:8080/project/upload/miPhoto.png'"
Hope this helps!
Related
I want to track each time someone clicks on a link on my web (this click makes a file to be downloaded) to optimise my Facebook Ads (pay per conversion). After including the Facebook pixel in the head section of my web, I have to track this event, for example as a "lead", so I'm using this piece of code at the beginning of the body:
<script type="text/javascript">
$( '#link' ).click(function() {
fbq('track', 'Lead');
});
</script>
Please note that "link" is the id I've set for the link:
<a id="link" href="/content/file.zip">press here</a>
However, I'm tracking a "PageView" (because of the first code in the head section), but I'm not tracking the lead event (the click on the link).
I've also tried this one:
<script type="text/javascript">
$("#link").on('click', function() {
fbq('track', 'Lead');
});
</script>
And I've also tried with an onclick event in the link, like this:
press here
<script type="text/javascript">
function fileDownloaded() {
fbq('track', 'Lead');
return true;
}
</script>
Nothing works for me (I've also put the code of the event at the end of the body section). What am I doing wrong?
Thanks a lot.
I've found a solution that works for me, in case is useful for someone else:
Instead of putting the link inside an href, I've moved the link to the javascript function.
I've used an onclick method to call the javascript function in which I first call the Facebook event to track, and then the download of the file starts.
The result is something like this for the HTML (the text I want to link):
<div onclick="fileDownloaded()">press here</div>
And something like this for the javascript function I want to track with Facebook pixel when someone clicks on the link (at the end of the body section):
<script>
function fileDownloaded() {
fbq('track', 'Lead');
window.open("/content/file.zip","_self")
}
</script>
Best regards.
If you put the URL inside javascript, the link will be "dead" for any visitor that doesn't have scripts enabled in their browser.
You can just put fbq() inside a function inside separate script tags like so:
//pixel code above
fbq('track', 'PageView');
</script>
<script>
function Lead(){ fbq('track','Lead'); }
</script>
<body>
Click tracked by FB!
I use this with image;
<a href="https://downloadurl">
<img src="target image" alt="xxx" onclick="fbq('track','Lead')"/>
</a>
this works if you have installed the fb pixel code in the website header.
I'm just getting back into web development so forgive me if I sound ignorant. I'm trying to set up a lightbox effect using Magnific Popup. I love it because all of the examples are using responsive design.
I've followed instructions here: http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool
And here: http://www.templatemonster.com/help/js-animated-how-to-implement-jquery-magnific-popup-lightbox-plugin.html#prettyPhoto/0/
A few times and I don't understand why the pop up isn't coming up. It just links me to a new window with the image on it and not a pop up.
I have this in my head tag:
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="dist/magnific-popup.css">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="dist/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="dist/jquery.magnific-popup.js"></script>
</script>
<script>
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
</script>
This is my html:
<a class="image-popup-vertical-fit" href="images/logo.png" title="TITLE">
<img src="images/print.png" border="0" align="center" class="image2" /></a>
I had the same problem, and had the same setup as you. I thought I had called the jQuery library already, but apparently not, because as soon as I added the code (below) before closing my HEAD, everything started working! I know this answer is about a year belated, but maybe it will help others in the future.
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I have two links on an optimized mobile Safari web site. One is a link to the App Store to download my application. The other is a Launch App button which uses the registered app:// protocol to open the application. The problem is that mobile Safari chokes when the user clicks the Launch App button if the application is not installed. Is it possible to detect if the registered protocol is available, and if it isn't, change the Launch App button with an appropriate URL, such as the download app URL, so that the user doesn't get a nasty popup?
This is broadly similar to this question; the most relevant suggestions there are to have a single button that attempts to launch the app, simultaneously creating a timer that'll fire if the app isn't installed on the grounds that if it were then Safari would have exited before the timer fires.
If you add an iframe on your web page with the src set to custom scheme for your App, iOS will automatically redirect to that location in the App. If the app is not installed, nothing will happen. This allows you to deep link into the App if it is installed, or redirect to the App Store if it is not installed.
For example, if you have the twitter app installed, and navigate to a webpage containing the following markup, you would be immediately directed to the app. If you did not have the Twitter app installed, you would see the text "The Twitter App is not installed."
<!DOCTYPE html>
<html>
<head>
<title>iOS Automatic Deep Linking</title>
</head>
<body>
<iframe src="twitter://" width="0" height="0"></iframe>
<p>The Twitter App is not installed</p>
</body>
</html>
This means that you could have a single button that directs to a web page with markup similar to this:
<!DOCTYPE html>
<html>
<head>
<title>iOS Automatic Deep Linking</title>
<script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
<script src='//mobileesp.googlecode.com/svn/JavaScript/mdetect.js'></script>
<script>
(function ($, MobileEsp) {
// On document ready, redirect to the App on the App store.
$(function () {
if (typeof MobileEsp.DetectIos !== 'undefined' && MobileEsp.DetectIos()) {
// Add an iframe to twitter://, and then an iframe for the app store
// link. If the first fails to redirect to the Twitter app, the
// second will redirect to the app on the App Store. We use jQuery
// to add this after the document is fully loaded, so if the user
// comes back to the browser, they see the content they expect.
$('body').append('<iframe class="twitter-detect" src="twitter://" />')
.append('<iframe class="twitter-detect" src="itms-apps://itunes.com/apps/twitter" />');
}
});
})(jQuery, MobileEsp);
</script>
<style type="text/css">
.twitter-detect {
display: none;
}
</style>
</head>
<body>
<p>Website content.</p>
</body>
</html>
Below is a code snippet that works, but is not perfect. You still see the safari popup, but everything else works as expected:
<script type="text/javascript">
var timer;
var heartbeat;
var lastInterval;
function clearTimers() {
clearTimeout(timer);
clearTimeout(heartbeat);
}
window.addEventListener("pageshow", function(evt){
clearTimers();
}, false);
window.addEventListener("pagehide", function(evt){
clearTimers();
}, false);
function getTime() {
return (new Date()).getTime();
}
// For all other browsers except Safari (which do not support pageshow and pagehide properly)
function intervalHeartbeat() {
var now = getTime();
var diff = now - lastInterval - 200;
lastInterval = now;
if(diff > 1000) { // don't trigger on small stutters less than 1000ms
clearTimers();
}
}
function launch_app_or_alt_url(el) {
lastInterval = getTime();
heartbeat = setInterval(intervalHeartbeat, 200);
document.location = 'myapp://customurl';
timer = setTimeout(function () {
document.location = 'http://alternate.url.com';
}, 2000);
}
$(".source_url").click(function(event) {
launch_app_or_alt_url($(this));
event.preventDefault();
});
</script>
I have blogged about the details here: http://aawaara.com/post/74543339755/smallest-piece-of-code-thats-going-to-change-the-world
I was wondering whether anyone has tried to use the new tag that comes with HTML5 on the iPhone.
Specifically, I didn't manage to make the pause() command to work.
Below is a portion of the page. As you can see, I'm trying to pause the video 10sec after it started. It works on Safari on a Mac btw.
Has anyone managed to make this work?
<head>
<javascript language="JavaScript">
function timeUpdate()
{
var myVideo = document.getElementsByTagName('video')[0];
var time = myVideo.currentTime;
if (time > 10)
{
myVideo.pause();
}
}
function addListeners()
{
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('timeupdate',timeUpdate,false);
}
</script>
</head>
<body onload="addListeners()">
<video controls src="resources/bb_poor_cinderella_512kb.mp4"
poster="resources/background.png">
Video tag not supported!
</video>
</body>
Thanks,
Ariel
This code is invalid:
<javascript language="JavaScript">
There is no HTML tag called <Javascript>
To set the language to javascript, you should use this:
<script type="text/javascript">
// Code here
</script>
Note that the language attribute is deprecated according to the W3C standard (http://www.w3.org/TR/REC-html40/interact/scripts.html) so you should use type rather than language.
As far as i know iPhone wont let you play video inline in the mobile safari browser.
So pausing wont work ofcourse. iPhone open the video in an external videoplayer, you dont have control over browser features, so the pausing doenst work.
You should use <script>, not <javascript language="JavaScript">.
I have an iframe application build up on php.
I have set iframe size as resizable.
There is a problem the display is not proper if the content is too large.
I have applied the code available on http://wiki.developers.facebook.com/index.php/Resizable_IFrame
My xd_receiver.htm file is inside my templates folder where my php files are residing.
The code which I am using is:
<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["CanvasUtil"], function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
Please guide on how to make the display correct.
even though In am not sure about this, but Large content could be the the real issue,
try to move this part to the end of your page
FB_RequireFeatures(["CanvasUtil"],
function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
} ); </script>