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
859 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
  • 2
  • 2
4 Comments
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now