help why jquery works in html but dont work in aspx web form

Question

4.00/5 (1 vote)

See more:

i am trying to use jquery sample in aspx web form
bit about sample code
this samole code shows a center screen popup window with fadein and fadeout effect
now whats my problem
i tried for 2 days on implementing jquery in aspx web form but failed on every try.
same jquery runs like butter in html
i am using vs 2008
installed hotfix for intelsense successfully
put jquery-1.6.2.js in same folder
put jquery-1.6.2vsdocs.js for intellsense in same folder
when i put same html code in aspx web form in the form tag after runing in browser and clicking on button popup doesnt show himself at all but when i put

out side the form tag it runs perfectly which is useless
where i am going wrong

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" 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 runat="server">
    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>
	<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
	
	<script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
	<script src="popup.js" type="text/javascript"></script>
</head>
<body>
    
    <form id="form1" runat="server">
 		<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
		<div id="button"><input type="submit" value="Press me please!" /></div>
		<div id="popupContact">
		<a id="popupContactClose">x</a>
		<h1>Title of our cool popup, yay!</h1>
		<p id="contactArea">
			Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
			<br/><br/>
			We can use it for popup-forms and more... just experiment!
			<br/><br/>
			Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
			<br/><br/>
			<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
		</p>
	</div>
	<div id="backgroundPopup"></div>
    <div>
    
    </div>
    </form>
</body>
</html>

JavaScript

/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!					
/***************************/

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
	
}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
	
	//LOADING POPUP
	//Click the button event!
	$("#button").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});
				
	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

Posted 19-May-12 1:38am

mehdilahori

Updated 19-May-12 5:47am

Ed Nutting

v2

Add a Solution

Comments

Ed Nutting 19-May-12 9:10am

Hi there, could you post your JavaScript code as well please? Otherwise it's gonna be hard to work out what's with it...

Thanks,
Ed

mehdilahori 19-May-12 11:45am

hi Ed thanks for replying
i have not gone to any institute to learn asp.net and i have no teacher
i learned all these things from great brains out there like you you can see my work at betasite.somee.com
here is my popup.js code
[Edit: Code placed into question]

2 solutions

Solution 1

Without seeing the JQuery you are actually using it is difficult to be certain. However, a common problem is not taking into account the name mangling that occurs with ASP.NET.

For example, if you code was

$("#some_element_id")

This would find the element

HTML

<input id="some_element_id" />

but when the attribute runat="server" is used ASP.NET will prefix the id of the rendered element depending on the container it is in. So it will be something like this

<input id="ctrl_001_some_element_id" />

Now the JQuery selector won't find the element because the id is different. A way around this is to use

$("id[$='some_element_id']")

which will select any element who id ends with some_element_id, regardless of the prefix.

Posted 19-May-12 4:41am

Not Active

Updated 19-May-12 4:42am

v3

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ed Nutting · Accepted Answer · 2012-05-19T06:07:00

Solution 2

Hi there,

Having tested it the answer is obvious! There isn't a problem with your JavaScript nor even in most of your HTML. The problem lies the the fact that you are using a submit button. In your non-ASPX page you do not have a form, so there is nothing to submit when the submit button is clicked and so, the browser doesn't try to submit anything. So there isn't a page refresh. However, when you put your HTML into a form, there is now a form to submit. So when you press your button the browser immediately submits the form. This causes essentially a page refresh and so the pop-up never seems to have appeared.

So the solution is to change the button type from a Submit button, to just a button. So replace the following line:

HTML

<div id="button"><input type="submit" value="Press me please!" /></div>

with this:

HTML

<div id="button"><input type="button" value="Press me please!" /></div>

You can see in the typeattribute I have changed it from a Submit to a Button - this will stop it from submitting the form and will just run your click event.

Hope this helps,
Ed

Posted 19-May-12 6:07am

Ed Nutting

Comments

mehdilahori 20-May-12 0:09am

thanks Ed. it was a great learning experience the way you explained it was like my mother is trying to correct me where i am going wrong.
with the help of you Ed i learned new lesson on TYPE attribute which belongs to html.now i have another question
when i replaced html input button with asp button, that didn't work let me explain a bit more when i replaced this line
<input type="button" value="Press me please!" />
with this one
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton
unfortunately that didn't work
i was again back at same place where i was standing before your solution.
now here is my question
why an asp button or link button is not working with this script

