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/
Related
I have project where I would like to display sensor readings from the building. It contains temperature, date and name of the room. It is in one small simple square.
I would like it to be displayed on the TV monitor( I am unaware of what the resolution will be, but that can be calculated with JS).
Problem is, I don't know how many readings there are going to be and I need to show them all on the screen(Since it is going to be on monitor without possibility to scroll). I don't know how to calculate their dimension so they would fit. I didn't find any miraculous css property for this so I am fine with creating some JS function. However, I don't have an idea where to start. I would know the number of sensors and resolution, that is all. This number of readings will change over time though.
Any JS libraries that could do this? If none, what function should I write?
Edit: Touffy's solution works great! I found this article for others in needs: Dynamic number of rows and columns with CSS Grid Layout and CSS variables
You can probably decide which browser will be used for this sort of application, so you can pick one that supports CSS Grid Layout. With that, you can do what you want without any JavaScript by specifying the grid container to take the whole viewport (100vh and 100vw), and letting it arrange the grid items with the constraints you like (number of columns, spacing…).
I'm looking on how to implement pagination/page breaks with page formats (A4, letter, etc.) using a rich text editor (like the Medium Editor).
The font family, font size, line height, margins are going to be fixed, as this is a very specific case study. I'm thinking of handling zoom levels in pure CSS (scale), instead of directly modifying widths, heights, etc.
Also, for the sake of the experiment, say I'll be running this in Chrome only & browser rendering differences aren't really an issue (but even if I were building this for various browsers, I'd try and use more precise units, such as "px", "em" for the font-sizes, page widths, margins between elements, etc. - probably just "px").
Keep in mind I'm not asking about "#page" rules or print rules, I know how to achieve what I want with those when I print out a PDF, but rather direct in-browser implementation. Printing should (and will) be handled by "#page" and I got no issue to handle page breaks there when I need them.
In the end, my question is - where do I start?
I imagine taking into account word-count and "h(1,2,3...)", "p" tag margins, along with case-specific CSS rules (break-after, break-word, break-line, etc) - even though taking those into account with js probably won't be very easy.
Probably even include the page height? Say, if the format is A4: 596px x 842px (72dpi) - take it into account when the total height of "each" element inside the page == height of page - [sum of bottom and top page margins]?
Other than the latter (with a simple js loop), if someone has any pointers, or maybe even a code snippet (or a plugin?), I'd be very grateful! Thank you!
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 looking for a jQuery version of the Dynamic Drive slideshow here
I have used the jQuery cycle plug in many times, but want to display more than one image at a time in a continuous scroll. Any suggestions? Thanks!
Why do you need it to be jQuery? The one you post the link to is in Javascript which is just as crossplatform and crossbrowser as a jQuery one would be.
I have had a cursory look for any jQuery implementations anyway, but like you say, most people seem to just display one image at a time in their image carousels/slideshows.
How do I turn off the tips temporarily? I see the ability referenced on the website a couple times, and in this forum as well, but for some reason I can't find the command that turns them off. I just need to disable them for a bit, then re-enable them.
Is there a way to give a tooltip a maximum height? I have a bunch of tooltips, some of which are only one line, some are 100 lines. I'd like to have the one line tooltips pop up very small, and the large ones pop up large, with a scrollbar for the really large ones.
Thanks.
Edit: Sorry, not sure why I assumed everyone would know exactly what I was talking about.
http://plugins.learningjquery.com/cluetip/
Edit 2: I've gotten the maximum height thing working. My problem was trying to implement it using the cluetip interface. All I needed to do was specify some CSS to do the deed. Still having trouble disabling the tips, though. Seems like it should be simple, not sure why I can't figure this out!
Yes you can, take a look here: http://plugins.jquery.com/node/8405#comment-3532
it basically means to insert cluetip call into your source element's 'hover' (or anything else) event handler and evaluate a condition before calling cluetip...
You can set up a fixed height, or an 'auto' height. If you want to have that effect you should modify the plugin code itself.
EDITED AFTER YOUR COMMENT:
Clearer now, Things change a bit:
You have to set a global flag, a boolean that is set to true every time a tip is shown (you can set it in the onActivate callback) then...
You have to use the function which I've linked to, to check whether the flag is set to true, if it's not then you can show your tip, anyway...
Don't forget to set back your flag to false when the tip is closed. The best way to do it is by inserting an 'onClose' callback in the plugin code (line 352, clueTipClose()).
If all this todo stuff seems a pain in the..., well, I think it is. Take a look at SimpleTip http://craigsworks.com/projects/simpletip/ , which has everything you need.