Get Complete Free Training in PHP,ANDROID,DIGITAL MARKETING : February 2022

Saturday 26 February 2022

css drop down menu example

<!DOCTYPE html>

<html>

<head>

<style>

.dropbtn {

background-color: #04AA6D;

color: white;

padding: 16px;

font-size: 16px;

border: none;

}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f1f1f1;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

</style>

</head>

<body>

<h2>Hoverable Dropdown</h2>

<p>Move the mouse over the button to open the dropdown menu.</p>

<button class="dropbtn">Dropdown</button>

</div>

</body>

</html>

Css Layout example with Div tag

<!DOCTYPE html>

<html>

<head>

<title>

Title

</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

#header

{

width: 100%;

height:200px;

background-color:green;

}

.container

{

width: 100%;

height: 400px;

background-color: orange;

}

.footer{

width: 100%;

height: 200px;

background-color: brown;

}

</style>

</head>

header

</div>

container

</div>

</div>

</body>

</html>

Friday 25 February 2022

Slider in Javascript

<!DOCTYPE html>

<html>

<head>

<style>

* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

.mySlides {display: none}

img {vertical-align: middle;}

/* Slideshow container */

.slideshow-container {

max-width: 1000px;

position: relative;

margin: auto;

}

/* Next & previous buttons */

.prev, .next {

cursor: pointer;

position: absolute;

top: 50%;

width: auto;

padding: 16px;

margin-top: -22px;

color: white;

font-weight: bold;

font-size: 18px;

transition: 0.6s ease;

border-radius: 0 3px 3px 0;

user-select: none;

}

/* Position the "next button" to the right */

.next {

right: 0;

border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

background-color: rgba(0,0,0,0.8);

}

/* Caption text */

.text {

color: #f2f2f2;

font-size: 15px;

padding: 8px 12px;

position: absolute;

bottom: 8px;

width: 100%;

text-align: center;

}

/* Number text (1/3 etc) */

.numbertext {

color: #f2f2f2;

font-size: 12px;

padding: 8px 12px;

position: absolute;

top: 0;

}

/* The dots/bullets/indicators */

.dot {

cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

}

.active, .dot:hover {

background-color: #717171;

}

/* Fading animation */

.fade {

-webkit-animation-name: fade;

-webkit-animation-duration: 1.5s;

animation-name: fade;

animation-duration: 1.5s;

}

@-webkit-keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

@keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {

.prev, .next,.text {font-size: 11px}

}

</style>

</head>

<body>

<div class="text">Caption Text</div>

</div>

<div class="text">Caption Two</div>

</div>

<div class="text">Caption Three</div>

</div>

</div>

<br>

</div>

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

showSlides(slideIndex += n);

}

function currentSlide(n) {

showSlides(slideIndex = n);

}

function showSlides(n) {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("dot");

if (n > slides.length) {slideIndex = 1}

if (n < 1) {slideIndex = slides.length}

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

}

slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

}

</script>

</body>

</html>

How to change image on hover with CSS

using background :-

<!DOCTYPE html>

<head>

<title>Change Image on Hover in CSS</title>

<style>

.card {

width: 130px;

height: 195px;

background: url("logo.png") no-repeat;

display: inline-block;

}

.card:hover {

background: url("tushar.jpg") no-repeat;

}

</style>

</head>

<body>

</body>

</html>

another example :-

<!DOCTYPE html>

<head>

<title>Image Swap on Hover with CSS</title>

<style>

.card {

width: 130px;

height: 195px;

position: relative;

display: inline-block;

}

.card .img-top {

display: none;

position: absolute;

top: 0;

left: 0;

z-index: 99;

}

.card:hover .img-top {

display: inline;

}

</style>

</head>

<body>

<img src="logo.png" alt="Card Back" width=130px

height=195px>

<img src="tushar.jpg" class="img-top" alt="Card Front" width=130px

height=195px>

</div>

</body>

</html>

Tuesday 22 February 2022

Javascript Validation

<html>

<head>

<title> SignUp Page</title>

</head>

<h1> CREATE YOUR ACCOUNT</h1>

<tr><td>Email </td>

<tr><td> Set Password</td>

<tr><td>Confirm Password</td>

