Specificsize javascript plugin powered by jquery

We have made a plugin with which you can display the specified number of lines of elements, and hide the rest.

The plugin may be useful for those who need to hide some of the elements, because a lot of them are probably displayed. This plugin makes it possible to display elements in several lines, and hide the rest. Elements can change their sizes, but it will still line up the elements in the specified number of lines, as for example below the gif animation shows that we have specified the maximum number of 2 lines and the elements are lined up exactly in this amount.

Of course, this can be done by layout to hide part of the list vertically, but there is such a moment that some element can change its size vertically, then the plugin will help in this case.

specificsize works on jquery !!!

Download plugin specificsize archive:

download github

[info about files]

I am displaying an example of a code using for a list

I am displaying an example of a code using for a list:

There is an example where you can check:

Go to page

Option List

1. Specify the number of displayed items:

1) Maximum number of displayed:

Default: countMaxLine: 1
countMaxLine: 2
countMaxLine (type integer)

or specify in the attribute

2) Maximum number of displayed using class:

Default: classPrefixCountMaxLine: undefined
classPrefixCountMaxLine: 'list'
classPrefixCountMaxLine (type string)

The trick is that the plugin looks for a class with a prefix list and next to the indicated number and then this number is applied in countMaxLine property and displays elements in 2 lines

3) Changing the Maximum number of items to display when changing the screen will trigger media:

Default: media: {}
media: { 900: 2, 767: 1, 500: 3,}
media (type json)

First it outputs for size less than 900 in 2 lines, if less than 767 in 1 line, if less than 500 in 3 lines

Changing the Maximum number of items to display when changing the screen will trigger media

or specify in the attribute

2. Animation:

1) Increasing and decreasing items:

animation: 'scale'
animation (type string)

2) Shifting elements to the right:

animation: 'bias'
animation (type string)

3) Pull items down:

animation: 'top'
animation (type string)

4) Remove animation:

animation: 'none'
animation (type string)

5) We indicate the overall speed of the elements:

Default: speedOpen: 300
speedOpen: 100
animation (type integer)

6) Specifying the speed of increasing elements works with the property animation: 'scale':

Default: speedScale: undefined
speedScale: '500'
speedScale (type integer)

There are additional functions with which you can set your own animation of elements that are displayed or hidden:

5) Getting elements in a function worksShow which fire on opening:

6) Getting elements in a function worksHide which are triggered when hidden:

3. Initially make it open:

1) The list of items is initially open open:

Default: open: false
open: true
open (type boolean)

4. Wrap a list in a div element:

1) Added to the top of the list div in which this list will be:

Default: addElemTop: true
addElemTop: true
addElemTop (type boolean)

It was BEFORE:

Became After:

5. Show and hide buttons:

1) Add an event for clicking on other elements in our case, we brought them to the top (hang the event on other buttons):

Default: click.classShow: undefined
click.classShow: 'show'
click.classShow (type strong)

Default: click.classHide: undefined
click.classHide: 'hide'
click.classHide (type strong)

2) Change text in buttons show or hide:

Default: textShow: 'Show'
textShow: 'Show'
textShow (type strong)

Default: textHide: 'Hide'
textHide: 'Hide'
textShow (type strong)

Show button:

or specify in the attribute

Hide button:

or specify in the attribute

3) In buttons show or hide print markup html or something different:

Default: buttonHtmlShow: ''
buttonHtmlShow: 'html'
buttonHtmlShow (type strong)

Default: buttonHtmlHide: ''
buttonHtmlHide: 'html'
buttonHtmlHide (type strong)

6. Output html markup:

1) In an element, display the markup before or after the list element:

Default: wrappingAfterHtml: undefined
wrappingAfterHtml: 'html'
wrappingAfterHtml (type strong)

Default: wrappingBeforeHtml: ''
wrappingBeforeHtml: 'html'
wrappingBeforeHtml (type strong)

7. Changing classes to work:

1) There are times when the user has a layout for the classes with which the plugin works, in this case you can change these classes for which the plugin will work:

8. Item update:

1) If you added an element to the list or changed the setting, then in this case there is a function that updates the plugin resizeFun:

9. Changing the setting (changing options):

1) If you decide to change the current plugin options for this there is updateFun with which you can change the incoming options, additionally perform the function resizeFun to update an item:

10. Canceling an item change on screen change:

1) To cancel the execution of changing an element when the screen is resized, there is a property resize:

Default: resize: true
resize: false
resize (type boolean)