Blurb from Image Map going off the edge of the screen

Sean22 · 28th June 12, 03:09 PM

I'm creating an image map on a web page so that I can create blurbs to show where information is coming from in the database. The information on the very right side of the screen, when I hover over the hotspots, the blurbs keep going off the right side of the screen. Is there anyway to have them push to the left when they hit the edge of the screen? I've tried using a div element on the right hand side and making everything float left but I can't get that to work either.

Here's the CSS page.

Code:

body {
      background-color:#f7f7ec;
      } 
         
         #map {
                position:relative;
                margin:0;
                padding:0;
                width:1238px;
                height:780px;
                font-family:arial, helvetica, sans-serif;
                font-size:8pt;
            }      

            #map li {
                margin:0;
                padding:0;
                list-style:none;
            }

            #map li a {
                position:absolute;
                display:block;
                background:url(blank.gif);
                text-decoration:none;
                color:#000;
               border:1px solid red
            }

            #map li a span {
                display:none;
            }
         

            #map li a:hover span {
                position:relative;
                display:block;
                width:340px;
                left:30px;
                bottom:55px;
                padding:7px;
                border:1px solid #000;
                background: #fff;
                text-decoration:none;
                color:#000;
                filter:alpha(opacity=94);
                opacity:0.94;
                -moz-border-radius:15px;
                -webkit-border-radius:15px;
                -khtml-border-radius:15px;
                border-radius:15px;
            }

            .data {
                margin-left:1em;
                padding:0;
                list-style:none;
            }

Here's part of my HTML page.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
   
      <link rel="stylesheet" type="text/css" href="style.css" />
      
        <title>CM Worklist</title>
          <style type="text/css">
          
            #map {
                background:url(cm_worklist1.png) top left no-repeat;
            }
           #map a.AdmittingDiagnosis {
                top:244px;
                left:1020px;
                width:175px;
                height:34px;
            }
</style>
    </head>
    <body>

        <ul id="map">
               <li><a class="AdmittingDiagnosis" href="query_list.html#CMPatientFactory.NEW_DIAGNOSIS_QUERY">
            <span><b>Admitting Diagnosis</b><br />
                <ul class="data">
                    <li><i>Table:</i>&nbsp &nbsp &nbsp patient_diagnosis</li>
                    <li><i>Column:</i>&nbsp alt_description, code_value</li>
                    <li><i>Query:</i> &nbsp &nbsp CMPatientFactory.NEW_DIAGNOSIS_QUERY</li>
                </ul>
            </span>
            </a></li>
         </ul>
      </body>
    </head>
</html>

chrishirst · 28th June 12, 07:33 PM

Use javascript to detect when the element is going outside the browser client window and change the positional values to bring it back inside.

Sean22 · 28th June 12, 10:53 PM

Well the place I'm interning at only wanted to use HTML and CSS. Is there any way to do this, or will I pretty much just need to use javascript?

chrishirst · 29th June 12, 08:56 AM

Quote:

Well the place I'm interning at only wanted to use HTML and CSS. Is there any way to do this,

Nope, HTML is a markup language, CSS is a style language. Neither have any form of scripting to manipulate the DOM to change element behaviour and the only "collision detection" is done by the rendering engine for elements in the normal flow.

chrishirst · 29th June 12, 08:58 AM

Oh! And to suggest any possible "workaround" we need a URI to work with.

Sean22 · 29th June 12, 11:36 AM

Alright I appreciate the help. I'll try and do some tuts on Javascript and see if I can get it working. The page is on our intranet so I don't actually have a link for you to view it. Thanks anyways though.

28th June 12, 07:33 PM	#2
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: Blurb from Image Map going off the edge of the screen Use javascript to detect when the element is going outside the browser client window and change the positional values to bring it back inside.

28th June 12, 10:53 PM	#3
Sean22 WLC Member Join Date: Jun 2012 Posts: 4	Re: Blurb from Image Map going off the edge of the screen Well the place I'm interning at only wanted to use HTML and CSS. Is there any way to do this, or will I pretty much just need to use javascript?

29th June 12, 08:58 AM	#5
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: Blurb from Image Map going off the edge of the screen Oh! And to suggest any possible "workaround" we need a URI to work with.

29th June 12, 11:36 AM	#6
Sean22 WLC Member Join Date: Jun 2012 Posts: 4	Re: Blurb from Image Map going off the edge of the screen Alright I appreciate the help. I'll try and do some tuts on Javascript and see if I can get it working. The page is on our intranet so I don't actually have a link for you to view it. Thanks anyways though.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode