Thursday, May 30, 2019

Custom Checkbox Css with and without label



Demo

HTML for checkbox is

With Label

<div class="boxes withlabel">
  <input type="checkbox" id="rj-1">
  <label for="rj-1">Hello World</label>

  <input type="checkbox" id="rj-2" checked>
  <label for="rj-2">RJ Code for every one </label>

  <input type="checkbox" id="rj-3">
  <label for="rj-3">Checkbox with label</label>
</div>


With out Label

<div class="boxes without">
  <input type="checkbox" id="box-1">
  <input type="checkbox" id="box-2" checked>

  <input type="checkbox" id="box-3">
</div>

CSS

/* With label Checkboxes styles*/

.withlabel input[type="checkbox"] { display: none; }

.withlabel input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #fff;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.withlabel input[type="checkbox"] + label:last-child { margin-bottom: 0; }

.withlabel input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.withlabel input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* With out Checkboxes styles*/

.without input[type="checkbox"] {
  display: block;
  position: relative;
  margin-bottom: 20px;
  width:0;
  cursor: pointer;
}

.without input[type="checkbox"]:last-child { margin-bottom: 0; }

.without input[type="checkbox"]:before {
  content: '';
  background:#F46A4A;
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.without input[type="checkbox"]:checked:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

Enjoy Comments are welcome :)

Thursday, February 21, 2019

Error in creating angular component from CLI

Error code is:


More than one module matches. Use skip-import 
option to skip importing the component into the 
closest module.

This Error is related to component module file When we have multiple module file (more than one) then auto generated component is missing module path so we need to give module path with component name like :

 ng g c ./feature/ComponentName --module modulePath

For Example

ng g c ./feature/metric-detail --module app 

comments are always welcome :)

Tuesday, February 19, 2019

Angular CLI cheat sheet

Install Globally

npm install -g @angular/cli

Install Locally

npm install @angular/cli
To run a locally installed version of the angular-cli, you can call ng commands directly by adding the .bin folder within your local node_modules folder to your PATH. The node_modules and .bin folders are created in the directory where npm install @angular/cli was run upon completion of the install command.
Alternatively, you can install npx and run npx ng <command> within the local directory where npm install @angular/cli
 was run, which will use the locally installed angular-cli.

Install Specific Version (Example: 6.1.1)

npm install -g @angular/cli@6.1.1

Usage

ng help

Generating and serving an Angular project via a development server

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve
Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
You can configure the default HTTP host and port used by the development server with two command-line options :
ng serve --host 0.0.0.0 --port 4201

Generating Components, Directives, Pipes and Services

You can use the ng generate (or just ng g) command to generate Angular components:
ng generate component my-new-component
ng g component my-new-component # using the alias 
 
# components support relative path generation 
# if in the directory src/app/feature/ and you run 
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp 
# but if you were to run 
ng g component ./newer-cmp
# your component will be generated in src/app/newer-cmp 
# if in the directory src/app you can also run 
ng g component feature/new-cmp
# and your component will be generated in src/app/feature/new-cmp 
You can find all possible blueprints in the table below:

Scaffold
Usage
ng g component my-new-component
ng g directive my-new-directive
ng g pipe my-new-pipe
ng g service my-new-service
ng g class my-new-class
ng g guard my-new-guard
ng g interface my-new-interface
ng g enum my-new-enum
ng g module my-module
1.      ng g module new-module to create a new moduleangular-cli will add reference to componentsdirectives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow these steps:
2.       call ng g component new-module/new-component
This should add the new componentdirective or pipe reference to the new-moduleyou've created.

Updating Angular CLI

