How do I add a blur BEHIND an html element? - javascript

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.

Related

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

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.

Updating overflow without removing elements from the div?

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.

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.

jQuery Tooltip Script

I am looking for a straightforward jQuery tooltip script. I have been having troubles finding one that has a fixed position and doesn't move with the user's cursor. If anyone knows of one let me know :) Thanks!
I always use this one here:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
It has the option to both follow the cursor AND keep it's position, along with a few other helpful options. The css is also very minimal and therfore easy to change.
See there's this thing here called a search engine...
Okay, okay... I'll be more constructive...
My favorite is qTip 2. It does everything you want it to do. and you don't have to leave money on the table...
I use qTip2 from http://craigsworks.com/projects/qtip2.
By default, it does not move with the cursor. There are a bunch of options and some themes. The best part is that the developer answers all questions in his forum within a day or less.
Also here are some good ones meeting your requirement that it not follow the mouse cursor:
http://plugins.learningjquery.com/cluetip/
http://edgarverle.com/BetterTip/default.cfm
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
http://labs.dmlogica.com/dmltip/#more-53
http://www.ajaxdaddy.com/javascript-tooltip-jtip.html
http://plugins.jquery.com/project/bt
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/
http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/
http://code.drewwilson.com/entry/tiptip-jquery-plugin
http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using-css3-and-jquery/
http://gdakram.github.com/JQuery-Tooltip-Plugin/
As a side note, I'd stay away from the tool tip plugin that's part of jQuery Tools by Flowplayer. IMHO, jQ Tools is poorly implemented, out of date and not supported very well by the developer or his community.
100 various solutions on this page (however, some are not jQuery):
http://www.webdesignshock.com/showcase/best-tooltip-scripts-plugins/
The one I always use is: http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/
It's three short CSS lines to customize colors and easy to work with!

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