Visibility change with css not working - css

Trying to change the visibility of my form on click of the button, however the visibility of the form doesnt change on click. I am not sure what I am doing wrong, I've looked at other code and they are doing the same thing.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
#cardInput{
position: absolute;
bottom:400px;
right:700px;
}
</style>
</head>
<body>
<form>
<!--this is the form itself i used a div to contain it-->
<div id="cardInput">
<table>
<tr>
<td align="right">Name:</td>
<td align="left"><input type="text" name="name" /></td>
</tr>
<tr>
<td align="right">Font Size:</td>
<td align="left"><input type="text" name="font" /></td>
</tr>
<tr>
<td align="right">Colour:</td>
<td align="left"><input type="text" name="colour" /></td>
</tr>
<tr>
<td align="right"></td>
<td align="left"><button type="button" onclick="makeCard()">Make Your Card</button></td>
<!--on submit i want it to run the function that hides the form-->
</tr>
</table>
</div>
</form>
<script>
function makeCard(){
//this is the line that isnt working
document.getElementsByTagName("form").style.visibility = "hidden";
}
</script>
</body>
</html>
Any help is greatly appreciated.
Sorry about the poor formating of code I rarely use this.

document.getElementsByTagName("form")
always returns array of form tags found in page. so you should use it like
function makeCard(){
document.getElementsByTagName("form")[0].style.visibility = "hidden";
}
see demo http://jsfiddle.net/t2YLa/

Add id in form id = "form" inside the tag and call in javascript like this :
document.getElementById("form").style.visibility = "hidden";

Related

Force login in ASP

I have make a login page in asp classic named SiteMaster.asp
i have set this page as default page thats work fine , but if an user knows
tha name of the other pages can access without login , example
http://localhost/teste/barra.asp
what i need to add for block this kind o access?
this is the code of my login page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Intranet Novo Macuco </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head><body>
<form name="login" method="post" action="verify.asp" >
<table >
<tr>
<td height="49" colspan="5"><p><img src="imagens/moveisnovomacuco.PNG" width="226" height="95" alt=""/></p>
<p> </p></td>
</tr>
<tr>
<td >Login</td>
<td colspan="3" ><input type="text" name="loginx" id="login"></td>
</tr>
<tr>
<td >Senha</td>
<td colspan="3" ><input type="password" name="passx" id="passwordx"></td>
</tr>
<tr>
<td ><input type="submit" name="submit" id="submit" value="Enviar"></td>
<td colspan="3" ><input type="reset" name="reset" id="reset" value="Limpar">
</td>
</table>
</form>
</body></html>
I need to user session or another object to make this???

HTML Email Client Border Removal

Ok, so I'm trying to create a simple as you like single column html email template.
The issue that I'm having is that I can not seem to get rid of the white boarder that surrounds the message when I paste the html code into my email client to sent a test message.
I've set the css of the bodyto an inline and this works perfectly when I test in the browser, there is no white boarder or margin....
<body style="margin: 0px; padding: 0px; background-color: #000000" bgcolor="#000000">
....but when I come to paste the code into the mail client (I use Mac Mail as my default) to send a test mail, I keep getting a white boarder all around the message and CAN NOT work out how to get rid of this.
I've looked at an html email that I received with full width background color and tried to work out what that does that I'm not but can't see anything different, so am I just missing something real simple here??
<html>
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
</head>
<body style="margin: 0px; padding: 0px;" bgcolor="000">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrapper" bgcolor="#999999" border-collapse="collapse">
<tr>
<td align="center">
<table width="100%" height="200" bgcolor="#ffffff;" class="respon_table" style="max-width: 650px; padding: 10px;">
<tr>
<td style="background-color: #ffffff;">Email content goes here....</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
https://jsfiddle.net/q16jgdtr/
You've misspelled bgcolor attributes. It should be a valid color.
E. g. bgcolor="#ffffff;" should be bgcolor="#ffffff" -- without a semicolon.
And bgcolor="000" should be bgcolor="#000000".
https://jsfiddle.net/q16jgdtr/3/
https://www.w3.org/TR/html4/index/attributes.html
I have a feeling it's because you missed the following on the table that contains the contents of the email.
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrapper" bgcolor="#999999" border-collapse="collapse">
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="200" bgcolor="#ffffff;" class="respon_table" style="max-width: 650px; padding: 10px;" border-collapse="collapse">
<tr>
<td style="background-color: #ffffff;">Email content goes here....</td>
</tr>
</table>
</td>
</tr>
</table>
I have added border collapse, cellpadding, cellspacing and border to zero. Give the above code a try, hope that's what you are looking for.

