Posts

Create PopUp Box through pure JavaScript

-
  How to create popup box through pure JavaScript with ID and Class. Simple copy the code and paste in your HTML file and check popup is working. <style> .container{margin:0 auto; width:1170px;} .row{width:100%; display:flex; justify-content:space-between;} .row button{background-color:#099; padding:5px 10px; border-radius:5px; font:16px/24px Arial, Helvetica, sans-serif; color:#fff; border:0; cursor:pointer;} .modalbox{background-color:#fff; border:1px solid #000; border-radius:5px; padding:10px; position:absolute; top:25%; left:0; width:600px; transform:translate(100%); z-index:9;display:none;} .modalbox.active{display:block;} .closemodal{display:flex; margin-left:auto; font:bold 20px/28px Arial, Helvetica, sans-serif; color:#000; position:absolute; right:10px; top:10px; text-decoration:none} .modalbox h2{font:20px/28px Arial, Helvetica, sans-serif; color:#000; font-weight:bold; display:block;} .modalbox p{font:20px/28px Arial, Helvetica, sans-serif; col...
Post a Comment
Read more
-
How to display icon in font awesome if you have used to fas  and far. Mostly we have used fa for font awesome icon. if you have to used fas and far icon are not display it's showing square shape. So used the below css path in your project it's working fine. @import url('https://use.fontawesome.com/releases/v5.0.8/css/all.css'); <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" >
Post a Comment
Read more

What is flexbox and properties of flexbox.

-
The flexbox property in CSS is the combination of flex-grow property, flex-shrink property, and flex-basis property. That is used to set the length of flexible items. The flexbox property is much responsive and mobile friendly for web page. It is easy to positioning child elements and the main container. The margin doesn’t collapse with the content margins in flexbox property. The flexbox property is easy to covert ordering of HTML. Flexbox css property that can be applied on HTML container. display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow: <‘flex-direction’> || <‘flex-wrap’> justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Post a Comment
Read more

How to make custom accordian through jQuery.

-
How to make custom accoridian through jquery. Copy the below code and save the code in HTML format and see the preview. Also, see the preview in bottom. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Accordian</title> <style> .content { display: none; } .activeexpand { color: red; } </style> </head> <body> <div class="accordian">   <h2>First accordian click me</h2>   <div class="content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make...
Post a Comment
Read more

How to environment setup of Angular Project for beginners

-
Firstly Install node Js in your pc Run below command in CLI and CMD. [MS DOS] npm install -g @angular/cli ng new myAngularProject cd myAngularProject ng serve For Mac Pc Add sudo for every command
Post a Comment
Read more

How to debugging phone in chrome browser in easy steps.

-
Image
Requiered steps for debugging mobile phone. 1.        Firstly connect phone through usb. [Computer CPU to Phone] 2.        Go to phone setting option and select the additional setting option in setting tool of phone. 3.        After that go to in developer option in phone. 4.        After that Choose option Allow USB Debugging option in phone. 5.        After that open google chrome browser and type the below code in Google Chrome Address chrome://inspect/#devices 6.        Open the web page in google chrome app on your connected phone. Finally debugging is start. Enjoy......
Post a Comment
Read more

How to make custom Accordian through jQuery. Copy the code and paste the code and save the file in HTML format and see the preview.

-
Image
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Accordian Through JQuery</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script> $(document).ready(function() { $(".cont").css('display','block');     $(".heading-accordian").click(function(){ if(($(this).parent().find('.maincontent').css('display') != 'block')){ $(".maincontent").removeClass('cont'); $(".maincontent").slideUp(); $(".roundarrow a").removeClass("active") $(this).parent().find('.maincontent').sli...
1 comment
Read more