Created
February 25, 2015 22:47
-
-
Save atleb/fce66caff75b03a84ffe to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/xoquku
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .df-group{ | |
| border-top: 2px solid blue; | |
| margin-bottom; 10px; | |
| width: 100%; | |
| clear: both; | |
| float: left; | |
| } | |
| .df-main { | |
| width: 70%; | |
| float: left; | |
| background: beige; | |
| padding: 20px; | |
| } | |
| .df-right { | |
| float: right; | |
| width: 25%; | |
| border: 1px dotted pink; | |
| padding: 10px; | |
| } | |
| .df-ad { | |
| background: red; | |
| float: left; | |
| width: 100%; | |
| margin: 10px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| goal: | |
| wrap m1 + r1, | |
| then m-b1 | |
| then wrap m2 + r2 | |
| then m-b2 | |
| <div id="newFront"></div> | |
| <script id="jsbin-javascript"> | |
| var startTag = "<!-Y>"; | |
| var endTag = "<!-X>"; | |
| var offset = startTag.length; | |
| var offsetEnd = endTag.length; | |
| var mainStr = "<!-Y>helo a<!-X> ad be here<!-Y>a to the a<!-X> another ad<!-Y>aaa<!-X>moar ad<!-Y>yay<!-X>nay<!-Y>wtf<!-X>ads<!-Y>last one<!-X>"; | |
| var rightStr = "hello b<!-X> more b<!-X> bbb<!-X>b2b2<!-X>what fsfasfasff<!-X>final b"; | |
| var posStart = mainStr.indexOf(startTag); | |
| var posEnd = 0; | |
| var mainParts = []; | |
| var adParts = []; | |
| var rightParts = []; | |
| //to do: super nice joint loop split thing? | |
| // split on end, then crop out ads? | |
| while (posStart > -1){ | |
| posEnd = mainStr.indexOf(endTag, posStart); | |
| var mainPart = mainStr.substring(posStart+offset, posEnd); | |
| //console.log(mainPart); | |
| mainParts.push(mainPart); | |
| posStart = mainStr.indexOf(startTag, posEnd); | |
| } | |
| var mainLength = mainParts.length; | |
| //swap around for inside bits | |
| posStart = mainStr.indexOf(endTag); | |
| posEnd = mainStr.indexOf(startTag, posStart); | |
| while (posEnd > -1 && posStart > -1){ | |
| var adPart = mainStr.substring(posStart+offsetEnd, posEnd); | |
| //console.log(adPart); | |
| adParts.push(adPart); | |
| posStart = mainStr.indexOf(endTag, posEnd); | |
| posEnd = mainStr.indexOf(startTag, posStart); | |
| } | |
| var adCount = adParts.length; | |
| rightParts = rightStr.split(endTag); | |
| var rightCount = rightParts.length; | |
| //console.log(rightParts); | |
| var htmlOut = ""; | |
| for(var i=0; i<mainLength; i++){ | |
| htmlOut += "<div class='df-group wrap" +(i+1) +"'>"; | |
| htmlOut += "<div class='df-main main" +(i+1) +"'>" + mainParts[i] + "</div>"; | |
| htmlOut += "<div class='df-side right" +(i+1) +"'>"+ rightParts[i] + "</div>"; | |
| htmlOut += "</div>"; | |
| if(adCount > i){ | |
| htmlOut += "<div class='df-ad'>" +adParts[i]+ "</div>"; | |
| } | |
| } | |
| //console.log(htmlOut); | |
| $(htmlOut).appendTo("#newFront"); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| goal: | |
| wrap m1 + r1, | |
| then m-b1 | |
| then wrap m2 + r2 | |
| then m-b2 | |
| <div id="newFront"></div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">.df-group{ | |
| border-top: 2px solid blue; | |
| margin-bottom; 10px; | |
| width: 100%; | |
| clear: both; | |
| float: left; | |
| } | |
| .df-main { | |
| width: 70%; | |
| float: left; | |
| background: beige; | |
| padding: 20px; | |
| } | |
| .df-right { | |
| float: right; | |
| width: 25%; | |
| border: 1px dotted pink; | |
| padding: 10px; | |
| } | |
| .df-ad { | |
| background: red; | |
| float: left; | |
| width: 100%; | |
| margin: 10px 0; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| var startTag = "<!-Y>"; | |
| var endTag = "<!-X>"; | |
| var offset = startTag.length; | |
| var offsetEnd = endTag.length; | |
| var mainStr = "<!-Y>helo a<!-X> ad be here<!-Y>a to the a<!-X> another ad<!-Y>aaa<!-X>moar ad<!-Y>yay<!-X>nay<!-Y>wtf<!-X>ads<!-Y>last one<!-X>"; | |
| var rightStr = "hello b<!-X> more b<!-X> bbb<!-X>b2b2<!-X>what fsfasfasff<!-X>final b"; | |
| var posStart = mainStr.indexOf(startTag); | |
| var posEnd = 0; | |
| var mainParts = []; | |
| var adParts = []; | |
| var rightParts = []; | |
| //to do: super nice joint loop split thing? | |
| // split on end, then crop out ads? | |
| while (posStart > -1){ | |
| posEnd = mainStr.indexOf(endTag, posStart); | |
| var mainPart = mainStr.substring(posStart+offset, posEnd); | |
| //console.log(mainPart); | |
| mainParts.push(mainPart); | |
| posStart = mainStr.indexOf(startTag, posEnd); | |
| } | |
| var mainLength = mainParts.length; | |
| //swap around for inside bits | |
| posStart = mainStr.indexOf(endTag); | |
| posEnd = mainStr.indexOf(startTag, posStart); | |
| while (posEnd > -1 && posStart > -1){ | |
| var adPart = mainStr.substring(posStart+offsetEnd, posEnd); | |
| //console.log(adPart); | |
| adParts.push(adPart); | |
| posStart = mainStr.indexOf(endTag, posEnd); | |
| posEnd = mainStr.indexOf(startTag, posStart); | |
| } | |
| var adCount = adParts.length; | |
| rightParts = rightStr.split(endTag); | |
| var rightCount = rightParts.length; | |
| //console.log(rightParts); | |
| var htmlOut = ""; | |
| for(var i=0; i<mainLength; i++){ | |
| htmlOut += "<div class='df-group wrap" +(i+1) +"'>"; | |
| htmlOut += "<div class='df-main main" +(i+1) +"'>" + mainParts[i] + "</div>"; | |
| htmlOut += "<div class='df-side right" +(i+1) +"'>"+ rightParts[i] + "</div>"; | |
| htmlOut += "</div>"; | |
| if(adCount > i){ | |
| htmlOut += "<div class='df-ad'>" +adParts[i]+ "</div>"; | |
| } | |
| } | |
| //console.log(htmlOut); | |
| $(htmlOut).appendTo("#newFront"); | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .df-group{ | |
| border-top: 2px solid blue; | |
| margin-bottom; 10px; | |
| width: 100%; | |
| clear: both; | |
| float: left; | |
| } | |
| .df-main { | |
| width: 70%; | |
| float: left; | |
| background: beige; | |
| padding: 20px; | |
| } | |
| .df-right { | |
| float: right; | |
| width: 25%; | |
| border: 1px dotted pink; | |
| padding: 10px; | |
| } | |
| .df-ad { | |
| background: red; | |
| float: left; | |
| width: 100%; | |
| margin: 10px 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var startTag = "<!-Y>"; | |
| var endTag = "<!-X>"; | |
| var offset = startTag.length; | |
| var offsetEnd = endTag.length; | |
| var mainStr = "<!-Y>helo a<!-X> ad be here<!-Y>a to the a<!-X> another ad<!-Y>aaa<!-X>moar ad<!-Y>yay<!-X>nay<!-Y>wtf<!-X>ads<!-Y>last one<!-X>"; | |
| var rightStr = "hello b<!-X> more b<!-X> bbb<!-X>b2b2<!-X>what fsfasfasff<!-X>final b"; | |
| var posStart = mainStr.indexOf(startTag); | |
| var posEnd = 0; | |
| var mainParts = []; | |
| var adParts = []; | |
| var rightParts = []; | |
| //to do: super nice joint loop split thing? | |
| // split on end, then crop out ads? | |
| while (posStart > -1){ | |
| posEnd = mainStr.indexOf(endTag, posStart); | |
| var mainPart = mainStr.substring(posStart+offset, posEnd); | |
| //console.log(mainPart); | |
| mainParts.push(mainPart); | |
| posStart = mainStr.indexOf(startTag, posEnd); | |
| } | |
| var mainLength = mainParts.length; | |
| //swap around for inside bits | |
| posStart = mainStr.indexOf(endTag); | |
| posEnd = mainStr.indexOf(startTag, posStart); | |
| while (posEnd > -1 && posStart > -1){ | |
| var adPart = mainStr.substring(posStart+offsetEnd, posEnd); | |
| //console.log(adPart); | |
| adParts.push(adPart); | |
| posStart = mainStr.indexOf(endTag, posEnd); | |
| posEnd = mainStr.indexOf(startTag, posStart); | |
| } | |
| var adCount = adParts.length; | |
| rightParts = rightStr.split(endTag); | |
| var rightCount = rightParts.length; | |
| //console.log(rightParts); | |
| var htmlOut = ""; | |
| for(var i=0; i<mainLength; i++){ | |
| htmlOut += "<div class='df-group wrap" +(i+1) +"'>"; | |
| htmlOut += "<div class='df-main main" +(i+1) +"'>" + mainParts[i] + "</div>"; | |
| htmlOut += "<div class='df-side right" +(i+1) +"'>"+ rightParts[i] + "</div>"; | |
| htmlOut += "</div>"; | |
| if(adCount > i){ | |
| htmlOut += "<div class='df-ad'>" +adParts[i]+ "</div>"; | |
| } | |
| } | |
| //console.log(htmlOut); | |
| $(htmlOut).appendTo("#newFront"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment