I've been trying to get this figured out for a few months now and have exhausted everything I can think of.
What I'm trying to achieve is: http://blue.bluestudios.kenzomedia.com/v0.7/ (some logic borrowed from iScroll4)
Notice that you can keep scrolling. This works fine in that example. The issue is that it's not completely smooth like iScoll4.
So I've been trying to do the same using iScroll4 with blue.bluestudios.kenzomedia.com/v0.8/ but I can't seem to figure out how to get it to "repeat" correctly. It seems to be something with startX and startY but I've tried so many different pieces of code at this point and really can't think of anything else to do. If you are simply moving your mouse/finger it will repeat with no issue. It's only when animating.
http://blue.bluestudios.kenzomedia.com/v0.8/assets/js/libs/iscroll.ext.js this is where I have the working _move function.
Again, tried to do the same in the animate function with no luck.
Any suggestions at this point would be extremely helpful. And this is for either figuring out how to get iScroll4 to do what I'd like or to improve the animation on v0.7.
I see that you have too many nested elements within your iscroll wrapper div. Remove all those div's that are not required. This degrades performance. I just made a simple test by deleting some of the nested element in firebug and the performance improved immensely. As the documentation in http://cubiq.org/iscroll-4 try to keep the DOM structure as simple as possible, remove all the unnecessary tags and avoid too many nested elements. I believe this will make your iscroll smooth once you try this out
Related
I've dug through the internet and found some things that seem to be going in the right direction but nothing that seemed like a complete solution. Here's what I found:
The upcoming CSS property backdrop-filter, which is currently only supported in Safari and behind a Chrome developer flag. Exactly what I need, but it needs better support.
The JavaScript library Blur.js, which seems to have all but disappeared from the internet. (Even the official website leads to a GoDaddy page.) It may have been a solution but I'm not sure what happened to the project.
The JavaScript library StackBlur, which seems to be a brilliant blurring solution, but I haven't the slightest idea how I would use it to blur BEHIND an element.
Any ideas? Perhaps someone has used StackBlur to do this and has a CodePen I could poke through or something? Basically, I have a grid of element each using jQuery UI Draggable that I would like to make translucent with a nice blur behind each one. The blur needs to update as expected when the elements are dragged around.
One last thought. Right now what I'm using is a pure CSS "solution", but it has some annoying limitations. If you are going to suggest a solution with only CSS it's probably what I'm already doing. The issues with it are the following:
The area behind the element isn't really blurred, just an arbitrary background image.
The edges or the blurred area do not cleanly cut off the blur. This is a bit hard to describe, but just trust me when I say that it's doesn't look great.
Unless I missed something huge in all my searching, I think I'm going to need JS for this one.
Barmar is correct. Give two objects the same absolute position. Blur one object and assign it a lower z-index. Bob's your uncle.
If you need some clearer specifics, then please post your code following the SO guidelines.
Unfortunately I'm posting this from mobile so I don't have the actual code in front of me.
However, here is the problem I'm having in a nutshell. I have a basic Angular controller with an array attached to scope with names of image files. In my HTML I am using ng-repeat with a filter: limitTo to display 9 images using the file names from the array. This works OK.
What I am trying to achieve is the ability to scroll the list using forward and back buttons. Also I want infinite scroll through the images. I was able to achieve this by applying
$scope.images.push ($scope.images.shift());
To the array.
This seems to work OK so far. However I cannot seem to figure out the ng-animate even after googling the problem and checking the documentation 10 times.
What I want is for the list of images to smoothly scroll left or right. None of the CSS classes of ng-animate seem to work right only the ng-enter seems to work on the very first image. When I get rid of the filter on ng-repeat the ng-move seems to work on all but the first and the last image. So right now all I can do is either animate all but the first and last and lose the ability to filter images OR animate only the first and last with the ability to filter.
Is there something obvious that I'm missing here?
Wow after this much searching and extensively refining my google search stumbled upon this answer: How can I animate the movement of remaining ng-repeat items when one is removed?
Seems to solve most of my problem. I'm not sure why this works but it does!
As for the subject, I've got problems with isotope and fluid layouts. I don't think it's really an isotope problem itself. Probably some render issue browsers have when objects are treated/positioned like isotope does.
Please see attachment. Sometimes it happens. Not always. Often, by resizing slightly the window (or sometimes just reloading) all the spaces just disappear and the layout gets right.
I think it's a quite common problem. If I take a look to thumbs dimensions in firebug, well, they're all just right. So I guess it has something to do with the browser rendering capabilities.
Any idea?
After searching a bit more, I think isotope positions objects in a way that's going to fool the browsers rendering engines when elements are sized with percentage values. Using the percentPosition not only doesn't solve the trick, but cause filtering animations to be far more sluggish.
Modifications to isotope need too much work for me now, but I've just found another script that seems to be specifically coded with responsiveness in mind (thus, demonstrating how common the problem is). I didn't try it yet, but I took a look to the code and I think it's really well done:
https://mixitup.kunkalabs.com/
So, for now this is the answer. Hope it helps.
A brief note: currently, mixitup doesn't support mansory layout out of the box. This was not a problem for me though, since my layout is a regular square grid.
If I used:
parentNode.removeChild( divHere );
It does work and the scroll bar for the overflow updates accordingly. If I use JS to 'divHere.style.visibily = "hidden";' well that doesn't work anymore. What I've done pretty much is create 115 divs that are in a container div and the user can select filters to show only the images they want, all the divs have a background image and are essentially just an image with a name under it.
So I have 2 questions:
1) Is there a way to update the overflow and make it not take hidden elements into consideration?
2) If 1) isn't possible than when I use removeChild to remove a div from the container, it does indeed disappear but what exactly happens to it? Does it disappear off the page because it's not added to any element on the page? So it essentially works like it's hidden? I don't have to worry about people seeing the images in some completely weird spot in some lesser used browser?
and well 3) If you have a better method of doing this it would be greatly appreciated
Thanks in advance for any help
The removeChild() method removes a specified child node of the specified element and returns the removed node as a Node object, or null if the node does not exist.
That null means that the element is now removed from your mark-up.
You should use it to not let the browser take that into consideration, as the browser will not find that element in the mark-up.
You can do it in this way as well:
$(document).remove(object_to_remove);
FInd more about it: http://api.jquery.com/remove/
I believe I may have a response for the third part of your question. That large number of divs in your containing div and the usage of filtering make me think you might want to look into using the DataTables plugin for jQuery (http://www.datatables.net/). It has some very nice features for sorting/filtering/etc. a large number of data elements and supports a variety of data sources. There are also some plugins for the plugin if the basic functionality isn't enough for you.
There is a bit of a learning curve if you want to do more complex stuff with it, and it might be tricky to get used to if you haven't worked with jQuery much (though being someone who hasn't worked with jQuery all that much due to not doing much web development, I can say that I quite like using it whenever I get the chance, although that may just be due to me enjoying learning how to do new things in programming), but I feel that if you're willing to spend the time on it you will have something much more maintainable than what you currently have.
i am trying to combine my draggable sortable stuff with some scale code that works well for me. i just failed to find a good solution yet.
take a look at that:
http://jsfiddle.net/UXLAE/7/
i've commented out the scale code so that you can see how the app should actually works.
you have the top panel and can drag items from there to the bottom panel (items are cloned).
in the bottom panel you must be able to sort the items.
now i also want to be able to scale every item on mouseover, both in the top and the bottom panel. the scale must be an overlay and must have the same center as the source item. i failed to do it with .animate() or .effect("scale") which would have made things a lot easier, but i managed to write some custom code that works pretty well (the part i commented out). my problem is that now i have no idea how to combine the custom code with what i already have. they kinda break each other ;) but look for yourself.
would be nice if you could post some ideas or even a solution.
greetings
You have your original element working well enough but I see that your commented out code breaks the functionality.
Have a look at your droppable code:
accept: "#topSquareList li",
Your scaling function has made a clone which is not a part of #topSquareList. I suspect this is why.
When you use clone(), this clone is not a child of #topSquareList (only the original is) which is why your selector does not match it in your droppable code. You need to sort out what you want to drop and make an appropriate selector.
Update:
After some fiddling around, I came up with this: http://jsfiddle.net/UXLAE/27/
Your scale code is now working in conjunction with dragging/dropping/sorting. You should compare what I made to your original code to figure out why it wasn't working - there were more than a few reasons why. Does it help?
If you can use CSS transformations, then simply adding the following rule will accomplish the scaling without any JavaScript and therefore zero impact on the jQueryUI dragging, dropping or sorting.
.square:hover {
-webkit-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
-moz-transform:scale(1.2);
transform:scale(1.2);
}
Native browser support for transform is not complete, but the major modern browsers are fully supported. There is a workaround for IE < v9 if you need to support those browsers.