Update selector after flexslider has initialized - flexslider

I'm trying to use Flexslider as a carousel for a filterable list of items. If i use the selector ".slider > .visible", Flexslider loads correctly when the page loads. However, if click on the filter controls, the elements that have the class .visible change, but flexslider doesn't display the newly filtered items and instead rotates through blank items.
Is there a way to force Flexslider to refresh the elements after it has been initialized?

Related

Viewport position changes when loading more items using vue-masonry library

I am using the vue-masonry library. At first I have 6 items, so I crated a LoadMore Button to see more of them. The problem is, that when I am in mobile, the items load perfectly, but the viewport changes. see the image attached.
Is there something I can do, to prevent the scrolling movement?

jqueryLazy not triggering when images gets visibles via css changes

I have a bunch of images, say 100 images, in a web page, and only 10 are visible without scrolling the page. The first 90 images have a "myclass" class.
I manage all images with jquery lazy (http://jquery.eisbehr.de/lazy/), and it works perfecty if I scroll the window.
However, If I make $(".myclass").hide() before scrolling down, I see the last 10 images, which don't have the "myclass" class, bug jquery lazy doesn't "reveal" them.
Why?
Because lazyload triggers on scroll events.
$(window).scroll() (which triggers the scroll event on the window) is enough to solve the issue.
If the scrollable div is not the window object, use it instead of $(window).

How to make custom rule for redrawing elements in v-for?

For example I have scenes array drawn in v-for. If I change the first element of scenes Vue will redraw each element of scenes and if those elements are objects - each field will be redrawn as well.
My v-for:
<div
class="scene"
v-for="scene of scenes"
:key="scene"
>
<p>{{scene.name}}</p>
<iframe
style="border: 0"
:src="scene.frameURL"
></iframe>
</div>
In my case each scene element contains data to load specific page with iframe and also to show it's name. And now if I change some scene's name - each another scene objects will be redrawn and iframe pages will be reloaded.
How to tell Vue to redraw only field's been changed and to not touch another fields and elements?

How to pass tap event through WebView

I have a scenario in which
there is a GridView with zindex = 0
and
there is WebView with zindex = 1
If I make WebView beackground color transparent, I can see my GridView Items.
But they don't trigger click event.
Is there a way to pass tap event to GridView Items, while still having WebView on top of the Grid?
I have tried HitTestVisibility option, but not getting what I need.
You either have to use WebViewBrush which makes the rendered view non-interactive, but allows XAML elements to get input events or handle the taps in JavaScript inside of your WebView and pass them out through ScriptNotify.

Sencha Touch: How to get a list item template to be non-scrollable?

I have a working Ext.List object in my Sencha Touch application. I'm rendering each item in the list using the List's itemTpl property. I'm noticing that each individual list item can be scrolled in addition to the whole list which is definitely not what I'm after.
Does anyone have any advice on how to get the individual list items not to scroll? I've tried setting the outermost div in the itemTpl template to have a specified height and overflow:hidden...but this does not prevent the scrolling behavior.
Is it the default HTML scrollbar as rendered by the browser, or is it the built-in scroll feature of Sencha Touch (the iScroller which fades in and out)? If it's the latter, try setting the scroll attribute of that ListItem object to false.
If the former, there's obviously a problem with your CSS selector. Could you share your code if it's this one?
Have you tried to set the height of the list-element, so all the content of a single list-item is visible (so you can't scroll anymore)?