I am trying to apply visual cues for the user as they insert data in the form field. Red indicates that the input is not valid, whilst green indicates that the content is valid. The code is functioning, albeit in a glitched manner.
» Issue One: The "red state" flickers on any event.
» Issue Two: If you manually insert correct (number) input in all fields, one by one, and then, in the last field, press backspace, so that the current input field is an empty string, the sum total will return as NaN.
I suspect this is due to the parseInt() JavaScript method, but I need that so that computation can be performed on what is pushed into the arrays.
The specific reason why this is setup this way, is because the on initial load, the fields may already be populated and if so, I want it to display all green boxes and the check mark as a visual queue that, that section is done. This is also the reason why the entire block of code is wrapped in a setInterval() so the page will always be scanning what state should be displayed and apply the proper classes accordingly.
HTML:
Staff Information (for all office
locations)
</center>
</div><span class="mrQuestionText" style=""><br>
<br>
17. A. Indicate the TOTAL number of full time staff your firm has in the following
positions. DO NOT count a staff member in more than one position. (numeric values
only, no need for thousands separator)</span>
<table summary="<hr/><div style='border:1px solid #888;
background:#efefef;margin-top:1em;margin-left:2em;margin-right:2em;padding-top:5px;padding:1em;text-align:left; vertical-align:top; color:#000055;font-weight:normal;'><center><b>Staff Information (for all office locations)</b></center></div><br/><br/>17. A. Indicate the TOTAL number of full time staff your firm has in the following positions. DO NOT count a staff member in more than one position. (numeric values only, no need for thousands separator)<span class='sumcol'></span>" class="mrQuestionTable" style="display: inline-block;">
<tbody>
<tr>
<td id="Cell.0.0"></td>
<td id="Cell.1.0" class="mrGridQuestionText" style=""><span class="mrQuestionText" style=""><span style="clear:none; font-weight:bold; margin:0
auto; display:block; text-align:center;
width:280px;"> </span></span>
</td>
</tr>
<tr>
<td id="Cell.0.1" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">1. Principals/Partners</span>
</td>
<td id="Cell.1.1" style=" text-Align: Center; vertical-align: Middle;
background-color: #D8D8D8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QPrincipals__Partners_QQ17A" id="_Q33_Q0_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.2" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #F8F8F8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">2. Project
Managers/Directors</span>
</td>
<td id="Cell.1.2" style=" text-Align: Center; vertical-align: Middle;
background-color: #F8F8F8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QProject__Managers_QQ17A" id="_Q33_Q1_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.3" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">3. Designers</span>
</td>
<td id="Cell.1.3" style=" text-Align: Center; vertical-align: Middle;
background-color: #D8D8D8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QDesigners_QQ17A" id="_Q33_Q2_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.4" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #F8F8F8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">4. Other interior design
staff</span>
</td>
<td id="Cell.1.4" style=" text-Align: Center; vertical-align: Middle;
background-color: #F8F8F8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QOther__design__staff_QQ17A" id="_Q33_Q3_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.6a" class="mrGridCategoryText" style="text-align: Left;
vertical-align: Middle; background-color: #d8d8d8; width: 430px; border: 1px
Solid black;"><span class="rrSumColTotal mrQuestionTextBold" style="float:right;">A. Total # of Interior Design Staff:</span>
</td>
<td id="Cell.1.6a" style="text-align: Center; vertical-align: Middle;
background-color: #d8d8d8; width: auto; border: 1px Solid black;">
<span id="customSum" style="color: green; background-color: rgb(229, 242,
251);">0</span>
<div style="display:inline-block; clear:none; width:15px;" id="topFour"> </div>
</td>
</tr>
<tr>
<td id="Cell.0.5" class="mrGridCategoryText" style="text-align: left;
vertical-align: middle; width: 430px; border: 1px solid black;
background-color: rgb(248, 248, 248);"><span class="mrQuestionText" style="
font-size: 10pt;"><b style="float:right;">B. Total # of Non-Interior Design
Staff:</b></span>
</td>
<td id="Cell.1.5" style="text-align: center; vertical-align: middle; width:
auto; border: 1px solid black; background-color: rgb(248, 248, 248);">
<input type="text" name="_QP1_QGRQ17A_QNon__Interior_QQ17A" id="_Q33_Q4_Q0" class="mrEdit" autocomplete="on" style=" width: 215px;" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.5" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="rrSumColTotal mrQuestionTextBold" style="float: right;">C. Total # of
Employees in the Firm:</span>
</td>
<td id="Cell.1.5" style=" text-Align: Center; vertical-align: Middle;
background-color: #D8D8D8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;"><span id="spRunningTotal_12_1" class="rrRunningTotal" data-tableordinal="12" data-columnordinal="1">0</span>
</td>
</tr>
</tbody>
</table>
</div>
JavaScript + jQuery:
$('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last').addClass('rowA').css("border", "solid 1px black");
var checkValid = setInterval( function() {
$("input.rowA").each(function(i){
var totals = [0,0,0,0];
var total = 0;
if($('input.complete').length == $('input.rowA').length)
{
$('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">');
$("input.rowA").each(function(i){
$(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
items = $('input.rowA:eq(' + i + ')').val();
if(!items.match(/^\d+$/))
{
items = 0;
$('.rowA').on("keypress change", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});
}
items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
totals.push(items);
});
total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
$.each(totals,function() {
total += this;
});
$('#customSum').text(total);
} else {
$('#topFour').html('');
totals = [0,0,0,0];
$("input.rowA").each(function(i){
var items = $('input.rowA:eq(' + i + ')').val();
if(!items.match(/^\d+$/)) //Regular Expressions Source: http://www.regexlib.com/RETester.aspx?regexp_id=669
{
items = 0;
$('.rowA').on("keypress change", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});
} else {
items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
$(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
}
totals.push(items);
});
total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
$.each(totals,function() {
total += this;
});
$('#customSum').text(total);
}
});
}, 120);
$('#customSum').closest('table').find("td:contains('C.'), tr td:contains('B.')").closest('tr').toggle();
CSS:
.complete {
border: solid 1px green;
}
.rowA {
background-color: #CCF3FF !important;
height: 30px;
text-align: center;
font-size: 17px;
color: green;
}
jsFiddle Demo
Lastly, in addition to the issue stemming from the parseInt() utilization, the jsFiddle says that I needed to move my totals, and total variables to a point where they can both be accessed safely and that is where most of my problems started. That is to say, if I re-declare those variables inside their respective $.each() statements and if() conditionals, it works fine but that is bad practice, supposedly.
The main problem is the way setinterval being used. It not only checks the input every 120 ms, it also rebinds the keypress/change events on false input each time and on top of that it uses the same loop within its looping, thus implementing every action multiple times.
Another performance thing is that within that interval the jquery objects have to be searched each time in the DOM. For example, each time $("input.rowA") is used the Dom is searched for inputs of class rowA, whereas if they are put in a variable beforehand, the buffered values can be reused.
Instead of the interval it's best to have a single change/keyup event to do the checks and reuse the same code on page load to check for those preloaded values. If despite all, you still need that interval (although normally the triggers would be known when the check has to be called), the cleaned code should prove more resource friendly (but could be improved further if the setinterval is really really really necessary)
var $inputBoxes = $('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last');
$inputBoxes.addClass('rowA');
//or in case the former code was just a test scenario, use var $inputBoxes = $('input.rowA');
var $custSum = $('#customSum'), $chk = $('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">').hide(); //add the check once, but hidden (can be done in hard coded in html instead)
$inputBoxes.on("keyup change propertychange input paste", function(e) {
SetInput(this);
CheckInputs();
});
function SetInput(inputBox){
var $input = $(inputBox), val = $input.val(), isvalid = val.length > 0 && isFinite(val) && val > 0;
$input.data('valid', isvalid).data('number', isvalid ? parseInt(val) : null); //instead of an array, reuse the jquery elements
$input.toggleClass('complete', isvalid).toggleClass('error', val.length > 0 && !isvalid);
}
function SetAllInputs(){
$inputBoxes.each(function(){SetInput(this);});
CheckInputs();
}
function CheckInputs(){
var total = 0, validcount = 0;
$inputBoxes.each(function(){
if($(this).data('valid')){
validcount++;
total+= $(this).data('number');
}
});
$custSum.text(total);
$chk.toggle(validcount === $inputBoxes.length); //show the 'check' image if all input is valid
}
SetAllInputs(); //call on page load, in case of pre entered values.
Fiddle
By changing the listener method from .on() to .bind() and applying more parameter events, the issue of the parseInt NaN result has been solved. I still get a flicker of the red border however. Ultimately however, I think the best result is to build up a master event bubble detector, as many browser plug-gins and standard features (i.e., Internet Explorer's "x" button in form fields) have various ways to bypass jQuery event listeners methods.
**
From
**
$('.rowA').on("keypress change", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});
**
To:
**
$('.rowA').bind("change keydown keypress paste cut mouseup focus", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});
Related
I made a web page for my project, where I need to change a button background color based on value from database.Like if the value below 10 then it will be green, 10~20 then yellow, 20++ then turns into red. Is it possible to do?
already the button works to fetch data from data base.enter image description here
You don't give enough information. Maybe, you can create a color column in your sql table, then with jinja or other you can do somethings like this:
Jinja:
<div style="background-color:{{ data['color_ref'] }};">Hello World</div>
PHP:
<div style="background-color:<?=$color_ref?>;">Hello World</div>
Javascript:
if (qtt <= 10) {
result = document.getElementById("happyday")
result.style.backgroundColor = red;
}
<table class="center">
<?php
if(array_key_exists('test', $_POST))
{button();}
function button()
{
$conn = mysqli_connect('localhost','root','','asimdb');
$sql= "SELECT * FROM atmdata WHERE atm_id = 'ATM_01'";
$result = mysqli_query($conn,$sql);
While ($row =mysqli_fetch_assoc($result))
{
echo "
<tr><th>ATM ID</th> <td>".$row["atm_id"]."</td></tr>
<tr><th>ATM Name</th><td>".$row["ATM_Name"]."</td></tr>
<tr><th>ATM Location</th><td>".$row["ATM_Location"]."</td></tr>
<tr><th>Contact No.</th><td>".$row["Contact_No"]."</td></tr>
<tr><th>View CCTV</th><td>".$row["CCTV"]."</td></tr>
<tr><th>Current Temerature</th><td>N/A</td></tr>";
}
echo"</table>";
}
?>
<style>
.button {
border: none;
color: #2F4F4F;
padding: 12px 30px;
border-radius: 20px;
text-align: center;
display: inline-block;
font-size: 16px;
font-weight: bold;
margin: 5px 5px;
cursor: pointer;
transition: transform .2s;
box-shadow:
0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07),
0 32px 64px rgba(0,0,0,0.07);}
.button:hover {
transform: scale(1.1);
border: 1px solid black}
</style>
<form method="post">
<input type="submit"class= "button" name="test" value="ATM 01">
</form>
I am making a tooltip box which involve personal introduction text,my target is a tooltip box with Arrow is displayed if I using a mouse to hover a profile picture......... I have tried some methods online but they are not workable ...... can anyone help me?
.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
}
<table style="width:100%">
<tr>
<td><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" title="Name: Ching Yuet To;
Hobby: Hiking, Watching movie;
I believe that it would be fun that we can carry out research study
independently. I think it is meaningful to participate and promote synthetic
biology research.
I can learn a lot and make many international friends in Boston! "></td>
Like stated in my comments above, your css class is tooltip but you are using class="masterTooltip" plus the cursor type is missing as well.
Just check the following code, it works, you can modify to suit your needs:
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
.tooltips {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltips span {
margin-left: -999em;
position: absolute;
}
.tooltips:hover span {
border-radius: 3px 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 210px;
}
.classic { padding: 0.5em 1em; }
* html a:hover { background: transparent; }
.classic {background: #007DC3; border: 1px solid #FFAD33; color:#fff;}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td><a class="tooltips" href="#"><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" title="">
<span class="classic">Name: Ching Yuet To;
Hobby: Hiking, Watching movie;
I believe that it would be fun that we can carry out research study
independently. I think it is meaningful to participate and promote synthetic
biology research.
I can learn a lot and make many international friends in Boston! "></span></a>
</td>
</tr>
</table>
</body>
</html>
You can change how it is displayed and consider a steady location alongside the photo to display the "Tooltip"
$(".masterTooltip").on("mouseover",function(event){
$(".tooltip").remove();
var TooltipTitle=$(this).attr("Tooltip-title");
var tooltip=$("<span/>",{class:"tooltip",html:TooltipTitle,css:{top:event.pageY,left:event.pageX}});
$("body").append(tooltip);
tooltip.fadeIn();
});
$(".masterTooltip").on("mouseleave",function(event){
$(".tooltip").fadeOut();
});
.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<td><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" Tooltip-title="Name: Ching Yuet To;
Hobby: Hiking, Watching movie;
I believe that it would be fun that we can carry out research study
independently. I think it is meaningful to participate and promote synthetic
biology research.
I can learn a lot and make many international friends in Boston! "></td>
I'm trying to create a simple tab menu using a table and div blocks.
When a tab is clicked, the style of the tab changes to create the effect that the tabs were switched and the body, which is a div block inside a table cell, is switched for another div block using css (display:block and display:none). It works the way it's supposed to in firefox, but in IE 11 the tabs size are modified when they are switched.
Here is the page:
Tab Example
function tabClick(tab, bodyId) {
// tabs and bodyes arrays
var tabCol = [document.getElementById('tab1'), document.getElementById('tab2'), document.getElementById('tab3')];
var bodyCol = [document.getElementById('body1'), document.getElementById('body2'), document.getElementById('body3')];
for (var i = 0; i < tabCol.length; i++) {
// find the tab that was clicke and
// set it's status to selected. set
// the others to unselected
if (tab === tabCol[i]) {
tabCol[i].className = 'tabSel';
} else {
tabCol[i].className = 'tabUnsel';
}
// show the body related to the selected
// tab and hide the others
if (bodyCol[i].id == bodyId) {
bodyCol[i].style.display = 'block';
} else {
bodyCol[i].style.display = 'none';
}
}
}
.tabUnsel:hover {
text-decoration: underline;
}
.tabUnsel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
cursor: pointer;
background-color: #f0f0f0;
border: #898c95 solid 1px;
border-radius: 5px 5px 0px 0px;
}
.tabSel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
background-color: #ffffff;
border: #898c95 solid 1px;
border-bottom: 0;
border-radius: 5px 5px 0px 0px;
}
<table style="width: 500px; font-family: verdana; font-size: 11px;" cellspacing="0">
<tr>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab1" class="tabSel" onclick="tabClick(this,'body1');">Tab 1</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab2" class="tabUnsel" onclick="tabClick(this,'body2');">Tab 2</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab3" class="tabUnsel" onclick="tabClick(this,'body3');">Tab 3</td>
<td style="width: 100%; border-bottom: #898c95 solid 1px;"> </td>
</tr>
<tr>
<td style="border: #898c95 solid 1px; border-top: 0; padding: 10px;" colspan="7">
<div id="body1" style="width:100%; min-height: 300px;">
Tab 1 content
</div>
<div id="body2" style="width:100%; min-height: 300px; display: none;">
Tab 2 content
<br/>
<img src="http://tropicalfarm.byethost13.com/tabs/img1.jpg" />
<img src="http://tropicalfarm.byethost13.com/tabs/img2.jpg" />
</div>
<div id="body3" style="width:100%; min-height: 300px; display: none;">
Tab 3 content
</div>
</td>
</tr>
</table>
try to add this to your empty tap style for example
empty-tap{
min-height: 500px;
height:auto !important;
height: 500px;
}
the source here
I am trying to highlight the selection of a image using a javascript function but this doesn't seem to have any effect when using IE but works fine in Chrome. Can someone let me know how to highlight the submit image(button) in IE?
HTML submit button code:
<input type="submit" onfocus="changeBorder(this);" onclick="saveDeviceInfo();"
title="Save" alt="Save" value="Save" id="save-button" style="background-image:
url(btn.png); border: 2px solid rgb(51, 129, 183); background-position: initial initial;
background-repeat: repeat no-repeat;">
JS function:
function changeBorder(_this){
jQuery(_this).css("border","2px solid #3381b7");
}
EDIT:
I tried adding the below CSS to my CSS file, but still it doesn't seem to work in IE 8.
#save-button:hover{
border: 1px solid #3381b7;
}
#save-button:focus{
border: 4px solid #3381b7;
}
#save-button:focus{
outline: #177f7f dotted medium;
}
#save-button:selected{
outline: #177f7f dotted medium;
}
You could use CSS, like:
#save-button{
background:url('btn.png') no-repeat;
}
#save-button:hover{
background:url('btn2.png') no-repeat;
}
or
#save-button{
background-image:url('btn.png'); background-repeat:no-repeat;
}
#save-button:hover{
background-image:url('btn2.png'); background-repeat:no-repeat;
}
Here's a Fiddle
HTML
<input type="submit" onclick="saveDeviceInfo();" title="Save" alt="Save" value="Save" id="save-button">
CSS
#save-button {
border: 2px solid rgb(51, 129, 183);
background-image: url(btn.png);
background-position: initial initial;
background-repeat: no-repeat;
}
#save-button:hover{
border: 1px solid #3381b7;
}
#save-button:focus{
border: 4px solid #3381b7;
outline: #177f7f dotted medium;
}
#save-button:selected{
outline: #177f7f dotted medium;
}
jQuery
$(function() {
$('#save-button').click(function() {
$(this).css({ border: '2px solid #ccc'});
});
});
I am trying to open a popup window from a parent window. I have two tr and each tr has a apply button and as soon as I click on the apply button it will open a popup window.
But somehow, popup window gets opened for first tr only apply button meaning as soon as I click on the Apply Button for the first tr, popup window gets opened.
But for the second tr apply button, popup window doesn't gets opened.
I am not sure why it is not working.
Below is my full code.
<html>
<head>
<style>
* { font-family: Trebuchet MS; }
#containerdiv {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
/*#containerdiv iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
#blockdiv {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC; }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#close { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#close:hover { cursor: pointer; background: #E5E5E5 }
#apply { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#apply:hover { cursor: pointer; background: #E5E5E5 }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
function open(url) {
$('#blockdiv').fadeIn();
$('#iframe').attr('src', url);
$('#containerdiv').fadeIn();
}
function close() {
$('#blockdiv').fadeOut();
$('#containerdiv').fadeOut();
}
$(document).ready(function() {
$('ul').css({width: $('#containerdiv').width(),height: $('#containerdiv').height()})
$('#close').click( function() { close() })
$('#JN_apply').click( function() { open($(this).data('url')); })
});
</script>
</head>
<body bgcolor="#F8F8F8">
<table width="850" border="0" align="left" style="table-layout:fixed; font-family:Arial, Helvetica, sans-serif; font-size:12px;" >
<tr bgcolor = "#C4D3D9" align = "center" height = "10" style="font-size:13px">
<th width = "65%">Description</th>
<th width = "10%">Apply</th>
</tr><tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Program
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
</td>
</tr>
<tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Material
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.google.com/">
</td>
</tr>
</table>
<div id="blockdiv"></div>
<div id="containerdiv">
<iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
<span id="close">Close</span>
</div>
</body>
</html>
This is the jsfiddle that I have created. In that you will see that if you click on first Apply button then the popup will get open, but as soon as you click on the second apply button, the popup won't get open. Can anybody explain me why this is happening? And how to resolve this?
Your html is invalid: the id attribute is supposed to be unique. When you use the selector #JN_apply" it selects just one of the buttons (in most browsers this will be the first, as you have seen).
You should change each one to use a class instead of an id:
<input class="JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
...and then change the jQuery selector to match:
$('.JN_apply').click( function() { open($(this).data('url')); })
Updated demo: http://jsfiddle.net/p3wgm/3/
Note also that it's not a good idea to create global functions called open() and close() because there are already built-in functions open() and close() and your functions will overwrite these. Perhaps openPopup() and closePopup() or similar? Or define them inside your document ready handler so that they're not global, which would probably be better regardless of the names. Or if they're only ever called from one place (like in your example) just put that code directly in the click handlers.