wonderfan / javascript

Explore the power of HTML,CSS and JavaScript

• 👋 Hi, I’m @Afanti
• 👀 I’m interested in programming and writing.
• 🌱 I’m currently learning DeFi, NFT, Metaverse.
• 💞️ I’m looking to collaborate on blockchain projects
• 📫 You can reach me by twitter: Afanti.

javascript's Issues

ionic.js framework

window.ionic = window.ionic || {};
window.ionic.views = {};

Media Queries in JavaScript

The enquire js: http://wicky.nillia.ms/enquire.js/

The form submit event in jQuery

The submit api: submit

The directive in the Angular JS

Here some useful tutorials:

• ng-newsletter
• basicis

How to understand the Constructor attribute ?

In the jQuery framework, the plugin function usually has one attribute named Constructor and it is function type. What is its purpose?

for example:

  function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.scrollspy')
      var options = typeof option == 'object' && option

      if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

  var old = $.fn.scrollspy

  $.fn.scrollspy             = Plugin
  $.fn.scrollspy.Constructor = ScrollSpy

menu animation

The superfish dropdown menu: https://github.com/joeldbirch/superfish/

Local storage in JavaScript

Two ways to use local storage:

• use the localStorage in the window object;
• use cookie to store the key-value pairs;

ionic mobile

The main code repository:https://github.com/driftyco/ionic

The full story of directives

• The ngInit directive allows you to evaluate an expression in the current scope.

The $http service and $resource service in AngularJS

1. $http service is low-level and we have to define each method atop of this service;
2. $resource service is high-level and easy for use

Angular module and its methods

The source code is in the loader.js

The portrait and landscape

The media query for standard device: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

guid in javascript

Here is one link: https://github.com/dandean/guid

The node type in the html

NodeTypes - Named Constants

1 ELEMENT_NODE
2 ATTRIBUTE_NODE
3 TEXT_NODE
4 CDATA_SECTION_NODE
5 ENTITY_REFERENCE_NODE
6 ENTITY_NODE
7 PROCESSING_INSTRUCTION_NODE
8 COMMENT_NODE
9 DOCUMENT_NODE
10 DOCUMENT_TYPE_NODE
11 DOCUMENT_FRAGMENT_NODE
12 NOTATION_NODE

The workflow of Angular JS

The Angular JS framework is very clean and easy to understand as below:

• Define the app element with id,class or attribute noted with ng-app;
• Solve the app element's dependencies automatically;
• Compile the each node of app element and wrap them with directives and scope

CSS3 Features

CSS3 allows you to create borders with rounded corners.

CSS3 also allows you to use an image as a border.

HTML5 tags: figure and figcaption

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

The parameter pass between the controller

Use the shared service to store and get the data: https://thinkster.io/a-better-way-to-learn-angularjs/services

How to get the path parameters in AngularJS?

1. Use the $routeProvider to add the URL mapping
2. Use $routeParas service to get access to the values

Rethink jQuery

This gives me to rethink of jQuery:

• youmightnotneedjquery
• dom101

The design principles of Flat-UI

The source code repository:https://github.com/CEMD-CN/Flat-UI

SASS Guide

SASS允许使用变量，所有变量以$开头。

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

HTML5 new tags

The most interesting new elements are:

New semantic elements like <header>, <footer>, <article>, and <section>.

New form control attributes like number, date, time, calendar, and range.

New graphic elements: <svg> and <canvas>.

New multimedia elements: <audio> and <video>.

CSS Positioning

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.

Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

Ext JavaScript

Here are the source code links:

• extjs
• extjs

How to use the input group in the boostrap?

Input groups are extended Form Controls. Using input groups you can easily prepend and append text or buttons to text-based inputs.

By adding prepended and appended content to an input field, you can add common elements to the user’s input. For example, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be common for your application interface.

To prepend or append elements to a .form-control:

Wrap it in a

with class .input-group

As a next step, within that same

, place your extra content inside a with class .input-group-addon.

Now place this either before or after the element.