Ed Nutting 20-May-12 4:44am

Thank you, i'm glad I could help. Onto your new issue. Well when you use an ASP link button or just button, it has to convert them into actual html because they don't exist in the W3C Standard. So, if you were to use developer tools in your browser to view the html, you would see that the html for an ASP button is in fact an input of type submit not button, and thus you are back to the original problem that I explained before. So, either you have to use an html input of type button or you need to redesign your code to show the message when the page loads after they have clicked the button.

I hope this solves your new problem,
Ed

mehdilahori 20-May-12 7:48am

thanks Ed for explaining
i got your points
actually what i am trying to do that i have a datalist having someinitial information about an item an and a details view asp link button right now when user clicks on details link button, detailed information of a particular item is shown on another page and obviously with query string
but now i want to show detail information on a popup window in the same page when i put the sane popup code in datalist i achieved my results 10% that means only very first item of the datalist is showing the popup window after clicking the detail button and rest of the items are not showing popup window, is it because i am using html type button instead of asp button, this is a tricky situation, if i use asp button i would not be able to use popup effect and if i use html type button i would not be able to show popup window in all the items in datalist i googled this issue and some developers asked same thing but did not got any solution
any suggestions my dear teacher Ed
thanks once again and have crispy day

Ed Nutting 20-May-12 8:04am

Hmmm...hard to say what the issue is here. In any case it is not due to your use of the html button. You should debug your JavaScript in browser using Developer Tools to see if the click events for the extra view details buttons work. Is there a demo page that I can look at where your having this problem with the popup?

Thanks,
Ed

mehdilahori 20-May-12 9:48am

i am trying upload the page but i am having some problem i think server doesn't support ajax or jquery
here is my datalist code
<asp:DataList ID="dl1" runat="server"
HorizontalAlign="Right" RepeatColumns="1"
onitemcommand="Repeater1_ItemCommand1" Width="638px" align="left">
<itemtemplate>

<div>
<table style="font-weight: bold;">
<tr>
<td>
<asp:Image ID="Image1" width="100%" height="100%" runat="server"
ImageUrl='<%# Eval("filename", "{0}") %>' />
</td>
<td style="width: 200px;">
PROPERTY TYPE
<asp:Label ID="lblCategory" runat="server"
Text='<%# Eval("[category]") %>'>

<br></br>
PROPERTY ID:
<asp:Label ID="lblHouse_id" runat="server" Text='<%# Eval("[house_id]") %>'>

<br/>
Phase:
<asp:Label ID="lblPhase" runat="server" Text='<%# Eval("[phase]") %>'>

<br>
</br>
<br></br>
address:
<asp:Label ID="lbladdress" runat="server" Text='<%# Eval("[address]") %>'>

<br />
<asp:LinkButton ID="btnDetails" runat="server"
CommandArgument='<%# Eval("[house_id]") %>' CommandName="details"
Text="View Details" />
<br />
<br>
</br>
<div id="button"><input type="button" value="Press me please!" /></div>
<div id="popupContact">
x
<p id="contactArea">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("[house_id]") %>'>

</p>
</div>
<div id="backgroundPopup"></div>

i am laughing at my self
thanks

Ed Nutting 20-May-12 10:11am

I have tried looking at this but it isn't really that helpful to me as it is an incomplete page and not working either i.e. I don't have your data so I can't test this. If you could put a page on your testing site that you linked to for me to have a look at I would be able to debug your JavaScript and find a possible solution?

Thanks,
Ed

mehdilahori 20-May-12 11:58am

please follow the following link
i have the connection string online so you do not need to worry about database just run the file
betasite.somee.com/Default5.aspx

Ed Nutting 20-May-12 12:31pm

OPkay thanks very much. After a fair bit of work I have now got your contact popup to work using an html input type button. So the following posts will contain the required JavaScript, HTML and CSS adaptations. Please make all the changes and then test it. Try and understand the changes - there are a few and it's quite hard to explain through comments. So here we go.

