?
Solved

A few position questions

Posted on 2011-10-26
23
Medium Priority
?
185 Views
Last Modified: 2012-05-12
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
Comment
Question by:Computer Guy
  • 12
  • 11
23 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 37031832
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
 
LVL 3

Author Comment

by:Computer Guy
ID: 37031923
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37032126
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Author Comment

by:Computer Guy
ID: 37032144
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37032166
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
 
LVL 3

Author Comment

by:Computer Guy
ID: 37032684
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37032737
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
 
LVL 3

Author Comment

by:Computer Guy
ID: 37032856
height for what tag?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37032866
Whoops, sorry. The #popupContact
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 37032954
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37032989
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
 
LVL 3

Author Comment

by:Computer Guy
ID: 37033033
I didn't have any luck. That does not mean It won't work. Perhaps I missed something.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37033555
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
 
LVL 3

Author Comment

by:Computer Guy
ID: 37037997
Hi,

That still didn't do the trick.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37038026
That's to be used in conjunction with the auto height jquery plugin above.
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 37038039
Yea thats how I had it setup
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37038181
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
 
LVL 3

Author Comment

by:Computer Guy
ID: 37038223
Still nothing, argg!
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37038240
Still using the same class="autoHeight"?? Remember to kill the other jquery autoHeight code as well.
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 37038253
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
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 37038607
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
 
LVL 3

Author Closing Comment

by:Computer Guy
ID: 37039344
Thank you for your help!!!
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37039389
No problem. Again, I'm sorry I couldn't help you further, but hopefully there will be another Expert who can.  Good luck!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question