Develop Reference

Conditioning disable dropdown based on input text value using jQuery

I'm making an autocomplete feature. I want to create a condition, if company-name has a value, the dropdown will have the disable attribute and the arrow box background will be gray. I've made the code as below, but it's still not working properly. Is there something wrong with my code?
$(document).ready(function(){
$('.company-name').on('keyup',function(){
const companyValue = $('.company-name').val();
//console.log(companyValue)
if(companyValue !== ''){
console.log('okay');
$("select[name='account-industrySize-id']").prop("disabled", true);
$("select[name='account-industrySize-id']").parent().addClass('disable');
$("select[name='account-industryType-id']").prop("disabled", true);
$("select[name='account-industryType-id']").parent().addClass('disable');
$("select[name='account-legalEntityType-id']").prop("disabled", true);
$("select[name='account-legalEntityType-id']").parent().addClass('disable');
}
})
});
select {
width: 100%;
height: 100%;
min-height: 28px;
border: none;
background-color: #FFFFFF;
-webkit-box-shadow: 0px 0px 10px 0px lightgrey;
box-shadow: 0px 0px 10px 0px lightgrey;
border-radius: 4px;
cursor: pointer;
}
.info-row{
margin-bottom:30px;
}
.select-wrapper.disable:before{
background-color:grey;
}
.select-wrapper:before {
content: 'V';
font-weight: bold;
padding: 9px;
color: #ffffff;
background-color: #cb4645;
display: inline-block;
position: absolute;
right: 0;
height: 10px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="info-row">
<div class="value">
<input type="text" class="company-name">
</div>
</div>
<div class="info-row">
<div class="value">
<div class="select-wrapper">
<select name="account-legalEntityType-id" id="legal-entity-type" onchange="this.style.color='black';" style="color: black;">
<option value="" style="display:none">PT</option>
<option value="11" style="color: black;">Lainnya</option>
<option value="1" style="color: black;">PT</option>
<option value="2" style="color: black;">CV</option>
</select>
</div>
</div>
</div>
<div class="info-row">
<div class="value">
<div class="select-wrapper">
<select name="account-industryType-id" id="industry-type" onchange="this.style.color='black';" style="color: black;">
<option value="" style="display:none">Medical</option>
<option value="11" style="color: black;">Others</option>
<option value="1" style="color: black;">Financial</option>
<option value="2" style="color: black;">Technology</option>
</select>
</div>
</div>
</div>
<div class="info-row">
<div class="value">
<div class="select-wrapper">
<select name="account-indsutrySize-id" id="industry-size" onchange="this.style.color='black';" style="color: black;">
<option value="" style="display:none">0</option>
<option value="10" style="color: black;">10</option>
<option value="20" style="color: black;">20</option>
<option value="30" style="color: black;">30</option>
</select>
</div>
</div>
</div>

jQuery Multi-Step Wizard Form

I trying to submit a form (perl script) with a demo of jQuery Multi-Step Wizard Form but for the life of me I cannot get it to submit to my test script NoScript.pl.
I have read the documentation and really cant seem to figure it out any help is appreciated.
window.onload = function() {
$(function() {
var $signupForm = $('#SignupForm');
$signupForm.validationEngine();
$signupForm.formToWizard({
submitButton: 'SaveAccount',
showProgress: true, //default value for showProgress is also true
nextBtnName: 'Forward >>',
prevBtnName: '<< Previous',
showStepNo: true,
validateBeforeNext: function() {
return $signupForm.validationEngine('validate');
}
});
$('#txt_stepNo').change(function() {
$signupForm.formToWizard('GotoStep', $(this).val());
});
$('#btn_next').click(function() {
$signupForm.formToWizard('NextStep');
});
$('#btn_prev').click(function() {
$signupForm.formToWizard('PreviousStep');
});
});
}
body {
font-family: Lucida Sans, Arial, Helvetica, Sans-Serif;
font-size: 13px;
margin: 20px;
}
#header {
text-align: center;
border-bottom: solid 1px #b2b3b5;
margin: 0 0 20px 0;
}
fieldset {
border: none;
width: 320px;
}
legend {
font-size: 18px;
margin: 0px;
padding: 10px 0px;
color: #b0232a;
font-weight: bold;
}
label {
display: block;
margin: 15px 0 5px;
}
input[type=text],
input[type=password] {
width: 300px;
padding: 5px;
border: solid 1px #000;
}
button,
.prev,
.next {
background-color: #b0232a;
padding: 5px 10px;
color: #fff;
text-decoration: none;
}
button:hover,
.prev:hover,
.next:hover {
background-color: #000;
text-decoration: none;
}
button {
border: none;
}
#controls {
background: #eee;
box-shadow: 0 0 16px #999;
height: 30px;
position: fixed;
padding: 10px;
top: 0;
left: 0;
width: 100%;
dex: 1
}
#controls h1 {
color: #666;
display: inline-block;
margin: 0 0 8px 0
}
#controls input[type=text] {
border-color: #999;
margin: 0 25px;
width: 120px
}
#steps {
margin: 80px 0 0 0
}
.prev {
float: left
}
.next {
float: right
}
.steps {
list-style: none;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0
}
.steps li {
color: #b0b1b3;
font-size: 24px;
float: left;
padding: 10px;
transition: all -moz-transition:all .3s;
-webkit-transition: all -o-transition:all .3s
}
.steps li span {
font-size: 11px;
display: block
}
.steps li.current {
color: #000
}
.breadcrumb {
height: 37px
}
.breadcrumb li {
background: #eee;
font-size: 14px
}
.breadcrumb li.current:after {
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 6px solid;
content: ' ';
position: absolute;
top: 0;
right: -6px
}
.breadcrumb li.current {
background: #666;
color: #eee;
position: relative
}
.breadcrumb li:last-child:after {
border: none
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/artoodetoo/formToWizard/v0.0.2/jquery.formtowizard.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js"></script>
<form id="SignupForm" action="http://www.smldesign.net/cgi-bin/NoScript.pl" method="post">
<fieldset>
<legend>Account information</legend>
<label for="Name">Name</label>
<input id="Name" type="text" class="validate[required]" />
<label for="Email">Email</label>
<input id="Email" type="text" class="validate[custom[email],required]" />
<label for="Password">Password</label>
<input id="Password" type="password" />
</fieldset>
<fieldset>
<legend>Company information</legend>
<label for="CompanyName">Company Name</label>
<input id="CompanyName" type="text" class="validate[required]" />
<label for="Website">Website</label>
<input id="Website" type="text" />
<label for="CompanyEmail">CompanyEmail</label>
<input id="CompanyEmail" type="text" />
</fieldset>
<fieldset>
<legend>Billing information</legend>
<label for="NameOnCard">Name on Card</label>
<input id="NameOnCard" type="text" />
<label for="CardNumber">Card Number</label>
<input id="CardNumber" type="text" />
<label for="CreditcardMonth">Expiration</label>
<select id="CreditcardMonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="CreditcardYear">>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<label for="Address1">Address 1</label>
<input id="Address1" type="text" />
<label for="Address2">Address 2</label>
<input id="Address2" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="City">Country</label>
<select id="Country">
<option value="CA">Canada</option>
<option value="US">United States of America</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="VI">United States Virgin Islands</option>
</select>
</fieldset>
<p>
<input id="SaveAccount" type="button" value="Submit form" />
</p>
</form>

To fix this issue have you attempted using jQuery's $.submit() function when the final step is called. This would be:
$("#SaveAccount").click(function() {
$("#SignupForm").submit();
}
Remember the "Submit Form" button only shows up at the final step, you just need to add this snippet of code to your Javascript after the $('#btn_prev').click(function(){...} function.
window.onload = function() {
$(function() {
var $signupForm = $('#SignupForm');
$signupForm.validationEngine();
$signupForm.formToWizard({
submitButton: 'SaveAccount',
showProgress: true, //default value for showProgress is also true
nextBtnName: 'Forward >>',
prevBtnName: '<< Previous',
showStepNo: true,
validateBeforeNext: function() {
return $signupForm.validationEngine('validate');
}
});
$('#txt_stepNo').change(function() {
$signupForm.formToWizard('GotoStep', $(this).val());
});
$('#btn_next').click(function() {
$signupForm.formToWizard('NextStep');
});
$('#btn_prev').click(function() {
$signupForm.formToWizard('PreviousStep');
});
$("#SaveAccount").click(function() {
$("#SignupForm").submit();
});
});
}
body {
font-family: Lucida Sans, Arial, Helvetica, Sans-Serif;
font-size: 13px;
margin: 20px;
}
#header {
text-align: center;
border-bottom: solid 1px #b2b3b5;
margin: 0 0 20px 0;
}
fieldset {
border: none;
width: 320px;
}
legend {
font-size: 18px;
margin: 0px;
padding: 10px 0px;
color: #b0232a;
font-weight: bold;
}
label {
display: block;
margin: 15px 0 5px;
}
input[type=text],
input[type=password] {
width: 300px;
padding: 5px;
border: solid 1px #000;
}
button,
.prev,
.next {
background-color: #b0232a;
padding: 5px 10px;
color: #fff;
text-decoration: none;
}
button:hover,
.prev:hover,
.next:hover {
background-color: #000;
text-decoration: none;
}
button {
border: none;
}
#controls {
background: #eee;
box-shadow: 0 0 16px #999;
height: 30px;
position: fixed;
padding: 10px;
top: 0;
left: 0;
width: 100%;
dex: 1
}
#controls h1 {
color: #666;
display: inline-block;
margin: 0 0 8px 0
}
#controls input[type=text] {
border-color: #999;
margin: 0 25px;
width: 120px
}
#steps {
margin: 80px 0 0 0
}
.prev {
float: left
}
.next {
float: right
}
.steps {
list-style: none;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0
}
.steps li {
color: #b0b1b3;
font-size: 24px;
float: left;
padding: 10px;
transition: all -moz-transition:all .3s;
-webkit-transition: all -o-transition:all .3s
}
.steps li span {
font-size: 11px;
display: block
}
.steps li.current {
color: #000
}
.breadcrumb {
height: 37px
}
.breadcrumb li {
background: #eee;
font-size: 14px
}
.breadcrumb li.current:after {
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 6px solid;
content: ' ';
position: absolute;
top: 0;
right: -6px
}
.breadcrumb li.current {
background: #666;
color: #eee;
position: relative
}
.breadcrumb li:last-child:after {
border: none
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/artoodetoo/formToWizard/v0.0.2/jquery.formtowizard.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js"></script>
<form id="SignupForm" action="http://www.smldesign.net/cgi-bin/NoScript.pl" method="post">
<fieldset>
<legend>Account information</legend>
<label for="Name">Name</label>
<input id="Name" type="text" class="validate[required]" />
<label for="Email">Email</label>
<input id="Email" type="text" class="validate[custom[email],required]" />
<label for="Password">Password</label>
<input id="Password" type="password" />
</fieldset>
<fieldset>
<legend>Company information</legend>
<label for="CompanyName">Company Name</label>
<input id="CompanyName" type="text" class="validate[required]" />
<label for="Website">Website</label>
<input id="Website" type="text" />
<label for="CompanyEmail">CompanyEmail</label>
<input id="CompanyEmail" type="text" />
</fieldset>
<fieldset>
<legend>Billing information</legend>
<label for="NameOnCard">Name on Card</label>
<input id="NameOnCard" type="text" />
<label for="CardNumber">Card Number</label>
<input id="CardNumber" type="text" />
<label for="CreditcardMonth">Expiration</label>
<select id="CreditcardMonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="CreditcardYear">>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<label for="Address1">Address 1</label>
<input id="Address1" type="text" />
<label for="Address2">Address 2</label>
<input id="Address2" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="City">Country</label>
<select id="Country">
<option value="CA">Canada</option>
<option value="US">United States of America</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="VI">United States Virgin Islands</option>
</select>
</fieldset>
<p>
<input id="SaveAccount" type="button" value="Submit form" />
</p>
</form>

I believe the above answer is correct.
At no point does it appear that you are actually forcing your FORM that posts the Perl script to execute a submit.
The jQuery submit method can do that for you.
p.s., your credit-card submission form appears to be non-TLS

How do I get my content2 border to come inside of the content1 border radius and how I do put a vertical line between content2 elements?

I am wondering if any one could direct me to some online resources where I can find out how to put a vertical line inside of my content2 border which will then split the element names from the element values? Also, how do I get my content2 border from outside of border-radius content? I want it to come inside of the content border-radius. Right now it looks tacky being outside of the border-radius content. Any suggestions would be much appreciated. HTML code and CSS code.
.intro h1 {
font-family: 'Cambria';
font-size: 16pt;
font: bold;
text-align: left;
}
.intro p {
font-family: 'Calibri';
font: italic;
font-size: 12pt;
padding: 0px 690px 0px 20px;
text-align: left;
}
.content {
border: 2px solid;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#para1 {
padding: 0px 1050px 0px 20px;
position: relative;
}
#para2 {
padding: 0px 1099px 0px 20px;
position: relative;
}
.username-label,
.password-label {
margin: 10px 0px 0px 350px;
position: relative;
top: -70px;
}
.existingUsername,
.existingPassword,
#username_error1,
#password_error2
{
top: -70px;
position: relative;
}
#button1{
background-color: #add8e6;
margin-left: 425px;
position: relative;
top: -70px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
padding: 0px 20px 0px 20px;
}
#button2{
background-color: #add8e6;
margin-left: -500px;
position: relative;
top: -10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.Username-label1,
.Password-label2,
.Email-label3,
.Repeat-Email-label4
{
margin: 0px 0px 0px 330px;
position: relative;
top: -70px;
}
.newUsername,
.newPassword,
.newEmail,
.repeatEmail{
position: relative;
top: -70px;
margin-left: 40px;
}
span{
color: red;
margin-left: 300px;
position: relative;
top: -70px;
}
.content2{
display: none;
border-style: solid;
border-width: 1px;
top: -320px;
position: relative;
margin-left: 20px;
}
.accountName{
border: none;
}
.ElementOne{
font-weight: bold;
}
#Content2-Button1,
#Content2-Button2{
background-color: #add8e6;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.accountName,
.accountEmail,
.accountGpa{
margin-left: 200px;
}
<html>
<head>
<link href="Home.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Project</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>Welcome to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<br/>
<div class="content">
<div class="row top">
<p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="login">
<label class="username-label" for="existingUsername">Username</label>
<input class="existingUsername" type="text" /><br><span id="username_error1"></span><br>
<label class="password-label" for="existingPassword">Password</label>
<input class="existingPassword" type="password"/><br><span id="password_error2"></span><br>
<button id="button1">Log in</button>
</div>
</div>
<hr/>
<div class="row bottom">
<p id="para2">New users, please create a new account by providing us with some basic information.</p>
<div class= "new_customers_info">
<label class="Username-label1" for="newUsername">Username</label>
<input class="newUsername" type="text"/>
<br><span id="New_Username_error"></span><br>
<label class="Password-label2" for="newPassword">Password</label>
<input class="newPassword" type="password"/>
<br><span id="New_Password_error"></span><br>
<label class="Email-label3" for="newEmail">Email Address</label>
<input class="newEmail" type="email"/>
<br><span id="New_Email_error"></span><br>
<label class="Repeat-Email-label4" for="repeatEmail">Repeat Email Address</label>
<input class="repeatEmail" type="email"/>
<span id="Repeat_Email_error"></span>
<button id="button2">Create Account</button>
</div>
</div>
<div class="content2">
<label class="ElementOne" for="accountName">AccountName</label>
<input class="accountName" type= "text"><br><br>
<label class="ElementTwo" for="accountEmail">EmailAddress</label>
<input class="accountEmail" type= "email"/> <button id="Content2-Button1">Update</button><br><br>
<label class="ElementThird" for="accountGpa">CurrentGPA</label>
<input class="accountGpa" type= "number"/> <button id="Content2-Button2">Update</button>
</div>
<br/>
</div>
<footer>Cuyahoga Community College</footer>
<footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
<script src="Home.js"></script>
</body>
</html>