For cross browser compatibility, avoid using elements here as they cannot be fully styled in WebKit browsers. Also do not apply input group classes directly to form groups. An input group is an isolated component.

The compile and link in the AngularJS

1. Step into a DOM node.
2. Loop through registered directives to see if this node contains any.
3. For each directive found:
   1. Determine if the current scope is to be used, or if a child or isolated scope needs to be created.
   2. Create a function that, when called, will execute the directive's linking function against the appropriate scope from step 3.1.
   3. Append that function to a list of functions to be executed later.
4. Does the current DOM node have children?
   1. YES: Step into each one and go to step 1 above.
   2. NO: That's the end of this branch.
5. Return a function that will execute all functions created in Step 3.2. This is your compiled view.

LESS preprocessor

We can use the less.js and css.less in the html page.

Here is the less.js: https://github.com/less/less.js

responsive menu

The text color in the sub-menu is #AAA

The background color of the sub-menu is #000

The background color of the main menu is #222

Animation

How to create jQuery animation: http://code.tutsplus.com/tutorials/jquery-animations-a-7-step-program--net-8426

Parse SDK and Its value

There is the parse official site:

• parse sdk

Pure CSS from yahoo

The official link is https://github.com/yahoo/pure

find the desired parent

Use closest method:

jQuery("#id_ikepolicy_id").closest("div.form-group").hide();

jQuery Mobile

What does body's onload event mean?

This event handler will be called on the body element when the body has finished loading.

The dependency injection in Angular JS framework

Here are the good learning and tutorials:

• angular

How to add and remove row dynamically?

Here are the answer:

• jquery
• stackoverflow
• update
• mind fire

Ignored shinning facets of jQuery

$("strong + em")
Selects all elements matched by <em>that immediately follow a sibling element matched by <strong>.

Responsive element

Knockout makes it easier to create rich, responsive UIs with JavaScript: http://knockoutjs.com/

The relationship between responsive design and jQuery mobile

Most of sites need to be responsive for attracting end users. In the responsive design, we usually add the device detect library like modernizer and media query support(js and css). I also see jQuery mobile used in the mobile development. I am confused of the relationship between them. Please help clarify.

The best practice of response design

For IE browser, we need to add js and make it support media query:

<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lte IE 8]>

<link rel="stylesheet" type="text/css" href="styles/ie876fix.css" />

<script type="text/javascript" src="/scripts/ie/respond.min.js"></script>

<![endif]-->

Angular and Backbone

The entry point of Angular JS is the angular_init function. When the document is ready, this method will be performed.The following actions are to find the target elements and bootstrap the modules.

The injector of AngularJS

• $injector is used to retrieve object instances as defined by
• {@link auto.$provide provider}, instantiate types, invoke methods,
• and load modules.

foundation framework

The scss library(https://github.com/zurb/foundation/blob/master/lib/scss.js) for scss preprocessor.

CSS Background

The background-position property sets the starting position of a background image.

How to disable text select ?

Here are the answer:

• http://chris-barr.com/2009/02/disable_text_selection_with_jquery/
• http://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable

media query callback function

This is an awesome media query library: http://wicky.nillia.ms/enquire.js

IP and subnet validation

One regular expression to valid IP

"regex":"/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/"

Explore the source codes of compile process

• There are many different options for a directive.
• The difference resides in the return value of the factory function.
• You can either return a "Directive Definition Object" (see below) that defines the directive properties,
• or just the postLink function (all other properties will have the default values).

How to make iframe responsive?

There are some solutions and evaluate which is the best:

• http://npr.github.io/responsiveiframe/
• http://www.benmarshall.me/responsive-iframes/
• http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/
• https://www.advomatic.com/blog/responsive-iframes-yes-it-is-possible
• http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/
• http://fitvidsjs.com/

Move the images

• jsMovie
• Burkhardt & Schmidt Medienkommunikation GbR - Richard Burkhardt
• version 1.4.3b
• This is a jQuery-plugin for jQuery 1.4+ (tested). This plugin enables you
• to play image sequences without flash or HTML5 with the benefit of playing
• your movies backwards and having PNG images animated.