I am trying to get a popup window which should be controlled by a jQuery function that will show/hide on the button click. My button is an asp.net control but I can't figure out how to "call" the jQuery function when the button is clicked
I have tried to add a function name to my asp.net control's onClientClick that should at least just show the popup div but that is not working. I am new to using jQuery and I believe I have everything set up correctly but I am not positive. I am also not certain whether or not I am trying to "call" the jquery function correctly.
Here is the jQuery code..
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(documnet).ready(function () {
$("#AddToCartBtn").click(function (e) {
ShowDialog(false);
e.preventDefault();
});
$("#AddToCartBtn").click(function (e) {
ShowDialog(true);
e.preventDefault();
});
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
$("#btnSubmit").click(function (e) {
var brand = $("#brands input:radio:checked").val();
$("#output").html("<b>Your favorite mobile brand: </b>" + brand);
HideDialog();
e.preventDefault();
});
});
function ShowDialog() {
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function (e) {
HideDialog();
});
}
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>
Heres the css..
.web_dialog_overlay
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.web_dialog
{
display: none;
position: fixed;
width: 380px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
}
.web_dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.web_dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
and lastly the asp button control and the <div>'s
<asp:ImageButton ID="AddToCartBtn" runat="server" RowIndex='<%# Container.DisplayIndex %>'
ImageUrl="~/Pictures/ShoppingCart.png" onClientClick="ShowDialog()"
/>
<div id="output"></div>
<div id="overlay" runat="server" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Online Survey</td>
<td class="web_dialog_title align_right">
Close
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Choose your favorite mobile brand? </b>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="radio" checked="checked" value="Nokia" /> Nokia
<input id="brand2" name="brand" type="radio" value="Sony" /> Sony
<input id="brand3" name="brand" type="radio" value="Motorola" /> Motorola
</div>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
So recap, I am having trouble calling my jQuery function when my asp.net button is clicked. I don't think the function is ever getting called at all because when i set breakpoints at the function it never jumps to them when testing. Any help would be greatly appreciated
ASP.NET Buttons have a dynamic generated ID, depending on its parent controls. So your Button ID isn't #AddToCardBtn. Check the generated HTML for that. As a workaround you can call out the generated ID by: <%=AddToCardBtn.ClientID%> into your jquery code to get the generated client ID of your button.
Example:
$("#<%=AddToCardBtn.ClientID%>").click(function (e) {
ShowDialog(false);
e.preventDefault();
});
Thats the cause why your window isn't showed. The function isn't bound to your button.
Related
Background:
I am attempting to have a radio buttons set zIndex onclick to bring a div to the foreground.
Each associated div is positioned atop each other, having the same CSS (position: absolute;).
I have attempted to use a global variable to keep incrementing and applying as zIndex to a specific div id when a radio button is clicked. I have also attempted to use a loop to set all zIndex to 1 and the passed div name set to 2. I will have both sets of code in the related section.
Issue:
I am not seeing the zIndex applied, for either incremented or looped functions, when inspecting the elements on the page.
Question:
Any help to get the zIndex to apply would be appreciated. Listing out glaring issues would also be on the table, as I am very much still learning these languages.
Code in Question:
<script type="javascript" src="index_scripts.js">
var highest_index = 1;
function getHighestIndex() {
return ++highest_index;
}
function beg1() {
document.getElementById('beginner1').style.zIndex = getHighestIndex();
}
function adt1() {
document.getElementById('adept1').style.zIndex = getHighestIndex();
}
function int1() {
document.getElementById('intermediate1').style.zIndex = getHighestIndex();
}
function adjust_zIndex(ele_id) {
var i = 0;
var max_div = document.getElementById('test').getElementsbyTagName('div');
var z;
for (i; i < max_div; i++) {
var div_id = div_id[i];
if (ele_id === div_id) {
z = 2;
} else {
z = 1;
}
document.getElementById('div_id').style.zIndex = z;
}
}
</script>
/* ##########################
Base objects
######################## */
body {
background-color: black;
}
form {
font-family: Verdana;
}
div {
position: absolute;
background-color: lightblue;
}
/* ##########################
Division IDs
######################## */
#top, #btm {
left: 1%;
right: 1%;
font-weight: bold;
border: 1px solid blue;
}
#top {
top: 1%;
bottom: 95%;
vertical-align: top;
}
#bdy,#beginner1 , #adept1, #intermediate1 {
overflow-y: scroll;
top: 6%;
height: 89%;
left: 20%;
right: 1%;
border: 1px solid blue;
}
#btm {
top: 96%;
bottom: 1%;
font-size: 9px;
vertical-align: middle;
}
#dok {
overflow-y: scroll;
top: 6%;
height: 89%;
left: 1%;
right: 81%;
font-size: 12px;
border: 1px solid blue;
}
/* ##########################
Items within divisions IDs
######################## */
/* */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Testing Site</title>
</head>
<body>
<form>
<!--
TOP AND BOTTOM OF PAGE, DOCK AND BODY/OVERLAYS ARE RELATIVE TO THESE POSITIONS
-->
<div id="top">
<table width="100%">
<tr>
<td width="50%">Test Site</td>
<td width="50%" style="text-align: right;">Welcome to the Jungle</td>
</tr>
</table>
</div>
<div id="btm">
<p>Mock-Up</p>
</div>
<!--
DOCK ON LEFT
-->
<div id="dok">
<div style="left: 0; width:100%;">
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Beginner
</p>
<input type="radio" name="div_select" onclick="adjust_zIndex(beginner1)"/>Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Adept
</p>
<input type="radio" name="div_select" onclick="adjust_zIndex(adept1)"/>Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Intermediate
</p>
<input type="radio" name="div_select" onclick="int1()"/>Video<br/>
<hr/>
</div>
</div>
<!--
OVERLAY BODY SECTIONS, TO BE IN FOREGROUND WHEN RADIO BUTTON SELECTED FROM DOCK
-->
<div id="beginner1">
<table>
<tr>
<td style="font-weight: bold; font-size: 20px; text-align: left; width: 80%;">Beginner 1 div intended to test</td>
</tr>
</table>
<hr/>
<table width="100%">
<tr>
<td style="width: 50%;"><ul>
<li>List Item</li>
</ul></td>
<td style="width: 50%;">Second Column</td>
</tr>
<tr>
<td style="height: 1000px; vertical-align: bottom;">End</td>
</tr>
</table>
</div>
<div id="adept1">
<p id="ap"></p>
<table>
<tr>
<td>Adept 1 div intended to test </td>
</tr>
</table>
</div>
<div id="intermediate1">
<p id="ap"></p>
<table>
<tr>
<td>Intermediate 1 div intended to test </td>
</tr>
</table>
</div>
<div id="bdy" style="text-align: center;">
<p style="font-size: 12px">Please select a radio button.</p>
</div>
</form>
</body>
</html>
I corrected your code and simplified it to some extent.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Testing Site</title>
<script>
function adjust_zIndex(ele_id) {
var i = 0;
var max_div = document.getElementsByTagName('div');
console.log(max_div ,'ele_id', ele_id);
var z;
var ids = ['adept1' , 'beginner1' , 'intermediate1'];
for (i; i < max_div.length; i++) {
var div_id = max_div[i];
if (ele_id == div_id.id) {
console.log('here 2' , div_id.id);
document.getElementById(div_id.id).style.zIndex = 3;
}
}
var index = ids.indexOf(ele_id);
for(var i=0; i < ids.length;i++)
{
if(i == index)
continue;
else
document.getElementById(ids[i]).style.zIndex =1;
}
}
</script>
<style type="text/css">
/* ##########################
Base objects
######################## */
body {
background-color: black;
}
form {
font-family: Verdana;
}
div {
position: absolute;
background-color: lightblue;
}
/* ##########################
Division IDs
######################## */
#top, #btm {
left: 1%;
right: 1%;
font-weight: bold;
border: 1px solid blue;
}
#top {
top: 1%;
bottom: 95%;
vertical-align: top;
}
#bdy,#beginner1 , #adept1, #intermediate1 {
overflow-y: scroll;
top: 6%;
height: 89%;
left: 20%;
right: 1%;
border: 1px solid blue;
}
#btm {
top: 96%;
bottom: 1%;
font-size: 9px;
vertical-align: middle;
}
#dok {
overflow-y: scroll;
top: 6%;
height: 89%;
left: 1%;
right: 81%;
font-size: 12px;
border: 1px solid blue;
}
/* ##########################
Items within divisions IDs
######################## */
/* */
</style>
</head>
<body>
<form>
<!--
TOP AND BOTTOM OF PAGE, DOCK AND BODY/OVERLAYS ARE RELATIVE TO THESE POSITIONS
-->
<div id="top">
<table width="100%">
<tr>
<td width="50%">Test Site</td>
<td width="50%" style="text-align: right;">Welcome to the Jungle</td>
</tr>
</table>
</div>
<div id="btm">
<p>Mock-Up</p>
</div>
<!--
DOCK ON LEFT
-->
<div id="dok">
<div style="left: 0; width:100%;">
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Beginner
</p>
<input type="radio" name="div_select" onclick="adjust_zIndex('beginner1')"/>Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Adept
</p>
<input type="radio" name="div_select" onclick="adjust_zIndex('adept1')"/>Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Intermediate
</p>
<input type="radio" name="div_select" onclick="int1()"/>Video<br/>
<hr/>
</div>
<!--
OVERLAY BODY SECTIONS, TO BE IN FOREGROUND WHEN RADIO BUTTON SELECTED FROM DOCK
-->
<div id="beginner1">
<table>
<tr>
<td style="font-weight: bold; font-size: 20px; text-align: left; width: 80%;">Beginner 1 div intended to test</td>
</tr>
</table>
<hr/>
<table width="100%">
<tr>
<td style="width: 50%;"><ul>
<li>List Item</li>
</ul></td>
<td style="width: 50%;">Second Column</td>
</tr>
<tr>
<td style="height: 1000px; vertical-align: bottom;">End</td>
</tr>
</table>
</div>
<div id="adept1">
<p id="ap"></p>
<table>
<tr>
<td>Adept 1 div intended to test </td>
</tr>
</table>
</div>
<div id="intermediate1">
<p id="ap"></p>
<table>
<tr>
<td>Intermediate 1 div intended to test </td>
</tr>
</table>
</div>
<div id="bdy" style="text-align: center;">
<p style="font-size: 12px">Please select a radio button.</p>
</div>
</form>
</body>
I am trying to call a JS event, depending on a button press, (there are three buttons) i want some CSS to change the font-size (differently for each button), but what i have does not work. can anyone help?
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="7Global.css"/>
<title> CSGO </title>
<script>
function textSizeS(){
document.getElementById("Maintbl").style.font-size = "3px";
}
function textSizeM(){
document.getElementById("Maintbl").style.font-size = "26px";
}
function textSizeL(){
document.getElementById("Maintbl").style.font-size = "45px";
}
</script>
</head>
<body>
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<table id = "Maintbl" class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</body>
</html>
Like this, where I added a wrapper div to set the font size to, corrected the syntax error from ...style.font-size to ...style.fontSize and removed that duplicated id's (as they should be unique).
function textSizeS(){
document.getElementById("MaintblWrapper").style.fontSize = "3px";
}
function textSizeM(){
document.getElementById("MaintblWrapper").style.fontSize = "26px";
}
function textSizeL(){
document.getElementById("MaintblWrapper").style.fontSize = "45px";
}
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<div id = "MaintblWrapper">
<table class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</div>
fontSize not font-size
Demo https://jsfiddle.net/eLrdeagq/
function textSizeS(){
document.getElementById("Maintbl").style.fontSize = "3px";
}
Uisng jQuery,i can bind the check box dynamically but their are some problems i am facing not able to solve.
1.in fiddle,if you click Add a name button a popup will open and get the name.After pressing submit button the related data are dynamically bind in a table,but it should be bind in a table in 1st <tr>.Now it is binding below 2nd <tr> but i want it to be append in 1st <tr> below the sample line already given.
2.On page load,id=list should be hide,but if i add this line $("#list").hide(); to hide i am not getting the output.
jQuery:
<script>
$(document).ready(function ()
{
$("#btnShowModal").click(function ()
{
ShowDialog(true);
});
$("#btnClose").click(function ()
{
HideDialog();
});
$("#btnSubmit").click(function ()
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone();
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").show();
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function ()
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").hide();
}
</script>
css:
<style>
.dialog_display
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.dialog
{
display: none;
position: fixed;
width: 220px;
height: 130px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-size: 10pt;
}
.dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
#dynamic{display:none;}
</style>
html
<body>
<table width="100%" cellpadding="0" cellspacing="0" id="rounded_border">
<tr>
<td colspan="4"><p><em>Please record the name of anyone involved</em></p></td>
</tr>
<tr>
<td><strong>Involved</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td>Add from list</td>
</tr>
<tr id="list" class="ir-shade"><div id="dynamic">
<td><span class="delete_icon">x</span>Attila Hun</td>
<td>
<input id="firstaid" onclick="addtreatment();" type="checkbox"/>
FirstAid needed
</td>
<td>
<input class="sickbay" onclick="addtreatment();" type="checkbox"/>
Sent to Sick bay
</td>
<td>
<input class="ambulance" onclick="addtreatment();" type="checkbox"/>
Ambulance
</td>
</div>
</tr>
<tr>
<td><strong>Reported by</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td><button>Add from list</button></td>
</tr>
</table>
<div id="overlay" class="dialog_display"></div>
<div id="dialog" class="dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="dialog_title">Type a name</td>
<td class="dialog_title align_right">
Close
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b> </b>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
</body>
You can see my code from this fiddle sample code
Please guide me to solve this.
You have to remove the id from the cloned tr's and unhide them when you add a new one, that's why you don't get any output if you hide #list
$("#btnSubmit").click(function (e)
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone().show().removeAttr("id");
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
e.preventDefault();
});
The script below is not running in IE7, but it's working in Chrome and Firefox. Once user clicks change password, nothing happens in IE.
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#closebtn").click(function () {
$("#dlg").hide('800', "swing", function () { $("#bkg").fadeOut("500"); });
});
$("#opn").click(function () {
if (document.getElementById('bkg').style.visibility == 'hidden') {
document.getElementById('bkg').style.visibility = '';
$("#bkg").hide();
}
if (document.getElementById('dlg').style.visibility == 'hidden') {
document.getElementById('dlg').style.visibility = '';
$("#dlg").hide();
}
$("#bkg").fadeIn(500, "linear", function () { $("#dlg").show(800, "swing"); });
return false;
});
});
</script>
<div id="Accountdisplay">
#using (Html.BeginForm("Accountdetail", "Home", FormMethod.Get))
{
<table align="left" cellspacing="10" cellpadding="5">
<tr><td class="editor-label" >
User Name:
</td><td>
#Html.DisplayFor(model => model.UserName)
</td></tr>
<tr>
<td class="editor-label">
Email Id:
</td>
<td>
#Html.DisplayFor(model => model.Email_Id)
</td></tr>
<tr>
<td class="editor-label">
Division:
</td>
<td>
#Html.DisplayFor(model=>model.Division)
</td></tr>
<tr>
<td class="editor-label">
User Type:
</td>
<td>
#Html.DisplayFor(model=>model.User_Type)
</td></tr>
<tr><td>
Change Password
#*<div >
#Html.ActionLink("[Change Password]",null,"Home",new {id="opn",style =
"color:white"})
</div>*#
</td></tr>
</table>
}
</div>
<div class="blockbkg" id="bkg" style="visibility: hidden;">
<div class="cont" id="dlg" style="visibility: hidden;">
<div class="closebtn" title="Close" id="closebtn"></div>
#using (Html.BeginForm("Logon", "Home", FormMethod.Post))
{
<table>
<tr>
<td>
#Html.LabelFor(model => model.Password)
</td>
<td>#Html.TextBoxFor(model => model.UserName, new { Style =
"width:65%;height:25px;font-size:1.05em" }) </td>
</tr>
<tr>
<td>
#Html.LabelFor(model => model.Confirm_Password)
</td>
<td>#Html.TextBoxFor(model => model.Confirm_Password, new { Style = "width:65%;height:25px;font-size:1.05em" }) </td>
</tr>
</table>
}
</div>
</div>
my css:
#Accountdisplay
{
background-color:Gray;
color:Black;
width:50%;
border:1px solid black;
height:80%;
padding: 20px;
margin-left:200px;
margin-top:10px;
}
.blockbkg {
background-color: black;
background-color: rgba(0,0,0,0.90);
width: 100%;
min-height: 100%;
overflow: hidden;
position: absolute;
position: fixed;
top: 0;
left: 0;
color: white;
}
.cont {
background-color:Green;
color:White;
font-size: 16px;
border: 1px solid gray;
padding: 20px;
display:block;
position: absolute;
top: 10%;
left: 35%;
width: 300px;
height: 300px;
}
.closebtn
{
width: 20px;
height: 20px;
padding: 5px;
margin: 2px;
float: right;
top: 0;
background-color:Gray;
display: block;
}
.closebtn:hover
{
cursor: pointer;
}
here i added my css also. still i cant find why its not working in IE 7, shall i change the IE vesrion and check ????
thanks in advance,
Sorry... i´m not able to add a comment... :/
Where is the jquery-script-tag located? Within the head or somewhere in the body?
I do not see exactly what could be the problem, but this piece of code sticks out as odd and should be changed to fully use jQuery.
$("#opn").click(function () {
/*
if (document.getElementById('bkg').style.visibility == 'hidden') {
document.getElementById('bkg').style.visibility = '';
$("#bkg").hide();
}
if (document.getElementById('dlg').style.visibility == 'hidden') {
document.getElementById('dlg').style.visibility = '';
$("#dlg").hide();
}
*/
$("#bkg,#dlg").css("visibility", "").hide(); // does the same thing as above
$("#bkg").fadeIn(500, "linear", function () { $("#dlg").show(800, "swing"); });
return false;
});
On another note, unless you really need bgk and dlg to have layout on page load, but being invisible, you should use display:none; instead, it is what hide and show use to toggle an element's visiblity (through fadeOut and fadeIn as well).
I have simple html page:
<html>
<head></head>
<body>
<table>
<tr>
<td>
<input type="image" src="http://backticket.com.ua/Img/addNew.jpg" onmouseover="ShowMenu();" onmouseout="HideMenu();" />
</td>
<td>
Some text that should be under appeared menu
</td>
</tr>
<tr>
<td colspan="2">
Some text that Some text that Some text that
</td>
</tr>
</table>
<div id="divMenu" style="display:none; width: 258px; padding: 8px 0px; border: solid 1px #CCC; background-color:White">
<div style="float: left; width: 140px; padding: 6px 2px;">
Print Page
</div>
<div style="float: left; width: 140px; padding: 6px 2px;">
Email to a Freind
</div>
<div style="float: left; width: 140px; padding: 6px 2px;">
Add to Favorites
</div>
</div>
<script type="text/javascript">
function ShowMenu() {
document.getElementById('divMenu').style.display = '';
}
function HideMenu() {
document.getElementById('divMenu').style.display = 'none';
}
</script>
</body>
</html>
I need to show a menu in hidden div next to the button (in the right side) over the other text and elements on the page. Also menu should be visible until mouseout of the button or menu, like on hover button in AddThis service.
Who can help me with javascript?
Thanks!
Put a div-tag around your table, give it the CSS style value "float: left".
Then, you give "divMenu" the CSS style value "float: right".
The rest seems to be working fine, at least in Firefox.