Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

JQUERY Using a $(document).ready(function(){ could someone please show me how to

ID: 3705022 • Letter: J

Question

JQUERY Using a $(document).ready(function(){ could someone please show me how to add these in Jquery? As well as any general HTML statements needed to make it work

3. Add a textbox to the page. Check for empty string when the user finishes making changes to a text box, using a blur event handler. If the textbox is empty, then modify something on the form to indicate an error, such as: Change the color of the label to red Change the background color of the text area Add an error message next to the text box 4. Hide and show a paragraph or other elements when a title or heading is clicked. In other words, implement a click event handler for a heading element, which then changes the display or visibility of content beneath it Part 2: Complete ONE of the additional features. 1. Create a textbox for entering a ZIP code. After each key press, check that the character was a number If not, modify something on the form to indicate an error, similar to Part 1, #3 above 2. Use a timer (setTimeout?to create an image slideshow. In Lab 9, you changed an image on the page in response to multiple buttons. This time, use a timer to automatically cycle through several images. 3. If the “a" key is pressed, make the image grow wider by two pixels. If the "s" key is pressed, the image should grow smaller by a two pixels. You will likely use the keydown events.

Explanation / Answer

<html>

<head>

<title>

jQuery

</title>

<style type="text/css">

.error {

background-color: palevioletred;

}

#lblError{

color:red;

}

</style>

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

<script>

$(document).ready(function () {

$('#lblError').hide();

$('#txtIn').blur(function () {

if ($('#txtIn').val() == '') {

$('#txtIn').addClass('error');

}

else {

$('#txtIn').removeClass('error');

}

});

$('#myTitle').click(function(){

$('#myPara').slideToggle();

});

$('#txtZip').keyup(function(event){

var key = event.which;

if(key >=95 && key <=105){

$('#lblError').hide();

return;

}

$('#lblError').show();

});

});

</script>

</head>

<body>

<input id="txtIn">

<h1 id='myTitle'>This is the title</h1>

<p id='myPara'>

This is a sample paragraph. Click the title above to hide it.

</p>

<label>Enter ZIP Code</label> <input id='txtZip'>

<label id='lblError'>Enter only numbers</label>

</body>

</html>