├── LISCENSE ├── jresponsive.js ├── README.md ├── demo.html ├── algorithmForNewJresponsive.html └── jresponsive-unminified /LISCENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) <2013> http://tlportfolio.my-board.org/ 2 | 3 | Copyright 2012-2013, Tuyen Le Released under the MIT License . 4 | 5 | JResponsive is authored and maintained by Tuyen Le with help from its users who contributed testing cases. 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 8 | associated documentation files (the "Software"), to deal in the Software without restriction, including 9 | without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, 10 | and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, 11 | subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of 14 | the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO 17 | THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. I 18 | N NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 19 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE 20 | OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /jresponsive.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) <2013> http://www.tlportfolio.my-board.org/ 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), 5 | to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, 6 | and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 7 | 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 9 | 10 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 11 | 12 | */ 13 | (function(e){if(!window.console)(function(){var e,t;t=function(){function t(){this.__buffer.push(arguments)}var n=setInterval(function(){var t;if(window.console&&console.log&&!console.__buffer){clearInterval(n);t=Function.prototype.bind?Function.prototype.bind.call(console.log,console):console.log;for(var r=0;rr.content_array.length){r.number=r.content_array.length}r.getWidth()},getWidth:function(){if(r.actual_widthr.max_size){r.width=r.max_size}}r.getLeft()},getLeft:function(){r.left=r.width+r.hspace;r.getTop()},getTop:function(){r.top=r.height+r.vspace;r.getHeight()},getHeight:function(){if(r.height==0){r.height=r.width}r.setRow()},setRow:function(){r.row=Math.round(r.actual_height/r.height)*3;s.innit(r.width,r.height,r.left,r.top,r.number,r.row,r.container_name,r.actual_width,r.class_name,r.content_array,r.transformation)}};var s={check:0,length:0,actual_width:0,width:0,height:0,left:0,top:0,number:0,row:0,transformation:"",container_name:"",class_name:"",content_array:[],arrayD:[],old_arrayD:[],add:0,propotion:0,propotion_check:0,innit:function(e,t,n,r,i,o,u,a,f,l,c){s.width=e;s.height=t;s.left=n;s.top=r;s.row=o;s.number=i;s.container_name=u;s.actual_width=a;s.content_array=l;s.class_name=f;s.transformation=c;s.getAdd()},getAdd:function(){if(s.old_arrayD.length>0){s.add=s.content_array.length-(s.content_array.length-s.old_arrayD.length)}s.getRow()},getRow:function(){if(s.old_arrayD.length>0){var e=(s.old_arrayD[0].width+5)*s.old_arrayD[0].height*s.old_arrayD.length;s.length=s.old_arrayD.length;s.row=Math.round(e/s.actual_width/s.top)*3+1}else{s.row=Math.round(s.content_array.length/s.number)*3+1}s.getDiv()},getDiv:function(){for(j=0;j';var u=u;var f="";var l=a+u+f;e(s.container_name).append(l)},createDivs:function(t){var n=s.add;for(n;nUpdate: I am currently improving JResponsive so that it can support different width and height for different divs 2 |

Auto add inline css for container and item

3 |

Make jresponsive usable for multiple containers

4 | 5 |

If you don't want to create content_array manually. You can let Jresponsive take care of that for you by not defining content_array property.

6 | 
$("#container_id").jresponsive({
  7 |   transormation: 'animation', 
  8 |   min_size: 100,
  9 |   max_size: 250,
 10 |   height:250,
 11 |   hspace:10,
 12 |   vspace:10,
 13 |   class_name: 'item',
 14 |   content_array: content
 15 | });
16 | Note: Make sure when you struture your html from the beginning, follow the pattern: 17 | 
 18 | I would appreciate if someone could tell me how to escape html inside pre tag, GitHub making me frustrated.
 19 | 
 20 | div id ="container_id"
 21 | 	div class="class_name"
 22 | 	div class = "class_name"
 23 | 	........
 24 |
25 | 26 | 27 |

Create divs first inside the container then push them all into the array passed to JResponsive:

28 | 
 29 | var array = [];
 30 | array = $('#container .content').map(function(){
 31 |     return $(this).html();          
 32 | });
 33 | $('#container').empty();
 34 | var length = array.length;
 35 | for(var i = 0; i ' + array[i] + '';           
 36 | };
 37 |
38 | 39 |

JResponsive now will resize images inside the container automatically based on the initial propotion of the container width and the image width.

40 |

