loop query parse promise

return Parse.Promise.as().then(function() { // this just gets the ball rolling
   var promise = Parse.Promise.as(); // define a promise

   _.each(data, function(item) { // use underscore, its better :)
     promise = promise.then(function() { // each time this loops the promise gets reassigned to the function below

var query = new Parse.Query("Panorama");
       query.equalTo("buildingCode", item);
       return query.find().then(function(results) { // the code will wait (run async) before looping again knowing that this query (all parse queries) returns a promise. If there wasn't something returning a promise, it wouldn't wait.

    console.log("lresults[i].get(Name):"+results.lenght);

           if(results.length == 0){//item does not exists
               console.log("not exists");
           }else{ // item exists
              for (var i = 0; i < results.length; ++i) {
       console.log("results[i].get(Name): "+results[i].get("Name"));
       returndata.push({"name":results[i].get("name"),"objectId":results[i].id});
       // console.log("after arr.push");
     }
           }

         return Parse.Promise.as(); // the code will wait again for the above to complete because there is another promise returning here (this is just a default promise, but you could also run something like return object.save() which would also return a promise)

       }, function (error) {
         response.error("score lookup failed with error.code: " + error.code + " error.message: " + error.message);
       });
     }); // edit: missing these guys
   });
   return promise; // this will not be triggered until the whole loop above runs and all promises above are resolved

 }).then(function() {
   response.success(returndata); // edit: changed to a capital A
 }, function (error) {
   response.error("script failed with error.code: " + error.code + " error.message: " + error.message);
 });

bosstrap small medium large size

Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
# of columns	12
Column width	Auto	~62px	~81px	~97px
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

different size width , different css file

<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 700px)"href="example.css" />

@media screen and (min-width: 400px) and (max-width: 700px) {
    .selector1{...}
    .selector2{...}
}

iPad and Android Orientation Code

from
http://www.htmlgoodies.com/html5/tutorials/an-introduction-to-css3-media-queries.html#fbid=tyXrbmKEcf5

HTML Goodies : HTML5 : Tutorials

• Post a comment
• Email Article
• Print Article
•  Share Articles

An Introduction to CSS3 Media Queries

By Michael Rohde

While HTML5 has been on everyone's mind lately, the use of related technologies such as CSS3 media queries are becoming increasingly important as well. Visitors have certain expectations when viewing your site on everything from a desktop to a laptop to a netbook to a tablet to a handheld. They expect your site to maintain a high level of  user experience satisfaction no matter how or where they see your site. This article dives into methodologies and techniques for using CSS3 media queries.

CSS 2.1 supports several media types, which are also supported by CSS3: screen, print and handheld. CSS3 takes it a bit further and includes max-width, device-width, orientation (portrait or landscape) and even color. Newer devices such as the latest iPad and Android devices with at least 2.2 installed will take advantage of these types.

Android Devices and Media Queries

Certain Android hand held devices such as the HTC EVO, in conjunction with certain applications, can adjust the screen and font color depending on the amount of light in the room. One application that uses this light-sensor technology is the Pulse app, which is a news feed service that aggregates your favorite news services into a single screen or screens. If there is plenty of light in the room, or in bright daylight, the screen will have a white background with black font. If you are in a dark room, or out and about at night, then the background will go black and the font becomes white.

If you’re riding on the train during the morning commute and you go through a tunnel, you’ll see the app change it’s color scheme automatically. It can be really amazing to see it happen. Android uses this same light-sensor technology to adjust the volume of a ring tone. The phone will ring louder if it senses it is in a pocket or a purse, due to a lack of light, and it will ring a bit quieter if it detects light. 

In an ideal world, you want to create a media query that allows devices that can use CSS3 to display correctly, while browsers and computers that cannot take advantage of CSS3 to bypass it completely.

Sample CSS3 Media Query Code

Here’s an example of such a media query:

<link rel="stylesheet" type="text/css"
    media="screen and (max-device-width: 480px)"
    href="foureighty.css" />

This media query will trigger your foureighty style sheet if the visitor’s  browser is 480 pixels or less. In this manner, you can create different style sheets to accommodate for different orientations as well as screen sizes.

Multiple Style Sheets Using Media Queries

