Angular js sample projects


Angularjs sample application

19 AngularJS Admin Templates for Download

https://github.com/angular/angular.js/wiki/Projects-using-AngularJS

http://angularcode.com/

https://www.template.net/web-templates/website-templates/angularjs-template/

http://startangular.com/

15 Best Responsive HTML5 & CSS3 AngularJS Admin Templates To Build Awesome Web Apps 2016

30+ Responsive Free AngularJS Admin Themes

Bootstrap scrollspy affix


Understanding Bootstrap’s Affix and ScrollSpy plugins

 

Bootstrap horizontal scrolling tabs


http://www.bootply.com/l2ChB4vYmC

HTML:

</div>

CSS:

.wrapper {
position:relative;
margin:0 auto;
overflow:hidden;
padding:5px;
height:50px;
}

.list {
position:absolute;
left:0px;
top:0px;
min-width:3000px;
margin-left:12px;
margin-top:0px;
}

.list li{
display:table-cell;
position:relative;
text-align:center;
cursor:grab;
cursor:-webkit-grab;
color:#efefef;
vertical-align:middle;
}

.scroller {
text-align:center;
cursor:pointer;
display:none;
padding:7px;
padding-top:11px;
white-space:no-wrap;
vertical-align:middle;
background-color:#fff;
}

.scroller-right{
float:right;
}

.scroller-left {
float:left;
}

 

JAVASCRIPT:

var hidWidth;
var scrollBarWidths = 40;

var widthOfList = function(){
var itemsWidth = 0;
$(‘.list li’).each(function(){
var itemWidth = $(this).outerWidth();
itemsWidth+=itemWidth;
});
return itemsWidth;
};

var widthOfHidden = function(){
return (($(‘.wrapper’).outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
};

var getLeftPosi = function(){
return $(‘.list’).position().left;
};

var reAdjust = function(){
if (($(‘.wrapper’).outerWidth()) < widthOfList()) {
$(‘.scroller-right’).show();
}
else {
$(‘.scroller-right’).hide();
}

if (getLeftPosi()<0) {
$(‘.scroller-left’).show();
}
else {
$(‘.item’).animate({left:”-=”+getLeftPosi()+”px”},’slow’);
$(‘.scroller-left’).hide();
}
}

reAdjust();

$(window).on(‘resize’,function(e){
reAdjust();
});

$(‘.scroller-right’).click(function() {

$(‘.scroller-left’).fadeIn(‘slow’);
$(‘.scroller-right’).fadeOut(‘slow’);

$(‘.list’).animate({left:”+=”+widthOfHidden()+”px”},’slow’,function(){

});
});

$(‘.scroller-left’).click(function() {

$(‘.scroller-right’).fadeIn(‘slow’);
$(‘.scroller-left’).fadeOut(‘slow’);

$(‘.list’).animate({left:”-=”+getLeftPosi()+”px”},’slow’,function(){

});
});

custom data stored in wordpress


Contactfomdb plugin using:

https://wordpress.org/plugins/contact-form-7-to-database-extension/

Retrieving the images and form fields form the database plugin:

[cfdb-html form=”Contact for5″ filelinks=”img” show=”your-name,your-email,your-subject,UPLOAD” limit=”10″ orderby=”Submitted desc”]

${your-name}: ${your-email}

Subject: ${your-subject}

Subject:${UPLOAD}

[/cfdb-html]

 

[cfdb-html form=”Contact for5″ show=”UPLOAD” filelinks=”url”]

 <img src=”${UPLOAD}” height=”100″ width=”100″/>

[/cfdb-html]

 

<marquee  behavior=”scroll” direction=”left” width=”1000″>[cfdb-html form=”Contact for5″ show=”UPLOAD” filelinks=”url” stripbr=”true”]

 <img src=”${UPLOAD}” height=”100″ width=”100″ id=”imgbr” />

[/cfdb-html]

</marquee>

 

LESS Tutorial


Less could save variables!

Think of having to do big changes to your css colors. It’s obviously your designer fault but you’ll waste precious hours you could spend on facebook.
Less declare variables, if used smartly they could become precious patners. Example:

CSS Version

#content{
color: #FFFFFF;
background-color: #333333;
}

#title{
color: #333333;
background-color: #FFFFFF;
}

LESS Version

@gray: #333333;
@white: #FFFFFF;

#content{
color: @gray;
background-color: @white
}
#title{
color: @white;
background-color: @gray;
}

