2 3 4 5 6 7 8 9 |
$tile-colors: blue, green, red, orange, purple; @each $color in $tile-colors{ $i: index($tile-colors, $color); @debug settings title '$i = ' $i to $color; } |
Inheritance
SASS
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.button{ color: white; text-align: center; font-size: 48pt; width: 200px; height: 100px; line-height: 100px; } .yes{ @extend .button; background-color: #00ff00; } .no{ @extend .button; background-color: #ff0000; } .cancel{ @extend .button; background-color: #cec0b8; } |
CSS
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.button, .yes, .no, .cancel { color: white; text-align: center; font-size: 48pt; width: 200px; height: 100px; line-height: 100px; } .yes { background-color: #00ff00; } .no { background-color: #ff0000; } .cancel { background-color: #cec0b8; } |
HTML
2 3 4 5 6 |
<div> <div class="yes">Yes</div> <div class="no">No</div> <div class="cancel">Cancel</div> </div> |
add a simple dump
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" type="text/css"> <link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css"type="text/css"> <link href="style.css" rel="stylesheet" /> </head> <body> <h1>Hello Knockout!</h1> <pre data-bind="text: ko.toJSON(vm, null, 2)"></pre> <section>Records: <div data-bind="text: people().length" class="label"></div> <ul data-bind="foreach: people"> <li> <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span> </li> </ul> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script> <script src="script.js"> var vm = (function () { var Person = function (first, last) { this.firstName = ko.observable(first); this.lastName = ko.observable(last); this.child = {}; this.pets = {}; }; var p1 = new Person('John', 'Papa'); var p2 = new Person('Colleen', 'Papa'); var p2a = new Person('Ella', 'Papa'); p2.child = ko.observable(p2a); var people = ko.observableArray([p1, p2]); var vm = { people: people }; return vm; })(); ko.applyBindings(vm); </script> </body> </html> |
How to dump your data on page
File dump.js
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
//--------------------------------------- // Uncomment out the define and the last // line if you want to use this with // Code Camper JumpStart //--------------------------------------- //define(function () { ///------------------------------------------- /// Usage in HTML /// <div data-bind="dump: $data"></div> /// <div data-bind="dump: people"></div> ///------------------------------------------- function toJSON(rootObject, replacer, spacer) { var cache = []; var plainJavaScriptObject = ko.toJS(rootObject); var replacerFunction = replacer || cycleReplacer; var output = ko.utils.stringifyJson(plainJavaScriptObject, replacerFunction, spacer || 2); cache = null; // Enable garbage collection return output; function cycleReplacer(key, value) { if (['entityAspect', 'entityType', '_$typeName'].indexOf(key) !== -1) { return; } if (typeof value === 'object' && value !== null) { if (cache.indexOf(value) !== -1) { return; // Circular reference found, discard key } cache.push(value); } return value; }; }; ko.bindingHandlers.dump = { init: function (element, valueAccessor, allBindingsAccessor, viewmodel, bindingContext) { var context = valueAccessor(); var allBindings = allBindingsAccessor(); var pre = document.createElement('pre'); element.appendChild(pre); var dumpJSON = ko.computed({ read: function () { var en = allBindings.enable === undefined || allBindings.enable; return en ? toJSON(context, null, 2) : ''; }, disposeWhenNodeIsRemoved: element }); ko.applyBindingsToNode(pre, { text: dumpJSON, visible: dumpJSON }); return { controlsDescendentBindings: true }; } }; //--------------------------------------- // Uncomment out the first and the last // line if you want to use this with // Code Camper JumpStart //--------------------------------------- //}); |
Add link dump.js to your file In your code you can call the dump file:
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<h2>Debug</h2> <hr /> <h2>show everithing</h2> <div data-bind="dump: $data"></div><!-- show everithing--> <hr /> <h2>show Employees</h2> <div data-bind="dump: Employees"></div><!-- show your model--> <hr /> <h2>show Employees enable: false</h2> <div data-bind="dump: Employees, enable: false"></div> <hr /> <h2>show Employees, enable: true</h2> <div data-bind="dump: Employees, enable: true"></div> <hr /> |
setting variables in an array of objects
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
$(function () { var Person = function (name) { this.name = ko.observable(name); //this.name = name; }; var viewmodel = (function () { var p1 = new Person('Haley'); var p2 = new Person('Ella'); var people = ko.observableArray([p1, p2]); //setting a name parameter in an array of objects //people()[0].name('Mary'); function checkValue() { alert(p1.name()); } return { people: people, checkValue: checkValue }; })(); ko.applyBindings(viewmodel); }); |
Shrinking top menu on scroll with bootstrap afix.
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Index - My ASP.NET Application</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Sass style sheet <style> /* Collapsing Navbar Styles */ /* 1. To change menu height size start with a larger size */ /* 2. prepare the lenght of transititon */ .navbar-default { /* Add additional styles here for the UNCOLLAPSED state */ .navbar-brand{ padding: 0px; .img-logo{ height: 50px; transition: all .8s ease-in-out; } } padding: 15px 0; transition: all .8s ease-in-out; } /* 3. for color change enter the final color and lenght of transititon */ .navbar-default.affix { /* will shrink on move and will animate color and padding */ padding: 0; background-color: #999; border-color: #000; .navbar-brand{ padding: 5px; .img-logo{ height: 40px; } } } </style>--> <style> .body-content { margin-top: 60px; min-height: 800px; } /* Collapsing Navbar Styles */ /* 1. To change menu height size start with a larger size */ /* 2. prepare the lenght of transititon */ .navbar-default { /* Add additional styles here for the UNCOLLAPSED state */ padding: 15px 0; transition: all .8s ease-in-out; } .navbar-default .navbar-brand { padding: 0px; } .navbar-default .navbar-brand .img-logo { height: 50px; transition: all .8s ease-in-out; } /* 3. for color change enter the final color and lenght of transititon */ .navbar-default.affix { /* will shrink on move and will animate color and padding */ padding: 0; background-color: #999; border-color: #000; } .navbar-default.affix .navbar-brand { padding: 5px; } .navbar-default.affix .navbar-brand .img-logo { height: 40px; } </style> </head> <body> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img class="img-logo img-responsive" src="/content/images/logo.svg" alt="MySaudiStore" /> </a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <!--<li class="active">--> <li> <a class="menu-link about">About</a> </li> <li> <a class="menu-link how-it-works">How It Works</a> </li> <li> <a class="menu-link shipping-rates">Shipping Rates</a> </li> <li> <a class="menu-link track-shipment">Track Shipment</a> </li> <li class="dropdown"> <a href="/Home/About" class="dropdown-toggle" data-toggle="dropdown">About<span class="caret"></span></a> <li class="dropdown"> <a href="/Home/About" class="dropdown-toggle" data-toggle="dropdown"> Country Guide<span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li> <a href="/Home/Basic">Basic Page</a> </li> <li> <a href="/Home/Advanced">Advanced Page</a> </li> <li> <a href="/Authors">Author</a> </li> <li> <a href="/Books">Book</a> </li> <li role="separator" class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a class="menu-link sign-up" href="/signup">Sign Up</a></li> <li><a class="menu-link sign-in" href="/myaccount">Sign In</a></li> </ul> </div><!--/.nav-collapse --> </div><!--/.container-fluid --> </nav> <div class="container body-content"> <h2>Index</h2> </div> <!-- Footer --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function () { $('#mainNav').affix({ offset: { top: 100 } }) }); </script> </body> </html> |
How to loop throw and Array of objects
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var arrayOfObj = self.authors(); for (var i = 0; i < arrayOfObj.length; i++) { var objItem = arrayOfObj[i]; for (var key in objItem) { //console.log("key: " + key + " value: " + objItem[key]); console.log(objItem.Name); } } for (var i = 0; i < self.authors().length; i++) { for (var key in self.authors()[i]) { console.log(self.authors()[i].Name); } } |
Array to String
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
public string Index() { string[] array = new string[5]; array[0] = "Dot"; array[1] = "Net"; array[2] = "Perls"; array[3] = "Sam"; array[4] = "Allen"; // // Call the methods. // StringBuilder builder = new StringBuilder(); foreach (string value in array) { builder.Append(value); builder.Append('.'); } builder.ToString(); string joinedStr = string.Join(".", array); joinedStr.ToString(); return String.Format("buiderStr: {0} joinedStr: {1}", builder, joinedStr); } |
CSS3 drop-shadow
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <style> div.shadow1 { margin: 20px; width: 400px; height: 200px; border: 1px solid #999; background-color: lightgrey; box-shadow: 0px 0px 8px 2px rgba(0,0,0, .30); } div.shadow2 { margin: 20px; width: 400px; height: 200px; background-color: lightgrey; box-shadow: 2px 0px 2px #FF0000, 0 4px 4px #0000FF ; } </style> </head> <body> <div class="shadow1"> <div class="absolute">my text</div> </div> <br /> <div class="shadow2"> <div class="absolute">my text</div> </div> <!--(shadow is: duplicate of top item in black and placed bellow the box) first element: shadow slided to right px second element: shadow slided down px. third element: shadow softness; fourth: how far to extend the shadow use rgba to add transparancy--> </body> </html> |