Is it possible to know where an image has been dropped?
Assume we have a checkerboard with different divs
<div id="jquery-wrapped-fine-uploader"></div>
<div id="checkerboard">
<div id="A1" class="ffup"></div>
<div id="A2" class="ffup"></div>
<div id="A3" class="ffup"></div>
<div id="A4" class="ffup"></div>
......
</div>
<script>
$(document).ready(function () {
$('#jquery-wrapped-fine-uploader').fineUploader({
request: {
endpoint: 'endpoint.php'
},
dragAndDrop: {
extraDropzones: [$('.ffup')]
}
});
});
</script>
First of all, your code will only designate the first ffup div (A1) as it currently stands. You will need to pass a selector for each individual drop zone into your extraDropzones array. The jQuery wrapper will only pass the first element covered by your jQuery selector to the library. Ideally, it would pass along all items represented by the selector, but, to do this, it would have to be aware of the intended type of the parameter. The jQuery wrapper must convert all jQuery objects to HTMLElements before passing the data on to Fine Uploader's core code (which is not aware of jQuery). This is something I'd like to look into more in the future, but this is the way it has worked since 3.0. Note that this limitation does NOT apply to the target of a Fine Uploader plug-in instance, i.e. $(".myTarget").fineUploader(...).
As to your question, Fine Uploader does not currently pass any information along to callbacks that would allow you to determine which drop zone received an associated file. This is an interesting feature, and I can see how it may be useful. Please open up a feature request in the issue tracker so we can discuss and prioritize this for a future release.
Related
Tried mixing some jQuery but everything is based on appending, something I don't wanna use because i'm trying to base my design completely on binding and stamping templates and elements. I tried using scrollTop in various ways but I always ended up being depended on what's appended on the local DOM. If i'm not mistaken, dom-repeat has nothing to do with appending, but with creating the same stamp and bind it multiple times (correct me if i'm wrong, I started looking into Polymer 1 recently).
I only found this one good example of using infinite scroll over a repeating template https://github.com/chadliu23/event-infinite-scroll but unfortunately it's not what i'm looking for as I'm mixing iron-ajax parsing data into my template. Simulating chadliu23's example lead me into a silly middle step of creating an extra array and pushing data from ajax into it, but it is totally something I don't want to do cause it's messing with my repeatable template restamping.
Also realized that there are ways to create infinite scrolling-ish effects with css but can't figure out any other way to implement this but in sets of images.
Meanwhile, sadly, it seems like iron-list is nowhere near ready yet and I can't find any way to use the concept idea of core-list into polymer 1.0.
So..... Any suggestions on the table?
I think you need an item-page component:
<dom-module id="item-page">
<template>
<iron-ajax id="ajax"
params="{{_composeParamsForPage(page)}}"
last-response="{{pageData}}">
</iron-ajax>
<template is="dom-repeat" items="{{pageData}}" as="item">
<!-- Compose your list of items for this page here -->
</template>
</template>
<script>
(function(){
"use strict";
Polymer({
is: 'item-page',
properties: {
page: {
type: Number,
observer: '_updatePage(page)'
}
},
_updatePage: function(page) {
this.$.ajax.generateRequest();
}
});
})();
</script>
</dom-module>
Then, to create an infinitely scrolling list:
<template is="dom-repeat" items="{{pages}}" as="page">
<item-page page="{{page}}"></item-page>
</template>
It's important that in your item-page component the iron-ajax does not have auto set, because the page property will initially be set to undefined. Instead, you should observe page and act accordingly only once it's updated to something other than undefined.
I have 3 divs parallel to each other holding some information. I want three new divs, in the same position as the previous ones (refer image), take the position of the last ones while pushing the same downwards.
I want this action to happen dynamically i.e. when someone enters information on the back-end module, the more recent information takes place of the older one.
I am pretty new to Ajax and jQuery but I am sure this is the way to go. Can someone please direct me to a suitable direction?
Image: http://img12.imageshack.us/img12/4149/us56.jpg
You are right, Ajax and jQuery can be the way to go.
Simplest solution is probably to put the three blocks into one div and call
$("#parent-div").prepend();
on it. You can arrange the blocks how you want using CSS
<div id='parent-div'>
<div class="col left">Hello World</div>
<div class="col">Hello World</div>
<div class="col">Hello World</div>
</div>
Tried it out on jsFiddle, just have a look.
http://api.jquery.com/insertBefore/
example:
$('<div>new div</div>').insertBefore('#divName');
I want to add multizoom.js in my AngularJS project.
This is my index page:
<body>
<img id="zoom" ng-src="example.jpg" class="example ng-class">
<div ng-view> </div>
</body>
and this is detail page:
<img id="zoom" ng-src="example.jpg" class="example ng-class">
My problem is jQuery multizoom plugin doesn't zoom image which is in AngularJS's ng-view part.
If image is not in ng-view part multizoom works fine.
This is because I presume you are initialising the multizoom behaviour on the DOM ready event, using $(function() { /* ...(multizoom init code)... */ }); or $(document).ready(function() { /* ...(multizoom init code)... */. If so, that will only be run once, and likely before the details page is loaded into the <div ng-view></div>. As a consequence, it will not be able to find the image on that page it is searching for as it hasn't been loaded in yet.
Instead, what you need to do is initialise your multizoom functionality whenever the ng-view content is loaded, using the event that is emitted, like so:
// (inside some function with $rootScope available)
$rootScope.$on('$viewContentLoaded', function() {
// ... (multiview init code here) ...
});
Does that make sense?
As a small side note, don't have multiple elements with the same ID, it's not a good idea. Instead, use a class to signify the images you want to apply the multizoom plugin to.
I've got a simple AJAX POST form set up in a jQTouch application. We're talking out-of-the-box simple here:
<form id="contact" class="topPage" method="post" action="/process/mobile-submit.cfm">
<!-- Various form guts go here -->
</form>
And this works just great. My users punch in their info, my server-side script does its job and gobbles up the lead data and spits back an out-of-the-box simple response.
<div>
<div class="toolbar">
Back
</div>
<div class="info">
<strong>Thank You For Your Submission</strong><br />
We have received your inquiry, and blah blah blah jibber jabber.
</div>
</div>
Everyone's happy... except those of us who are trying to track the conversion in Google Analytics. Now, I've got virtual pageviews set up on each panel in this application using the pageAnimationEnd event, which is easy as pie when you know what selectors those are going to be attached to in advance, but when jQTouch creates a new segment from the form return, it has a generic serialized ID like #page-N.
I've tried adding a loose script block into the form return. That works fine for Firefox on my desktop, not so much for Safari on my phone.
Since I've allowed jQTouch to handle the AJAX particulars for me in this instance, is there a straightforward way to attach a success handler to it? Or am I better off trying to bind a pageAnimationEnd handler on $('[id^=page-]') and hope the business doesn't want me to do anything else with ad hoc form returns until we replace this app with one written in jQuery Mobile?
Worked it out.
The return fragment can declare its own ID, naturally, and jQTouch will then treat it as though it were an original part of the document. I had previously assumed jQTouch didn't give a toss about what attributes I gave the fragment; I was wrong.
This means that you could goTo it like any other portion of the document. It also means that you can bind a pageAnimationEnd handler on the return fragment either by ID or by class name and it will behave as expected. Thus:
<div class="formResult">
<div class="toolbar">
Back
</div>
<div class="info">
<strong>Thank You For Your Submission</strong><br />
We have received your inquiry, and blah blah blah jibber jabber.
</div>
And:
$('.formReturn').live('pageAnimationEnd', function(evt, info) {
if (info.direction == 'in') {
// Goal completion code
} else {
$(this).remove();
}
});
I'm using Dojo 1.5, and I'm trying to create a context menu that can invocate a function myFunction passing the event and other arguments. So far I've the following code:
<div dojoType="dijit.Menu" id="bankerMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onclick="copyDocuments('bankerFolder');" iconClass="dijitEditorIcon dijitEditorIconCopy">Copy to Client</div>
<div dojoType="dijit.PopupMenuItem" onclick="doNothing()" iconClass="dijitEditorIcon dijitEditorIconCopy">
<span><s:text name="CopyTo.label"/></span>
<div dojoType="dijit.Menu" id="bigsubmenu">
var="distributionList">
<div dojoType="dijit.MenuItem" onclick="myFunction(event,'bankerFolder',1)"><s:property value='distributionListName'/></div>
</div>
</div>
</div>
But it is not recognizing the 'event' that I want to pass to the function. I know I can susbtitute the call using this:
<div dojoType="dijit.MenuItem" label="Some menu item 2">
<script type="dojo/method" event="onClick" args="evt">
myFunction(evt,'bankerFolder',1);
</script>
</div>
but I would like to simplify it and used the first syntax. How can I do that?
Passing event literally would likely end up leaving you at the mercy of cross-browser inconsistencies. However, since events connected through Dojo worry about this for you, and since onClick is a widget event that already receives the event object as an argument, you should be able to get away with the following:
<div dojoType="dijit.MenuItem" onClick="myFunction(arguments[0],'bankerFolder',1)"><s:property value='distributionListName'/></div>
Also note the capital C in onClick - widget events always use camel case; they are not actual DOM events, though they are often mapped to analogous DOM events. I get the impression you were testing with capital C though, based on the problem you described encountering.
Here's a simplified example of the idea working (initially provided/suggested by Dustin Machi in the Dojo IRC channel): http://jsfiddle.net/xwFC5/5/
Following from Ken's comment to the answer above, I managed to figure this out as outlined here: http://blue-networks.net/wp/?p=37 It connects to onCellContextMenu and pulls the relevant information out of the event, saving it into the grid object.