JResponsive now supports callback function as below

41 | 
 42 | $("div").jresponsive({
 43 |   .......
 44 | },callback);
 45 | function callback(){
 46 |   ......
 47 | }
 48 |
49 |

Introduction notes

50 | JResponsive will organize your content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will arrange its children in a layout that makes optimal use of screen space, by "packing" them in tightly. One of the very famous website that using this type of layout is Pulse. 51 |

Simplicity is the ultimate sophistication

52 | A simple jQuery plugin that allows you to add a dynamically-resized layout to any page or element, customize the layout the way you want with or without top,right,left or bottom navigations. 53 |

Usage is simple!

54 |

Just include this script after jQuery. Requires jQuery 1.5+. Use 55 | $('...').jresponsive({...}) 56 | instead of jQuery's 57 | $('...').animate. 58 | It has the same syntax as animate. 59 |

60 | 
$("div").jresponsive({
 61 |   transormation: 'animation', 
 62 |   min_size: 100,
 63 |   max_size: 250,
 64 |   height:250,
 65 |   hspace:10,
 66 |   vspace:10,
 67 |   class_name: 'item',
 68 |   content_array: content
 69 | });
70 |

JResponsive provides the following transformations for use with

71 | transfromationproperty 72 |

animation 73 | transition

74 |

fade 75 | fade in and out

76 |

Supported browsers

77 |

JResponsive works well with all of the current modern browsers. JResponsive uses JQUERY library.

78 |
    79 |
  • IE 8+
    • 80 |
  • Firefox 4+
    • 81 |
  • Safari 5+
    • 82 |
  • Chrome 10+
    • 83 |
  • Opera 11+
    • 84 |
  • Android browser
    • 85 |
86 |

If any issues found

87 |

If for any reason, you need JResponsive to be supported for older versions of any browsers in the list, please let me know i will try as hard as i can to make it work.

88 |

Recipes

89 |

Example setting

90 |

JResponsive is a JQuery plugin which means you can use id $('#grid').JResponsive({..}) or class $('.grid').JResponsive({..}) as reference.

91 | 
$('#grid').JResponsive({
 92 |  	    transfromation: 'default',
 93 | 			min_size: 100,
 94 | 			max_size: 250,
 95 | 			height:	250,
 96 | 			nav_name: '#navigation',
 97 | 			class_name: 'item',
 98 | 			content_array: content,
 99 | });
100 |

transformation

101 |

Define custom transformation through transfromation property. JResponsive currently supports 2 custom transformation transfromation: 'animate' transfromation: 'fade'

102 | 
103 | $('#grid').JResponsive({
104 |   		transformation: '',
105 | });
106 |
107 |

min_size

108 |

This is the minimun width of each of the element that it is allowed to shrink, because when window width changed, it depends on how much it changes elements will change the width or change position to fit the container. min_size: 100

109 | 
110 | $('#grid').JResponsive({
111 |       min_size: 100,
112 | });
113 |
114 |

max_size

115 |

The maximun width of each of the element that it is allowed to reach. Based on this property, JResponsive will calculate how many elements will fit the container. max_size: 300

116 | 
117 | $('#grid').JResponsive({
118 |       max_size: 250,
119 | });
120 |
121 |

height

122 |

This is the height of each element inside the container. If set as 0, the height will be always equal the width of the element. height: 0

123 | 
124 | $('#grid').JResponsive({
125 |       height: 200,
126 | });
127 |
128 |

hspace

129 |

Horizontal gap between elements

130 | 
131 | $('#grid').JResponsive({
132 |       hspace: 40,
133 | });
134 |
135 |

vspace

136 |

Vertical gap between elements

137 | 
138 | $('#grid').JResponsive({
139 |       vspace: 40,
140 | });
141 |
142 |

item_name

143 |

The class name of each of the element inside the container div. This will give users total control over the design of the layout. You can use class: item_name: '.item' or id item_name: '#item'

144 | 
145 | $('#grid').JResponsive({
146 |       item_name: '.item',
147 | });
148 |
149 |

content_array

150 |

This is where user will pass an array containing all of the elements that will be stored inside the container div. Each of the array element will become an item positioned inside the container div. Users can use any html tag for each of the element. Build the array from any source before passing it to JResponsive. content_array: content