To create a vertical line, you just need to create a class and add it in the html.
.vertical-separator {
border-left: 1px solid black;
margin: 0 5px;
}
And then in your html just add a div tag, in the place you want the separator. (For example between the <label> and <input> tag.
<div class="vertical-separator"></div>
Also, to make this work, you should do a better layout, for example, the <input>and <label>tags should be inside another div. And make the elements inside element display: inline-block.
If you don't want to do this, and stick with your layout, just add to .vertical-separator a fixed height and it will work. But I strongly recommend you to practice css layout, flexbox, and some other things to improve your code.

Progress bar percentage align with bar

I'm creating a progress bar, currently the percentage are shown in right side, but now I want the percentage able to follow the bar, no matter the blue bar is short or long.
Example that I expect
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
float: right;
margin-top: 10px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: 5px;
}
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>

HTML:
Move popup_survey_whitebox_percent inside popup_survey_whitebox_progressbar_inner:
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
</div>
</div>
CSS:
Change margin-top of popup_survey_whitebox_percent:
.popup_survey_whitebox_percent{
float:right;
margin-top: -15px;
font-size:12px;
font-weight:bold;
font-style:italic;
color:#F30;
}
See Fiddle

You could set the margin-left of the percentage values equal to the width of the progress bar.
$('.popup_survey_whitebox_percent').each(function() {
$(this).css('margin-left', $(this).next().next().find('.popup_survey_whitebox_progressbar_inner').css('width'));
});
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
margin-top: 5px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="popup_survey_whitebox_percent">75%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div class="popup_survey_whitebox_percent">15%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>
<div class="test"></div>

