Scribd
Upload
36 views10 pages

We Lab8

The document outlines three assignments using jQuery: creating a contextual menu that displays information on hover, implementing a word-balloon effect for button clicks, and developing a horizontal image slider for an image gallery. Each assignment includes HTML, CSS, and jQuery code snippets to demonstrate functionality. The conclusion emphasizes jQuery's role in simplifying web development and enhancing interactivity despite the rise of modern frameworks.

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
36 views10 pages

We Lab8

The document outlines three assignments using jQuery: creating a contextual menu that displays information on hover, implementing a word-balloon effect for button clicks, and developing a horizontal image slider for an image gallery. Each assignment includes HTML, CSS, and jQuery code snippets to demonstrate functionality. The conclusion emphasizes jQuery's role in simplifying web development and enhancing interactivity despite the rise of modern frameworks.

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/ 10

Assignment 8:

UI22EC85

​ ​ ​ ​ ​ ​
Using jQuery operations, complete the following assignments.

1. Creating a contextual menu. Display a menu with a few menu items in it. When
any menu item is hovered over (mouse pointer is moved over it), display the
information related to it, and also, that menu item should be highlighted.​
​
CODE:
<!DOCTYPE html>​
<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Contextual Menu</title>

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

<style>

#contextMenu {

position: absolute;

display: none;

background: #fff;

border: 1px solid #ccc;

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);

padding: 10px;
width: 150px;

.menu-item {

padding: 5px;

cursor: pointer;

.menu-item:hover {

background-color: lightblue;

#info {

margin-top: 10px;

font-weight: bold;

color: #333;

</style>

</head>

<body>

<p>Right-click anywhere to open the contextual menu.</p>

<div id="contextMenu">

<div class="menu-item" data-info="Option 1 selected">Option 1</div>

<div class="menu-item" data-info="Option 2 selected">Option 2</div>

<div class="menu-item" data-info="Option 3 selected">Option 3</div>

</div>
<p id="info"></p>

<script>

$(document).ready(function() {

$(document).on("contextmenu", function(e) {

$("#contextMenu").css({ top: e.pageY, left: e.pageX }).fadeIn();

return false;

});

$(document).click(function() {

$("#contextMenu").fadeOut();

});

$(".menu-item").hover(function() {

$("#info").text($(this).data("info"));

});

});

</script>

</body>

</html>
OUTPUT:​

​
​
​
​
​
​
​
​
​
​
​
2. You have two buttons on the web page, with the text Bold and Italic on them,
respectively. Create a word-balloon effect when either of the buttons is clicked.​
​
CODE:
<!DOCTYPE html>​
<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Word Balloon Effect</title>

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

<style>

button {

margin: 10px;

padding: 10px 20px;

font-size: 16px;

cursor: pointer;

.balloon {

position: absolute;

display: none;

background: yellow;

padding: 10px;

border-radius: 10px;

font-size: 14px;
font-weight: bold;

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);

</style>

</head>

<body>

<button id="boldBtn">Bold</button>

<button id="italicBtn">Italic</button>

<script>

$(document).ready(function() {

$("button").click(function(e) {

let text = $(this).text() + " Clicked!";

let balloon = $("<div class='balloon'>" + text +


"</div>").appendTo("body");

balloon.css({

top: e.pageY - 40,

left: e.pageX + 20

}).fadeIn().delay(1000).fadeOut(500, function() {

$(this).remove();

});

});
});

</script>

</body>

</html>

​
​
OUTPUT:​
​
​

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
3. Create a Horizontal Image Slider. You have to make an image gallery
(consisting of five or more images) in which initially three or a few images will be
displayed. By using the horizontal scroll bar, you can scroll, and the rest of the
images will be displayed.​​

<!DOCTYPE html>​
<html lang="en">​
<head>​
<meta charset="UTF-8">

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

<title>Horizontal Image Slider</title>

<script src="jquery-3.7.1.min.js"></script>

<style>

body { font-family: Arial, sans-serif; text-align: center; background: #f8f9fa;


}

.slider-container {

width: 800px; height: 220px;

overflow-x: auto; overflow-y: hidden; /* Hides vertical scrollbar */

white-space: nowrap;

border: 3px solid #ddd; padding: 10px;

margin: 40px auto; scroll-behavior: smooth;

.slider img {

width: 300px; height: 200px; object-fit: cover;

margin-right: 15px; border-radius: 10px;

box-shadow: 3px 3px 8px gray; transition: 0.3s;


}

.slider img:hover { transform: scale(1.05); }

</style>

</head>

<body>

<h2>Blockbuster Movie Poster</h2>

<div class="slider-container">

<div class="slider">

<img src="allthislove.png" alt="Image 1">

<img src="avengers.png" alt="Image 2">

<img src="harrypotterandthechamberiofsecrets.png" alt="Image 3">

<img src="housemaid.png" alt="Image 4">

<img src="luciferwasinnocent.png" alt="Image 5">

<img src="theboywithabrokenheart.png" alt="Image 5">

</div>

</div>

<script>

$(document).ready(function() {

$(".slider-container").on("wheel", function(e) {

e.preventDefault();

this.scrollLeft += e.originalEvent.deltaY;

});

});​
</script></bodY>​
</html>
​
​
OUTPUT:

​
​

​
​
Conclusion:

jQuery simplifies JavaScript coding by providing easy-to-use functions for DOM


manipulation, event handling, animations, and AJAX. It enhances website
interactivity with minimal code, ensuring cross-browser compatibility. Though
modern JavaScript frameworks are evolving, jQuery remains a powerful tool for
rapid web development.

You might also like