Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 870
  • Last Modified:

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

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
no158
Asked:
no158
  • 2
  • 2
1 Solution
 
scrathcyboyCommented:
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
 
no158Author Commented:
How will do I know if the div went outside the visable browser window?
Is there a method for that?
0
 
scrathcyboyCommented:
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
 
no158Author Commented:
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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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