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.
Related
<template is="dom-bind">
<iron-ajax
auto
url="http://localhost:9000/api/version"
last-response="{{versionNumber}}"
verbose
></iron-ajax>
<template is="dom-repeat" items="{{versionNumber}}">
<small class="u-ml+">{{item.first}}</small>
</template>
<template>
<small>[[versionNumber]]</small>
</template>
</template>
I'm a little bit lost with Polymer - I have an iron-ajax element which is set up to talk an API endpoint, which is returning the current version of my application.
I want to be able to bind this version number directly on the page. Is there something I'm doing incorrectly in the above code?
I tried using a dom-repeat template and attempting to grab the first item, but I don't seem to be getting anything. Same with attempting to one-way bind inside of a <small> tag.
My understanding is that if I'm within a dom-bind template, I don't have to define a custom element.
Yes, data-binding works inside of a dom-bind template without the need for a custom element.
One problem in your code is the template tag around <small>
<template>
<small>[[versionNumber]]</small>
</template>
The content of a template by itself won't be shown/rendered in the DOM. See http://www.html5rocks.com/en/tutorials/webcomponents/template/ for some detailed information about templates).
Using <small>[[versionNumber]]</small> inside of your dom-bind template with the extra template tag should work.
Another issue is, that iron-ajax by default handles responses as JSON, so will probably run into a parse error when it receives a string and last-response will get no value.
You would have to specify the handleAs property of iron-ajax accordingly.
<iron-ajax handle-as="text" ...>
And dom-repeat will only work for arrays.
I am researching how to add a layer of abstraction to Kendo UI components (e.g. grid).
One avenue I am exploring is wrapping up kendo components within a custom Polymer element; note that the Polymer element may contain more elements than just the kendo component.
This is one of my many attempts to get this working:
<polymer-element name="kendo-test" attributes="data">
<template>
<div id="grid"></div>
</template>
<script>
Polymer({
data: [],
ready: function () {
var element = $("#grid").kendoGrid({
dataSource: this.data,
...
});
}
});
</script>
The script block runs okay, but the grid element doesn't get rendered (in the shadow DOM or otherwise). The contents of the element variable show that Kendo has done its thing.
I've also tried embedding a script tag within the template so Kendo executes once it has been rendered, but then I can't bind my data property.
Does anyone know how Kendo UI (or any other DOM manipulating 3rd party package) can be wrapped inside of polymer elements successfully?
Thanks
Thanks to this answer I have found that you can reference shadow DOM elements if you use the Polymer reference and not the elements ID:
var element = $(this.$.grid).kendoGrid({
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.
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.
The Problem:
I am working on a site where I wanted to use JQTransform to quickly get a good looking form for a contact page. Also, to avoid the customer getting junk, I decided to add reCAPTCHA. I ran into the issue of JQTransform styles for the textbox causing the elements in the reCAPTCHA to be displaced.
It seemed like the type of problem that would have a simple fix but I struggled with it for a while.
I tried the solution at:
JQTransform - Exclude an element from styling?
This did not solve the issue, nor did a few other answers to the "How do you make JQTransform stop JQTransforming an element?" question.
What has produced usable results is adding:
<script type="text/javascript">
var RecaptchaOptions = {
theme: 'clean'
};
</script>
This changes the reCAPTCHA to a format that looks better in the form anyway. But it leaves 2 textbox styles. One that is your normal default textbox and another underneath that is the JQTransform rounded corner, light blue on hover/focus textbox.
Then I added:
$(function () {
$( "#recaptcha_response_field" ).attr('style', 'border: 0px; padding: 5px; solid #3c3c3c; width: 302px;');
});
and this alters the style that reCAPTCHA has for the textbox. Now the textbox looks like the other inputs of the form. I am pretty happy with the result.
(I know you're now asking: "Then why are you here?")
The Question:
Is there a way to have JQTransform ignore any input,checkbox,etc that is in the <form></form> by wrapping those in a div?
If I want to use JQTransform with some other plug-in in the future I would like to be able to just drop it in to a div like:
<div class="donot-jqtransform">
<?php
echo printCaptchaPlugin();
?>
</div>
or
<div class="donot-jqtransform">
<%= PrintPasswordValidationPlugin() >
</div>
That way I don't have to worry about what the code brings into the form and it will work and look as intended. That's the idea of having the abstraction in the first place, right? So if I want to switch out reCAPTCHA with another option, all I do is replace code in the printCaptchaPlugin() function and all should be bacon(good) for any form that uses it.
well i've made a new library - csTransPie – basing it on jqtransform – jqtransform is a great library but it really has many problems
I'm creating regular input fields (css styled) and you won't have those problems
https://github.com/pkoretic/csTransPie
It’s a work in progress but even now it’s better than jqtransform (more than half of the css rewritten, many bugs solved, clean css…)
now you can use it per element with just one class!
all suggestions are welcome!
Sorry if it's bad form to pile in on an old answered question, but I found this as I had the same problem.
I didn't want to add another library to my project, so I amended the jqtransform.js to include this line in the TextArea handler (line 221-ish)
if (textarea.parents().hasClass('jqTransformIgnore')) { return; }
I then just had to add the jqtransformIgnore class to the recaptcha div...
<div class="g-recaptcha jqTransformIgnore" data-sitekey="blahblahblah"></div>
... and that did the trick!