Develop Reference

jquery isotope maximize items to fit parent container

I have a fixed height and width container (2480px x 3508) which I would like to dynamically fill with content. Content being between 6-12 images. My question is how I could dynamically size the images relative to their total number and to the size of the container. The images are all approximately the same size, only varying slightly based on their orientation. So basically when there are more images, they are smaller, and when there are less they are bigger and they fill the container as best as possible.
I have not been able to find any Isotope demos which match this? I know there is also packery, and masonry.
Any ideas, tips or examples would be great.
Thanks!

Imagefill.js does exactly that. It is aimed more at individual images but it can also be made to work on a series of images and in combination with Packery.
http://johnpolacek.github.io/imagefill.js/

Changing the width of HTML div element automatically using jQuery

I have 4 div elements on the same line, each set at 25% width to fit the screen. When I click on a div it should disappear, which I have achieved using jQuery. Then, I manually set the width of each of the divs to 33%.
I can keep on doing this manually for more clicks, but is there a way the divs automatically resize them selves like this using jQuery and even continue when 2 divs are on screen so each would should be 50%?

Creating tables will solve this problem. Table columns will automatically resize when you delete one of them. You can easly make div's behave like table.
http://snook.ca/archives/html_and_css/getting_your_di

In that case, you don't need to specify fix width e.g 25, 33.. just set it to auto:
width: auto
That should do the trick for as far as i could understand your question. If that didn't help, you should include your css and html code in the question.

Auto-size thumbnails in a both left/right justified frame/window

I am doing on a webpage for display a large amount of pictures/thumbnails. What I am looking for is to auto-resize the pictures, make each line has fixed height, and the right margin of each line is also equal. Even the images are reformatted when I change the size of window, the above mentioned style is kept.
That is quite similar with what google did when displaying their images search results:
Google image example (resize your browser window and you may find what I'm trying to say :-) )
Anyone has idea on this would be much appreciated! Thanks

According to me there 2-ways, 1)by css 2)by js
1)CSS: you can add this in your css, this will resize your thumbnail accordingly.
img{max-width:100%;}
2)JS: Using js you can resize the thumbnails based on the available space and also decide on how many images do you want to show in one row.

How to get the output in relative units instead px by modifying this jQuery plugin of making custom style dropdown?

Scenario
I'm making a Responsive website where I need to give multiple sizes to dropdown for various screen sizes with custom styling
What I tried
i'm using this DropKick plugin to make custom styled dropdowns it adding width in px. it's very good for me
this is example I made using the plugin http://jsfiddle.net/jitendravyas/HtW8C/1/
Problem
I want to increase or decrease the width and height of dropdown by increasing or decreasing the size of font inside dropdown but when i increase the font-size, dropdown doesn't scale accordingly
Link of plugin https://raw.github.com/JamieLottering/DropKick/master/jquery.dropkick-1.0.0.js
Edit:
I changed px to em here https://github.com/JamieLottering/DropKick/blob/master/jquery.dropkick-1.0.0.js#L117
But this plugin adds a inline width which i don't want. I want to control width by CSS

This is a situation in which the CSS !important rule is actually useful and a valid solution:
a.dk_toggle { width: auto !important; }
This will let you change the font size and have it expand automatically. Or, you can set an explicit width of your choosing, as long as you use that !important rule.

What about when you need to target multiple dropdowns on a page with different widths?
How to individually target multiple dropdowns in CSS for Dropkick Plug-in

Large contents within container size

I went through many posts and couldn't find a solution. (I came across with a similar problem in this post, but I can't really related to my exact situation).
Issue: I have to display a large data table (with more than 30 columns) on a screen. My challenge is - the client doesn't like Horizontal scroll bar of any mean.
I am thinking of splitting a table into pieces and using a simple sliders like Jquery: "serialScroll" or "ContentSlider". However, here is another challenge: for 508 compliance, my table needs to be a single table instead of splitting multiple table in different slides.
I am visioning I need a "view finder" div on top of "large table" with control to shift table the size of div Left and Right, http://img202.imageshack.us/i/tableviewfinderidea.jpg/.
My question is:
Is there a JS or Jquery solution out there doing this? (I seriously searched two weeks without any luck.)
Is there any other recommendation?

using a container div styled with 'overflow:hidden' allows you to do the masking as shown in your graphic. then it's easy to move the masked content by setting it to 'position:absolute' and tweaking the 'left' value.
i put a short example of this online at http://jsfiddle.net/BDZPj/
only thing is, you have to know the height of the content being scrolled, as you have to set a height for the mask too. you could read the height from the table on document.ready though, and apply it to the container initially.
anyway, like 'Pointy' says in the comment above, using a standard scrollbar is surely the best way to do it - sometimes the client has to move, too.