151 | 
152 | var content = [];
153 | content[0] = '<div class="item-bg"><div class="bg-color"></div><div class="item-info"><div class="title">Kyocera Revolution Series 7-Inch Serrated Slicing Bread Knife</div><div class="price">$34.95</div></div></div>';
154 | content[1] = '<div class="item-bg"><div class="bg-color"></div><div class="item-info"><div class="title">Kyocera Revolution Series 7-Inch Serrated Slicing Bread Knife</div><div class="price">$34.95</div></div></div>';
155 | $('#grid').JResponsive({
156 | 		  content_array: content,
157 | });
158 |
159 |

If you don't want to create content_array manually. You can let Jresponsive take care of that for you by not defining content_array property.

160 | 
$("#container_id").jresponsive({
161 |   transormation: 'animation', 
162 |   min_size: 100,
163 |   max_size: 250,
164 |   height:250,
165 |   hspace:10,
166 |   vspace:10,
167 |   class_name: 'item',
168 |   content_array: content
169 | });
170 | Note: Make sure when you struture your html from the beginning, follow the pattern: 171 | 
172 | I would appreciate if someone could tell me how to escape html inside pre tag, GitHub making me frustrated.
173 | 
174 | div id ="container_id"
175 | 	div class="class_name"
176 | 	div class = "class_name"
177 | 	........
178 |
179 | 180 |

Make sure you specify css for main container and each item

181 | 
182 | #container {
183 |     height: 100%;
184 |     width: 100%;
185 |     overflow: hidden;
186 |     position: relative;
187 |     margin: 0 auto;
188 |     margin-top: 50px;
189 | }
190 | 
191 | .item {
192 |   position:absolute;
193 | }
194 |
195 | 196 |

Go to the main website to see how it works and more information, specially check out the interactive example

197 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JResponsive Example 6 | 145 | 146 | 147 | 196 | 197 | 198 | Click here to add more elements into the container 199 |

Resize to see how JResponsive works

200 |
201 | 202 |
203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | -------------------------------------------------------------------------------- /algorithmForNewJresponsive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JResponsive Example 6 | 145 | 146 | 147 | 148 | 149 | 150 | Click here to add more elements into the container 151 |

Resize to see how JResponsive works

152 |
153 |
154 |
155 |

1

156 |

H

157 |

Hydrogen

158 |

1.00794

159 |
160 |
161 |
162 |
163 |

2

164 |

He

165 |

Helium

166 |

4.002602

167 |
168 |
169 |
170 |
171 |

3

172 |

Li

173 |

Lithium

174 |

6.941

175 |
176 |
177 |
178 |
179 |

4

180 |

Be

181 |

Beryllium

182 |

9.012182

183 |
184 |
185 | 186 |
187 |
188 |

49

189 |

In

190 |

Indium

191 |

114.818

192 |
193 |
194 |
195 |
196 |

2

197 |

He

198 |

Helium

199 |

4.002602

200 |
201 |
202 |
203 |
204 |

3

205 |

Li

206 |

Lithium

207 |

6.941

208 |
209 |
210 |
211 |
212 |

4

213 |

Be

214 |

Beryllium

215 |

9.012182

216 |
217 |
218 |
219 |
220 |

5

221 |

B

222 |

Boron

223 |

10.811

224 |
225 |
226 |
227 |
228 |

1

229 |

H

230 |

Hydrogen

231 |

1.00794

232 |
233 |
234 |
235 |
236 |

2

237 |

He

238 |

Helium

239 |

4.002602

240 |
241 |
242 |
243 |
244 |

3

245 |

Li

246 |

Lithium

247 |

6.941

248 |
249 |
250 |
251 |
252 |

4

253 |

Be

254 |

Beryllium

255 |

9.012182

256 |
257 |
258 |
259 |
260 |

5

261 |

B

262 |

Boron

263 |

10.811

264 |
265 |
266 |
267 |
268 |

49

269 |

In

270 |

Indium

271 |

114.818

272 |
273 |
274 |
275 |
276 |

2

277 |

He

278 |

Helium

279 |

4.002602

280 |
281 |
282 |
283 |
284 |

3

285 |

Li

286 |

Lithium

287 |

6.941

288 |
289 |
290 |
291 |
292 |

4

293 |

Be

294 |

Beryllium

295 |

9.012182

296 |
297 |
298 |
299 |
300 |

5

301 |

B

302 |

Boron

303 |

10.811

304 |
305 |
306 |
307 |
308 |

5

309 |

B

310 |

Boron

311 |

10.811

312 |
313 |
314 |
315 |
316 |

5

317 |

B

318 |

Boron

319 |

10.811

320 |
321 |
322 |
323 |
324 |