</table>

function create_account(){

var n=document.getElementById("n1").value;

var e=document.getElementById("e1").value;

var p=document.getElementById("p1").value;

var cp=document.getElementById("p2").value;

//Code for password validation

var letters = /^[A-Za-z]+$/;

var email_val = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

//other validations required code

if(n==''||e==''||p==''||cp==''){

alert("Enter each details correctly");

}

else if(!letters.test(n))

{

alert('Name is incorrect must contain alphabets only');

}

else if (!email_val.test(e))

{

alert('Invalid email format please enter valid email id');

}

else if(p!=cp)

{

alert("Passwords not matching");

}

else if(document.getElementById("p1").value.length > 12)

{

alert("Password maximum length is 12");

}

else if(document.getElementById("p1").value.length < 6)

{

alert("Password minimum length is 6");

}

else{

alert("Your account has been created successfully... Redirecting to welcome page");

window.location="welcome.html";

}

</script>

</body>

</html>

Javascript Event

Event	Description
onchange	An HTML element has been changed
onclick	The user clicks an HTML element
onmouseover	The user moves the mouse over an HTML element
onmouseout	The user moves the mouse away from an HTML element
onkeydown	The user pushes a keyboard key
onload	The browser has finished loading the page

(1)Example 1 onclick event save onclick.html:

<!DOCTYPE html>

<html>

<body>

<p>Click the button to display the date.</p>

function displayDate() {

document.getElementById("demo").innerHTML = Date();

}

</script>

</body>

</html>

(2)Example 2 on onload Event save file onload.html:

<!DOCTYPE html>

<html>

<p>Click the button to display the date.</p>

function displayDate() {

document.getElementById("demo").innerHTML = Date();

}

</script>

</body>

</html>

(3)Example 3 onmouseover save file as onmouseover.html:

<!DOCTYPE html>

<html>

<body>

<p>Click the button to display the date.</p>

function displayDate() {

document.getElementById("demo").innerHTML = Date();

}

</script>

</body>

</html>

(4)Example 4 on onchange event SAVE file onchange.html:

<!DOCTYPE html>

<html>

<body>

<p>Click the button to display the date.</p>

<option value=mumbai> Mumbai</option>

<option value=delhi>Delhi</option>

</select>

function displayDate() {

document.getElementById("demo").innerHTML = Date();

}

</script>

</body>

</html>

(5)Example 5 onkeydown event save file as onkeydown.html:

<!DOCTYPE html>

<html>

<body>

<p>Click the button to display the date.</p>

function displayDate() {

document.getElementById("demo").innerHTML = Date();

}

</script>

</body>

</html>

JavaScript addEventListener()

The addEventListener() method is an inbuilt function of JavaScript

. We can add multiple event handlers to a particular element without overwriting the existing event handlers.

Syntax

element.addEventListener(event, function, useCapture);

Although it has three parameters, the parameters event and function are widely used. The third parameter is optional to define. The values of this function are defined as follows.

Parameter Values

event: It is a required parameter. It can be defined as a string that specifies the event's name.

function: It is also a required parameter. It is a JavaScript function

which responds to the event occur.

Example :-

<!DOCTYPE html>

<html>

<body>

<p> Example of the addEventListener() method. </p>

<p> Click the following button to see the effect. </p>

<button id = "btn"> Click me </button>

document.getElementById("btn").addEventListener("click", fun);

function fun() {

document.getElementById("para").innerHTML = "Hello World" + "<br>" + "Welcome to the vissicomp";

}

</script>

</body>

</html>

Another example :-

<!DOCTYPE html>

<html>

<body>

<p> This is an example of adding multiple events to the same element. </p>

<p> Click the following button to see the effect. </p>

<button id = "btn"> Click me </button>

function fun() {

alert("Welcome to the vissicomp.in");

}

function fun1() {

document.getElementById("para").innerHTML = "This is second function";

}

function fun2() {

document.getElementById("para1").innerHTML = "This is third function";

}

var mybtn = document.getElementById("btn");

mybtn.addEventListener("click", fun);

mybtn.addEventListener("click", fun1);

mybtn.addEventListener("click", fun2);

</script>

</body>

</html>