Activate Submit Button on Enter

Right now I have to click the Login button in order to send a form to the server.
I would like to press the Enter key while on the password field.
This is the code:
<%# Page Language="VB" AutoEventWireup="False" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Login Page</title>
<SCRIPT language="javascript" src="commonpages/js/Utility.js" type="text/javascript"></SCRIPT>
<script>
function GoBtn_ServerClick(oButton, oEvent) {
}
</script>
</head>
<body style="background-color:AliceBlue">
<div id="main0">
<!--<input id="auto" type=button value="Print test" onclick="Printtest();">-->
<table width=800 align=center height=600px style="background-color: AliceBlue;">
<tr>
<td width=25></td>
<td width=750 align=center><form runat="server">
<table ><tr><td colspan="2">
</td></tr>
<tr><td align=left>
Login:</td><td align=right>
<input id="login" runat=server type=text style="width: 100px"/></td>
</tr><tr><td align=left>
Password:</td><td align=right>
<input id="pw" runat=server type=password style="width: 100px"/>
</td></tr>
<tr><td align=center colspan=2>
<input type=button runat=server id=GoBtn value=Login style="width: 60" CausesValidation="False" />
</td></tr></table></form>
</td>
<td width=25></td>
</tr>
</table>
</div>
</body>
</html>
I have searched Stack Overflow for similar questions, but they show examples of using ASP controls rather than HTML controls.
Change the 'type=button' to be 'type=submit' on your GoBtn, and it should get triggered when you press Enter.
Alternately, you could use jQuery to 'click' the button when the Enter key is pressed in the Password field:
$(document).ready(function(){
$('#pw').keypress(function(e){
if(e.keyCode==13)
$('#GoBtn').click();
});
});

How to set each item of a asp:CheckBoxList to seperate row of a bootstrap datatable ASP.NET

I have a asp:CheckBoxList to my .aspx page. I want each item of that asp:CheckBoxList as seperate row of bootstrap dataTable. My code is like below
<asp:table id="tblUserToRoleList">
<thead>
<tr>
<th>
Role List
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<asp:CheckBoxList ID="chkRoleList" runat="server" Width="250px"></asp:CheckBoxList>
</td>
<td></td>
</tr>
</tbody>
and the output like this
here all the items are in under one td of single tr
But i need all that items to separate tr for which i can search items from bootstrap dataTable's default search box
Please help me
The <asp:CheckBoxList> generates an HTML table.The problem is that this table doesn't have <th> elements defined and the Bootstrap DataTable requires these tags to be present.
Solution?Manually add the <th> tags before calling DataTable();
<head runat="server">
<title></title>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(function () {
debugger;
$("<thead><tr><th>Roles</th></tr><thead>").insertBefore("#chkRoleList tbody");
$('#chkRoleList').DataTable();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:CheckBoxList ID="chkRoleList" runat="server" Width="250px"></asp:CheckBoxList>
</form>
</body>
Output:

The Image is not getting displayed at the background of column in table in master page?

<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.style1
{
width: 50px;
height: 323px;
}
.style2
{
width: 650px;
height: 323px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td style="width:30px; height:20px;">
<img src="Image/Blue%20hills.jpg"
style="height: 83px; width: 734px;" />
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="background-color:Black; background-image:url('~/Images/Bluehills.jpg');" class="style1">
</td>
<td class="style2">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
reserved © softech infoways
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Try like this:
<td style="background-color:Black; background-image:url('<%= ResolveUrl("~/Images/Bluehills.jpg") %>');" class="style1">
</td>
and make sure that the /Images/Bluehills.jpg image actually exists (I see that in your <img> tag you are using a different image name, one with a space in its name and located in the Image folder instead of Images).
Also make sure that you define some height and width of the <td> or the image might not display:
<td style="background-color:Black; width: 100px; height: 100px; background:url('<%= ResolveUrl("~/Images/Bluehills.jpg") %>') no-repeat;" class="style1">
</td>
I would also strongly recommend you using FireBug to inspect what images are loaded and for those that are not loaded see the reason. It is an excellent tool and a must-have for every web developer.
Found a strange but got the image to display
Here is solution i used it without tilde sign and it work don't know why please if u know help me to understand
Small line Code is
<td style="background-image:url(Image/Bluehills.jpg);" class="style1">
oiyhoyhobhobjho
jgkifjklhjljh
hghdoyjofjohjypt
dhgijrlyjhoftjpohktpu
</td>
By using this image get displayed

Resources