Ed Nutting 20-May-12 12:32pm

Code to replace your asp:LinkButtons. Put ALL of this on in place of your asp:LinkButtons:

<input type="button" class="btnDetailsfp" runat="server" value="View Details" /> <div class="popupContact"> x <p class="contactArea"> <asp:Label ID="Label1" runat="server" Text='<%# Eval("[house_id]") %>'> </p> </div>
<div class="backgroundPopup"> </div>

Ed Nutting 20-May-12 12:33pm

Replacement css - put this in place of the obvious corresponding bits:

.backgroundPopup
{
display: none;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
border: 1px solid #cecece;
z-index: 1;
}
.popupContact
{
display: none;
position: fixed;
_position: absolute; /* hack for internet explorer 6*/
height: 384px;
width: 408px;
background: #FFFFFF;
border: 2px solid #cecece;
z-index: 2;
padding: 12px;
font-size: 13px;
}
.popupContact h1
{
text-align: left;
color: #6FA5FD;
font-size: 22px;
font-weight: 700;
border-bottom: 1px dotted #D3D3D3;
padding-bottom: 2px;
margin-bottom: 20px;
}
.popupContactClose
{
font-size: 14px;
line-height: 14px;
right: 6px;
top: 4px;
position: absolute;
color: #6fa5fd;
font-weight: 700;
display: block;
}

Ed Nutting 20-May-12 12:34pm

Finally, your JavaScript. Replace all your script with this:

/// <reference path="jquery-1.6.2.js">
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(popupContact, bgPopup)
{
//loads popup only if it is disabled
if (popupStatus == 0)
{
bgPopup.css({
"opacity": "0.7"
});
bgPopup.fadeIn("slow");
popupContact.fadeIn("slow");
popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(popupContact, bgPopup)
{
//disables popup only if it is enabled
if (popupStatus == 1)
{
bgPopup.fadeOut("slow");
popupContact.fadeOut("slow");
popupStatus = 0;
}
}

//centering popup
function centerPopup(popupContact, bgPopup)
{
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = popupContact.height();
var popupWidth = popupContact.width();
//centering
popupContact.css({
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

bgPopup.css({
"height": windowHeight
});

}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function ()
{

//LOADING POPUP
//Click the button event!
//$("id[$='button']").click(function(){
$(".btnDetailsfp").click(function ()
{
var popupContact = $(this).next(".popupContact");
var bgPopup = popupContact.next(".backgroundPopup");

//centering with css
centerPopup(popupContact, bgPopup);
//load popup
loadPopup(popupContact, bgPopup);
});

//CLOSING POPUP
//Click the x event!
$(".popupContactClose").click(function ()
{
var popupContact = $(this).parent();
var bgPopup = popupContact.next(".backgroundPopup");
disablePopup(popupContact, bgPopup);
});
//Click out event!
$(".backgroundPopup").click(function ()
{
var bgPopup = $(this);
var popupContact = bgPopup.prev(".popupContact");
disablePopup(popupContact, bgPopup);
});
//Press Escape event!
$(document).keypress(function (e)
{
if (e.keyCode == 27 && popupStatus == 1)
{
disablePopup();
}
});

});

Ed Nutting 20-May-12 12:38pm

So what did I do? Well after looking at the output of your page in browser, it was apparent that there was at least two things wrong.
1) Elements can't have duplicate ID's so your contact popup stuff had to be done using classes not ID's
2) Using link buttons was going to cause a page submission so those had to become input type button.

So having made those changes I worked out how to link the buttons to the contact popups. The JavaScript now takes the button element and finds the next element with the correct class for the contactPopup and equally for bgPopup. So the html stuff has to appear in the correct order!

If you review the new code, you should be able to see how it works from this.

Hope this solves it,
Ed

mehdilahori 21-May-12 0:38am

hi Ed
awoke up in the morning and saw your comment i was thinking all night whether i would be able to learn this approach or not
after seeing your solution it was just like as if i got one liter bottle in a desert.sorry for my bad English
i am very glad.now i am working on files, i do not want to just copy paste all the stuff, i want to learn and understand what you did whether it took me a week or so
i will come back to you soon
till then by and have a milky day
thanks

mehdilahori 21-May-12 5:35am

hi ed
i tried your code and spent bit of time. run the page when i clicked the details button nothing happened.i came back to code there was two errors one was
class="btnDetailsfp" in input type button
error message: class or cssclass value is not defined
and another was
<p class="contactArea">
error message: class or cssclass value is not defined
i could not trace these erros
i also put input type button in div id="button" but nothing happened.
where am i going wrong now. so near but yet so far

Ed Nutting 21-May-12 12:37pm

Are "CSS class undefined" errors all that you were getting? They are irrelevant and almost non-errors. I will explain. So that you can have multiple details buttons (and popup) on one page, you need to have a way of identifying the elements that are "View details" buttons that does not force uniqueness. Since ID's have to be unique, the only alternative is to use CSS classes. So I changed all your ID's to classes and in the JavaScript code changed the "#"s to dots to change the identifier so it would find all elements that were "View Details" buttons. The HTML that defines the popup then has to appear immediately after the "View Details" button that it relates to since the JavaScript code now finds the next "backgroundPopup" and "contactArea" divs that follow the "View Details" button and shows those. So the "CSS class undefined" errors actually don't make any difference and can be ignored. If you really want to solve them just add classes to your CSS file using:
.btnDetailsfp { }
.contactArea { }

As to the popup not showing at all, remember two things: 1) Your jQuery file has to be the jQuery.js file, not the vsdoc file. 2) If the code does not work, please open up your browser and go to Tools->Developer Tools (or similar menu if in Safari/Opera etc). Then set a break points in key places e.g. in the ready and the click event methods and see if they are hit. Check the values of the various variables to see if they are correct.

