electricg · August 13, 2012 12:49
diff --git a/dynamic-banner.html b/dynamic-banner.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<title>Dynamic Banner</title>
 	<style>
 /* for presentation only */
 body {
 	font-family: Arial;
 }
 ul, li {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 }
 ul:before, ul:after { content: ""; display: table; }
 ul:after { clear: both; }
 li {
 	background: #eee;
 	border: 1px solid #ccc;
 	float: left;
 	line-height: 30px;
 	text-align: center;
 	width: 150px;
 }
 .general-ad-banner {
 	background: #444;
 	border: 1px solid #000;
 	color: #fff;
 	padding: 10px 0;
 	text-align: center;
 }


 /* for the purpose of this effect */
 .general-ad-banner {
 	clear: both;
 	margin: 0 0 20px;
 	position: relative;
 	top: 10px;
 }
 	</style>
 </head>
 <body>
 	<ul>
 		<li>1</li>
 		<li>2</li>
 		<li>3</li>
 		<li>4</li>
 		<li>5</li>
 		<li>6</li>
 		<li>7</li>
 		<li>8</li>
 		<li>9</li>
 		<li>10</li>
 		<li>11</li>
 		<li>12</li>
 		<li>13</li>
 		<li>14</li>
 		<li>15</li>
 		<li>16</li>
 		<li>17</li>
 		<li>18</li>
 		<li>19</li>
 		<li>20</li>
 		<li>21</li>
 		<li>22</li>
 		<li>23</li>
 		<li>24</li>
 		<li>25</li>
 		<li>26</li>
 		<li>27</li>
 		<li>28</li>
 		<li>29</li>
 		<li>30</li>
 		<li>31</li>
 		<li>32</li>
 		<li>33</li>
 		<li>34</li>
 		<li>35</li>
 		<li>36</li>
 		<li>37</li>
 		<li>38</li>
 		<li>39</li>
 		<li>40</li>
 		<li>41</li>
 		<li>42</li>
 		<li>43</li>
 		<li>44</li>
 		<li>45</li>
 		<li>46</li>
 		<li>47</li>
 		<li>48</li>
 		<li>49</li>
 		<li>50</li>
 		<li>51</li>
 		<li>52</li>
 		<li>53</li>
 		<li>54</li>
 		<li>55</li>
 		<li>56</li>
 		<li>57</li>
 		<li>58</li>
 		<li>59</li>
 	</ul>
 	<div class="general-ad-banner js-general-ad-banner">General ad banner</div>

 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 	<script>
 (function($) {

 /*
 * Banner inside list
 */
 $.fn.bannerInsideList = function(options) {
 	var defaults = {
 		row : 1,		// number of rows after which insert the banner
 		listItems : ''	// selector for the list items
 	};
 	var opts = $.extend(defaults, options);

 	return this.each(function(){
 		var $banner = $(this),
 			$listItems = $(opts.listItems),
 			listItemsLength = $listItems.length - 1;

 		var moveBanner = function() {
 			$listItems.eq(listItemsLength).after($banner);

 			var actualRow = 0,
 				first = $listItems.eq(0).offset().left;
 				
 			$listItems.each(function(i) {
 				if (first == $(this).offset().left) {
 					if (actualRow == opts.row) {
 						$listItems.eq(i).before($banner);
 						return false;
 					}
 					else {
 						actualRow++;
 					}
 				}
 				if (i == listItemsLength) {
 					$listItems.eq(i).after($banner);
 				}
 			});
 		}

 		$(window).bind('load resize', function() {
 			moveBanner();
 		});
 	});
 };



 /*
 * Calc middle row
 */
 $.fn.listMiddleRow = function(options) {
 	var defaults = {
 		
 	};
 	var opts = $.extend(defaults, options);

 	return this.each(function(){
 		var middleRow = 0,
 			totalRows = 0,
 			$listItems = $(this).children(),
 			first = $listItems.eq(0).offset().left;

 		$listItems.each(function(i) {
 			if (first == $(this).offset().left) {
 				totalRows++;
 			}
 		});

 		middleRow = Math.floor(totalRows / 2);

 		console.log(middleRow);
 	});
 }


 // Banner inside list
 	$('.js-general-ad-banner').bannerInsideList({
 		row : 3,
 		listItems : 'ul li'
 	});

 // Calc middle row
 	$('ul').listMiddleRow();


 // What I want
 	// var $middleRow = $('ul').listMiddleRow(),
 	// 	$bannerInsideList = $('.js-general-ad-banner').bannerInsideList('ul li');
 	// $(window).bind('load resize', function() {
 	// 	$bannerInsideList.move( $middleRow.calc() );
 	// });

 })(jQuery);
 	</script>
 </body>
 </html>