Partially command
Hide part of an element that exceeds a specific size and make it unhidable.
Basic Usage (HTML)
data-jkit="[partially:height=50]"
Advanced Init (JavaScript)
$('#myelement').jKit('partially', { 'height': '50' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| height | Int (Pixels) | 200 | The height of the collabsed element. |
| text | HTML | more … | The HTML for the more button |
| speed | Int or “fast”, “slow” (Milliseconds) | 250 | The duration of the animation in milliseconds, bigger = slower. |
| easing | String (“linear” or easing plugin option) | linear | The easing behavior of the animation |
| on | Event | Set a specific event that opens and closes the element. Leave it empty to use mouseover and -out | |
| area | “element” or “morediv” | element | Define where the click or mouseover area is. |
| alphaon | Int | 0.9 | The alpha value of the more div when the div is visible. |
| alphaoff | Int | 0 | The alpha value of the more div when the div is “hidden”. |
Events
| Event | Description |
|---|---|
| open | Triggered when the element is open |
| closed | Triggered whenever the element is closed/minimized |
Examples
Basic example:
Limit a div to a 200 pixel height:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Source:
<div style="width:400px;padding:6px;background:#ffd;border:1px #eeb solid" data-jkit="[partially:height=50;speed=500;easing=easeOutBounce]">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
Click example:
Open and close on click:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Source:
<div style="width:400px;padding:6px;background:#ffd;border:1px #eeb solid" data-jkit="[partially:on=click;height=50;speed=500;easing=easeOutBounce]">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
Alpha options:
Click example with different alpha options:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Source:
<div style="width:400px;padding:6px;background:#ffd;border:1px #eeb solid" data-jkit="[partially:on=click;alphaoff=0.4;alphaon=1;height=50;speed=500;easing=easeOutBounce]">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
Example CSS
div.jkit-morediv {
position: absolute;
bottom: 0px;
left: 0px;
height: 16px;
background: #fff;
text-align: center;
}
Replacements
There are currently no replacements for this command.
[ Learn more about replacements ]
Discussions
Do you have questions or do you want to suggest new features? Than head over to our new community:
[ jKit Community ]