I have an issue concerning a canvas HTML5, especially its rendering in Safari. This rendering is good on Firefox and Chrome but not with Safari.
Here's a capture of this canvas on Firefox :
and the capture with Safari :
As you can see, there's an issue with Safari : the left menu (masses, initial positions, initial speeds) is flattened (see the 3 parameters lines compressed).
I don't know where this issue could come from. You can check this rendering on this link.
Here's the part of code which represents this HTML5 canvas :
<div class="container" style="max-width:750px;">
<table>
<tr>
<td colspan="3">
<div class="col-md-12">
<label for="slider"><b>Axis lengths</b></label>
<br>
<input id="slider1" type="hidden" class="span2" value="" data-slider-min="4.8" data-slider-max="235.2" data-slider-step="4.8" data-slider-value="[81.6,158.4]" />
</div>
</td>
<td rowspan="5">
<canvas id="pendulumCanvas" width="500" height="500" style="border:1px solid black;">
</canvas>
</td>
</tr>
<tr>
<td class="col-md-4">
<label for="lab1" tabindex="-1"><b>$\mathbf{M_{1}}$</b></label>
<input type="text" class="form-control input-sm" id="lab1" tabindex="1"/>
</td>
<td class="col-md-4">
<label for="lab2" tabindex="-1"><b>$\mathbf{M_{2}}$</b></label>
<input type="text" class="form-control input-sm" id="lab2" tabindex="2"/>
</td>
<td class="col-md-4">
<label for="lab3" tabindex="-1"><b>$\mathbf{M_{3}}$</b></label>
<input type="text" class="form-control input-sm" id="lab3" tabindex="3"/>
</td>
</tr>
<tr>
<td class="col-md-4">
<label for="lab4" tabindex="-1"><b>$\mathbf{\Theta_{1}}$</b></label>
<input type="text" class="form-control input-sm" id="lab4" tabindex="4"/>
</td>
<td class="col-md-4">
<label for="lab5" tabindex="-1"><b>$\mathbf{\Theta_{2}}$</b></label>
<input type="text" class="form-control input-sm" id="lab5" tabindex="5"/>
</td>
<td class="col-md-4">
<label for="lab6" tabindex="-1"><b>$\mathbf{\Theta_{3}}$</b></label>
<input type="text" class="form-control input-sm" id="lab6" tabindex="6"/>
</td>
</tr>
<tr>
<td class="col-md-4">
<label for="lab7" tabindex="-1"><b>$\mathbf{\dot{\Theta}_{1}}$</b></label>
<input type="text" class="form-control input-sm" id="lab7" tabindex="7"/>
</td>
<td class="col-md-4">
<label for="lab8" tabindex="-1"><b>$\mathbf{\dot{\Theta}_{2}}$</b></label>
<input type="text" class="form-control input-sm" id="lab8" tabindex="8"/>
</td>
<td class="col-md-4">
<label for="lab9" tabindex="-1"><b>$\mathbf{\dot{\Theta}_{3}}$</b></label>
<input type="text" class="form-control input-sm" id="lab9" tabindex="9"/>
</td>
</tr>
<tr>
<td class="col-md-4">
<label for="lab3" tabindex="-1"><b>$\mathbf{K_{1}}$</b></label>
<input type="text" class="form-control input-sm" id="lab10" tabindex="10"/>
</td>
<td class="col-md-4">
<label for="lab3" tabindex="-1"><b>$\mathbf{K_{2}}$</b></label>
<input type="text" class="form-control input-sm" id="lab11" tabindex="11"/>
</td>
<td class="col-md-4">
<label for="lab3" tabindex="-1"><b>$\mathbf{K_{3}}$</b></label>
<input type="text" class="form-control input-sm" id="lab12" tabindex="12"/>
</td>
</tr>
<tr>
<td colspan="3"> </td>
<td>
<div class="center">
<button type="button" id="startButtonId" class="btn btn-primary" tabindex="13">Start</button>
<button type="button" id="resetButtonId" class="btn btn-default" tabindex="14">Reset</button>
</div>
</td>
</tr>
</table>
</div>
<br><br>
<br>
<script type="text/javascript" src="./js/triple_pendulum.js">
</script>
</td>
If someone could give me some clues to solve this strange rendering on Safari.
Regards
You are seeing a difference because of the way that extra space is distributed between table cells in the various browsers. In the current version of Safari each cell is only taking up as much space as it needs. This leaves a bunch of extra space left over on the last cell. The code below demonstrates this.
#canvas, #cell-1, #cell-2 {
color: white;
font-family: sans-serif;
}
#canvas {
background-color: green;
padding: 100px;
}
#cell-1 {
background-color: red;
}
#cell-2 {
background-color: blue;
}
<table>
<tbody>
<tr>
<td id="cell-1">CELL 1</td>
<td id="canvas" rowspan="2">CANVAS</td>
</tr>
<tr>
<td id="cell-2">CELL 2</td>
</tr>
</tbody>
</table>
There are many solutions to this problem. You could try adding some padding to the td elements as shown below.
#canvas, #cell-1, #cell-2 {
color: white;
font-family: sans-serif;
}
#canvas {
background-color: green;
padding: 100px;
}
#cell-1, #cell-2 {
padding: 50px 0;
}
#cell-1 {
background-color: red;
}
#cell-2 {
background-color: blue;
}
<table>
<tbody>
<tr>
<td id="cell-1">CELL 1</td>
<td id="canvas" rowspan="2">CANVAS</td>
</tr>
<tr>
<td id="cell-2">CELL 2</td>
</tr>
</tbody>
</table>
A better solution may be to take a look at your use of tables and how you might accomplish a similar result using CSS and positioning or even flexbox.
Related
I want to display the div tag hidden content above the button on button(Add Address) click and at the same time shift the button below the div tag content and again on cancel button click put the button to the original position. I am doing the code in a .tpl file.
function addPickupAddress()
{
$("#addPickupAddressForm").show();
}
<div id="addPickupAddressForm" style="height:100px;display: none;">
<span style="font-size:20px">Add Pickup Address</span>
<table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2">
<tr>
<td>
Title </td><td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title">
</td>
</tr>
<tr>
<td>
First Name </td><td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name">
</td>
</tr>
<tr>
<td>
Last Name </td><td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name">
</td>
</tr>
<tr>
<td>
Address </td><td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
Address2 </td><td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
City </td><td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
<tr>
<td>
State </td><td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name">
</td>
</tr>
<tr>
<td>
PinCode </td><td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode">
</td>
</tr>
<tr>
<td>
Phone <span style="float: right;">+91</span></td><td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
</table>
</div>
<button type="button" id="addbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;padding-top: 10px;cursor:pointer;float: left; margin-left:120px; margin-bottom:10px;" onclick="addPickupAddress();">Add Address</button>
Try using the jquery toggle-function.
Look at this Pen to see how it's used: http://codepen.io/anon/pen/rrxYxq
function addPickupAddress ()
{
$("#addPickupAddressForm").toggle();
}
Also, the Button appears to be inside the form when it's visible because it's height is set to 100px but the children inside the element are actually higher. Remove it and the height will be calculated automatically.
Replace Height 100px to 100% for display in full height.
And Put Cancel button in below div.
Try below code.
function addPickupAddress(isVisible)
{
if(isVisible){
$("#addPickupAddressForm").show();
$('#Cancelbuttonpickup').show();
}
else{
$("#addPickupAddressForm").hide();
$('#Cancelbuttonpickup').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addPickupAddressForm" style="height:100%;display: none;">
<span style="font-size:20px">Add Pickup Address</span>
<table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2">
<tr>
<td>
Title </td><td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title">
</td>
</tr>
<tr>
<td>
First Name </td><td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name">
</td>
</tr>
<tr>
<td>
Last Name </td><td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name">
</td>
</tr>
<tr>
<td>
Address </td><td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
Address2 </td><td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
City </td><td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
<tr>
<td>
State </td><td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name">
</td>
</tr>
<tr>
<td>
PinCode </td><td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode">
</td>
</tr>
<tr>
<td>
Phone <span style="float: right;">+91</span></td><td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
</table>
</div>
<button type="button" id="addbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;cursor:pointer;float: left; margin-bottom:10px;" onclick="addPickupAddress(true);">Add Address</button>
<button type="button" id="Cancelbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;cursor:pointer;float: left; margin-bottom:10px;display:none;" onclick="addPickupAddress(false);">Cancel</button>
Check following code. Its implemented according to your requirement
function addPickupAddress() {
$("#addPickupAddressForm").show();
$("#cancelbutton").show();
$("#addbuttonpickup").hide();
}
function hidePickupAddress() {
$("#addPickupAddressForm").hide();
$("#cancelbutton").hide();
$("#addbuttonpickup").show();
}
.buttonstyle {
color: white;
background-color: #0899C9;
padding: 5px;
padding-top: 10px;
cursor: pointer;
float: left;
margin-left: 120px;
margin-bottom: 10px;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addPickupAddressForm" style="display: none;">
<span style="font-size: 20px">Add Pickup Address</span>
<table id="addAddressTable" style="width: 470px; margin-left: 110px;"
cellpadding="2">
<tr>
<td>Title</td>
<td><input type="text" name="title" id="title_rev_pickup"
placeholder="Enter Title"></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" name="firstname"
id="firstname_rev_pickup" placeholder="Enter First Name"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lastname" id="lastname_rev_pickup"
placeholder="Enter Last Name"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address1" id="address1_rev_pickup"
placeholder="Enter Address"></td>
</tr>
<tr>
<td>Address2</td>
<td><input type="text" name="address2" id="address2_rev_pickup"
placeholder="Enter Address"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" name="city" id="city_rev_pickup"
placeholder="Enter City Name"></td>
</tr>
<tr>
<td>State</td>
<td><input type="text" name="state" id="state_rev_pickup"
placeholder="Enter State Name"></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="zipcode" id="zipcode_rev_pickup"
placeholder="Enter ZipCode"></td>
</tr>
<tr>
<td>Phone <span style="float: right;">+91</span></td>
<td><input type="text" name="phone" id="phone_rev_pickup"
placeholder="Enter City Name"></td>
</tr>
</table>
</div>
<button type="button" id="addbuttonpickup"
class="buttonstyle"
onclick="addPickupAddress();">Add Address</button>
<button type="button" id="cancelbutton"
class="buttonstyle" style="display:none"
onclick="hidePickupAddress();">Cancel</button>
Just remove the float on the button and the fixed height of your hidden div, and the button will appear under the div as expected. To hide the div again, you can use jQuery's toggle() function. Also try not to use inline styles as it will make your code much less readable.
function addPickupAddress() {
$("#addPickupAddressForm").toggle();
$("#addbuttonpickup").html($("#addbuttonpickup").html() == 'Cancel' ? 'Add Address' : 'Cancel');
}
button {
color: white;
background-color: #0899C9;
padding: 5px;
padding-top: 10px;
cursor: pointer;
margin-left: 120px;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addPickupAddressForm" style="display: none;">
<span style="font-size:20px">Add Pickup Address</span>
<table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2">
<tr>
<td>
Title</td>
<td>
<input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title">
</td>
</tr>
<tr>
<td>
First Name</td>
<td>
<input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name">
</td>
</tr>
<tr>
<td>
Last Name</td>
<td>
<input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name">
</td>
</tr>
<tr>
<td>
Address</td>
<td>
<input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
Address2</td>
<td>
<input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
City</td>
<td>
<input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
<tr>
<td>
State</td>
<td>
<input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name">
</td>
</tr>
<tr>
<td>
PinCode</td>
<td>
<input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode">
</td>
</tr>
<tr>
<td>
Phone <span style="float: right;">+91</span>
</td>
<td>
<input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
</table>
</div>
<button type="button" id="addbuttonpickup" onclick="addPickupAddress();">Add Address</button>
You just have to do this
function addPickupAddress(isShow)
{
$("#addPickupAddressForm,#cancel")[isShow?"show":"hide"]();
}
Plus you have to remove the fixed size of your div content.
Have created a fiddle for same, check it out here
I am trying to get the mortgage calculator on the right side of the website to fit in the box (div) that is supposed to be around it. You can see that it is overlapping.
Webpage: http://www.yourwhiteknight.com/properties/
As you can see from the code below, the width of the table is set in the table attribute (width="") and in CSS code but it is not obeying these rules. How can I force this table to be smaller?
Code:
<div class="textwidget">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<!-- Javascript function is here but no reference to width -->
<form id="mortgageCalculator">
<table border="0" cellpadding="1" style="background-color: #f4f5ed; width:248px" width="248">
<tbody><tr style="background-color: #496b1f; font-size:11px;">
<td colspan="2" align="CENTER">
<b><font color="white">Mortgage Calculator</font></b>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="1">
<tbody><tr>
<td colspan="2"><b>Mortgage Data:</b>
</td>
</tr><tr>
<td align="RIGHT">House Price ($):
</td>
<td>
<input type="TEXT" name="price" value="50000" size="8" onchange="UpdatePrincipal(this.form)" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQV
Q4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
</td>
</tr>
<tr>
<td align="RIGHT">Down Pymt ($):</td>
<td>
<input type="TEXT" name="down" value="0" size="8" onchange="UpdatePrincipal(this.form)">
</td>
</tr>
<tr>
<td align="right">Principal ($):</td>
<td>
<input type="text" name="principal" value="50000" size="8" readonly="true" style="background-color: #aaaaaa;">
</td>
</tr>
<tr>
<td align="RIGHT">Annual Int. Rate (%):</td>
<td>
<input type="TEXT" name="interest" value="8.5" size="5">
</td>
</tr>
<tr>
<td align="RIGHT">Term (Months):</td>
<td>
<input type="TEXT" name="term" value="120" size="5">
</td>
</tr>
<tr>
<td align="RIGHT">Monthly Pymt:</td>
<td>
<input type="TEXT" name="monthlyPayment" size="5">
</td>
</tr><tr>
<td align="RIGHT">Balloon Pymt:</td>
<td>
<input type="TEXT" name="balloon" size="5">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="CENTER" colspan="2">
<input type="BUTTON" name="cmdCalc" value="Calculate" onclick="calculate(this.form)">
</td>
</tr>
</tbody></table>
</form></div>
The table will only get as small as the content within it. Your text inputs in the calculator are large enough that they're limiting how small the table is. Set a smaller width on those inputs, and it should be all good!
the problem is within the table, with the inputs there. You can add a " width: 100%;" to the inputs and the problem is solved.
You can add the css like this:
#mortgageCalculator input {
width: 100%;
}
I'm trying to include a file which generates 2 random numbers that needs to be add or what we call captcha. I have two logins: one that requires employee id, birthdate, and the captcha answer(Which I call the easy login). While the other one requires your first name, last name, birthdate, and captcha(I call it the standard login). So I have two radio buttons for the user to choose whether an easy login or standard login. So I'm encountering this problem when you choose a login then you need to answer the captcha (The captcha sends sessions for its answer) so whats happening right know is that the captcha in the easy login is always being override by the captcha in the standard login. What I thought that I would do is set a condition where if the radio button is selected (easy login) then thats the time it will be included. But I don't know how to do that.
Here is the captcha code:
captcha.php
<?php
session_start();
$n1=rand(1,6); //Generate First number between 1 and 6
$n2=rand(5,9); //Generate Second number between 5 and 9
$answer=$n1+$n2;
$math = "What is ".$n1." + ".$n2." ? ";
$_SESSION['vercode'] = $answer;
print $math;
?>
Then here is the code for my interface:
index.php
<SCRIPT TYPE="text/javascript">
function toggleTables(which)
{
if(which == "0") {
document.getElementById('standard').style.display = "table";
document.getElementById('customize').style.display = "none";
}
if(which == "1") {
document.getElementById('customize').style.display = "table";
document.getElementById('standard').style.display = "none";
}
}
</SCRIPT>
</head>
<body style="background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;" >
<?php include('../include/logoheader.php'); ?>
<div class="row">
<div class="twelve columns">
<hr />
</div>
</div>
<div class="row">
<div class="two columns">
</div>
<div class="eight columns">
<div class="content">
<?php include('../include/retain-empid.php'); ?>
<br>
<input name="radio" type="radio" id="customize_1" onClick="toggleTables('0')" value="radio" /><font color="white">Standard Login</font>
<input name="radio" type="radio" id="customize_0" onClick="toggleTables('1')" value="radio" checked="checked"/><font color="white">Easy Login</font>
<form name="loginform" action="login_exec.php" method="post" >
<center><?php include('../function/login_errmsg.php'); ?></center>
<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="customize">
<tr>
<th colspan="4">
Easy Log-in For Registered Convergys Employees
</th>
</tr>
<tr>
<td align="right">
<label>Employee Number</label>
</td>
<td>
<input type="text" placeholder="Employee Number" name="txt_EmpID" autoComplete="off" value=<?php echo $value; ?> >
</td>
<td align="right">
<label>Birthday</label>
</td>
<td>
<input type="date" class="" placeholder="Birthday" id="txt_BDate" name="txt_BDate" autoComplete="off" maxlength = "10"
style ="width:170px;"/>
</td>
</tr>
<tr>
<td align="right">
<label class="labels" align="center">
<strong>
</strong>
</label>
</td>
<td>
<?php
include ('../include/mathcaptcha.php');
?>
</td>
<td>
<input name="captcha" type="text" placeholder="Answer to math question">
</td>
<td>
</td>
<td>
<input type="submit" id="submit" name="btn_refer" class="btn" value="Submit"
style=" width: 170px; height: 30px; font-size: 11pt; ">
</td>
</tr>
</table>
</form>
<form action="otherlogin_exec.php" method="post">
<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="standard" style="display: none">
<tr>
<th colspan="4">
Standard Log-in For All Registered Users
</th>
</tr>
<tr>
<td align = "right">
<label>First name:</label>
</td>
<td>
<input type="text" placeholder="First Name" name="txtFirstName" autoComplete="off" >
</td>
<td>
<label>Last name:</label>
</td>
<td>
<input type="text" placeholder="Last Name" name="txtLastName" autoComplete="off" >
</td>
</tr>
<tr>
<td>
<label>Birthday:</label>
</td>
<td>
<input type="date" class="" placeholder="Birthday" id="txt_BDate"
name="txtPassword" autoComplete="off" maxlength = "10" style = "width:170px;"/>
</td>
<td>
<label class="labels" align="center">
<strong>
</strong>
</label>
</td>
<td>
<?php
include ('../include/mathcaptcha.php');
?>
</td>
<td>
<input name="captcha" type="text" placeholder="Answer to math question">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<input type="submit" id="submit" name="btn_refer" class="btn" value="Submit"
style=" width: 100%; height: 30px; font-size: 11pt; ">
</td>
</tr>
</table>
</form>
</div>
</div>
Make the first line of your file
<?php include_once ('../include/mathcaptcha.php'); ?>
then change the lines from
<td>
<?php
include ('../include/mathcaptcha.php');
?>
</td>
to
<td><?php echo $math;?></td>
and take the print out of the captcha file. PHP doesnt affect the design of pages only the outputted data does which should be altered as needed.
I want my site to display differently based on the size of the web browser. Based on the questions/answers from other users, I got this to work with JavaScript onload. But I can't get it to work dynamically -- that is to say, in real-time, as users are adjusting the window. They have to refresh to get the format of the webpage to change.
Here is my current code:
<table class="index_table" border="0">
<tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth > 900){
document.write('<td rowspan="3" class="index_article"></td>');
}
</script>
<!-- END OF JAVASCRIPT -->
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth < 900){
document.write('<tr><td class="index_article" style="height:200px;"></td></tr>');
}
</script>
<!-- END OF JAVASCRIPT -->
Note: I know I shouldn't be used tables, I should be using divs. But that's another issue... I started building this website before I knew that. I also know it's pretty sloppy. So just bear with me. I'm trying to just go with it until I have time to fix it up.
You shouldn't use JavaScript to make responsive web design. Use CSS instead, with media querys. So you write your HTML:
<table class="index_table" border="0">
<tr>
<!--This only will display on screen-width>900-->
<td id="big_device_index" rowspan="3" class="index_article"></td>
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--This only will display on screen-width<900-->
<tr id="small_device_index"><td class="index_article" style="height:200px;"></td></tr>
Use the following CSS:
#media all and (max-width: 899px) {
#big_device_index {
display: none;
}
#media all and (min-width: 900px) {
#small_device_index {
display: none;
}
You can find out more about media queries here
}
Add this outside of if (window.innerWidth > 900){.....
$(window).resize(function(){
if (window.innerWidth > 900){
$('.index_article').remove();
$('.index_table).find('tr:first').append('<td rowspan="3" class="index_article"></td>');
}
}
hope this will help you, make sure to include fisrt jquery.min.js
In my MVC project, i have the following screen shot.
![enter image description here][1]
Output will be like this..
![enter image description here][2]
![enter image description here][1]
<table id="dealer" border="1" width="150%" height="20%" class="TabAlign">
<tr style="background-color: #808080; color: #fff; font-size: 14px;height: 30px;">
<th class="center_Align">Manufacturer</th>
<th class="center_Align">GLI</th>
<th class="center_Align">Latham</th>
<th class="center_Align">Loop-Loc</th>
<th class="center_Align">Merlin</th>
</tr>
<tr style="height: 30px;">
<td>
<label for="20mil"> 20 MIL</label>
<input style="display: none;" type="text" name="20mil" value="20 Mil" id="20mil" />
</td>
<td class="right_Align">
#*<label for="20milgli">$#Model.Tot_20mil_GLI.ToString("0.00")</label>*#
<div id="20milgli">$#Model.Tot_20mil_GLI.ToString("0.00") </div>
<input style=" display:none;" type="text" name="20milgli" value="$#Model.Tot_20mil_GLI.ToString("0.00")" id="20milgli" />
</td>
<td class="right_Align">
#*<label for="20milLat">$#Model.Tot_20mil_Lat.ToString("0.00")</label>*#
<div id="20milLat">$#Model.Tot_20mil_Lat.ToString("0.00") </div>
<input style=" display:none;" type="text" name="20milLat" value="$#Model.Tot_20mil_Lat.ToString("0.00")" id="20milLat" />
</td>
<td class="right_Align">
#*<label for="20milLoop">$#Model.Tot_20mil_Loop.ToString("0.00")</label>*#
<div id="20milLoop">$#Model.Tot_20mil_Loop.ToString("0.00") </div>
<input style=" display:none;" type="text" name="20milLoop" value="$#Model.Tot_20mil_Loop.ToString("0.00")" id="20milLoop" />
</td>
<td class="right_Align">
#*<label for="20milMer">$#Model.Tot_20mil_Mer.ToString("0.00")</label>*#
<div id="20milMer">$#Model.Tot_20mil_Mer.ToString("0.00") </div>
<input style=" display:none;" type="text" name="20milMer" value="$#Model.Tot_20mil_Mer.ToString("0.00")" id="20milMer" />
</td>
</tr>
<tr style="height: 30px;">
<td>
<label for="2728MIL"> 27/28 MIL</label>
<input style="display: none;" type="text" name="2728MIL" value="2728MIL" id="2728MIL" />
</td>
<td class="right_Align">
#*<label for="2728MILgli">$#Model.Tot_27or28mil_GLI.ToString("0.00")</label>*#
<div id="2728MILgli">$#Model.Tot_27or28mil_GLI.ToString("0.00") </div>
<input style=" display:none;" type="text" name="2728MILgli" value="$#Model.Tot_27or28mil_GLI.ToString("0.00")" id="2728MILgli" />
</td>
<td class="right_Align">
#*<label for="2728MILLat">$#Model.Tot_27or28mil_Lat.ToString("0.00")</label>*#
<div id="2728MILLat">$#Model.Tot_27or28mil_Lat.ToString("0.00") </div>
<input style=" display:none;" type="text" name="2728MILLat" value="$#Model.Tot_27or28mil_Lat.ToString("0.00")" id="2728MILLat" />
</td>
<td class="right_Align">
#*<label for="2728MILLoop">$#Model.Tot_27or28mil_Loop.ToString("0.00")</label>*#
<div id="2728MILLoop">$#Model.Tot_27or28mil_Loop.ToString("0.00") </div>
<input style=" display:none;" type="text" name="2728MILLoop" value="$#Model.Tot_27or28mil_Loop.ToString("0.00")" />
</td>
<td class="right_Align">
#*<label for="2728MILMer">$#Model.Tot_20mil_Lat.ToString("0.00")</label>*#
<div id="2728MILMer">$#Model.Tot_20mil_Lat.ToString("0.00") </div>
<input style=" display:none;" type="text" name="2728MILMer" value="$#Model.Tot_20mil_Lat.ToString("0.00")" id="2728MILMer" />
</td>
</tr>
<tr style="height: 30px;">
<td>
<label for="All27or28MIL"> ALL 27 or 28 MIL</label>
<input style="display: none;" type="text" name="All27or28MIL" value="All27or28MIL" id="All27or28MIL" />
</td>
<td class="right_Align">
#*<label for="All2728mil">$#Model.Tot_27or28mil_GLI.ToString("0.00")</label>*#
<div id="All2728mil">$#Model.Tot_All2728mil_GLI.ToString("0.00") </div>
<input style=" display:none;" type="text" name="All2728mil" value="$#Model.Tot_All2728mil_GLI.ToString("0.00")" id="All2728mil" />
</td>
<td class="right_Align">
#*<label for="All2728MILLat">$#Model.Tot_All2728mil_Lat.ToString("0.00")</label>*#
<div id="All2728MILLat">$#Model.Tot_All2728mil_Lat.ToString("0.00") </div>
<input style=" display:none;" type="text" name="All2728MILLat" value="$#Model.Tot_All2728mil_Lat.ToString("0.00")" id="All2728MILLat" />
</td>
<td class="right_Align">
#*<label for="All2728MILLoop">$#Model.Tot_All2728mil_Loop.ToString("0.00")</label>*#
<div id="All2728MILLoop">$#Model.Tot_All2728mil_Loop.ToString("0.00") </div>
<input style=" display:none;" type="text" name="All2728MILLoop" value="$#Model.Tot_All2728mil_Loop.ToString("0.00")" id="All2728MILLoop" />
</td>
<td class="right_Align">
#*<label for="All2728MILMer">$#Model.Tot_All2728mil_Mer.ToString("0.00")</label>*#
<div id="All2728MILMer">$#Model.Tot_All2728mil_Mer.ToString("0.00") </div>
<input style=" display:none;" type="text" name="All2728MILMer" value="$#Model.Tot_All2728mil_Mer.ToString("0.00")" id="All2728MILMer" />
</td>
</tr>
</table>
<br />
<b>Choose Manufacturer</b>
#if (Model.ChManufacturer.Count() > 0)
{
<table id="tblRadios">
<tr>
#* <td>#Html.DropDownList("manufacturer", Model.ChManufacturer, new { id = "manufacturer" })</td>*#
#foreach (var item in Model.ChManufacturer)
{
if (item.Text == "Select ...")
{
}
else
{
<td align="left">
<td>
<input id="manufacturer:#item.Text" type="radio" name="Manu_rbgrp" value="#item.Text" onclick="GetPatternDetails(this.value);"> #item.Text </td>
#*<td>#Html.RadioButton("ListTypes", item.Text, new { #class = "radbtn" })</td>*#
#* <td>
<div class="listtext">#item.Text</div>
</td>*#
</td>
}
}
</tr>
</table>
}
<b>Choose Material</b>
#if (Model.ChMaterial.Count() > 0)
{
<table>
<tr>
<td></td>
</tr>
<tr>
#foreach (var item in Model.ChMaterial)
{
if (item.Text == "Select ...")
{
}
else
{
<td align="left">
<td>
<input id="material:#item.Text" type="radio" name="Mat_rbgrp" value="#item.Text" onclick="GetMaterialName(this.value);"> #item.Text </td>
</td>
}
}
#* #for (int i = 0; i < Model.ChMaterial.Count(); i++)
{
if (#Model.ChMaterial[i].Text == "Select ...")
{
}
else
{
<td> <input id="rads2:#Model.ChMaterial[i].Text" type="radio" name="Mat_rbgrp" value="#Model.ChManufacturer[i].Text"> #Model.ChMaterial[i].Text
</td>
}
}*#
#*<td>#Html.DropDownList("material", Model.ChMaterial, new { id = "material" })</td>*#
</tr>
</table>
}
I use Radiobutton for manufacturer like (20mil, 2728mil,etc..) and material like(GLI,latham,Loop-Loc,etc).. So if i select the manufacturer as 20mil and material as Latham means that td($2562.38) will be highlighted. how to do this.. any help??
You should first find row and column index and then change find that td according to indexex
Try this fiddle
findtdByIndex(row,column)
Above function returns td by its indexes. you can find this function in fiddle below.
http://jsfiddle.net/Pss9M/72/
$("#tablica tbody tr").each(function() {
$(this).children('td:first').click(function() {
$(this).closest('table').find('td').css({
'background-color':''
});
$(this).closest('tr').find("td:nth-child(3)").css({
'background-color':'red'
});
});
});
Fiddle here