Boxes2fullwidth
Animated repositioning of the boxes on the page grid
Install / Use
/learn @leodudedev/Boxes2fullwidthREADME
[jQuery box2fullWidth]
Animated repositioning of the boxes on the page grid
jQuery box2fullWidth is a plugin for repositioning boxs in grid layout whit transitions in jQuery.
Usage
Just include this script after jQuery. Requires jQuery 1.5+.
the containet must have width 100%
all boxes must have all the usual width
<div id="content">
<div style="width:200px"></div>
<div style="width:200px"></div>
<div style="width:200px"></div>
...
...
</div>
<script src="jquery.min.js"></script>
<script src="jquery.box2fullWidth.js"></script>
<script language="javascript">
$('#content').box2fullWidth({
minwidth:400, // Min page width
who:'div', // Who should be repositioned within the container. es. div or img or .class
margin:5, // Margin between boxes
duration:500, // Duration of animation
boxdelay:0, // Delay between animation box
bottomMargin:50, // margin from bottom (if 0 no set #content height)
positionComplete:function(){} // Animation end callback
});
</script>
Demo
http://leodudedev.github.io/boxes2fullwidth
Related Skills
node-connect
347.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
107.8kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
347.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
347.0kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
