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
865 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 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

Independent Software Vendors: 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!

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

705 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