You don’t have to use multiple style sheets to accommodate for all the different screen sizes and browsers that your visitors might use. However, if you prefer a different style sheet for each design, then you can use the following code as an example to do so:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />
<link rel="stylesheet" media="print" href="print.css" />

For sake of efficiency though, it might be better to place multiple styles for different browsers and sizes into a single style sheet. This eliminates the need for multiple requests for several different sheets. Here are a couple of more examples.

@media screen and (min-width: 600px) {
     .sixhundredminwidthclass {
          width: 30%;
          float: right;

     }
}

and

@media screen and (max-width: 600px) {
     .sixhundredmaxwidth {
          clear: both;
          font-size: 1.3em;
     }
}

You might notice that the very first example used max-device-width and the other two examples used min-width and max-width. It’s important to define the difference between the two. Min-width and max-width is specific to not only the screen size but the browser size. For example, a visitor on a desktop or laptop might resize their browser, which could then trigger a different media query and the appropriate style would then be applied. In contrast, max-device-width and min-device-width applies specifically to the device, which would work best with handheld devices.

iPad and Android Orientation Code

There is specific code for both iPads and Android devices for handling orientation. For Android, if you use elements with display set to box, you can order the child nodes for either vertical or horizontal. If no orientation is provided, the box defaults to vertical. Here’s a code example on how to handle that:

#androidorientation {
    display: -webkit-box;
-webkit-box-orient: horizontal;
    display: -moz-box;
    -moz-box-orient: horizontal;
}

The iPad uses the orientation property. Here are examples for both landscape and portrait:

@media screen and (orientation: landscape) {
     .applelandscape {
          width: 30%;
          float: right;
     }
}

@media screen and (orientation: portrait) {
     .appleportrait {
          clear: both;
     }
}

express node req res next()

app.get('/users', function(req, res) {
  // check for and maybe do something with req.user
});

function loadUser(req, res, next) {
  if (req.params.userId) {
    Users.findOne({ id: req.params.userId }, function(err, user) {
      if (err) {
        return next(new Error("Couldn't find user: " + err));
      }

      req.user = user;
      next();
    });
  } else {
    next();
  }
}

app.get('/user/:userId', loadUser, function(req, res) {
  // do something with req.user
});

app.get('/users/:userId?', loadUser, function(req, res) {
  // if req.user was set, it's because userId was specified (and we found the user).
});

// Pretend there's a "loadItem()" which operates similarly, but with itemId.
app.get('/item/:itemId/addTo/:userId', loadItem, loadUser, function(req, res) {
  req.user.items.append(req.item.name);
});

ejs example

from :
https://scotch.io/tutorials/use-ejs-to-template-your-node-application

app.get('/', function(req, res) {
    var drinks = [
        { name: 'Bloody Mary', drunkness: 3 },
        { name: 'Martini', drunkness: 5 },
        { name: 'Scotch', drunkness: 10 }
    ];
    var tagline = "Any code of your own that you haven't looked at for six or more months might as well have been written by someone else.";

    res.render('pages/index', {
        drinks: drinks,
        tagline: tagline
    });
});

<h2>Variable</h2>
<p><%= tagline %></p>
...<h2>Loop</h2>

<ul>
    <% drinks.forEach(function(drink) { %>
        <li><%= drink.name %> - <%= drink.drunkness %></li>
    <% }); %>
</ul>

===========  if   ==========

app.get("/recipes", function(req, res) {
    res.render("recipes.ejs", {
        recipes: recipes
    });
});

recipes.ejs File:

<%if (recipes.length > 0) { %>
// Do something with more than 1 recipe
<% } %>

mouse over hint, message

css
/*    */
/* Jas's CSS ToolTip */
a.jastips{
z-index:9;
color:#690;
border-bottom:1px dotted #690;
text-decoration:none;
}
a.jastips:hover{
position:relative;
z-index:99;
cursor:help;
}
a.jastips span{
display:none;
}

a.jastips:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.25em;
left:0;
background:#666;
border:1px solid #000;
color:#fff;
padding:1px 5px;
margin:0;
z-index:9;
}
/* end of Jas's CSS ToolTip */

<a href="#services" class="jastips clickscroll">
<div class="col-xs-3">
<!-- <i class="icon-resize-full-outline iconBig"></i>-->
<img class="img-responsive" src="images/index_page/BU03.jpg">
</div>
<div class="col-xs-9">
<h2>Interior Designer</h2>
<p>Display your client's dream decoration directly in their home using augmented reality. Make the experience more interactive than ever, and boost your sales.</p>

