?
Solved

Rollover image that has a div pop up and not have the div extend beyound the boundries of the viewable webpage

Posted on 2008-10-27
4
Medium Priority
?
867 Views
Last Modified: 2013-11-18
If you look at this link:

http://www.mc.com/products/

You will see a page full of images and you can rollover the images to see a list of sub catagories that are being pulled using xslt and sql server database.

The problem I'm having is trying to get the rollover pop up div to always be visable in the frame of the webpage so basically I want the div window to reposition it self to a higher or more to the left if the div needs more room so it can be fulled viewed.

A good example of what I'm talking about would be, goto the link and hover over a product picture at the bottom of the screen. You will notice that the div box just drops down from the image and you can't see some of the links unless you screen farther down the page. I'm trying to make it so the div will auto reposition itself higher so it is full visable.

Hope you can understand what I'm looking for.

Been bashing my head over this for a few days now and just can't find any code or modify what I'm working with to accomplish this. I did find a few .js files that would make a tooltip box that would auto position but I couln't adapt the code to my own because they just did not mesh well.

Any thoughts of how to do this or an example of how to auto position a div to always be viewable on the screen as long as the cursor is rolled over the picture.

Here is the xslt that pulls the information and displays it in the div:

http://www.mc.com/xslt/productlist.xsl

Here is the code in the xslt file that controls the div:


<div class="ProductFlyout">
- <!--  Needed for product splash pages.  Sometimes the node will be the root node, others it will be the second to last node 
  --> 
- <xsl:choose>
- <xsl:when test="/TaxonomyData/TaxonomyName = 'Products'">
- <div class="ProductFlyoutHeader" style="background-image:url('/images/global/products/pop-up-box/pop-up-box-top-{ancestor::TaxonomyData[last()-1]/TaxonomyDescription}.gif');" onclick="CloseProductFlyout(this);">
  <xsl:value-of select="ancestor::TaxonomyData[1]/TaxonomyName" /> 
  </div>
  </xsl:when>
- <xsl:otherwise>
- <div class="ProductFlyoutHeader" style="background-image:url('/images/global/products/pop-up-box/pop-up-box-top-{ancestor::TaxonomyData[last()]/TaxonomyDescription}.gif');" onclick="CloseProductFlyout(this);">
  <xsl:value-of select="ancestor::TaxonomyData[1]/TaxonomyName" /> 
  </div>
  </xsl:otherwise>
  </xsl:choose>
- <div class="ProductFlyoutDescription">
  <xsl:value-of select="TaxonomyName" /> 
  </div>
- <div class="ProductFlyoutItems">
- <ul>
  <xsl:apply-templates select="TaxonomyItems" /> 
  </ul>
  </div>
  <div class="ProductFlyoutBottom">&nbsp;</div> 
  </div>

Open in new window

0
Comment
Question by:no158
[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
  • 2
  • 2
4 Comments
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 1000 total points
ID: 22819174
To fix the popup DIV position, you will have to adjust it based on a *javascript* detection of the browser window size, and the pixel position of top left of the popup in the browser window.

You can set the popup's display to block, but set it's visiblity to hidden.  This will render the element, giving you it's offsetWidth and offsetHeight.  Then when all adjustments are made, change it's visibility to 'visible'.

See these for calculations --
http://javascript.internet.com/page-details/smart-popup.html
http://javascript-array.com/scripts/window_open/
http://www.felgall.com/jstip10.htm
http://www.javascriptf1.com/tutorial/javascript-popup-window.html
0
 

Author Comment

by:no158
ID: 22823844
How will do I know if the div went outside the visable browser window?
Is there a method for that?
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22824053
If you read the links, you will see that you have to CALCULATE that.  Javascript gets the browser size, you position your popup so that it doesn't go outside the window, that is the whole point of using javascript to do the calculations.  Without them, you have what you have now, popups that go outside the browser.
0
 

Author Comment

by:no158
ID: 22824488
The only link that was helpful for this case is the 4th one.

The JavaScript only works for hard coded sizes. So you can change the position of a div or divs on a mouseover but they will only change the position to a fixed offset.

What I'm idealy looking for is dynamically positioning so it will always be flush with the window size no matter how small the window gets.

I'm sure you know what I'm talking about but I just can't see an example I can work with, at least from the links you sent. Think you could clear things up for me a little better? I'm not so great with JavaScript.
0

Featured Post

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

765 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