CSS-dropdownlayer med Javascript

[FiEnD]

Hej

 

Satt igår och byggde ihop en egen meny med knappar, men stötte på ett litet tankeproblem.

 

Tänkte ha så att man kan infoga t.ex smileys i en text.

Min tanke var då att när man klickat på knappen "smiley" i menyn skall ett nytt lager visas nedanför knappen och visa de smileys som finns. När man klickar på en smiley infogas den i text-arean med en tagg.

När man sedan klickar utanför div-elementet eller har haft musen utanför div-taggen en sekund så döljs div-taggen igen.

 

Någon som har något tips på hur jag skall lösa detta rent kodmässigt?

Jag provade tidigare med en funktion, men fick aldrig den att lägga sig på rätt ställe.

 

Här är lite av den kod som jag har kvar så man på ett ungefär kan förstå vad jag försökte åstakomma. Denna hämtar ut musens position, men det bästa hade varit om den kunde utgå från positionen på knappen istället och inte musens position.

 

Om jag har bilden såhär:

 

[ bild ]

[ menyn som kommer under ]

 

Tack på förhand

 

Mvh Fredrik

 

 

function captureMousePosition(e) {
if (document.layers) {
xMousePos = e.pageX;
yMousePos = e.pageY;
xMousePosMax = window.innerWidth+window.pageXOffset;
yMousePosMax = window.innerHeight+window.pageYOffset;
} else if (document.all) {
xMousePos = window.event.x+document.body.scrollLeft;
yMousePos = window.event.y+document.body.scrollTop;
xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
yMousePosMax = document.body.clientHeight+document.body.scrollTop;
} else if (document.getElementById) {
// Netscape 6 behaves the same as Netscape 4 in this regard 
xMousePos = e.pageX;
yMousePos = e.pageY;
xMousePosMax = window.innerWidth+window.pageXOffset;
yMousePosMax = window.innerHeight+window.pageYOffset;
}
}
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}
function showPopup (targetObjectId, eventObj, xoffsetVar, yOffsetVar) {
var xOffset = xoffsetVar;
var yOffset = yOffsetVar;
if(eventObj) {
// hide any currently-visible popups
hideCurrentPopup();
// stop event from bubbling up any farther
eventObj.cancelBubble = true;
// move popup div to current cursor position 
// (add scrollTop to account for scrolling for IE)
var newXCoordinate = xcoord + xOffset
var newYCoordinate = ycoord + yOffset
// and make it visible
if( changeObjectVisibility(targetObjectId, 'visible') ) {
// if we successfully showed the popup
// store its Id on a globally-accessible object
window.currentlyVisiblePopup = targetObjectId;
//alert ("This is a Javascript Alert")
return true;
} else {
// we couldn't show the popup, boo hoo!
return false;
}
} else {
// there was no event object, so we won't be able to position anything, so give up
return false;
}
} // showPopup
function hideCurrentPopup() {
// note: we've stored the currently-visible popup on the global object window.currentlyVisiblePopup
if(window.currentlyVisiblePopup) {
changeObjectVisibility(window.currentlyVisiblePopup, 'hidden');
window.currentlyVisiblePopup = false;
}
} // hideCurrentPopup
// ***********************
// hacks and workarounds *
// ***********************
// initialize hacks whenever the page loads
window.onload = initializeHacks;
// setup an event handler to hide popups for generic clicks on the document
document.onclick = hideCurrentPopup;
function initializeHacks() {
// this ugly little hack resizes a blank div to make sure you can click
// anywhere in the window for Mac MSIE 5
if ((navigator.appVersion.indexOf('MSIE 5') != -1) 
&& (navigator.platform.indexOf('Mac') != -1)
&& getStyleObject('blankDiv')) {
window.onresize = explorerMacResizeFix;
}
resizeBlankDiv();
// this next function creates a placeholder object for older browsers
createFakeEventObj();
}
function createFakeEventObj() {
// create a fake event object for older browsers to avoid errors in function call
// when we need to pass the event object to functions
if (!window.event) {
window.event = false;
}
} // createFakeEventObj
function resizeBlankDiv() {
// resize blank placeholder div so IE 5 on mac will get all clicks in window
if ((navigator.appVersion.indexOf('MSIE 5') != -1) 
&& (navigator.platform.indexOf('Mac') != -1)
&& getStyleObject('blankDiv')) {
getStyleObject('blankDiv').width = document.body.clientWidth - 20;
getStyleObject('blankDiv').height = document.body.clientHeight - 20;
}
}
function explorerMacResizeFix () {
location.reload(false);
}

 

[FiEnD]

Detta kanske var en något svår nöt att knäcka? :/

 

För mig som inte är helt hemma på javascript så vet jag inte riktigt hur jag ska gå tillväga för att få det jag söker..

Någon som har några tips?

 

MVh Fredrik

 

[Micke_skane]

Inte för att jag har förstått det hela men det låter som att du överarbetar det.

Det jag har förstått är att du vill visa ett lager och om man för musen utanför så ska det döljas.

Skulle man av en slump föra ut musen utanför och ångra sig och föra in musen igen över lagret så ska inte lagret döljas.

 

Är det rätt uppfattat?

Ligger menyknapparna kvar på samma ställe hela tiden?

Är det mer än ett lager med smiles det handlar om?

 

Förstår inte heller varför du vill kolla om man klickar utanför, för om man för musen utanför så ska ju lagret döljas.

 

[FiEnD]

Hej

 

Det jag bygger är en egen "editor" för att lägga till BBcode till en textarea. Det jag är ute efter är att ha t.ex en meny liknande denna menyn som man har ovanför denna textarea där man skriver och svarar på inlägg.

Tänk om du har en smiley-bild istället för en glad gubbe, en blinkande gubbe, en tumme upp och en tumme ned. Då du trycker på smileygubben så kommer det ett lager under smileyn där man kan välja andra smileys.

Och sedan är det samma funktion om man trycker på t.ex en "färgikon" där det kommer upp blå,röd,grön,orange,brun i ett eget lager.

Som det är gjort här på IDG så har man en knapp för varje pryl.Det kan bli väldigt omständigt om man ska ha många smileys och färger. Därför vill jag "samla" dem under sig.

 

Kolla hur det funkar i word. När jag klickar på "bakgrundsfärg" eller "fontfärg"-knapparna i menyn i word så kommer det ett "lager" nedanför där jag kan välja färgen.

 

Och tanken är att klickar jag utanför själva färgpaletten så försvinner färgvalet. Om jag inte skulle ha denna koll så skulle jag måsta klicka upp färgvalet igen.

 

Förstår du lite mer hur jag tänkt? =)

 

Mvh Fredrik

 

[Micke_skane]

Ska vidare nu men jag kan läsa ditt inlägg mer noga senare idag/helgen så får jag se om jag fattat det rätt

 

Ha det!