If you're using Angular CLI 1.0.0-beta.28 or less, you need to uninstall angular-clipackage. It should be done due to changing of package's name and scope from angular-clito @angular/cli:
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
To update Angular CLI to a new version, you must update both the global package and your project's local package.
Global package:
npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean` 
npm install -g @angular/cli@latest
Local project package:
rm -rf node_modules dist 
# use rmdir /S/Q node_modules dist in Windows Command Prompt; 
use rm -r -fo node_modules,dist in Windows PowerShell 
npm install --save-dev @angular/cli@latest
npm install

Some Useful Flag for Angular CLI.

1.     To open project automatically in a browser Tab
ng serve --o
OR
ng serve --open
2. Create project with routing file by default
ng new ProjectName --routing
3. Run project on different Port (Apart from default Port 4200)
ng serve --port 4201
4. Changing Base href while build
ng build --base-href=yourValue
OR
ng build --base-href /myUrl/
5. For performance of your application
* ng build --prod
* ng build --aot
6. Adding custom prefix for new project
ng new your-project --prefix custom
7. For Inline Template/Style of your component
ng g c button --inline-style --inline-template
You can anyone as per your requirements.
8. Avoid Hashing of file names while bundle your application
ng build -prod --output-hashing none
OR
ng build -prod --output-hashing=none

Tuesday, November 6, 2018

React Components in loop

How to create dynamic react component in loop

state={

  Userinfo:[

    { name: 'Ravish Jha', Location: 'India'},

    { name: 'Ritika Jha', Location: 'USA'},

    { name: 'Raju Jha', Location: 'UK'}

  ]

} 
 
render() {
return (
<div className="App">
{
this.state.Userinfo.map(info => {
return <Useroutput UserName= {info.name}
UserLocation
={info.Location} />
})}
</div>
);
}
 

How to remove Checkout Step 2, Step 3, Step 4, Step 5 in opencart 2.3.0.2

Dear Friends :)

Here is some Steps for remove Open cart checkout Steps:

For steps 2 : { Billing Details }

Open your checkout.tpl
catalog\view\theme\default\template\checkout\checkout.tpl 

Steps: 1
And find 


Line Number 129
$('#collapse-payment-address .panel-body').html(html);
 And Replace with

$('#collapse-payment-address .panel-body').html(html);
//Remove Billing Details
$('#collapse-payment-address #button-payment-address').trigger('click');
Enjoy Comments are welcome.

For steps 3 :{ Delivery Details}

Open your checkout.tpl
catalog\view\theme\default\template\checkout\checkout.tpl 
And find 


Line Number 382 
$('#collapse-shipping-address .panel-body').html(html);
 And Replace with

 $('#collapse-shipping-address .panel-body').html(html);
// Remove Delivery Details
$('#collapse-shipping-address #button-shipping-address').trigger('click');

Enjoy Comments are welcome

For steps 4 : { Delivery Method }

Open your checkout.tpl
catalog\view\theme\default\template\checkout\checkout.tpl 

And find 


$('#button-shipping-address').button('reset');
                    },
                    success: function(html) {
                        $('#collapse-shipping-method .panel-body').html(html);
 And Replace with

$('#button-shipping-address').button('reset');
                    },
                    success: function(html) {
      //Ravish code
                        $('#collapse-shipping-method .panel-body').html(html);
                        $('#collapse-shipping-method #button-shipping-method').trigger('click');
Enjoy Comments are welcome

For steps 5 : { Payment Method  }

Open your checkout.tpl
catalog\view\theme\default\template\checkout\checkout.tpl 

And find 


 $('#button-shipping-method').button('reset');
                    },
                    success: function(html) {
                        $('#collapse-payment-method .panel-body').html(html);
 And Replace with

 $('#button-shipping-method').button('reset');
                    },
                    success: function(html) {
                        $('#collapse-payment-method .panel-body').html(html);
      // Ravish Code
      $('#collapse-payment-method #button-payment-method').trigger('click');

Enjoy Comments are welcome
Now You Removed all your steps if code is working fine please like and follow my page or comments on post

Thanks for Visit My Blog

Tuesday, August 21, 2018

Css hack for IE11+, Edge


Hi
CSS Hack for IE browser version IE 11 + and edge , window 10

@charset "";

_:-ms-lang(x),

.selector {
top: 2px !important;
}

Let me know if code not working or facing some issue

Sunday, February 18, 2018

JavaScript rewrite URL


if (document.URL == "http://www.domainName.com/") {
console.log(document.URL);
        var restOfUrl = window.location.href.substr(11);
        window.location = "http://" + restOfUrl;
    }

Comments are welcome