try this
you only need to put your text percentage tag inside the progressbar html tag
div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</span>
<br>
</div>
</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</span>
</div>
</div>
try this
http://jsfiddle.net/e4wvyamh/

html5 ,JQuery - can't get value from custom attribute

My Images are not appending from Left to right on click event ..I found that variable sources$ was not getting any data from a div with data-module attribute
Button Click event
$('#executeButton').click(function () {
var sources$ = $('#sourcePane input:checked~img');
});
It shows Blank object array
this is the particular div with data-module
<div data-module="Sources" data-module-id="sourcePane">
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source1.png" alt="source 1" title="Source 1" id="xyz"/>
</div>
</div>
in Demo HTML Page
http://www.bibeault.org/jqia2/chapter3/lab.move.and.copy.html
sources$ has is value stored as "img#xyz source1.png"
It is just not working on my local IIS
this is the complete code
<!DOCTYPE html>
<html>
<head>
<title>Move and Copy Lab Page</title>
<link rel="stylesheet" type="text/css" href="../styles/core.css">
<style type="text/css">
div#sourcePane {
float: left;
width: 40%;
}
div#sourcePane img {
margin-bottom: 8px;
}
div#targetPane {
float: right;
width: 55%;
}
div.target {
border: 1px solid maroon;
background-color: #ffffcc;
margin-bottom: 8px;
}
#controls div {
margin-bottom: 4px;
}
#restoreButton {
display: none;
}
.done input[type=checkbox], .done #executeButton {
display: none;
}
.done #restoreButton {
display: inline;
}
</style>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../Scripts/jqia2.support.js"></script>
<script type="text/javascript" >
$(function () {
$('#restoreButton').click(function () {
window.location = 'lab.move.and.copy.html';
});
$('#executeButton').click(function () {
$('body').addClass('done');
$('.done #controls :radio').attr('disabled', true);
var sources$ = $('#sourcePane input:checked~img');
if ($('[name=clone]:checked').val() == 'yes') sources$ = sources$.clone();
var targets$ = $('#targetPane input:checkbox:checked').parents('.target');
var operation = $('[name=operations]:checked').val();
targets$[operation](sources$);
});
});
</script>
</head>
<body class="fancy">
<div id="pageContainer">
<div id="pageContent">
<h1>jQuery Move and Copy Lab Page</h1>
<div data-module="Sources" data-module-id="sourcePane">
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source1.png" alt="source 1" title="Source 1" id="xyz"/>
</div>
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source2.png" alt="source 2" title="Source 2"/>
</div>
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source3.png" alt="source 3" title="Source 3"/>
</div>
</div>
<div data-module="Target Areas" data-module-id="targetPane">
<div id="target1" class="target">
<div><input type="checkbox" name="targets"/> Target 1</div>
</div>
<div id="target2" class="target">
<div><input type="checkbox" name="targets"/> Target 2</div>
</div>
<div id="target3" class="target">
<div><input type="checkbox" name="targets"/> Target 3</div>
</div>
<div id="controls">
<div>
<label>Operation:</label><br/>
<input type="radio" name="operations" value="append" checked="checked"/> append
<input type="radio" name="operations" value="prepend"/> prepend
<input type="radio" name="operations" value="before"/> before
<input type="radio" name="operations" value="after"/> after
</div>
<div>
<label>Clone?:</label><br/>
<input type="radio" name="clone" value="no" checked="checked"/> no
<input type="radio" name="clone" value="yes"/> yes
</div>
</div>
<div>
<button type="button" class="green90x24" id="executeButton">Execute</button>
<button type="button" class="green90x24" id="restoreButton">Restore</button>
</div>
</div>
<div class="footer">jQuery in Action, 2nd edition, sample code<br/>Bear Bibeault and Yehuda Katz</div>
</div>
</div>
</body>
</html>
Core.css
body {
background: #f5ffe8 none;
}
body.fancy {
background: #cccccc url('../images/backg.png');
}
body,th,td {
font-family: 'Verdana',sans-serif;
font-size: 9pt;
color: #444444;
}
#pageContainer {
width: 752px;
margin: 8px auto;
border: 3px #4a6074 solid;
background-color: white;
}
#pageContent {
padding: 16px;
}
h1 {
width: auto;
height: auto;
background-image: none;
padding: 0;
color: #4a6074;
font-size: 1.4em;
}
body.fancy h1 {
width: 640px;
height: 41px;
font-size: 1.2em;
background: url('../images/banner.h1.png') no-repeat;
padding: 24px 0 0 80px;
margin: 0 0 16px 0;
}
label {
font-weight: bold;
}
button {
text-align: center;
border: 0;
cursor: pointer;
}
button.green90x24 {
background: url('../images/button.90x24.green.png');
width: 90px;
height: 24px;
color: #444444;
font-weight: bold;
padding: 0;
}
div.module {
margin-bottom: 12px;
}
div.banner {
background-color: #a1c772;
}
div.banner h2 {
height: 23px;
background: url("../images/module.slice.png") repeat-x #a1c772;
color: white;
font-size: 1.1em;
font-weight: bold;
margin: 0 4px 0 4px;
padding: 7px 0 0 8px;
}
div.module div.body {
padding: 8px;
border: solid 2px #a1c772;
background-color: #f5ffe8;
}
div.module h3 {
color: #6b8150;
margin: 3px 0 3px 0;
font-size: 1.2em;
font-weight: bold;
}
p {
margin: 0 0 8px 0;
}
div.footer {
text-align: center;
clear: both;
font-size: 0.8em;
color: silver;
}
div.separator {
clear: both;
}
img[src="example.jpg"] {
background-color: white;
border: 1px black solid;
padding: 12px 12px 16px 12px;
border-bottom-width: 2px;
border-right-width: 2px;
}
.leftCap {
float: left;
width: 8px;
height: 30px;
background: no-repeat url("../images/module.left.cap.png");
}
.rightCap {
float: right;
width: 8px;
height: 30px;
background: no-repeat url("../images/module.right.cap.png");
}
I couldn't find the reason ...
Any suggestion will be helpful