MobilySelect

MobilySelect is jQuery plugin (2kB) that replaces one collection of items with another.

• shows specified collection on startup
• three types of animation
• callback functions

Changelog:

25.1.2011 - shows specified collection on startup, plugin parameter names have been changed

JavaScript:

$('.selecter').mobilyselect({
	collection: 'all', // shows specified collection on startup
	animation: 'absolute', // type of animation, available options: plain, fade, absolute
	duration: 500, // duration of animation
	listClass: 'selecterContent', // main container
	btnsClass: 'selecterBtns',
	btnActiveClass: 'active', // add class name to the button
	elements: 'li', 
	onChange: function(){}, // call the function when collection changes
	onComplete: function(){} // call the function when animation is completed
});

HTML:

<div class="selecter">
	<div class="selecterBtns">
		<ul class="nolist">
			<li><a href="#" rel="all" class="active">All</a></li>
			<li><a href="#" rel="poster">Web</a></li>
			<li><a href="#" rel="card">Print</a></li>
		</ul>
	</div>
	<div class="selecterContent">
		<ul class="nolist">
			<li class="poster"> .. </li>
			<li class="card"> .. </a></li>
			<!-- next items -->
		</ul>	
	</div>
</div>

Note that 'rel' attribute need to be the same as 'class' name! (classes: poster, card are only examples)

CSS:

.selecterContent {
	width:960px;
	min-height:; /* you need to specify minimum height value */
	float:left;
	clear:both;
}

.selecterContent li {
	width:140px; /* you need to specify width and height values of the element */
	height:120px;
	overflow:hidden;
}

ul.nolist,
ul.nolist li {
	display:block;
	list-style:none;
	padding:0;
	margin:0;
}

ul.nolist li {
	float:left;
}

Comments:

Enzo

19.07.11, 10:13

Is it possible to start with others collections?
Because I change with this script:$('.selecter').mobilyselect({
collection: 'all', // shows specified collection on startup
animation: 'absolute', // type of animation, available options: plain, fade, absolute
duration: 500, // duration of animation
listClass: 'selecterContent', // main container
btnsClass: 'selecterBtns',
btnActiveClass: 'active', // add class name to the button
elements: 'li',
onChange: function(){}, // call the function when collection changes
onComplete: function(){} // call the function when animation is completed
});

but it doesen't work.
Is there other solutions?
thank you!!
enzo

Claudia

07.07.11, 10:57

Nice plugin! It worked smoothly from beginning!

Thanks

David Bless

06.07.11, 19:52

Hi,

can you get it to use the easing plugin of jquery? I would like to add some swing and other stuff? there 3 options of animation are ok - but I wuld love to add more... any ideas?

this plugin is much easier to work with than Quicksand.. trust me it is...

Erik

06.06.11, 10:24

super!
'almost' completely what I was searching for: is it possible to nest 2 mobily's?
-> let the first mobily trigger a second mobily further on the page?

Patrícia Capella

12.05.11, 16:44

Hi!

Great plugin but I'm having a little problem with compatibility :( I was using the 1.5.1 version of the jquery library and your script was not working.
When i used the jQuery version that is in the pack i downloaded here, 1.4.2, everything worked just fine. The thing is I'm using a lightbox inside the ul with the photos and when i used the 1.4.2 version, the lightbox stopped working and I can't keep both versions of the jQuery on the code...
Do you happen to know why this compatibility issue is happening?

Thank you very much for your attention,
Patrícia Capella

wiki

12.05.11, 04:07

Wonderful!Very good!

Alina

10.05.11, 12:07

hey hey! this is so great, so sleek and elegant!
I have the same question as below about adding the lightbox feature... I already have it added to my images, now just wondering how to combine the two?
Would be sooooper grateful :)

Marcin Dziewulski

17.04.11, 00:46

@Lisa
Sure, it is possible, contact me via email and I will show you how to do this.

Lisa Driscoll

15.04.11, 21:36

Is there a way to add a lightbox feature to each item, once the category of items have been displayed?

Leighton

10.04.11, 00:04

Is there a way to get this to work without both the buttons and the images being in the same div? I've already tried using the same class names and that didn't work so my guess is there's some parent-child relation goin' on... is there a workaround??

• Next
• Last

Write a Comment

Name:

Email:

Comment:

Captcha code: