- Click below to download Unit 3 programs in pdf file: -
Unit 3
<!—1.Test if jQuery is loaded. -->
<html>
<head>
<title>
Test if jQuery is loaded.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;"
id="body">
<p id="GFG_UP"
style="font-size: 19px;
font-weight: bold;">
</p>
<button onClick="GFG_Fun()">
click here
</button>
<p id="GFG_DOWN"
style="color: purple;
font-size: 24px;
font-weight: bold;">
</p>
<script>
var up =
document.getElementById('GFG_UP');
var down =
document.getElementById('GFG_DOWN');
up.innerHTML =
"Click on button to check whether JQuery is loaded";
function GFG_Fun() {
if (!window.jQuery) {
var el = document.createElement('script');
el.type = "text/javascript";
el.src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js";
document.getElementsByTagName(
'head')[0].appendChild(el);
down.innerHTML = "jQuery loaded successfully!";
} else {
down.innerHTML = "jQuery loaded successfully!";
}
}
</script>
</body>
</html>
<!-- 2.Scroll to the top of the page with jQuery -->
<html>
<head>
<script>
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
</script>
<meta charset="utf-8">
<title>Scroll to the top of the page with jQuery</title>
</head>
<body>
<font size="10" color="purple"><center>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
<p>BCA 4 GU</p>
</font></center>
<font size="16"><a href='#top'>Go To Top</a></font>
</body>
</html>.
<!-- 3.Disable right click menu in html page using jquery -->
<html>
<head>
<script></script>
<script>
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
</script>
</head>
<body>
<p>Right click is disabled on this page.</p>
</body>
</html>
<!-- 4. Write a Jquery for Limit character input in the textarea including count -->
<html>
<head>
<script>
var maxLength = 15;
$('textarea').keyup(function() {
var textlen = maxLength - $(this).val().length;
$('#rchars').text(textlen);
});
</script>
<meta charset="utf-8">
<title>Limit character input in the textarea including count</title>
</head>
<body>
<form>
<label>You can Write maximum 15 characters</label>
<textarea id="textarea" maxlength="15"></textarea>
</form>
</body>
</html>
<!-- 5. Write a jquery to Display a message when the contextmenu event is triggered on
the paragraph elements -->
<html>
<head>
<script>
$(".p1").contextmenu(function ()
{
alert("Hello!");
});
$(".p2").on('contextmenu', function ()
{
alert("BCA 4 GU");
});
</script>
</head>
<body>
<p class="p1">Right click me!</p>
<p class="p2">Again right click me!</p>
</body>
</html>
0 Comments