I am thinking of using Masonry plugin in one of my projects. What I wonder about if it's possible some way to detect empty spaces that sometimes appear in the layout when divs are positioned. If I had a way to check such blank spaces, I could fill them with some generated divs with some data in them.
I would play with offset().left. For example:
Store a masonry item in variable "item"
Check if item.next().offset().left equals item.offset().left+item.outerWidth(true)
That will check if the item next to our starting item is actually there. Note that outerWidth(true) makes sure the margin between items is also counted.
Hope my theory makes sense to you,
Good luck.
Related
What I want to achieve is to make it possible to the user to define as many ranges inbetween a start-value 0 and a max value, i.e. 1000. I thought about how to do this in the best way and I came up with either idea:
Either I could dynamically add and remove sliders on the fly to the page. Make the min-value of the first slider fixed to 0. And somehow link them, i.e. when changing the upper-value of the N-th slider, automatically adapt the lower-value of the (N+1)th slider and vice versa. Problem is that it's some hassle to get this working as I need to also adapt the previous slider (N-1) and next slider (N+1) when removing the slider N inbetween.
Then I thought of the following:
Have ONE slider with a fixed lower-value to 0 and with at least two handles, where the user can add and remove handles on the fly himself. There wouldn't be any gaps allowed, i.e. every pair of consecutive two handles would always define one range. Something like this:
jsfiddle.net/NkjQr/1781/ (this example would define two ranges) with fixed value at 0 and on the fly add/remove handles. Is this possible? Couldn't find any jquery plugin to do this easily...
Or do you know an even better solution? Im looking for the one which is the most easy to implement myself.
Thanks a lot
I have 115 div's that are 120x120 and each has a different background image. Each div has multiple class names that I use solely for the purpose of a search bar, using getElementsByClassName. For example think of 115 humans, but being able to write 'female' in the search will result in hiding all the males and only showing the females.
Is this the wrong way of doing a search filter? I set the divs to display = "none" to hide them and block if they are part of what's being searched. I'm just worried about using multiple empty class names as a search filter. Is it alright to do it this way or is there a more convenient way that's done specifically for something like this?
You can use a more data-based approach (I mean, they're all data-based... let's say it's more like a database) by keeping an array in JavaScript of your 115 records. So you have a flat-file database, in effect. If your javascript skills are good for that, it would facilitate using an approach that generates divs instead of hiding them -- which would solve the resources issue mentioned by Campari.
It's actually much more scalable than your current solution. For one thing, you can keep the array in a separate .js or .ini doc for easy maintenance.
I think it's an ingenious way of doing it but it really depends. Will it stay with 115 "items" or are you planning on adding more? Because if you are planning on adding more it'll probably not scale well. I think it's already too much, not because of the search method on itself but because you have >100 hidden divs with background images eating up all the browser resources.
What you could do is store your items in a database table with a field for the background image path, and a field for the keywords, and when you perform a search and display only those who have the matching keyword instead of hiding all those which don't.
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'm using jQuery Isotope to lay out a list of file entries contained in an <ol> element. I would like to keep Isotope from moving several items at the beginning of this list, such as an item indicating a parent folder. If I sort those elements using Isotope, the "parent" entry will be moved around which is very annoying.
Is there any way to tell Isotope not to change an item's position apart from "tweaking" the sort rules to assign a special sort index to it? This is the way it works now, but I am looking for a cleaner solution.
If needed I can provide a simplified jsFiddle test case.
This question was asked quite some time ago, and maybe back then the functionality wasn't available.
I just stumbled upon it and wanted to add that there's a "stamp" functionality, that tells isotope to layout the items around the "stamped" element.
http://isotope.metafizzy.co/methods.html#stamp
Stamps elements in the layout. Isotope will lay out item elements
around stamped elements.
// jQuery
$grid.isotope( 'stamp', elements )
// vanilla JS
iso.stamp( elements )
So the thing is I have some blocks in my site (floating divs) which I want to be able to re-order, to make them take less space.
Each of my blocks' width is either x, 2x, or 3x (x is a number). Their width will never change, but their height can change.
I know I can create some JavaScript code to do handle this, but since I'm already using jQuery and I know about the large amount of jQuery plugins out there, I came here first to ask if there is already a plugin which does this, in order to save some time.
Masonry plugin for jquery http://masonry.desandro.com/ or even better the Isotope http://isotope.metafizzy.co/