I've managed to build a reasonable application in my free time looking at the tutorials but I'm stuck at being able to access (or know if its possible to access) the DOM element in an ons-dialog.
I'm building image upload feature for an image captured from camera.
After clicking capture button on a parent page and capturing via the camera (which is working fine until this stage), I want the image to show up in a ons-dialog box where user can put captions, tags, etc before uploading the image.
Here's my code:
On the parent page inside HomepageController where "capture" button is handled:
var uploadImageDialog_var = ""; // global variable in js file outside HomepageController definition
// ...
// access camera, capture pic, go to success function with captured image data:
// ...
function onCaptureSuccess(data) {
ons.createDialog('upload_image_dialog.html', {parentScope: $scope}).then(function(dialog) {
uploadImageDialog_var = dialog;
uploadImageDialog_var.show();
});
var viewport = document.getElementById('viewport');
document.getElementById("test_img").src = "data:image/jpeg;base64," + data; <------ THIS LINE
console.log(document.getElementById('test_img').src);
};
On the html side, "viewport" is a div on the ons-dialog:
<ons-template id="upload_image_dialog.html" var="uploadImageDialog" ng-controller="HomepageController">
<ons-dialog cancelable><!-- animation-options="{duration: 0.2, delay: 1, timing: 'ease-in'}">-->
<div class="list__item list__item center" style="opacity: 0.4; border-bottom: 1px solid #0d96d7" > Tag My Upload </div>
<div id="viewport" class="" style="width: 300px; height:300px">
<img style="" id="test_img" src="" />
</div>
<br/> <br/><br/>
<ons-button class="center" modifier="large" ng-click="uploadPictureOK()">Upload!</ons-button>
</ons-dialog>
</ons-template>
document.getElementById("test_img") in above js looks like is working, and the changes to test_img's src are showing up when I console.out it, but the actual dialog is displayed with old dummy image.
Please let me know if I need to explain / provide better, and excuse me if this is trivial.
I figured it out. I accidentally had a ng-controller definition on both the parent page's and the template when the two were declared separately. That was leading to different accesses to $scope/other variables. I clubbed them up and it is working like a charm. :-)
Related
I'm aware that this simply achieved by inserting
<input type="file" id="photo" accept="image/*;capture=camera">
what I'm having trouble with (due to my lack of proper coding skills) is actually grabbing and putting to use the image the user selects/takes.
Specifically, I want an iPad user to be able to grab an image which will be rendered on the page according to CSS. Once an image is there, I then want them to be able to replace that image with another if they need to.
Sounds simple enough but, once captured, I can't write the code I need to reference the image and manipulate it.
By the way, this is for an in-house project and so permissions etc. are irrelevant.
Thanks in advance.
Messing with this today with some help off the web, I came up with the following which works and also changes the text of the button once an initial image has loaded.
<div id="zeroDiv">
<input type="file" id="getPic" accept="image/*">
</div>
<div id="picWrapper">
<img id="image">
<div id="buttDiv">
<button id="picButt"><span class="buttText">Insert image</span>
</button>
</div>
</div>
and the JQuery/JavaScript:
$('#picButt').click(function () {
$('#getPic').trigger('click');
});
$(document).ready(function () {
$("#getPic").on("change", gotPic);
$("#image").load();
});
function gotPic(event) {
$("#image").attr("src", URL.createObjectURL(event.target.files[0]));
$("#picButt span").text("Change image");
}
working fiddle with CSS at http://jsfiddle.net/1rg5Lyyk/4/
I'm now looking for a way to store the image in local storage once it's captured so that when the user moves away from the page and returns, the image returns too. But that's a different question!
I have a bit of what seems like a complicated issue(to me at least)
I've got an external javascript file generating html content for me. It's for tweets. It gives each one a individual ID, which I can see in the browser but of which is obviously not in my index.html.
The JS generates something like this in the browser http://i.imgur.com/8yxLYBa.png
Heres the generated div
<div class="twitter-article" id="tw1"><div class="twitter-pic"><img src="https://pbs.twimg.com/profile_images/461533054800900097/5h4n1K31_normal.jpeg" twitter-feed-icon.png"="" width="42" height="42" alt="twitter icon"></div><div class="twitter-text"><p><span class="tweetprofilelink"><strong>JGD</strong><br> #jdrawsthings</span></p><b><span class="tweet-time"></span></b><d>2h, Glasgow. Favorites: 0 Retweets: 0</d><br><c>Literally desperate and just need to secure a nice room in a nice flat close to DJCAD so I can move in June 20th</c></div><div class="favourite-item" id="fav1"><button class="favouriteButton" id="favBut1"></button></div><div id="twitter-actions" style="opacity: 0; margin-top: -20px; display: none;"><div class="intent" id="intent-reply"></div><div class="intent" id="intent-retweet"></div><div class="intent" id="intent-fave"></div></div></div>
Each one has a button assigned to it, which each also have individual IDs.
I'm wanting to use the clone function to copy across the contents of say, '#tw1' into '#faveDiv'. #faveDiv been a div on my index.html page.
<div id="favouriteStreamHolder">
<div id="favouriteStream" style="display: none;">
<div id="faveDiv"></div>
</div>
</div>
Here is the clone function I'm trying
$("input#favBut1").live( 'click', function(){
$('#faveDiv').html($('#tw1').html());
});
There's to much going on that relies on PHP that putting it into a simulator wouldn't achieve anything. Basically, that JS creates this. i.imgur.com/8yxLYBa.png A stream of 25 tweets of which the content is created in that js function having been pulled from a JSON file. I'm under the assumption that the .clone() function should copy all within the div and duplicate it into the div ive specified. At the moment. It's doing nothing, the div is just empty. Bit new to this, sorry. If theres anything else you need to know. Just say.
Any idea why this isn't working?
Try this (pattern)
html
<div id="favouriteStreamHolder">
<div id="favouriteStream">
<div id="faveDiv"></div>
<!--
duplicate `favBut1` in `feedHTML`,
substitute `id` `feed` for `favBut1`
-->
<input type="button" id="feed" value="click" />
</div>
</div>
js
$(function () {
// var feedHTML = `$.parseHTML(feedHTML)`
var feedHTML = $.parseHTML('<div class="twitter-article" id="tw1">..</div>');
$(document).on("click", "#feed", function (e) {
e.preventDefault();
$(e.target).siblings("#faveDiv").html($(feedHTML));
});
})
jsfiddle http://jsfiddle.net/guest271314/ReK9u/
I've review some similar questions, but I can't seem to find an answer to tie this all together. I am looking for a way to create a slideshow where images and a corrosponding block of text change every 10 seconds. (Below, when I state Rotate, i do not mean turn on an angle, I mean change from one visible slide to another)
For further clarification, lets call one block of text and one image a "pair". The block of text is contained in one and the image is contained in another . For this slideshow, I will have 10 pairs.
I can easily rotate an image inside utilizing a simple time delay javascript, but if I utilize a similar javascript to rotate the text, sometimes the Image and Text get out of sync with each other (don't change at same time.)
So.... my question is a 2 part question.
1.) Am I approaching this in the correct way, and if so, how do I ensure the text and images stay as pairs and rotate at the same time.
2.) Instead of rotating the content inside of the same div, should I create 10 div pairs (20 total) and create a script just to make 2 of the 20 visible at the same time? if so... any ideas on the script to do so?
Currently, I am using the following script to swap images:
<!--- Start Image Cycler Script --->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var timeDelay = 10; // change delay time in seconds
var Pix = new Array
("images2/slide_pics/92028.png"
,"images2/slide_pics/92026.png"
,"images2/slide_pics/92027.png"
,"images2/slide_pics/92534.png"
,"images2/slide_pics/92034.png"
,"images2/slide_pics/92555.png"
,"images2/slide_pics/92700.png"
,"images2/slide_pics/A73495.png"
,"images2/slide_pics/92701.png"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
// End -->
</script>
<!--- End Image cycler Script --->
<img name="ChangingPix" src="images2/slide_pics/92028.png" alt="" width="570" height="346" class="head-pic" />
(Sorry, my last comment decided to post itself)
As Kevin Nelson suggested, I would simply put the image and text in the same containing "block".
<div id="slider">
<div class="slide">
<img src="#" alt"this is the image" />
<p>This is the description for this particular slide</p>
</div>
<div class="slide">
<img src="#" alt"this is the image" />
<p>This is the description for this particular slide</p>
</div>
<div class="slide">
<img src="#" alt"this is the image" />
<p>This is the description for this particular slide</p>
</div>
</div>
That way you do not run into any issues with the text and images getting out of sync. There are plenty of free content/image sliders out there. I have been using Slides.js for client work as of late. It is really easy to set up and customize to your liking. It also has plenty of options (e.g. pause on hover, auto play).
Maybe I'm misunderstanding the question, but if you want to rotate text and images at same time, why wouldn't you create blocks and rotate the entire block. See this page:
http://rhmachine.flashfirehosting.com/
If I'm understanding the question correctly and you want something like that, let me know and I'll post the jquery plugin that I'm using to do it.
I have the standard setup of one main image and multiple thumbnails which can be cliced to change the main image. I'm using jqzoom on the main image but was having the common problem of the main image changing and the zoomed image just going blank. Looking through stack overflow i found some code that claimed to correct this, and in a way it does. But rather than allow each changed image to have a zoom, it makes the main image just a link to the large version, bypassing the jqzoom function call.
to show the two examples:
with the standard jqzoom code and thumbnails not showing zooms:
http://designerspider.net/clients/jge/project2.php?id=17
with added code and images just becoming links:
http://designerspider.net/clients/jge/project.php?id=17
the code i added was
$(".thumbs a").click(function(){
$(".jqclass").unbind();
$(".jqclass").jqzoom(options);
return false;
};
if anyone can see if i have missed anything, or need to do it a diffferent way, i'd appreciate any and all advice. I can't understand why adding the extra function would disable the main jqzoom feature :/
You may find, because you are using two functions side by side, one to change images, and the other to unbind the zoom function, and then rebind it, the 2nd function is finishing before the image has changed. So when the image does change, it still won't work.
Second problem, you are not actually unbinding anything.
So, try firstly changing to:
$(".jqclass").unbind(".jqclass");
Alternatively you could migrate a little more to jQuery. I have tested this:
You HTML would look like this:
<div class="projectphotos">
<div id="photo_1">
<a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="jqclass">
<img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
</a>
</div>
<div id="photo_2" style="display:none;">
<a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg">
<img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
</a>
</div>
<div class="thumbsdiv">
<ul class="thumbs">
<li>
<img rel="photo_1" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" width="80" />
</li>
<li>
<img rel="photo_2" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" width="80" />
</li>
</ul>
</div>
</div>
And your jQuery like this, I've explained each line:
var options = {
zoomWidth: 250,
zoomHeight: 250,
position: 'right',
yOffset: 0,
xOffset: 0,
title: false
}
$(".jqclass").jqzoom(options);
// Make the thumbnail look clickable:
$(".thumbs img").each(function() {
$(this).css('cursor', 'pointer');
});
// React to clicking on a thumbnail:
$(".thumbs img").click(function() {
// Get the photo linked to:
var photo = $(this).attr('rel');
// Unbind the zoom:
$(".jqclass").unbind(".jqclass");
// Hide the current image via its parent DIV:
$(".jqclass").parent().hide();
// Remove teh jqclass:
$(".jqclass").removeClass("jqclass");
// Show the clicked photo:
$("#"+photo).show();
// Add the class and the zoom:
$("#"+photo+" a").addClass("jqclass").jqzoom(options);
});
This is how you can clean the data from jQZoom:
$('.jqclass').removeData('jqzoom');
Because jQZoom saves the object data the following way:
$(el).data("jqzoom", obj);
I'm trying to figure out just how a particular function works on a Facebook page, and being no friend of JS syntax, am having trouble. Here's the question mark bit:
<a href="#" clicktoshowdialog="my_dialog" onclick="
(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=3b933f46f9c4c44981e51b90c754bfce&position=2&' + Math.random();
FBML.clickToShowDialog("app4949752878_my_dialog");
return false;">
<img src="linktopicture" title="Are your friends fans?" width="190" height="230" />
</a>
<div style="display:none">
<div id="app4949752878_my_dialog" fbcontext="aa3fcff8e653">
<div class="app_content_4949752878" style="padding:10px">
<div with hidden then exposed content...
The functionality of this is an image that, when clicked, pops out the previously hidden div. I know that the app###### is prepended to all JS used in Facebook to limit its scope. I'm confused by the anchor parameter of
clicktoshowdialog="mydialog"
What is that identifying, and how is it targeting the div that's exposed when the image is clicked? Thanks for any clarification, and let me know if I can post any more sample code.
According to the wiki it's just for opening the dialog (which is defined at the bottom). Facebook generates the JS to open the dialog. The attribute got post-processed and the JS code (that you see in the onclick= attribute) was generated on it's basis.