If you do not know how to use Developer Tools to debug your code please see your browsers support/help pages. If you are using Firefox, download and install the Firebug plugin which is an equivalent of Developer Tools.

Hope this helps,
Ed

mehdilahori 21-May-12 9:27am

where are you Sir Ed
please please please reply anything

Ed Nutting 21-May-12 12:26pm

Hello there, sorry I have been rather busy today and so haven't had time to look at your problem. I will have a look now though and see if I can find a solution.

Ed

mehdilahori 22-May-12 23:58pm

hi Ed
i am glad that you replied yesterday i had a day off due to my eye checkup because i have very low vision and i have to use some kind of magnification tool but any how i am also working on the error but haven't resolve undefined class issue because i am not expert in js
waiting for more guidance from you
have a crispy day
thanks once again

Ed Nutting 23-May-12 12:28pm

Hi there,

So I need to know more about this error that you are getting. Does it actually occur in the JS code or is it just developer tools telling you it is occurring but not where? (Also what developer tools are you using?). Do it tell you which class is undefined? If it means a CSS class then this shouldn't be stopping your code working and also, you will just need to, as I said before, add the CSS code. If it means a JavaScript class then I need to know which one it thinks is undefined. If it says "jQuery" undefined then you have a reference issue, more than that I cannot say for now.

Thanks,
Ed

mehdilahori 24-May-12 9:42am

hi Ed
i am using visual web developer 2008 which tells me it is either css or a class but as you said if it is css we have nothing to worry about here is my altered as your suggestion aspx,css and js code
*******************************************************************888
aspx code
*******************************************************88
<input id="Button2" type="button" class="btnDetailsfp" runat="server" value="View Details" />
<div class="popupContact"> x <p class="contactArea">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("[house_id]") %>'>

</p>
</div>
<div class="backgroundPopup"> </div>
*******************************************************88
js code
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}

//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$("#backgroundPopup").css({
"height": windowHeight
});

}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});

//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});

});
*******************************************************88
css code
*******************************************************88
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:100%;
}gin:0pt;
hei
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
.backgroundPopup
{
display: none;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
border: 1px solid #cecece;
z-index: 1;
}
.popupContact
{
display: none;

Ed Nutting 24-May-12 12:51pm

Hi there,

Well that is certainly not at all the JS code I sent you, look in my comment from 4 days ago and you will see there are vast differences. It is no wonder it doesn't work if you have not made the changes to your JS code as I actually posted them... Please also check that your CSS is correct too. (If you're wondering, every JS method you have was different at least slightly in my version...)

