Scribd
Upload
3 views9 pages

We Lab9

The document outlines an assignment that involves creating two web pages demonstrating jQuery effects, including toggling visibility, sliding, fading elements, and image transitions on hover. It also covers form functionalities like selecting/deselecting checkboxes and auto-tabbing input fields for a serial number. The conclusion emphasizes how these jQuery techniques enhance interactivity and usability in web applications.

Uploaded by

telltoamitraj
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
3 views9 pages

We Lab9

The document outlines an assignment that involves creating two web pages demonstrating jQuery effects, including toggling visibility, sliding, fading elements, and image transitions on hover. It also covers form functionalities like selecting/deselecting checkboxes and auto-tabbing input fields for a serial number. The conclusion emphasizes how these jQuery techniques enhance interactivity and usability in web applications.

Uploaded by

telltoamitraj
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:

UI22EC85

​ ​ ​ ​ ​ ​
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).​
​
CODE:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery Effects Demo</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>

.container {

margin: 20px;
}

.box {

width: 200px;

height: 100px;

background-color: lightblue;

margin: 10px;

text-align: center;

line-height: 100px;

cursor: pointer;

.image-container img {

display: none;

width: 200px;

.image-container img:first-child {

display: block;

</style>

</head>

<body>

<div class="container">

<button id="toggleBtn">Toggle Visibility</button>

<div id="toggleBox" class="box">Toggle Me</div>


<button id="slideToggleBtn">Slide Toggle</button>

<div id="slideBox" class="box">Slide Me</div>

<button id="fadeToggleBtn">Fade Toggle</button>

<div id="fadeBox" class="box">Fade Me</div>

<div class="image-container">

<img src="allthislove.png" class="image">

<img src="avengers.png" class="image">

<img src="harrypotterandthechamberiofsecrets.png" class="image">

</div>

</div>

<script>

$(document).ready(function() {

$("#toggleBtn").click(function() {

$("#toggleBox").toggle(1000);

});

$("#slideToggleBtn").click(function() {

$("#slideBox").slideToggle(1000);

});
$("#fadeToggleBtn").click(function() {

$("#fadeBox").fadeToggle(1000);

});

$(".image-container img").hover(function() {

var current = $(this);

var next = current.next(".image");

if (next.length == 0) {

next = $(".image-container img").first();

current.fadeOut(500, function() {

next.fadeIn(500);

});

});

});

</script>

</body>

</html>

​
​
OUTPUT:​

​
​
​
​
​
​

​
​

​
​
​
​
​
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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Effects Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>Select/Deselect All Checkboxes</h3>
<a href="#" id="toggleCheckboxes">Toggle Checkboxes</a>
<br><br>
<input type="checkbox" class="chk"> Checkbox 1
<input type="checkbox" class="chk"> Checkbox 2
<input type="checkbox" class="chk"> Checkbox 3
<input type="checkbox" class="chk"> Checkbox 4

<h3>Auto Tabbing Form</h3>


<form>
<input type="text" class="serial" maxlength="4"> -
<input type="text" class="serial" maxlength="4"> -
<input type="text" class="serial" maxlength="4"> -
<input type="text" class="serial" maxlength="4">
</form>

<script>
$(document).ready(function() {
$("#toggleCheckboxes").click(function(event) {
event.preventDefault();
$(".chk").each(function() {
$(this).prop("checked", !$(this).prop("checked"));
});
});

$(".serial").keyup(function() {
if ($(this).val().length == 4) {
$(this).next(".serial").focus();
}
});
});
</script>

</body>
</html>

​
​
​
​
OUTPUT:​

​
​
=> After clicking on Toggle Checkboxes:

CONCLUSION:

This assignment demonstrated the use of jQuery to enhance webpage


interactivity through various effects. We implemented visibility toggling, sliding,
and fading animations, along with a hover-based image transition. Additionally,
we improved form usability with checkbox toggling and auto-tabbing for
structured input. These techniques showcase how jQuery simplifies dynamic UI
interactions, making web applications more responsive and user-friendly.

You might also like