Blog – GT.com

debug sass

By graphict February 16, 2017 0

$tile-colors: blue, green, red, orange, purple;


@each $color in $tile-colors{
    $i: index($tile-colors, $color);
    @debug settings title '$i = '  $i to $color;

}

$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

By graphict February 15, 2017 0

SASS

.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;
}

.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

.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; }

.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

<div>
        <div class="yes">Yes</div>
        <div class="no">No</div>
        <div class="cancel">Cancel</div>      
    </div>

<div>

<div class="cancel">Cancel</div>

</div>

add a simple dump

By graphict January 25, 2017 0

<!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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Hello Knockout!</h1>

<section>Records:

<li>

</li>

</ul>

</section>

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

By graphict January 25, 2017 0

File dump.js

//---------------------------------------
// 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 
//---------------------------------------
//});

//---------------------------------------

// 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:

<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 />

<h2>Debug</h2>

<hr />

<h2>show everithing</h2>

<hr />

<h2>show Employees</h2>

<hr />

<h2>show Employees enable: false</h2>

<hr />

<h2>show Employees, enable: true</h2>

<hr />

setting variables in an array of objects

By graphict January 25, 2017 0

 $(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);

        });

$(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.

By graphict January 3, 2017 0

<!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>

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>

<title>Index - My ASP.NET Application</title>

<!--

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>

<span class="sr-only">Toggle navigation</span>

</button>

</a>

</div>

<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>

<a href="/Home/About" class="dropdown-toggle"

data-toggle="dropdown">About<span class="caret"></span></a>

<a href="/Home/About" class="dropdown-toggle"

data-toggle="dropdown">

Country Guide<span class="caret"></span>

</a>

<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>

</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>

</div>

</div>

</nav>

<h2>Index</h2>

</div>

$(document).ready(function () {

$('#mainNav').affix({

offset: {

top: 100

}

})

});

</script>

</body>

</html>

How to loop throw and Array of objects

By graphict January 3, 2017 0

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);
                }
            }

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

By graphict December 20, 2016 0

 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);
        }

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);

}

Numeric converisons

By graphict December 20, 2016 0

sbyte 8 –128 to 127
byte 8 0 to 255
short 16 –32768 to 32767
ushort 16 0 to 65535
int 32 –2147483648 to 2147483647
uint 32 0 to 4294967295
long 64 –9223372036854775808 to 9223372036854775807
ulong 64 0 to 18446744073709551615

sbyte 8 –128 to 127

byte 8 0 to 255

short 16 –32768 to 32767

ushort 16 0 to 65535

int 32 –2147483648 to 2147483647

uint 32 0 to 4294967295

long 64 –9223372036854775808 to 9223372036854775807

ulong 64 0 to 18446744073709551615

CSS3 drop-shadow

By graphict November 28, 2016 0

<!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>

<!DOCTYPE html>

<html>

<head>

<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>

<br />

</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>