Ed

mehdilahori 24-May-12 23:49pm

hi Sir Ed
i will alter js and css code once again and will come back to you
thanks

mehdilahori 25-May-12 7:00am

hi ed,
actually i was working on the same code that you altered but accidentally pasted the older version
i m still cant be able to show popup at all
i have also solved the undefined class by putting classes in css
here is code
also tried firebug but invain
******************************************8
aspx code
****************************************88
<input id="Button2" type="button" class="btnDetailsfp" runat="server" value="View Details" />
<div class="popupContact"> x <p class="contactArea">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("[house_id]") %>'>

</p>
</div>
<div class="backgroundPopup"> </div>
**************************************************************
js code
***********************************************8
//loading popup with jQuery magic!
function loadPopup(popupContact, bgPopup)
{
//loads popup only if it is disabled
if (popupStatus == 0)
{
bgPopup.css({ "opacity": "0.7" });
bgPopup.fadeIn("slow");
popupContact.fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(popupContact, bgPopup)
{
//disables popup only if it is enabled
if (popupStatus == 1)
{
bgPopup.fadeOut("slow");
popupContact.fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(popupContact, bgPopup)
{
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = popupContact.height();
var popupWidth = popupContact.width();
//centering
popupContact.css({
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
bgPopup.css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function ()
{
//LOADING POPUP
//Click the button event!
//$("id[$='button']").click(function()
{
$(".btnDetailsfp").click(function ()
{
var popupContact = $(this).next(".popupContact");
var bgPopup = popupContact.next(".backgroundPopup");
//centering with css
centerPopup(popupContact, bgPopup);
//load popup
loadPopup(popupContact, bgPopup);
}
);
//CLOSING POPUP
//Click the x event!
$(".popupContactClose").click(function ()
{
var popupContact = $(this).parent();
var bgPopup = popupContact.next(".backgroundPopup");
disablePopup(popupContact, bgPopup);
});
//Click out event!
$(".backgroundPopup").click(function ()
{
var bgPopup = $(this); var popupContact = bgPopup.prev(".popupContact");
disablePopup(popupContact, bgPopup);
});
//Press Escape event!
$(document).keypress(function (e)
{
if (e.keyCode == 27 && popupStatus == 1)
{
disablePopup();
}
});
});
********************************************8
css code
*********************************************
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family

Ed Nutting 25-May-12 7:11am

From looking at the JS code you have pasted above I can see one small mistake that would cause the JS to be invalid. In the $(document).ready function find the lines which say:
//LOADING POPUP
//Click the button event!
//$("id[$='button']").click(function()

On the next line after these you have a curly brace ({). This should not be there or it should be commented out. If you delete this the JS will be valid and hopefully then work :)

Ed

mehdilahori 25-May-12 7:56am

hi ed
i did the same as you said but nothing happened
it is my immaturity in js that i could not trace this error but i have not accepted defeat yet i am still trying anyhow thanks for your corporation during this i learned quite a few things which is some thing better than nothing
:)
:)
:)
LOL
thanks once again

Ed Nutting 25-May-12 8:21am

Odd that nothing happened. I retested the code I gave you and it definitely works - I can only suppose that your full project has some unaccounted for difference that causes it to fail. Well best of luck, if you are struggling with JS/CSS/JQuery I recommend you take a look at the tutorials and references on this site:
www.w3schools.com

Best of luck,
Ed

mehdilahori 25-May-12 11:09am

hi ed
i will definitely i will look in to your recommendations
thanks

mehdilahori 27-May-12 7:48am

hi Ed
i am still working on your altered code.but i could find any any css claass named bgpopup.in js file you are using bgpopup quite alot
can you explain what is bgpopup.css
i will deeply appreciate
thanks

Ed Nutting 27-May-12 8:06am

bgPopup is not the css class, it is the name of the variable. When I create the bgPopup variable, it gets the correct element who's class is "backgroundPopup". The bgPopup variables refers to your div element that has the class "backgroundPopup" that relates to the popup you wanted to show. I never actually reference a css class called "bgPopup", only ever "backgroundPopup".

Ed