</div>
<span>Not available yet</span>
</a>

implementing class, function

function googleuploadAPI () {

            var PATH;
            var BUCKET;
            var downloadlink;
}


googleuploadAPI.prototype.insertObjectAccessControls = function (callback) {}
googleuploadAPI.prototype.insertObject = function (tf,uploadDetail,callback) {};

=========================================

function parseAPI (CLASSt) {

this.readParse = function (classt,index,val) {};

}

=========================================

var uploadAPI=new googleuploadAPI();

uploadAPI.insertObject(f,uploadDetail,function(){

          var PARSEAPI= new parseAPI();

    PARSEAPI.writeSignleCol("Building","Name","???","BuildingIntro",uploadAPI.downloadlink,function () {

                      alert("2");

                    });

                });

script type="text/template" , html inside html

<script id="templateId" type="text/html"></script>

<script type="text/html" id="template">
<li id="{%= id %}">{%= content %}</li>
</script>
<ul id="destination"></ul>

javascript class global variable example

http://stackoverflow.com/questions/1535631/static-variables-in-javascript

function MyClass () { // constructor function
  var privateVariable = "foo";  // Private variable 

  this.publicVariable = "bar";  // Public variable 

  this.privilegedMethod = function () {  // Public Method
    alert(privateVariable);
  };
}

// Instance method will be available to all instance but only load once in memory 
MyClass.prototype.publicMethod = function () {    
  alert(this.publicVariable);
};

// Static variable shared by all instance 
MyClass.staticProperty = "baz";

//...
var myInstance = new MyClass();




query click parameter

query click parameter


          $("#x").click({data:t'},function(event) {
            alert($(event.data.t));
          });

jQuery validate form

example from:
http://code.runnable.com/UZJ24Io3XEw2AABU/how-to-validate-forms-in-jquery-for-validation

  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
 

  <form action="" method="post" id="register-form" novalidate="novalidate">
 
    <div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
    <div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
    <div class="label">Email</div><input type="text" id="email" name="email" /><br />
    <div class="label">Password</div><input type="password" id="password" name="password" /><br />
    <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
   
  </form>







$(function() {
 
    // Setup form validation on the #register-form element
    $("#register-form").validate({
   
        // Specify the validation rules
        rules: {
            firstname: "required",
            lastname: "required",
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            },
            agree: "required"
        },
       
        // Specify the validation error messages
        messages: {
            firstname: "Please enter your first name",
            lastname: "Please enter your last name",
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy"
        },
       
        submitHandler: function(form) {
            form.submit();
        }
    });

  });

javascript difference between Object.create() and new SomeFunction()

var test = {val: 1, func: function(){ return this.val; }};
var testA = Object.create(test);

testA.val = 2;
console.log(test.func()); // 1
console.log(testA.func()); // 2

 inherits directly from the one passed as its first argument.

var otherTest = function(){
    this.val = 1;
    this.func = function(){
        return this.val;
    };
};

var otherTestA = new otherTest();
var otherTestB = new otherTest();
otherTestB .val = 2;
console.log(otherTestA.val); // 1 
console.log(otherTestB.val); // 2

console.log(otherTestA.func()); // 1
console.log(otherTestB.func()); // 2

Well, you can create closures, e.g. using property descriptors argument:

from:
http://stackoverflow.com/questions/4166616/understanding-the-difference-between-object-create-and-new-somefunction

常見jQuery的三種不同架構 $(function(), (function($), $.fn.myFunctionName

第一種
$(function(){
// Document is ready
});
其作用和 $(document).ready()一樣 ，用意在DOM載入後執行ready()方法。

第二種
(function($) {
// Here "$" is a jQuery reference
})(jQuery)
基本上是()(para)匿名方法(anonymous function)，傳承jQuery的函式庫，jQuery plugins都是用這樣的架構。

第三種
$.fn.myFunctionName = function(){
// script codes
}
自己定義function

from:

http://www.j4.com.tw/web-design/%E5%B8%B8%E8%A6%8Bjquery%E7%9A%84%E4%B8%89%E7%A8%AE%E4%B8%8D%E5%90%8C%E6%9E%B6%E6%A7%8B-function-function-fn-myfunctionname/