Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Locating a popup 2/3 of the way from the top of the window

Posted on 2014-03-23
6
Medium Priority
?
144 Views
Last Modified: 2014-03-24
I'm revising an online reservation program, and having a little difficulty positioning a calendar which pops up on the page.  The styling of the calendar is controlled with the attached file.  I'd like the calendar to appear centered horizontally, and 2/3 down the page, regardless of the window size or screen resolution, if possible.
calendar1.css
0
Comment
Question by:ddantes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39951345
If you want it positioned relative to the page then use position absolute.  If you want it position relative to the viewport, then use position fixed.

to handle the cross resolution issues use vh and vw units of measure instead of pixels or percentages.  for fine adjustments you can use the CSS calc() function to set the position.

I have a page that discusses vh, vw and calc() on my personal site.

Cd&
0
 

Author Comment

by:ddantes
ID: 39951375
Thank you.  I visited the page with that discussion and demo, but it's a little above my comprehension level.  I also found that the class which needs to be positioned is .calendar table, not .calendar.  It seems that the popup is positioned with respect to the calendar button which triggers it.

So, if I wanted the popup to be centered over the icon, regardless of the viewer's device specifications, could you suggest code for that part of the style sheet?

The popup can be observed at www.mauitradewinds.com/RezTest/availability.html   The lower form on that page has the calendar-triggering icons.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1000 total points
ID: 39951453
Change the button to a div and style it like a button and give is a position:relative property.
then put the calendar element inside of the button-styled div tag with a high z-index. The you can set position:absolute on the calendar and it will be offset (positive or negative) from the top left corner of the button.  the relationship to the button will always be the same no matter what the resolution is.

Cd&
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!

 

Author Comment

by:ddantes
ID: 39951624
Thank you.  I'm a beginner at writng code, and so far I can't even get a div button to appear on a page I'm experimenting with.  I think I need to be spoon fed this code.  If there's too much effort involved in that, I'll understand.  I'm continuing my trial and error in the meanwhile.
0
 

Author Comment

by:ddantes
ID: 39951720
I think I'm catching on.  How does this look?

<div class="calendar .button" style="position:relative" "z-index:1">
<table border="0" cellspacing="0" cellpadding="2" class="reztbl"><tr><th class="tblhead1" colspan="2">Check Availability by Date</th></tr>
<tr><th class="tblhead2" colspan="2">Room Type</th></tr>
<tr><td class="tbldet1" colspan="2"style="text-align:center"><script language="JavaScript" type="text/javascript">parent.roomTypes();</script></td>
</tr>
<tr><th class="tblhead2">Arrival Date</th><th class="tblhead2">Departure Date</th></tr>
<tr><td class="tbldet1" style="text-align:center"><input type="text" name="ArrDate" id="ArrDate" size="20" class="dispfld" readonly="1">&nbsp;<img src="../images/cal_off.gif" alt="" id="FTrigger" style="cursor: pointer; border: 0px; vertical-align:top" title="Date selector" onmouseover="this.src='../images/cal_on.gif';" onmouseout="this.src='images/cal_off.gif'">
</td>
<td class="tbldet1" style="text-align:center"><input type="text" name="DepDate" id="DepDate" size="20" class="dispfld" readonly="1">&nbsp;<img src="../images/cal_off.gif" alt="" id="LTrigger" style="cursor: pointer; border: 0px; vertical-align:top" title="Date selector" onmouseover="this.src='../images/cal_on.gif';" onmouseout="this.src='images/cal_off.gif'">
<script language="JavaScript" type="text/javascript">
var mydate="";if(parent.VNujgoedLVW=="A"){mydate="%e-%B-%Y";}else{mydate="%B-%e-%Y";}
Calendar.setup({firstDay:1,weekNumbers:false,inputField:"ArrDate",ifFormat:mydate,button:"FTrigger",align:"Tl",singleClick:true,range:[2014,2019],cache:true});
Calendar.setup({firstDay:1,weekNumbers:false,inputField:"DepDate",ifFormat:mydate,button:"LTrigger",align:"Tl",singleClick:true,range:[2014,2019],cache:true});
</script>
</td></tr>
<tr><th class="tblhead1" colspan="2"><input type="button" class="btn" name="CheckBtn" value="Check Availability" onClick="parent.chkHaveRoom(this.form,'0001');">
&nbsp;&nbsp;<input type="button" class="btn" name="HelpBtn" value="Help!" onClick="parent.helpMe('AvailForm');">
</th></tr></table></div></form>
</div>
0
 

Author Comment

by:ddantes
ID: 39951742
I wasn't successful with implementing that approach, due to inexperience.

I did find a satisfactory workaround, by removing the .calendar table specification in the style sheet, inserting it into each page with a calendar popup, and styling it uniquely in each case.  There are four pages which feature that popup, and the table with the calendar buttons is positioned differently in each case.  Adjusting margins for the calendar table class allows some consistency of behavior for the popup.

Thanks for your input, and I appreciate your patience with my learning curve.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

596 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