1

i need to open a div (or somethings other, dunno what) when mouse go on a link. But this div doesnt move other div. It must open OVER the others div (like this website...when there are the "popup/error" div over others div. How can do it? Transparent? Or somethings like it?

for example, if i write somethings into title field in a link statement, there is a small windows that show to me what i wrote. somethings like it, but with a div, or somethings other when i can put text, image, ecc.

as another example, on facebook when i go on the main wall and i go with mouse on the name of the users, it show me a small windows with more details. the same when i open the chat box :)

code :

<div class="playerDetailsOff">
    Name : Marco<br />
    Surname : Daghine
</div>

<a class="viewt" href="#" onmouseover="viewPlayerOn('id1?>');return false" onmouseout="viewPlayerOff();return false">link 1</a>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id2?>');return false" onmouseout="viewPlayerOff();return false">link 2</a>    
<a class="viewt" href="#" onmouseover="viewPlayerOn('id3?>');return false" onmouseout="viewPlayerOff();return false">link 3</a>    
<a class="viewt" href="#" onmouseover="viewPlayerOn('id4?>');return false" onmouseout="viewPlayerOff();return false">link 4</a>

function viewPlayerOn(val) {
    $('.playerDetailsOff').removeClass().addClass('playerDetailsOn');
}

function viewPlayerOff() {
    $('.playerDetailsOn').removeClass().addClass('playerDetailsOff');
}    

.playerDetailsOn{width:200px; height:100px; position:fixed;}
.playerDetailsOff{display:none;}
markzzz
  • 47,390
  • 120
  • 299
  • 507
  • This is just a CSS and positioning problem. Search for CSS and absolute positioning. It is not related with PHP and JavaScript would only be used for creating the `div`. – Felix Kling Oct 05 '10 at 13:49

3 Answers3

2

Basically what you want is an overlay or a lightbox (both terms are easy to google). Just as Felix Kling pointed out you will want absolute positioning - or you can look at z-index (highest z-index is on top).

Just to make it easy on you there was a similar question with example code which should definitely get you started: jQuery - How Do I Place a DIV On Overlay?

Community
  • 1
  • 1
Dennis G
  • 21,405
  • 19
  • 96
  • 133
  • Thanks to the tip. with absolute o fixed i can do it. But how can calculate (with jquery) the margin for that div? because for example my links are in different position. I should to show the div near that link for example... – markzzz Oct 05 '10 at 14:16
1

You want overLIB. Check out their homepage to see features and documentation.

Regards, Alin

Alin Purcaru
  • 43,655
  • 12
  • 77
  • 90
  • uhm, i prefeer use standard code/language, no other further library. But thanks – markzzz Oct 05 '10 at 13:51
  • Well... if you want complex functionality you will need a library, either open-source or written by you. If you just want simple overlaying divs do it with position:absolute/relative/fixed. Position is the CSS attribute that pulls a box from the normal layout flow and allows you to change its position and not influence other boxes. – Alin Purcaru Oct 05 '10 at 13:53
1

You can use this one: http://www.leigeber.com/2008/06/javascript-tooltip/. It is a lightweight javascript if you don't want to use JQuery.

CristiC
  • 22,068
  • 12
  • 57
  • 89