Powerful indeed. You could easily change your colors with just 1 line editing, plus variables works with any kind of css parameters, think of them as a code replacer.

 

Less make your code cleaner

Css could be a pain in the ass sometimes when you have to make specific class and expressions, Less works like a sir make your job easier and cleaner.

CSS Version

body #container { width: 200px; }
body #container .first_item{ color: black; }
body #container .first_item h2{ color: gray; }
body #container .first_item p{ color: red; }
body #container .second_item{ color: black; }
body #container .third_item{ color: gray; }
body #container .third_item p{ color: green; }

LESS Version

body{
    #container{
        width: 200px;
        .first_item{
            color: black;
            h2{
                color: gray;
            }
            p{
                color: red;
            }
        }
        .second_item{
            color: black;
        }
        .third_item{
            color: gray;
            p{
                color: green;
            }
        }
    }
}

If you look at the LESS syntax (that i’d remind you that minify when compiled) it’s much more clearer and specific. You could find that LESS version is far more similar to HTML than CSS one and this is one of most useful pratice of LESS, giving you the chance to read your and your patners code istantly.

Less can declare functions

LESS functions are like a bunch of css rules accepting variables. Actually functions are not required but they are the most powerful feature of LESS, the more you are smart the more you could make your code short and reusable.

CSS Version

#icon_1{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#icon_2{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#icon_3{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

LESS Version

.rounded-corners (@radius: 0) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#icon_1{
    .rounded-corners(5px);
}
#icon_2{
    .rounded-corners(10px);
}
#icon_3{
    .rounded-corners(15px);
}

Great feature, you could shorten big bunch of codes if you are smart enough to plan it early.

Less knows math

Self explains

LESS Version

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

LESS can import other .less files

Think of organizing your code in many .less files, one for variables, one for functions, one for fonts families. That’s what Bootstrap and Twitter guys do.
I will paste the bootstrap.less code, the power of this feature it’s that you could comment and cut out any part of your css anytime with just 2 digits, like i did:

LESS Version

