• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 187
  • Last Modified:

A few position questions

Hi,

I have an AJAX popup form on my website and includes a contact form.

Right now the way the code it, the box is centered on the screen. How could I set that to be 10px from the top?

If the form the person fills out has an error, an box comes out and says to fix the highlighted fields. When that happens the bottom portion of form gets pushed off of the popup. How can I have it expand and constric with the actual size of the form. If the error comes up, the popup will expand to that size.

Here is where I got the script so you have something to look at. http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/

Thanks so much!
general.css
popup.js
0
Computer Guy
Asked:
Computer Guy
  • 12
  • 11
1 Solution
 
LZ1Commented:
Try this for your popup.js file. Basically instead of assigning it the vertical centering function we're telling it top:10px
/***************************/
//@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": '10px',
		"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();
		}
	});

});

Open in new window

0
 
Computer GuyAuthor Commented:
Cool, the JS thing worked. Any ideas for my CSS question on how to make the box expand to what ever size the form is and if there is an error on the form to have the box expand instead of the form go off the page?

0
 
LZ1Commented:
You can try, just not setting a height on the actual #popupContact in your CSS.  Do you have a working URL you could share?
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
Computer GuyAuthor Commented:
No, but I am using it with an iFrame. I know that iFrames don't do auto height with out some JS. Do you have any idea of what to add to make it work?

0
 
LZ1Commented:
I didn't realize that. You could try this jquery plugin to see if that will help the height issue:
http://www.lost-in-code.com/programming/jquery-auto-iframe-height/
0
 
Computer GuyAuthor Commented:
Well my real problem is when I click on submit and there and certain things need that are required are not filled in. Things go off the page.

http://tiny.cc/fsk8m
0
 
LZ1Commented:
In my experience with the link you just provided, it worked pretty well. My viewport is 895px high (monitor is 1680 x 1050)and I didn't have to scroll when I just hit submit and showed all of the errors. The problem is that the height 100% is stretching it past the bottom of my screen. I removed the height and the problem was solved
0
 
Computer GuyAuthor Commented:
height for what tag?
0
 
LZ1Commented:
Whoops, sorry. The #popupContact
0
 
Computer GuyAuthor Commented:
Hi,

That did the trick, but there is a lot of extra white space at the bottom.

-Any other ideas with that?
-Would the autoheight take care of that?
0
 
LZ1Commented:
Well not sure if your open to it, but we could add some more jquery to the code to try to get an auto-height. Did that plugin I posted above work at all?
0
 
Computer GuyAuthor Commented:
I didn't have any luck. That does not mean It won't work. Perhaps I missed something.
0
 
LZ1Commented:
Try this for your iframe code
<iframe height="842" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="http://www.photowebevents.com/support/forms/embed.php?id=1" title="Photoweb Comments" class="autoHeight">

Open in new window

0
 
Computer GuyAuthor Commented:
Hi,

That still didn't do the trick.
0
 
LZ1Commented:
That's to be used in conjunction with the auto height jquery plugin above.
0
 
Computer GuyAuthor Commented:
Yea thats how I had it setup
0
 
LZ1Commented:
I've been googling for solutions and came across this one.  I haven't tried it, but it's straight Javascript not Jquery. Let us know

function doIframe(){
o = document.getElementsByTagName(‘iframe’);
for(i=0;i
if (/\bautoHeight\b/.test(o[i].className)){
setHeight(o[i]);
addEvent(o[i],'load', doIframe);
}
}
}

function setHeight(e){
if(e.contentDocument){
e.height = e.contentDocument.body.offsetHeight + 35;
} else {
e.height = e.contentWindow.document.body.scrollHeight;
}
}

function addEvent(obj, evType, fn){
if(obj.addEventListener)
{
obj.addEventListener(evType, fn,false);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}

if (document.getElementById && document.createTextNode){
addEvent(window,'load', doIframe);
}

Open in new window

0
 
Computer GuyAuthor Commented:
Still nothing, argg!
0
 
LZ1Commented:
Still using the same class="autoHeight"?? Remember to kill the other jquery autoHeight code as well.
0
 
Computer GuyAuthor Commented:
Yea
<script type="text/javascript">
    function doIframe(){
o = document.getElementsByTagName(‘iframe’);
for(i=0;i
if (/\bautoHeight\b/.test(o[i].className)){
setHeight(o[i]);
addEvent(o[i],'load', doIframe);
}
}
}

function setHeight(e){
if(e.contentDocument){
e.height = e.contentDocument.body.offsetHeight + 35;
} else {
e.height = e.contentWindow.document.body.scrollHeight;
}
}

function addEvent(obj, evType, fn){
if(obj.addEventListener)
{
obj.addEventListener(evType, fn,false);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}

if (document.getElementById && document.createTextNode){
addEvent(window,'load', doIframe);
}
    </script>
<iframe height="842" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="http://www.mydomain.com/support/forms/embed.php?id=1" title="Photoweb Comments" class="autoHeight">

Open in new window

0
 
LZ1Commented:
I hate to say this, however I don't think I can help any further. I'm ok with JS, but I'm nowhere near the level I need to be to answer this question. At this point, I'm not even sure if it's possible to adjust the height on the fly like that.  

You have 2 options at this point:
1) Close this question accepting one of the comments above as the solution and then open another question specific to the resizing issue.
2) Request attention to have more experts take a look.  

You may wish to just close this question and open a new one. You would have a much better shot at the experts helping you out.
0
 
Computer GuyAuthor Commented:
Thank you for your help!!!
0
 
LZ1Commented:
No problem. Again, I'm sorry I couldn't help you further, but hopefully there will be another Expert who can.  Good luck!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 12
  • 11
Tackle projects and never again get stuck behind a technical roadblock.
Join Now