I am simply trying to trigger a link with no id via console. I have tried multiple scenarios and none seem to work. It is a link with lots of classes and no id.
$('.videoHolder').find('a.icon-play').trigger('click');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="videoHolder hover">
<div class="videoDisplay">
<video class="persistentNativePlayer nativeEmbedPlayerPid" poster="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%DB%0B%0A%17%041%80%9B%E7%F2%00%00%00%19tEXtComment%00Created%20with%20GIMPW%81%0E%17%00%00%00%0CIDAT%08%D7c%60%60%60%00%00%00%04%00%01'4'%0A%00%00%00%00IEND%AEB%60%82"
id="pid_kaltura_player" kentryid="1_4u0ocu4u" kuiconfid="" kwidgetid="" kpartnerid="" preload="none" width="560" height="395" src="" style="position: absolute; left: 0px; top: 0px;"></video>
<div class="videoShadow"></div>
<div class="mwEmbedPlayer" id="kaltura_player" style=""></div>
</div><a tabindex="-1" href="#" role="button" class="comp largePlayBtn largePlayBtnBorder icon-play" aria-label="Play clip" data-order="1" data-plugin-name="largePlayBtn" style="display: flex; opacity: 1;">Mylink</a></div>
You can target the <a> tag and fire .click().
To demonstrate this, I made a test() which will print MyLink Clicked.... in the console if the link is clicked.
function test() {
console.log("MyLink Clicked....");
}
document.getElementsByTagName("a")[0].click();
<div class="videoHolder hover"><div class="videoDisplay">
<video class="persistentNativePlayer nativeEmbedPlayerPid" poster="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%DB%0B%0A%17%041%80%9B%E7%F2%00%00%00%19tEXtComment%00Created%20with%20GIMPW%81%0E%17%00%00%00%0CIDAT%08%D7c%60%60%60%00%00%00%04%00%01'4'%0A%00%00%00%00IEND%AEB%60%82" id="pid_kaltura_player" kentryid="1_4u0ocu4u" kuiconfid="" kwidgetid="" kpartnerid="" preload="none" width="560" height="395" src="" style="position: absolute; left: 0px; top: 0px;"></video><div class="videoShadow"></div><div class="mwEmbedPlayer" id="kaltura_player" style=""></div>
</div><a tabindex="-1" href="#" role="button" class="comp largePlayBtn largePlayBtnBorder icon-play" aria-label="Play clip" data-order="1" data-plugin-name="largePlayBtn" onclick="test()" style="display: flex; opacity: 1;">Mylink</a></div>
I undestand your trouble, the a link you can't click it by yourself ,you can only do it by add some click functon ,then trigger it , and you can try it with this code :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="videoHolder hover">
<div class="videoDisplay">
<video class="persistentNativePlayer nativeEmbedPlayerPid"
poster="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%DB%0B%0A%17%041%80%9B%E7%F2%00%00%00%19tEXtComment%00Created%20with%20GIMPW%81%0E%17%00%00%00%0CIDAT%08%D7c%60%60%60%00%00%00%04%00%01'4'%0A%00%00%00%00IEND%AEB%60%82"
id="pid_kaltura_player" kentryid="1_4u0ocu4u" kuiconfid="" kwidgetid="" kpartnerid="" preload="none"
width="560" height="395" src="" style="position: absolute; left: 0px; top: 0px;"></video>
<div class="videoShadow"></div>
<div class="mwEmbedPlayer" id="kaltura_player" style=""></div>
</div>
<a tabindex="-1" href="#" role="button" class="comp largePlayBtn largePlayBtnBorder icon-play"
aria-label="Play clip" data-order="1" data-plugin-name="largePlayBtn"
style="display: flex; opacity: 1;">Mylink</a></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('.videoHolder').find('a.icon-play').on('click',function (e){
e.preventDefault();
console.log('click');
});
$('.videoHolder').find('a.icon-play').click();
</script>
</body>
</html>
Related
My current way of bringing a RSS into form as list looks like this:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
<div class="slider">
<span class="left-arrow">
<i class="material-icons">keyboard_arrow_left</i>
</span>
<span class="right-arrow">
<i class="material-icons">keyboard_arrow_right</i>
</span>
<div class="feed">
<h3>Latest news</h3>
<ul class="list">
</ul>
</div>
</div>
<div class="description">
</p>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js'></script><script src="./script.js"></script>
</body>
</html>
<script>
var slideCount,slideWidth,slideHeight,sliderUlWidth;function moveLeft(){$(".carousel").animate({left:+slideWidth},200,function(){$(".carousel li:last-child").prependTo(".carousel"),$(".carousel").css("left","")})}function moveRight(){$(".carousel").animate({left:-slideWidth},200,function(){$(".carousel li:first-child").appendTo(".carousel"),$(".carousel").css("left","")})}function getRssFeed(e,i){return feednami.loadGoogleFormat(encodeURI(e),i)}function mapFeed(e){e.error?console.log(e.error):(createCarouselList(e.feed.entries.slice(0,5)),createFeedList(e.feed.entries.slice(0,20)))}function createCarouselList(e){var i=[];$(e).each(function(e,t){i.push("<li><h3><a target=_blank href='"+t.link+"'>"+t.title+"</a></h3><p>"+new Date(t.publishedDate).toLocaleDateString("pt-BR")+"</p><span class='carousel-footer'>"+(e+1)+" out of 5</span></li>")}),$(".carousel").append(i)}function createFeedList(e){var i=[];$(e).each(function(e,t){i.push("<li><a target=_blank href='"+t.link+"'>"+t.title+"</a></li>")}),$(".list").append(i),returnCarouselList()}function returnCarouselList(){slideCount=$(".carousel li").length,slideWidth=$(".carousel li").width(),slideHeight=$(".carousel li").height(),sliderUlWidth=slideCount*slideWidth,$(".slider").css({width:slideWidth,height:slideHeight}),$(".carousel").css({width:sliderUlWidth,marginLeft:-slideWidth}),$(".carousel li:last-child").prependTo(".carousel")}$(function(){getRssFeed("https://www.youtube.com/feeds/videos.xml?channel_id=UCn-K7GIs62ENvdQe6ZZk9-w",mapFeed),$(".left-arrow").on("click",function(){moveLeft()}),$(".right-arrow").on("click",function(){moveRight()}),$(window).on("resize",function(){returnCarouselList()})});
</script>
<style>
.slider,.slider .carousel li a,.slider .carousel li h3,.slider .carousel li p{color:#fbfbfb}.feed li a,a{color:#fd084a}body,html{background-color:transparent;font-family:Roboto}a{text-decoration:none}p{color:#fff}.description{margin-top:50px}span.left-arrow,span.right-arrow{color:#fbfbfb;cursor:pointer;display:block;font-size:1em;height:auto;padding:1em;position:absolute;top:80%;transition:.3s;width:auto;z-index:999}span.left-arrow:hover,span.right-arrow:hover{background-color:#e40743}.left-arrow{right:60px}.right-arrow{right:0}.slider{overflow:hidden;position:relative}.slider .carousel{height:200px;list-style:none;margin:0;padding:0;position:relative}.slider .carousel .carousel-footer{color:#e40743;bottom:-80px;position:relative}.slider .carousel li{background-color:#fd084a;display:block;float:left;height:300px;margin:0;padding:70px 0;position:relative;text-align:center}.feed{background-color:#fbfbfb;margin:auto}.feed ul{width:100%;margin:0;padding:0}.feed h3{color:#424242;padding:0 .8em}.feed li{align-items:center;display:flex;justify-content:flex-start;list-style:none;transition:background-color .3s;width:100%}.feed li a{margin:0;padding:1em}.feed li:hover{background-color:rgba(253,8,74,.31)}#media only screen and (min-width:780px){.feed,.slider .carousel li{width:700px}}#media only screen and (min-width:680px) and (max-width:779px){.feed,.slider .carousel li{width:600px}}#media only screen and (min-width:480px) and (max-width:679px){.feed,.slider .carousel li{width:400px}}#media only screen and (min-width:320px) and (max-width:479px){.feed,.slider .carousel li{width:300px}}#media only screen and (max-width:319px){.feed,.slider .carousel li{width:200px}}.wrapper{align-items:center;display:flex;flex-direction:column;margin:auto}
</style>
This renders the "title" and "link rel" perfectly fin in list,
however I'd like to add the xml's star count
<media:starRating count="2" average="5.00" min="1" max="5"/>
Right next to the names on this list
(xml example: https://www.youtube.com/feeds/videos.xml?channel_id=UCn-K7GIs62ENvdQe6ZZk9-w)
This is sadly different to the other two elements, so I'm not entirely sure how to do it..
Ich have a problem with my custom wordpress page.
I want to use the default header and footer.
This issue only happens on safari. On Chrome it works fine!
The footer is shown in the middle of the page and not at the end of the page.
Do you have any suggestion?
Here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fahrzeugkunde - TLF</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="Modal.css">
</head>
<body>
<div>
<?php require($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');
get_header(); ?>
</div>
<main class="feuerwehr-body">
<div class="feuerwehr-flexContainer">
<div class="feuerwehr-imageContainer">
<img class="feuerwehr-image" src="../images/TLF/GA2.JPG" alt="GA2" usemap="#image-mapGA2">
<map name="image-mapGA2">
<area class="area" shape="rect" coords=" 1885, 1611, 2101, 2130 " alt="placeholder" onclick="openInfo('Feuerlöscher', 'Das ist ein Feuerlöscher')">
</map>
</div>
<div class="feuerwehr-imageContainer">
<img class="feuerwehr-image" src="../images/TLF/GA4.JPG" alt="GA4" usemap="#image-mapGA4">
<map name="image-mapGA4">
<area class="area" shape="rect" coords=" 97, 525, 1340, 790 " alt="placeholder" onclick="openInfo('Feuerlöscher', 'Das ist ein Feuerlöscher')">
</map>
</div>
<div class="feuerwehr-imageContainer">
<img class="feuerwehr-image" src="../images/TLF/GA6.JPG" alt="GA6" usemap="#image-mapGA6">
<map name="image-mapGA6">
<area class="area" shape="rect" coords=" 199, 642, 366, 1829 " alt="placeholder" onclick="openInfo('Feuerlöscher', 'Das ist ein Feuerlöscher')">
</map>
</div>
<div id="myModal" class="Modal is-hidden is-visuallyHidden">
<!-- Modal content -->
<div class="Modal-content" id="modal-image-container">
<div class="modal-image" id="modal-image">
</div>
<div style="display: flex; justify-content: end;">
<button class="custom-button custom-button--inline" id="sig-cancellationBtnImage">Zurück</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
<script src="Modal.js"></script>
<script src="index.js"></script>
</main>
<div style="display: none">
<?php get_footer(); ?>
</div>
</html>
The get_footer() wordpress method add a html template code to your page : https://developer.wordpress.org/reference/functions/get_footer/
The call should be INSIDE html tags (same with get_header()). Maybe chrome is ok with that but safari seems to be more sensitive.
Anyway, the wordpress load a lot of css and js files and we cannot figure what style is applying on your page in your post.
Its a mistake to put the </html> after the get footer() function Because it should be already inside the footer file. Hope i was clear enough (my english isnt my mother tounge).
What I would like to do is get the contents of each bootstrap tab and print them in different divs. Basically, I would like to trigger the el.tab('show') function for each [data-toggle='tab'], grab the shown contents, and print them in different divs on the same page.
$(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
.new
{
width: 30%;
margin: 1%;
border: 1px solid black;
display: inline-block;
min-height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li>Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">This is Home</div>
<div class="tab-pane" id="profile">This is Profile</div>
<div class="tab-pane" id="messages">This is Messages</div>
<div class="tab-pane" id="settings">This is Settings</div>
</div>
<div id="newHome" class='new'>
Want to print home content here
</div>
<div id="newProfile" class='new'>
Want to print profile content here
</div>
<div id="newMessages" class='new'>
Want to print messages content here
</div>
<div id="Settings" class='new'>
Want to print settings content here
</div>
</body>
</html>
Example: http://jsbin.com/zixihexepu/edit?html,css,js,output
Remove <script src="https://code.jquery.com/jquery-3.1.0.js"></script> from your html head as jQuery is already defined, defining multiple times will cause problem.
Then try this:
$(function() {
//This event fires on tab show after a tab has been shown.
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
//get the content href
var contentId = $(e.target).attr('href');
//from content href prepare new div id and show content html there
$("#new" + contentId.substring(1).capitalizeFirstLetter()).html($("" + contentId).html());
})
});
String.prototype.capitalizeFirstLetter = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
}
check this fiddle
bootstrap tab event Reference
I'm building a males fashion site with a slider that have both images and a video in it. I'm using owl.carousel as a slider. The video is an plane HTML5 video tag.
I'm trying to start the video whith jquery like this: $('#video')[0].play();
It works perfectly when the video is outside the slider/carousel, but how do I start it inside?
Codepen link
I just look your codepen. After few tests, I saw two containers with class video-slider with a video tag with the same id "video" inside. (Check with debug console on the render view and the jquery code $(".video-slide").children()).
You can start the videoS with the jquery code $(".video-slide").children().each(function() { this.play(); }); but before you need to find where and why your blocks are duplicated.
I hope it helps
Created a snippet
$(function(){
var owl;
$(document).ready(function () {
owl = $(".stage");
owl.owlCarousel({
autoplay: true,
autoplayHoverPause: true,
loop: true,
items: 1,
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,afterAction: function(current) {
current.find('video').get(0).play();
}
});
});
});
body {
background-color: #91a8d2;
}
.container {
margin-top: 50px;
max-width: 500px;
}
.stage .image-slide, .stage .video-slide {
display: block;
width: 100%;
height: 100%;
}
.stage .video-slide > video {
width: 100%;
height: auto;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="stage">
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide1.jpg">
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide2.jpg">
</div>
<div class="item">
<video id="video">
<source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay>
<source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg">
</video>
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide3.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
I have created a sample HTML code.
Please check it.
set your CSS accordingly.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<style class="cp-pen-styles">
body {
background-color: #91a8d2;
}
.container {
margin-top: 50px;
max-width: 500px;
}
.stage .image-slide, .stage .video-slide {
display: block;
width: 100%;
height: 100%;
}
.stage .video-slide > video {
width: 100%;
height: auto;
}
</style>
<title></title>
<script type='text/javascript'>
$(function(){
var owl;
$(document).ready(function () {
owl = $(".stage");
owl.owlCarousel({
autoplay: true,
autoplayHoverPause: true,
loop: true,
items: 1,
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,afterAction: function(current) {
current.find('video').get(0).play();
}
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="stage">
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide1.jpg">
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide2.jpg">
</div>
<div class="item">
<video id="video">
<source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay>
<source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg">
</video>
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide3.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm very new with Intel-XDK.
Building a new App using the AppStarter framework.
I'm trying to make a very basic App that takes pictures on one "page", and then allows me to view the image(s) on another page, where I also want to capture details about each image.
I get the idea so far that you only really build one page with XDK, ie, everything is in index.html, and your "pages" are just div's.
I succesfully got the first page to envoke the camera, but I cannot get the image to "save" and be available for view on my "second page" yet.
On my iPhone, when testing this app, I can take a picture, but it isn't saved anywhere, on my Android device, it saves the image, but names it "test.jpg" and it saves to the root of the sdcard, and not to the usual DCIM folder.
I tried using the onclick events to kick-off the functions.
Any pointers welcome!
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
document.addEventListener("intel.xdk.camera.picture.add",onSuccess);
document.addEventListener("intel.xdk.camera.picture.busy",onSuccess);
document.addEventListener("intel.xdk.camera.picture.cancel",onSuccess);
function capturePhoto() {
intel.xdk.camera.takePicture(50,true,"jpg");
}
function onSuccess(evt) {
if (evt.success == true)
{
// create image
var image = document.createElement('img');
image.src=intel.xdk.camera.getPictureURL(evt.filename);
image.id=evt.filename;
document.body.appendChild(image);
}
else
{
if (evt.message != undefined)
{
alert(evt.message);
}
else
{
alert("error capturing picture");
}
}
}
function showImages() {
var arrPictureList = intel.xdk.camera.getPictureList();
for (var x=0;x<arrPictureList.length;x++)
{
// create image
var newImage = document.createElement('img2');
newImage.src=intel.xdk.camera.getPictureURL(arrPictureList[x]);
newImage.setAttribute("style","width:100px;height:100px;");
newImage.id=document.getElementById("img_" + arrPictureList[x]);
document.body.appendChild(newImage);
}
}
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && !$.os.ios && $("#afui").get(0).className !== "ios")
$("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<div id="afui" class="ios">
<div id="header"></div>
<div id="content" style="">
<div class="panel" title="PhotoTag" data-nav="nav_0" id="main" selected="selected"
style="" data-appbuilder-object="page">
<ul class="list" data-appbuilder-object="list" style="">
<li>Take Picture
</li>
<li>View Pictures
</li>
<li>Help
</li>
</ul>
</div>
<div class="panel" title="Take Picture" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
onclick="capturePhoto();">Take Picture</a>
</div>
<div class="panel" title="View Picture" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
onclick="showImages();">Show Pictures</a>
</div>
<div class="panel" title="Help" data-nav="nav_0" id="page_3" data-appbuilder-object="page"
style=""></div>
</div>
<div id="navbar">
Home
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button back" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">test</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
</div>
</html>
OK, I managed to come right.
This code does what I need so far wrt taking the picture on one "page" and then displaying it on another.
Having issues with the use of the localStorage now - posted a new question.
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
document.addEventListener("intel.xdk.camera.picture.add",onSuccess);
document.addEventListener("intel.xdk.camera.picture.busy",onSuccess);
document.addEventListener("intel.xdk.camera.picture.cancel",onSuccess);
function capturePhoto() {
intel.xdk.camera.takePicture(50,true,"jpg");
}
function onSuccess(event)
{
if (event.success === true)
{
var imagesrc = intel.xdk.camera.getPictureURL(event.filename);
var pic1 = document.getElementById("pic1");
pic1.src = imagesrc;
localStorage.imagesrc = imagesrc;
}
else
{
if (event.message !== undefined)
{
alert(event.message);
}
else
{
alert("error capturing picture");
}
}
}
function showPicture()
{
var picture = document.getElementById("pic2");
var pic1src = localStorage.imagesrc;
picture.src = pic1src;
document.form2.locationview.value = localStorage.location;
document.form2.titleview.value = localStorage.title;
document.form2.metadataview.value = localStorage.metadata;
}
function saveForm()
{
localStorage.location = document.form1.location.value;
localStorage.title = document.form1.title.value;
localStorage.metadata = document.form1.metadata.value;
}
function updateForm()
{
localStorage.location = document.form2.locationview.value;
localStorage.title = document.form2.titleview.value;
localStorage.metadata = document.form2.metadataview.value;
}
function showStorage()
{
document.getElementById("page_3").innerHTML = localStorage.location;
}
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && !$.os.ios && $("#afui").get(0).className !== "ios")
$("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<div id="afui" class="ios">
<div id="header"></div>
<div id="content" style="">
<div class="panel" title="PhotoTagger" data-nav="nav_0" id="main" selected="selected"
style="background-image: url(images/splash.jpg);"
data-appbuilder-object="page" data-footer="footer_1">
<div class="centerbutton">
<a class="button" href="#page_1" data-appbuilder-object="button" data-transition="slide"
id="button_1" onclick="capturePhoto();">Store data in EXIF</a>
</div>
</div>
<div class="panel" title="Take Picture" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
style="" data-footer="footer_1">
<form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
id="form1" name="form1">
<img src="images/EmptyBox-Phone.png" id="pic1" width="150px" height="200px">
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Location</label>
<input type="text" style="float:left;" id="location" placeholder="">
</div>
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Title</label>
<input type="text" style="float:left;" id="title" placeholder="">
</div>
<div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
<label for="">MetaData</label>
<textarea id="metadata"></textarea>
</div>
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
id="" onclick="saveForm();">Save</a>
</form>
</div>
<div class="panel" title="View Picture" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
style="" data-footer="footer_1">
<form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
id="form2" name="form2">
<img src="images/EmptyBox-Phone.png" id="pic2" width="150px" height="200px" style=""
class="">
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Location</label>
<input type="text" style="float:left;" id="locationview" placeholder="">
</div>
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Title</label>
<input type="text" style="float:left;" id="titleview" placeholder="">
</div>
<div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
<label for="">MetaData</label>
<textarea id="metadataview"></textarea>
</div>
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
id="" onclick="updateForm();">Update</a>
</form>
</div>
<div class="panel" title="Test Local Storage" data-footer="footer_1" data-nav="nav_0"
id="page_3" data-appbuilder-object="page" style=""></div>
</div>
<div id="navbar"> Home
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button back" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">PhotoTagger</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
<footer id="footer_1" data-appbuilder-object="footer">Home<a href="#page_1" class="icon camera"
onclick="capturePhoto();">Take Picture</a>
View Pictures
Local Storage
</footer>
</div>
</html>