isotope.js - how to solve rendering wrong spaces in fluid layouts - javascript

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.

Related

How do I add a blur BEHIND an html element?

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.

Optimize laggy resize

I'm having some trouble figuring out this problem, but I reckon it might be quite common, or have a well-known solution. I did some research but I can't quite see how to proceed here.
I have a page with a series of slides, and a small js script to go from one to the other:
http://analucia.net/test/index2.html
The slides have a max-width: 100%; (and height) so they're resized witht the rest of the window. This is very simple and works very well with 2 or 3 images, but with 30 it becomes extremely laggy, especially with large screen sizes.
I guess manually resizing the window create a lot of events that become overwhelming, especially with large pictures. My intuition would be to use some javascript to "transcribe" all these events into one or two, and thus handle the window resizing in an orderly way.
I found this: https://css-tricks.com/debouncing-throttling-explained-examples/
but it looks quite specific, and I'm not sure it could apply here
So my questions would be:
Would this kind of approach be a good solution to this problem?
My understanding of js is extremely limited and I wouldn't know where to begin to even apply that idea of having a script to get the resize information, so to speak
Any help is very much appreciated!

Javascript 3d-like carousel for complex content

I have been spending about 7 hours today, trying to:
a) Create my own carousel using intensive javascript and CSS3 features (see this pastebin)
b) Setup and integrate the Roundabout plugin from FredHQ
c) Setup and integrate the Cloud Carousel plugin from Professor Cloud
Both third party solutions were tried because i failed in accomplishing what i wanted by myself. Unfortunately, both solutions do not work the way i would require them to. Both are amazing for displaying images, but i need to show more complex content, a heavily styled DIV with multiple encapsulated DIVs inside, PNGs with transparency, and so forth.
FredHQ's version did not work as it did not scale the content inside my DIVs. Not even the text was scaled, until i removed the font-size parameter, but that is something i need for a proper layout. Cloud's version works with images only.
I have hit a wall and i cannot seem to find any other solution. It seems the word "carousel" is used for slideshows and sliders, so i find hundreds of such solutions, but not one that works like i need it to.
What i need is decreasing opacity on further objects, while the center one is at full opacity. Also further objects should be scaled down by certain scale factors. It does not have to be 3D (not desired, even), but due to the scaling it would look 3d-like.
It does not have to be jQuery, although its probably a good idea if it is.
Does anybody know or can anyone point me to a proper solution?
Have you looked at monete(git), http://www.jacklmoore.com/monte? 184 line. Not sure you'll find something easier to dig into and make it work your way. Hundreds of solutions? So I'll take it you looked at the cycle plugin as well. That's probably one of the most mature and robust ones out there. You're asking for a lot in your question and these kind of question just wear people out after a while. That's all.
You probably won't find anything that fits your needs EXACTLY and you'll have to roll it yourself or hire someone. If you get something going and come back for specific help, you'll fair much better.

infinite scrolling in iScroll4 or improve inertia/momentum

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

What's the best way to apply a drop shadow?

What is the best method for applying drop shadows? I'm working on a site right now where we have a good deal of them, however, I've been fighting to find the best method to do it. The site is pretty animation heavy so shadows need to work well with this.
I tried a jQuery shadow pulgin. The shadows looked good and were easy to use but were slow and didn't work well with any animations (required lots of redrawing, very joggy).
I also tried creating my own jQuery extension that wraps my element in a couple gray divs and then offsets them a little bit to give a shadow effect. This worked well. It's quick and responsive to the animation. However, it makes DOM manipulation/traversal cumbersome since everything is wrapped in these shadow divs.
I know there has to be a better way but this isn't exactly my forte. Thoughts?
ShadedBorder is a good looking and easy to use Shadow-Library. check it out
You don't need to wrap those shadow-divs around the other content, just set them a little askew and place them on a lower z-index !-)
if your main problem is to navigate the DOM, just add a class and/or id to your element, and refer it with JQuery selectors. even better if you store the ref in a variable, so you don't need to select it too frequently
Although it is yet to have full cross-browser support, you might like to try using the CSS 3 text-shadow property.
It largely depends on how frequently your images will need to be changing, and the colored areas that they'll be covering. Because I'm guessing that you'll be needing to pay attention to IE6 compliance, most alpha-PNG solutions will cause such horrible jittery-ness that you'll spend more time in performance optimzation than you would have wanted to guess.
To solve this in the past, since our images are modified less than once a month, we call the images through a caching-PHP script which automatically applies the shadow using a pre-defined background color so we don't have to rely on any transparency. This results in faster downloads (fewer HTTP requests) and a faster-interface because there's less Javascript/CSS magic in the works.
I understand that this is a very old-school solution, and the above solutions would be entirely acceptable if your images were static, but being cross-browser compliant and animated will likely force you to do a solution of this style.

Categories