/*!
 * Bootstrap v2.0.4
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Grid system and page structure
@import "scaffolding.less";
@import "grid.less";
@import "layouts.less";

// Base CSS
@import "type.less";
@import "code.less";
@import "forms.less";
@import "tables.less";

// Components: common
@import "sprites.less";
//@import "dropdowns.less";
//@import "wells.less";
@import "component-animations.less";
@import "close.less";

// Components: Buttons & Alerts
@import "buttons.less";
@import "button-groups.less";
@import "alerts.less"; 

// Components: Nav
//@import "navs.less";
//@import "navbar.less";
//@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";

// Components: Popovers
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";

// Components: Misc
//@import "thumbnails.less";
@import "labels-badges.less";
@import "progress-bars.less";
//@import "accordion.less";
//@import "carousel.less";
//@import "hero-unit.less";

// Utility classes
//@import "utilities.less"; // Has to be last to override when necessary

wordpress training in bangalore

Tags

, ,


Regular Batch: Monday to Friday

Fast-track Batch: as per student requirements ( Sat & Sunday )

We give students an opportunity to learn first-hand the challenges involved in designing websites professionally. We prepare you to utilize the potential of wordpress to full extent to develop a wide range of real-time website and provide hands-on experience in:

Corporate Websites/ Organization Websites

Online media such as magazines, newspapers, and publications

eCommerce and online transactions/registrations

Government organizations / applications

Small & Medium-business websites

NGO & other non-profit organizations websites

Community-based portals

School and religious websites

Personal Websites (showcasing professional expertise)

Organizational intranets and extranets

Introduction to WordPress* What is WordPress* The Dashboard* Admin Bar* Exploring Settings* Posts vs. Pages* Creating Posts

* Adding Links

* Adding Images

* Formatting Posts

* Scheduling Posts

* Categories and Tags

* Custom Themes

* Managing Comments

* Creating Users

* Theme integartion

* Convention HTML to WordPress Theme

* Custom post and pages integartion

* Creating a Page* Page Templates* Child Pages* What is a Plugin* Finding Plugins* Free Themes

* Premium Themes

* Child Themes

* Custom Menus

* Managing Comments

* Creating Users

* Child Themes

* Custom Menus

* Custom Plugins

*Custom Pages
*Contact forms integartions

*SEO Optimization for wordpress website

http://topnotchinfo.co.in/wordpress-training.php

Contact Us:

Location : Hyderabad ( Ameerpet )

Name     : Mahesh

Email     : mahesh.alladi@gmail.com

Mobile   : 9603813050

Students did own projects:

Student name: vijay  && Number: 9542185209
http://www.merabijapur.com/
http://www.healthtradition.in/

————— &&&———–

Student name: Ramesh Number: 8050575856

http://thedigitalciti.com/

http://rameshpennam.com/

————— &&&———–

Student name: Sudhakar Number: 7799309956

http://propertyonsale.com.sg

————— &&&———–

Student name: Rajukumar Number: 9885225882

http://sysconcronus.com/

————— &&&———–

Student name: Pratima

http://impratima.in/

————— &&&———–

Student name : Anurag   Number: 9700123092

http://syncrooms.com/

http://isphier.com/

————— &&&———–

Student name : Rapolu Praveen reddy    Number: 9949290999

http://fotobuddha.com/

————— &&&———–

Student name : Manasvi A

http://hitechpublicity.net   (Shopping Cart )

————— &&&———–

Student name : Ravi Kanth Vallakati

http://www.executiveshuttle.co.nz/
http://taylorbuildingmaintenance.co.nz/
http://justfences.co.nz/

 

Learn LESS in less than 20 minutes!


Declaring variables:

Less code :

@border-width: 1px;
@red: #842210;

// Using variables
div#header {
border: @border-width solid @red;
}

Css output:

div#header {
border: 1px solid #842210;
}

Mixins:

less code:

// The bordered class
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

// We reuse the contents of the bordered class
// in #menu a and .post a
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}

css code:

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

parametric mixin

less code:

.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

// Which can be used like this:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}

// A parametric mixin with a default value:
.border-radius-with-default(@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

// Which can be used like this:
#content {
.border-radius-with-default;
}

// You can also use a parametric mixin
// without any parameters. This is useful if
// you don’t want the original mixin itself
// in the css output
.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre {
.wrap;
}

css output:

#header {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.button {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#content {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}

Nested rules

less code

// In LESS you can nest your rulesets.
// This is a very important feature because:
// -You don’t have to write out repeating long
//  selectors
// -It helps to structurize your code

#content {
width: 500px;

a {
color: white;

// You can use the ‘&’-selector to
// apply a nested selector to the
// parent selector:
&:hover {
color: blue;
}

&.selected {
color: yellow
}
}
}

css code:

#content {
width: 500px;
}
#content a {
color: white;
}
#content a:hover {
color: blue;
}
#content a.selected {
color: #ffff00;
}

Operations

less code

// In LESS you can operate on any number,
// color or variable.

// Basic operations
@base: 200px;
@height: @base * 2;
@min-width: @base + 100;
@max-width: (@min-width – 50) * 2;

.basic_operations {
height: @height;
min-width: @min-width;
max-width: @max-width;
}

// Operating on colors:
@base-color: #444;

.color_operations {
color: @base-color / 4;
background-color: @base-color + #111;
}

css code:

.basic_operations {
height: 400px;
min-width: 300px;
max-width: 500px;
}
.color_operations {
color: #111111;
background-color: #555555;
}

Scope 

less code

// Scope in LESS is very similar to that of
// programming languages. Variables and mixins
// are first looked up locally, and if they
// aren’t found, the compiler will look in the
// parent scope, and so on.

@var: red;

#page {
@var: white;
#header {
color: @var; // white
}
}

#footer {
color: @var; // red
}

css code

#page #header {
color: #ffffff;
}
#footer {
color: #ff0000;
}

Learn LESS in less than 20 minutes!

http://winless.org/online-less-compiler

http://freebiesbug.com/code-stuff/html-ui-kits/

Changing placeholder text when window resizes with jQuery

Tags


<input type="text" placeholder="Search Microsoft Partner Network" class="my_textarea'">

Placeholder : Search Microsoft Partner Network

Using below code changing the resolution 680 below screen size:

Output :

Placeholder : Reply...

$('.my_textarea').each(function() { $(this).data('placeholder', $(this).attr('placeholder')); }); function changePlaceholder() { if( $(window).width() < 680 ){ $('.my_textarea').attr('placeholder','Reply...'); } else { $('.my_textarea').each(function() { $(this).attr('placeholder', $(this).data('placeholder'));

});

}

}

$(window).resize( changePlaceholder ).trigger('resize');