5

325 |

B

326 |

Boron

327 |

10.811

328 |
329 |
330 | 331 |
332 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | -------------------------------------------------------------------------------- /jresponsive-unminified: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) <2013> http://www.tlportfolio.my-board.org/ 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), 5 | to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, 6 | and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 7 | 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 9 | 10 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 11 | 12 | */ 13 | (function (e) { 14 | if (!window.console)(function () { 15 | var e, t; 16 | t = function () { 17 | function t() { 18 | this.__buffer.push(arguments) 19 | } 20 | var n = setInterval(function () { 21 | var t; 22 | if (window.console && console.log && !console.__buffer) { 23 | clearInterval(n); 24 | t = Function.prototype.bind ? Function.prototype.bind.call(console.log, console) : console.log; 25 | for (var r = 0; r < e.__buffer.length; r++) t.apply(console, e.__buffer[r]) 26 | } 27 | }, 1e3); 28 | this.log = t; 29 | this.error = t; 30 | this.warn = t; 31 | this.info = t; 32 | this.__buffer = [] 33 | }; 34 | e = window.console = new t 35 | })(); 36 | e.fn.jresponsive = function (t, n) { 37 | var r = { 38 | actual_width: 0, 39 | actual_height: 0, 40 | number: 0, 41 | min_size: 0, 42 | max_size: 0, 43 | hspace: 0, 44 | vspace: 0, 45 | nav_size: 0, 46 | container_name: "", 47 | class_name: "", 48 | width: 0, 49 | height: 0, 50 | left: 0, 51 | top: 0, 52 | row: 0, 53 | transformation: "", 54 | callback: null, 55 | content_array: [], 56 | innit: function (t, n, i, s, o, u, a, f, l, c, h) { 57 | if (t !== undefined) { 58 | r.min_size = t 59 | } 60 | if (n !== undefined) { 61 | r.max_size = n + s 62 | } 63 | if (i !== undefined) { 64 | r.height = i 65 | } 66 | if (u !== "") { 67 | r.nav_size = e(u).width() 68 | } 69 | if (s !== undefined) { 70 | r.hspace = s 71 | } 72 | if (o !== undefined) { 73 | r.vspace = o 74 | } 75 | if (h !== undefined) { 76 | r.callback = h 77 | } 78 | r.transformation = c; 79 | r.content_array = l; 80 | r.container_name = a; 81 | r.class_name = f; 82 | r.getScreensize(); 83 | //alert('what' + $('#0 img').width()); 84 | }, 85 | getScreensize: function () { 86 | var t = e(r.container_name).width(); 87 | r.actual_width = t - r.nav_size; 88 | var n = e(r.container_name).height(); 89 | r.actual_height = n; 90 | r.getNumber() 91 | }, 92 | getNumber: function () { 93 | var e = r.actual_width / r.max_size; 94 | e = e - e % 1; 95 | var t = r.actual_width % r.max_size; 96 | if (t == 0) { 97 | r.number = e 98 | } else { 99 | r.number = e + 1 100 | } 101 | if(r.number > r.content_array.length) { 102 | r.number = r.content_array.length; 103 | } 104 | r.getWidth() 105 | }, 106 | getWidth: function () { 107 | if (r.actual_width < r.max_size) { 108 | r.width = r.actual_width - r.hspace 109 | } else { 110 | var e = r.actual_width % r.number; 111 | r.width = r.actual_width / r.number + e / r.number - r.hspace + r.hspace / r.number; 112 | if (r.width < r.min_size) { 113 | r.number = r.number - 1; 114 | var e = r.actual_width % r.number; 115 | r.width = r.actual_width / r.number + e / r.number - r.hspace + r.hspace / r.number 116 | } 117 | if (r.width > r.max_size) { 118 | r.width = r.max_size 119 | } 120 | } 121 | r.getLeft() 122 | }, 123 | getLeft: function () { 124 | r.left = r.width + r.hspace; 125 | r.getTop() 126 | }, 127 | getTop: function () { 128 | r.top = r.height + r.vspace; 129 | r.getHeight() 130 | }, 131 | getHeight: function () { 132 | if (r.height == 0) { 133 | r.height = r.width 134 | } 135 | r.setRow() 136 | }, 137 | setRow: function () { 138 | r.row = Math.round(r.actual_height / r.height) * 3; 139 | s.innit(r.width, r.height, r.left, r.top, r.number, r.row, r.container_name, r.actual_width, r.class_name, r.content_array, r.transformation) 140 | } 141 | }; 142 | var s = { 143 | check: 0, 144 | length: 0, 145 | actual_width: 0, 146 | width: 0, 147 | height: 0, 148 | left: 0, 149 | top: 0, 150 | number: 0, 151 | row: 0, 152 | transformation: "", 153 | container_name: "", 154 | class_name: "", 155 | content_array: [], 156 | arrayD: [], 157 | old_arrayD: [], 158 | add: 0, 159 | propotion: 0, 160 | propotion_check: 0, 161 | innit: function (e, t, n, r, i, o, u, a, f, l, c) { 162 | s.width = e; 163 | s.height = t; 164 | s.left = n; 165 | s.top = r; 166 | s.row = o; 167 | s.number = i; 168 | s.container_name = u; 169 | s.actual_width = a; 170 | s.content_array = l; 171 | s.class_name = f; 172 | s.transformation = c; 173 | s.getAdd(); 174 | }, 175 | getAdd: function () { 176 | if (s.old_arrayD.length > 0) { 177 | s.add = s.content_array.length - (s.content_array.length - s.old_arrayD.length) 178 | } 179 | s.getRow() 180 | }, 181 | getRow: function () { 182 | if (s.old_arrayD.length > 0) { 183 | var e = (s.old_arrayD[0].width + 5) * s.old_arrayD[0].height * s.old_arrayD.length; 184 | s.length = s.old_arrayD.length; 185 | s.row = Math.round(e / s.actual_width / s.top) * 3 + 1 186 | } else { 187 | s.row = Math.round(s.content_array.length / s.number) * 3 + 1 188 | } 189 | s.getDiv() 190 | }, 191 | getDiv: function () { 192 | for (j = 0; j < s.row; j++) { 193 | count = 1; 194 | for (i = 0; i < s.number; i++) { 195 | if (count <= s.length || s.check == 0) { 196 | if (i == 0) { 197 | top_div = s.top * j; 198 | if (j == 0) { 199 | s.arrayD.push({ 200 | width: s.width, 201 | height: s.height, 202 | left: 0, 203 | top: 0 204 | }); 205 | if (s.check !== 1) { 206 | s.old_arrayD.push({ 207 | width: s.width, 208 | height: s.height, 209 | left: 0, 210 | top: 0 211 | }) 212 | } 213 | } else { 214 | s.arrayD.push({ 215 | width: s.width, 216 | height: s.height, 217 | left: 0, 218 | top: top_div 219 | }); 220 | if (s.check !== 1) { 221 | s.old_arrayD.push({ 222 | width: s.width, 223 | height: s.height, 224 | left: 0, 225 | top: top_div 226 | }) 227 | } 228 | } 229 | left_div = s.left 230 | } else { 231 | s.arrayD.push({ 232 | width: s.width, 233 | height: s.height, 234 | left: left_div, 235 | top: top_div 236 | }); 237 | if (s.check !== 1) { 238 | s.old_arrayD.push({ 239 | width: s.width, 240 | height: s.height, 241 | left: left_div, 242 | top: top_div 243 | }) 244 | } 245 | left_div = left_div + s.left 246 | } 247 | count = count + 1 248 | } 249 | } 250 | } 251 | s.arrayD.splice(s.content_array.length, s.arrayD.length - s.content_array.length); 252 | s.old_arrayD.splice(s.content_array.length, s.old_arrayD.length - s.content_array.length); 253 | if (s.check == 0) { 254 | s.createDivs(); 255 | } else { 256 | s.arrayD.splice(s.old_arrayD.length, s.arrayD.length - s.old_arrayD.length); 257 | s.animateDivs() 258 | } 259 | }, 260 | createDiv: function (t, n, r, i, o, u) { 261 | var a = '<' + tagName + ' class="' + s.class_name + '"' + 'id="' + t + '" style="display: block; width: ' + n + "px; height: " + r + "px; left: " + i + "px; top: " + o + 'px;">'; 262 | var u = u; 263 | var f = ""; 264 | var l = a + u + f; 265 | e(s.container_name).append(l) 266 | }, 267 | createDivs: function (t) { 268 | var n = s.add; 269 | for (n; n < s.arrayD.length; n++) { 270 | s.createDiv(n, s.arrayD[n].width, s.arrayD[n].height, s.arrayD[n].left, s.arrayD[n].top, s.content_array[n]) 271 | } 272 | s.check = s.check + 1; 273 | e("body").css("height", s.arrayD[s.arrayD.length - 1].top + s.arrayD[s.arrayD.length - 1].height); 274 | e(s.container_name).css("height", s.arrayD[s.arrayD.length - 1].top + s.arrayD[s.arrayD.length - 1].height); 275 | s.arrayD = []; 276 | if (r.callback !== null) { 277 | r.callback() 278 | }; 279 | }, 280 | resizeImages: function(g) { 281 | if(s.propotion != 0) 282 | { 283 | e("#" + g + ' img').animate({ 284 | width: s.arrayD[g].width*s.propotion 285 | }, 600) 286 | } 287 | }, 288 | animateDivs: function () { 289 | if(s.propotion_check === 0) 290 | { 291 | var imgWidth = $('#0 img').width(); 292 | s.propotion = imgWidth/s.width; 293 | s.propotion_check = 1; 294 | } 295 | if (s.transformation == "animation") { 296 | for (g = 0; g < s.old_arrayD.length; g++) { 297 | e("#" + g).animate({ 298 | width: s.arrayD[g].width, 299 | height: s.arrayD[g].height, 300 | left: s.arrayD[g].left, 301 | top: s.arrayD[g].top 302 | }, 400); 303 | s.resizeImages(g); 304 | } 305 | } else if (s.transformation == "fade") { 306 | for (g = 0; g < s.old_arrayD.length; g++) { 307 | e("#" + g).css({ 308 | width: s.arrayD[g].width, 309 | height: s.arrayD[g].height, 310 | left: s.arrayD[g].left, 311 | top: s.arrayD[g].top, 312 | opacity: .1 313 | }, 500); 314 | s.resizeImages(g); 315 | e("#" + g).animate({ 316 | opacity: 1 317 | }, 500) 318 | } 319 | }; 320 | e("body").css("height", s.arrayD[s.arrayD.length - 1].top + s.arrayD[s.arrayD.length - 1].height); 321 | e(this.container_name).css("height", s.arrayD[s.arrayD.length - 1].top + s.arrayD[s.arrayD.length - 1].height); 322 | s.arrayD = []; 323 | if (r.callback !== null) { 324 | r.callback() 325 | } 326 | } 327 | }; 328 | jresponsive = { 329 | array: [], 330 | add: function (e) { 331 | jresponsive.array = e; 332 | s.check = 0; 333 | r.innit(s.old_arrayD[0].min_size, s.old_arrayD[0].max_size, s.old_arrayD[0].height, r.hspace, r.vspace, "", s.container_name, s.class_name, jresponsive.array) 334 | } 335 | }; 336 | settings = jQuery.extend({ 337 | min_size: 100, 338 | max_size: 250, 339 | height: 300, 340 | hspace: 10, 341 | vspace: 10, 342 | nav_name: "", 343 | class_name: "", 344 | content_array: "", 345 | add: "", 346 | transformation: "animation", 347 | }, t); 348 | var o = this; 349 | var container_id = "#" + e(o).attr("id"); 350 | if (settings.add !== "") { 351 | s.check = 0 352 | } 353 | if(settings.content_array === "") 354 | { 355 | settings.content_array = $(container_id + ' .' + settings.class_name).map(function(){ 356 | return $(this).html(); 357 | }); 358 | 359 | tagName = $(container_id + ' .' + settings.class_name)[0].tagName.toLowerCase(); 360 | 361 | $(container_id).empty(); 362 | } 363 | else 364 | { 365 | var containerTag = $(container_id)[0].tagName.toLowerCase(); 366 | console.log(containerTag); 367 | if(containerTag === 'ul') 368 | { 369 | tagName = 'li'; 370 | } 371 | else 372 | { 373 | tagName = 'div'; 374 | } 375 | $(container_id).empty(); 376 | } 377 | e("body").css("height", 1e4); 378 | var u = null; 379 | r.innit(settings.min_size, settings.max_size, settings.height, settings.hspace, settings.vspace, settings.nav_name, container_id, settings.class_name, settings.content_array, settings.transformation, n); 380 | 381 | e(window).bind("resize", function () { 382 | if (u != null) clearTimeout(u); 383 | u = setTimeout(function () { 384 | r.innit(settings.min_size, settings.max_size, settings.height, settings.hspace, settings.vspace, settings.nav_name, "#" + e(o).attr("id"), settings.class_name, settings.content_array, settings.transformation, n) 385 | }, 500) 386 | }) 387 | } 388 | })(jQuery) 389 | --------------------------------------------------------------------------------