Skip to content

Instantly share code, notes, and snippets.

@spinningcat

spinningcat/documentbaseandcodebase.md

Last active November 2, 2016 03:19
Show Gist options
  • Save spinningcat/2927a312d0805c82f35342f6f40d2252 to your computer and use it in GitHub Desktop.
Save spinningcat/2927a312d0805c82f35342f6f40d2252 to your computer and use it in GitHub Desktop.
Download ZIP
bouch of codes and several sources to look at
Raw
documentbaseandcodebase.md

Learning Jquery

For learning jquery.
Check this playlist out. This playlist has multiple vids series. Guy who make this video available to you, is probably
indian but he has understandable acceent.
You can apply this any jquery ui object.
Interactive course web site.

#####Complete tutorial HTML - JS - CSS

#####Books

#####Javascript and Css Library

#####Angular JS example

###Vector Graph and Animation with Example

####Floaticon is really good web site. You dont need to worry about image like an arrow or facebook button. This site has really good stuff. So check it out.

#####Font awesome is for vectoral graphic. My two pennies, those two sites are related.

#####Unicode symbols. You can just copy and paste the symbols to your editor.

#####Css examples. You can check examples and test your skills.

#####Loading Animation

#####Click button to get animation

#####jQuery Animation

#####Css transition is one of option to make an animation.

#####Different Animation Alternatives.

#####Animation Examples (Variations)

###Hoisting and Scope

###Page Design

###Performance

###Css Tutorial, Official Documentation, Jquery, Jquery UI, and examples. #####Span is text level node whereas div is block level node. Display of span is inline. Whereas display of div is block. It is really important point.

#####jQuery focus

#####Ecma Script 6 Spread Operator

###Higher Order Function

Example with Reduce
Example with include, splice, indexOf

###Get The Content of Clicked Object. MDN-Xul-Attribute-Context

Example with Context

Example

###Merge two or more object into one. jQuery-Exctend

###You can use css as if you use photoshop. Each tecniques are illustrated Css-Tricks-Filter

###Vertically Center a Div. Stackoverflow-Vertically Center a Div in All Browser

#####Centering Element Example Example

#####Centering Element Example Example

###Layout is important. There are many elements to good layout which includes positioning , float , flex , responsiveness and etc. This web site taked about that issue. Btw css-tricks is really nice pace to hangout for such information.

###Bounch of Stuff Psuedo Elements can do

###Flexbox and Masonry

###Easy Masonry with Flexbox

#####Flexbox

#####Flexbox and Masonry

###Setting a Div in Viewport Size.

###If you put some text before or after elements into dom. ::before and ::after is your friend.

###In Case if needed - Shapes

###Combining JS Arrays

###Understanding Event Delegation

###CSS Boder

###Creating JSOB Object

###jQuery UI Datepicker

#####This question seems good place for grasping some aspects of datepicker.

###jQuery UI Dialog

###jQuery Date Range Picker Githıb-jQuery Date Range Picker

###jQuery UI Tooltip

###If you decide the Jquery UI Tooltip. Check this question out. This question has some hints.

###Put Tooltip Center of The Page

###jQuery UI Draggable & Droppable

###jQuery UI Tabs

###Other Examples and Sources

###Jqx Widget

###Jqx Widget Calendar

###Jqx Widget Table

###Jqx DateTime Input

###AJAX and JSON

###GUI Works

###MomentJS

###Letter Animation

###Javascript Objext Examination

  • You can bind more then one events to button or any dom objects. Normally you caan add event to button in jquery as meantioned below. $(’.buttonClass’).on(’click’, function()); you can do with this way this is binding event.Var x = function() $(.buttonClass).on(’click’,x); you can also use this way. The thing you need to focus on here, you type x instead of x(). The reason of that you give the function content for invoking button click. So button or any jquery object can have more then one job.
  • DOM element is a state like clicked, visible, checked and whatnot. Sometimes you really need to check the state of DOM element so as to carry out next operation. This link will give you some hints. You can find an example in jsfiddle. So when you click the button that will be hidden. So state of button will change. There is tricky thing i do here that is when you click button it will show pervious button So state of button will change again. It is properly documented. Second example filter DOM element. You can change the state of DOM element basically. It is also properly documented.
  • Stackoverflow - How To Check If an Element is Hidden in jQuery.
  • Example - State Example

###Slide The Div*

###Those Come In Handy

#####LeanModal Example

###Filtering DOM Elements

###Some Adittional Tutorials and Examples

###Validator

###Interactive Environment

###Books

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment