Scribd
Upload
21 views9 pages

Ui22ec23 09

The document outlines an assignment to create a webpage demonstrating various jQuery effects on HTML elements and forms. It includes tasks such as toggling visibility, sliding and fading elements, and creating an image hover cycle, as well as functionalities for selecting/deselecting checkboxes and auto-tabbing input fields. The provided code includes HTML structure, CSS styles, and jQuery scripts to implement these effects.

Uploaded by

sv090999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views9 pages

Ui22ec23 09

The document outlines an assignment to create a webpage demonstrating various jQuery effects on HTML elements and forms. It includes tasks such as toggling visibility, sliding and fading elements, and creating an image hover cycle, as well as functionalities for selecting/deselecting checkboxes and auto-tabbing input fields. The provided code includes HTML structure, CSS styles, and jQuery scripts to implement these effects.

Uploaded by

sv090999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

​ ​ ​ ​ ASSIGNMENT-9

Q.1 Create the webpage to demonstrate the following effects on the content or HTML elements
with the help of jQuery operations. (Note: This can be triggered by the user clicking some element
or can be fired by some other event.)a. Toggle element visibility with duration.
b. Sliding and Fading Elements in and out of View (Functions for reference: slideUp, slideDown,
slideToggle, fadeIn, fadeout, fadeTo).
c. Show images one after the other on hover (Consider several images to be displayed and display
them one by one. The first image is displayed, and when you hover over it, it should fade out, and
another image fades in. Then the second image fades out on hover, and the third image fades in,
and so on. After the last image, the first image reappears).

Q.2 Create the webpage to demonstrate the following effects on the HTML form elements with the
help of jQuery operations.
a. Select and deselect all checkboxes using a single link by toggle.
b. Auto tabbing based on character count. (Allow users to enter a 16-digit long serial number with
the help of four input fields. To speed the user along in their data entry, as each input field is filled
up (by 4 characters), automatically focus the next input field until they are finished typing the
number).

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Effects Demo (All in One)</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', sans-serif;
background: #f9f9f9;
color: #333;
line-height: 1.6;
}

/* Container */
.container {
max-width: 900px;
margin: 0 auto;
padding: 40px 20px;
}

/* Navbar */
nav {
background: #2c3e50;
padding: 15px 0;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}

nav a {
color: white;
text-decoration: none;
margin: 0 20px;
font-weight: bold;
padding: 10px 20px;
border-radius: 5px;
transition: background 0.3s ease;
}

nav a:hover,
nav a.active {
background: #4CAF50;
}

/* Section Styling */
section {
display: none;
background: #fff;
margin-top: 30px;
padding: 30px;
border-radius: 10px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
min-height: 500px;
}

section.active {
display: block;
animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

/* Buttons & Links */


button, .toggle-link {
padding: 10px 20px;
margin: 10px 10px 20px 0;
cursor: pointer;
background: #4CAF50;
border: none;
color: white;
border-radius: 6px;
font-size: 14px;
transition: background 0.3s ease;
text-decoration: none;
display: inline-block;
}

button:hover, .toggle-link:hover {
background: #45a049;
}

h2 {
margin-top: 20px;
margin-bottom: 10px;
color: #2c3e50;
}
/* Box Styles */
.box {
width: 100%;
max-width: 300px;
height: 100px;
background: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
margin-bottom: 20px;
}

/* Image Carousel */
.image-container {
position: relative;
width: 100%;
max-width: 300px;
height: 200px;
overflow: hidden;
margin-bottom: 20px;
}

.image-container img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
display: none;
border-radius: 6px;
}

.image-container img:first-child {
display: block;
}

/* Serial Input */
.serial-inputs {
display: flex;
gap: 10px;
margin-top: 10px;
}

input[type="text"] {
width: 50px;
text-align: center;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

label {
display: inline-block;
width: 200px;
}
</style>
</head>
<body>

<nav>
<a href="#" class="tab-link active" data-tab="effects">Effects on
Elements</a>
<a href="#" class="tab-link" data-tab="form">Effects on Form</a>
</nav>

<div class="container">
<!-- Section 1: Effects on Elements -->
<section id="effects" class="active">
<h2>a. Toggle Element Visibility with Duration</h2>
<button id="toggleBox">Toggle Box</button>
<div class="box" id="toggleTarget">Toggle Me!</div>

<h2>b. Slide and Fade Effects</h2>


<button id="slideBtn">Slide Toggle Box</button>
<button id="fadeBtn">Fade Toggle Box</button>
<div class="box" id="effectBox">Slide/Fade Me!</div>
<h2>c. Image Hover Cycle</h2>
<div class="image-container" id="hoverImages">
<img src="https://picsum.photos/id/1015/300/200" alt="Image 1">
<img src="https://picsum.photos/id/1025/300/200" alt="Image 2">
<img src="https://picsum.photos/id/1035/300/200" alt="Image 3">
</div>
</section>

<!-- Section 2: Form Effects -->


<section id="form">
<h2>a. Toggle Select/Deselect All Checkboxes</h2>
<a class="toggle-link" id="toggleCheckboxes">Toggle All</a>
<div>
<label><input type="checkbox" class="check-item"> Option
1</label><br>
<label><input type="checkbox" class="check-item"> Option
2</label><br>
<label><input type="checkbox" class="check-item"> Option
3</label><br>
<label><input type="checkbox" class="check-item"> Option
4</label><br>
</div>

<h2>b. Auto Tabbing Serial Input</h2>


<p>Enter 16-digit Serial Number:</p>
<div class="serial-inputs">
<input type="text" maxlength="4" class="serial">
<input type="text" maxlength="4" class="serial">
<input type="text" maxlength="4" class="serial">
<input type="text" maxlength="4" class="serial">
</div>
</section>
</div>

<script>
// Navigation tabs
$(".tab-link").click(function (e) {
e.preventDefault();
let tabId = $(this).data("tab");
$(".tab-link").removeClass("active");
$(this).addClass("active");

$("section").removeClass("active");
$("#" + tabId).addClass("active");
});

// a. Toggle with duration


$("#toggleBox").click(function () {
$("#toggleTarget").toggle(800);
});

// b. Slide and Fade


$("#slideBtn").click(function () {
$("#effectBox").slideToggle(600);
});

$("#fadeBtn").click(function () {
$("#effectBox").fadeToggle(600);
});

// c. Image Hover Cycle


let currentIndex = 0;
const $images = $("#hoverImages img");
const imageCount = $images.length;

$images.hover(function () {
$images.eq(currentIndex).fadeOut(600, function () {
currentIndex = (currentIndex + 1) % imageCount;
$images.eq(currentIndex).fadeIn(600);
});
});

// Toggle checkboxes
let allChecked = false;
$("#toggleCheckboxes").click(function () {
allChecked = !allChecked;
$(".check-item").prop("checked", allChecked);
});
// Auto tabbing
$(".serial").on("input", function () {
if ($(this).val().length === 4) {
$(this).next('.serial').focus();
}
});
</script>

</body>
</html>

OUTPUT :

You might also like