Menu navigation issue onmouseout

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
nastis
Δημοσιεύσεις: 124
Εγγραφή: 16 Φεβ 2005 16:28
Επικοινωνία:

Menu navigation issue onmouseout

Δημοσίευση από nastis » 02 Ιουν 2006 16:12

Καλησπέρα,
Έχω το παρακάτω JS
http://www.nastis.info/check.php
για ενα navigation combo.

[βασισμένο στο http://www.brainjar.com/dhtml/menubar/ ]

Βασικα αυτό που θέλω να κάνω είναι να μαζεύεται (όταν γίνεται onmouseout) το μενουδάκι από το κάθε item που γίνεται dropdown οταν το mouse φεύγει εκτός περιοχής.
(λες να έγινα κατανοητός?)

Στέλνω attached ενα cutted down version αυτού που θέλω.

Πιστεύω ότι πρέπει να κάνω κάτι του στυλ onmouseout='depressButton(button)'
αλλα δεν έχω καταφέρει τίποτα. :-(

Ευχαριστώ
Β.
Συνημμένα
check.zip
(4.6 KiB) Μεταφορτώθηκε 297 φορές
www.oktonia.com - Παγκόσμιο Χωριό Γνώσης Λυμένα Θέματα Εξετάσεων - Ασκήσεις

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Menu navigation issue onmouseout

Δημοσίευση από fafos » 02 Ιουν 2006 18:20

Κώδικας: Επιλογή όλων

<script type="text/javascript">//<!&#91;CDATA&#91;

//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2000-2004 by Mike Hall.
// See http&#58;//www.brainjar.com for terms of use.
//*****************************************************************************

//----------------------------------------------------------------------------
// Code to determine the browser and version.
//----------------------------------------------------------------------------

function Browser&#40;&#41; &#123;

  var ua, s, i;

  this.isIE    = false;  // Internet Explorer
  this.isOP    = false;  // Opera
  this.isNS    = false;  // Netscape
  this.version = null;

  ua = navigator.userAgent;

  s = "Opera";
  if &#40;&#40;i = ua.indexOf&#40;s&#41;&#41; >= 0&#41; &#123;
    this.isOP = true;
    this.version = parseFloat&#40;ua.substr&#40;i + s.length&#41;&#41;;
    return;
  &#125;

  s = "Netscape6/";
  if &#40;&#40;i = ua.indexOf&#40;s&#41;&#41; >= 0&#41; &#123;
    this.isNS = true;
    this.version = parseFloat&#40;ua.substr&#40;i + s.length&#41;&#41;;
    return;
  &#125;

  // Treat any other "Gecko" browser as Netscape 6.1.

  s = "Gecko";
  if &#40;&#40;i = ua.indexOf&#40;s&#41;&#41; >= 0&#41; &#123;
    this.isNS = true;
    this.version = 6.1;
    return;
  &#125;

  s = "MSIE";
  if &#40;&#40;i = ua.indexOf&#40;s&#41;&#41;&#41; &#123;
    this.isIE = true;
    this.version = parseFloat&#40;ua.substr&#40;i + s.length&#41;&#41;;
    return;
  &#125;
&#125;

var browser = new Browser&#40;&#41;;

//----------------------------------------------------------------------------
// Code for handling the menu bar and active button.
//----------------------------------------------------------------------------

var activeButton = null;

/* &#91;MODIFIED&#93; This code commented out, not needed for activate/deactivate
   on mouseover.

// Capture mouse clicks on the page so any active button can be
// deactivated.

if &#40;browser.isIE&#41;
  document.onmousedown = pageMousedown;
else
  document.addEventListener&#40;"mousedown", pageMousedown, true&#41;;

function pageMousedown&#40;event&#41; &#123;

  var el;

  // If there is no active button, exit.

  if &#40;activeButton == null&#41;
    return;

  // Find the element that was clicked on.

  if &#40;browser.isIE&#41;
    el = window.event.srcElement;
  else
    el = &#40;event.target.tagName ? event.target &#58; event.target.parentNode&#41;;

  // If the active button was clicked on, exit.

  if &#40;el == activeButton&#41;
    return;

  // If the element is not part of a menu, reset and clear the active
  // button.

  if &#40;getContainerWith&#40;el, "DIV", "menu"&#41; == null&#41; &#123;
    resetButton&#40;activeButton&#41;;
    activeButton = null;
  &#125;
&#125;

&#91;END MODIFIED&#93; */

function buttonClick&#40;event, menuId&#41; &#123;

  var button;

  // Get the target button element.

  if &#40;browser.isIE&#41;
    button = window.event.srcElement;
  else
    button = event.currentTarget;

  // Blur focus from the link to remove that annoying outline.

  button.blur&#40;&#41;;

  // Associate the named menu to this button if not already done.
  // Additionally, initialize menu display.

  if &#40;button.menu == null&#41; &#123;
    button.menu = document.getElementById&#40;menuId&#41;;
    if &#40;button.menu.isInitialized == null&#41;
      menuInit&#40;button.menu&#41;;
  &#125;

  // &#91;MODIFIED&#93; Added for activate/deactivate on mouseover.

  // Set mouseout event handler for the button, if not already done.

  if &#40;button.onmouseout == null&#41;
    button.onmouseout = buttonOrMenuMouseout;

  // Exit if this button is the currently active one.

  if &#40;button == activeButton&#41;
    return false;

  // &#91;END MODIFIED&#93;

  // Reset the currently active button, if any.

  if &#40;activeButton != null&#41;
    resetButton&#40;activeButton&#41;;

  // Activate this button, unless it was the currently active one.

  if &#40;button != activeButton&#41; &#123;
    depressButton&#40;button&#41;;
    activeButton = button;
  &#125;
  else
    activeButton = null;

  return false;
&#125;

function buttonMouseover&#40;event, menuId&#41; &#123;

  var button;

  // &#91;MODIFIED&#93; Added for activate/deactivate on mouseover.

  // Activates this button's menu if no other is currently active.

  if &#40;activeButton == null&#41; &#123;
    buttonClick&#40;event, menuId&#41;;
    return;
  &#125;

  // &#91;END MODIFIED&#93;

  // Find the target button element.

  if &#40;browser.isIE&#41;
    button = window.event.srcElement;
  else
    button = event.currentTarget;

  // If any other button menu is active, make this one active instead.

  if &#40;activeButton != null && activeButton != button&#41;
    buttonClick&#40;event, menuId&#41;;
&#125;

function depressButton&#40;button&#41; &#123;

  var x, y;

  // Update the button's style class to make it look like it's
  // depressed.

  button.className += " menuButtonActive";

  // &#91;MODIFIED&#93; Added for activate/deactivate on mouseover.

  // Set mouseout event handler for the button, if not already done.

  if &#40;button.onmouseout == null&#41;
    button.onmouseout = buttonOrMenuMouseout;
  if &#40;button.menu.onmouseout == null&#41;
    button.menu.onmouseout = buttonOrMenuMouseout;

  // &#91;END MODIFIED&#93;

  // Position the associated drop down menu under the button and
  // show it.

  x = getPageOffsetLeft&#40;button&#41;;
  y = getPageOffsetTop&#40;button&#41; + button.offsetHeight;

  // For IE, adjust position.

  if &#40;browser.isIE&#41; &#123;
    x += button.offsetParent.clientLeft;
    y += button.offsetParent.clientTop;
  &#125;

  button.menu.style.left = x + "px";
  button.menu.style.top  = y + "px";
  button.menu.style.visibility = "visible";

  // For IE; size, position and show the menu's IFRAME as well.

  if &#40;button.menu.iframeEl != null&#41;
  &#123;
    button.menu.iframeEl.style.left = button.menu.style.left;
    button.menu.iframeEl.style.top  = button.menu.style.top;
    button.menu.iframeEl.style.width  = button.menu.offsetWidth + "px";
    button.menu.iframeEl.style.height = button.menu.offsetHeight + "px";
    button.menu.iframeEl.style.display = "";
  &#125;
&#125;

function resetButton&#40;button&#41; &#123;

  // Restore the button's style class.

  removeClassName&#40;button, "menuButtonActive"&#41;;

  // Hide the button's menu, first closing any sub menus.

  if &#40;button.menu != null&#41; &#123;
    closeSubMenu&#40;button.menu&#41;;
    button.menu.style.visibility = "hidden";

    // For IE, hide menu's IFRAME as well.

    if &#40;button.menu.iframeEl != null&#41;
      button.menu.iframeEl.style.display = "none";
  &#125;
&#125;

//----------------------------------------------------------------------------
// Code to handle the menus and sub menus.
//----------------------------------------------------------------------------

function menuMouseover&#40;event&#41; &#123;

  var menu;

  // Find the target menu element.

  if &#40;browser.isIE&#41;
    menu = getContainerWith&#40;window.event.srcElement, "DIV", "menu"&#41;;
  else
    menu = event.currentTarget;

  // Close any active sub menu.

  if &#40;menu.activeItem != null&#41;
    closeSubMenu&#40;menu&#41;;
&#125;

function menuItemMouseover&#40;event, menuId&#41; &#123;

  var item, menu, x, y;

  // Find the target item element and its parent menu element.

  if &#40;browser.isIE&#41;
    item = getContainerWith&#40;window.event.srcElement, "A", "menuItem"&#41;;
  else
    item = event.currentTarget;
  menu = getContainerWith&#40;item, "DIV", "menu"&#41;;

  // Close any active sub menu and mark this one as active.

  if &#40;menu.activeItem != null&#41;
    closeSubMenu&#40;menu&#41;;
  menu.activeItem = item;

  // Highlight the item element.

  item.className += " menuItemHighlight";

  // Initialize the sub menu, if not already done.

  if &#40;item.subMenu == null&#41; &#123;
    item.subMenu = document.getElementById&#40;menuId&#41;;
    if &#40;item.subMenu.isInitialized == null&#41;
      menuInit&#40;item.subMenu&#41;;
  &#125;

  // &#91;MODIFIED&#93; Added for activate/deactivate on mouseover.

  // Set mouseout event handler for the sub menu, if not already done.

  if &#40;item.subMenu.onmouseout == null&#41;
    item.subMenu.onmouseout = buttonOrMenuMouseout;

  // &#91;END MODIFIED&#93;

  // Get position for submenu based on the menu item.

  x = getPageOffsetLeft&#40;item&#41; + item.offsetWidth;
  y = getPageOffsetTop&#40;item&#41;;

  // Adjust position to fit in view.

  var maxX, maxY;

  if &#40;browser.isIE&#41; &#123;
    maxX = Math.max&#40;document.documentElement.scrollLeft, document.body.scrollLeft&#41; +
      &#40;document.documentElement.clientWidth != 0 ? document.documentElement.clientWidth &#58; document.body.clientWidth&#41;;
    maxY = Math.max&#40;document.documentElement.scrollTop, document.body.scrollTop&#41; +
      &#40;document.documentElement.clientHeight != 0 ? document.documentElement.clientHeight &#58; document.body.clientHeight&#41;;
  &#125;
  if &#40;browser.isOP&#41; &#123;
    maxX = document.documentElement.scrollLeft + window.innerWidth;
    maxY = document.documentElement.scrollTop  + window.innerHeight;
  &#125;
  if &#40;browser.isNS&#41; &#123;
    maxX = window.scrollX + window.innerWidth;
    maxY = window.scrollY + window.innerHeight;
  &#125;
  maxX -= item.subMenu.offsetWidth;
  maxY -= item.subMenu.offsetHeight;

  if &#40;x > maxX&#41;
    x = Math.max&#40;0, x - item.offsetWidth - item.subMenu.offsetWidth
      + &#40;menu.offsetWidth - item.offsetWidth&#41;&#41;;
  y = Math.max&#40;0, Math.min&#40;y, maxY&#41;&#41;;

  // Position and show the sub menu.

  item.subMenu.style.left       = x + "px";
  item.subMenu.style.top        = y + "px";
  item.subMenu.style.visibility = "visible";

  // For IE; size, position and display the menu's IFRAME as well.

  if &#40;item.subMenu.iframeEl != null&#41;
  &#123;
    item.subMenu.iframeEl.style.left    = item.subMenu.style.left;
    item.subMenu.iframeEl.style.top     = item.subMenu.style.top;
    item.subMenu.iframeEl.style.width   = item.subMenu.offsetWidth + "px";
    item.subMenu.iframeEl.style.height  = item.subMenu.offsetHeight + "px";
    item.subMenu.iframeEl.style.display = "";
  &#125;

  // Stop the event from bubbling.

  if &#40;browser.isIE&#41;
    window.event.cancelBubble = true;
  else
    event.stopPropagation&#40;&#41;;
&#125;

function closeSubMenu&#40;menu&#41; &#123;

  if &#40;menu == null || menu.activeItem == null&#41;
    return;

  // Recursively close any sub menus.

  if &#40;menu.activeItem.subMenu != null&#41; &#123;
    closeSubMenu&#40;menu.activeItem.subMenu&#41;;
    menu.activeItem.subMenu.style.visibility = "hidden";

    // For IE, hide the sub menu's IFRAME as well.

    if &#40;menu.activeItem.subMenu.iframeEl != null&#41;
      menu.activeItem.subMenu.iframeEl.style.display = "none";

    menu.activeItem.subMenu = null;
  &#125;

  // Deactivate the active menu item.

  removeClassName&#40;menu.activeItem, "menuItemHighlight"&#41;;
  menu.activeItem = null;
&#125;

// &#91;MODIFIED&#93; Added for activate/deactivate on mouseover. Handler for mouseout
// event on buttons and menus.

function buttonOrMenuMouseout&#40;event&#41; &#123;

  var el;

  // If there is no active button, exit.

  if &#40;activeButton == null&#41;
    return;

  // Find the element the mouse is moving to.

  if &#40;browser.isIE&#41;
    el = window.event.toElement;
  else if &#40;event.relatedTarget != null&#41;
      el = &#40;event.relatedTarget.tagName ? event.relatedTarget &#58; event.relatedTarget.parentNode&#41;;

  // If the element is not part of a menu, reset the active button.

  if &#40;getContainerWith&#40;el, "DIV", "menu"&#41; == null&#41; &#123;
    resetButton&#40;activeButton&#41;;
    activeButton = null;
  &#125;
&#125;

// &#91;END MODIFIED&#93;

//----------------------------------------------------------------------------
// Code to initialize menus.
//----------------------------------------------------------------------------

function menuInit&#40;menu&#41; &#123;

  var itemList, spanList;
  var textEl, arrowEl;
  var itemWidth;
  var w, dw;
  var i, j;

  // For IE, replace arrow characters.

  if &#40;browser.isIE&#41; &#123;
    menu.style.lineHeight = "2.5ex";
    spanList = menu.getElementsByTagName&#40;"SPAN"&#41;;
    for &#40;i = 0; i < spanList.length; i++&#41;
      if &#40;hasClassName&#40;spanList&#91;i&#93;, "menuItemArrow"&#41;&#41; &#123;
        spanList&#91;i&#93;.style.fontFamily = "Webdings";
        spanList&#91;i&#93;.firstChild.nodeValue = "4";
      &#125;
  &#125;

  // Find the width of a menu item.

  itemList = menu.getElementsByTagName&#40;"A"&#41;;
  if &#40;itemList.length > 0&#41;
    itemWidth = itemList&#91;0&#93;.offsetWidth;
  else
    return;

  // For items with arrows, add padding to item text to make the
  // arrows flush right.

  for &#40;i = 0; i < itemList.length; i++&#41; &#123;
    spanList = itemList&#91;i&#93;.getElementsByTagName&#40;"SPAN"&#41;;
    textEl  = null;
    arrowEl = null;
    for &#40;j = 0; j < spanList.length; j++&#41; &#123;
      if &#40;hasClassName&#40;spanList&#91;j&#93;, "menuItemText"&#41;&#41;
        textEl = spanList&#91;j&#93;;
      if &#40;hasClassName&#40;spanList&#91;j&#93;, "menuItemArrow"&#41;&#41;
        arrowEl = spanList&#91;j&#93;;
    &#125;
    if &#40;textEl != null && arrowEl != null&#41; &#123;
      textEl.style.paddingRight = &#40;itemWidth 
        - &#40;textEl.offsetWidth + arrowEl.offsetWidth&#41;&#41; + "px";
      // For Opera, remove the negative right margin to fix a display bug.
      if &#40;browser.isOP&#41;
        arrowEl.style.marginRight = "0px";
    &#125;
  &#125;

  // Fix IE hover problem by setting an explicit width on first item of
  // the menu.

  if &#40;browser.isIE&#41; &#123;
    w = itemList&#91;0&#93;.offsetWidth;
    itemList&#91;0&#93;.style.width = w + "px";
    dw = itemList&#91;0&#93;.offsetWidth - w;
    w -= dw;
    itemList&#91;0&#93;.style.width = w + "px";
  &#125;

  // Fix the IE display problem &#40;SELECT elements and other windowed controls
  // overlaying the menu&#41; by adding an IFRAME under the menu.

  if &#40;browser.isIE&#41; &#123;
    var iframeEl = document.createElement&#40;"IFRAME"&#41;;
    iframeEl.frameBorder = 0;
    iframeEl.src = "javascript&#58;;";
    iframeEl.style.display = "none";
    iframeEl.style.position = "absolute";
    iframeEl.style.filter = "progid&#58;DXImageTransform.Microsoft.Alpha&#40;style=0,opacity=0&#41;";
    menu.iframeEl = menu.parentNode.insertBefore&#40;iframeEl, menu&#41;;
  &#125;

  // Mark menu as initialized.

  menu.isInitialized = true;
&#125;

//----------------------------------------------------------------------------
// General utility functions.
//----------------------------------------------------------------------------

function getContainerWith&#40;node, tagName, className&#41; &#123;

  // Starting with the given node, find the nearest containing element
  // with the specified tag name and style class.

  while &#40;node != null&#41; &#123;
    if &#40;node.tagName != null && node.tagName == tagName &&
        hasClassName&#40;node, className&#41;&#41;
      return node;
    node = node.parentNode;
  &#125;

  return node;
&#125;

function hasClassName&#40;el, name&#41; &#123;

  var i, list;

  // Return true if the given element currently has the given class
  // name.

  list = el.className.split&#40;" "&#41;;
  for &#40;i = 0; i < list.length; i++&#41;
    if &#40;list&#91;i&#93; == name&#41;
      return true;

  return false;
&#125;

function removeClassName&#40;el, name&#41; &#123;

  var i, curList, newList;

  if &#40;el.className == null&#41;
    return;

  // Remove the given class name from the element's className property.

  newList = new Array&#40;&#41;;
  curList = el.className.split&#40;" "&#41;;
  for &#40;i = 0; i < curList.length; i++&#41;
    if &#40;curList&#91;i&#93; != name&#41;
      newList.push&#40;curList&#91;i&#93;&#41;;
  el.className = newList.join&#40;" "&#41;;
&#125;

function getPageOffsetLeft&#40;el&#41; &#123;

  var x;

  // Return the x coordinate of an element relative to the page.

  x = el.offsetLeft;
  if &#40;el.offsetParent != null&#41;
    x += getPageOffsetLeft&#40;el.offsetParent&#41;;

  return x;
&#125;

function getPageOffsetTop&#40;el&#41; &#123;

  var y;

  // Return the x coordinate of an element relative to the page.

  y = el.offsetTop;
  if &#40;el.offsetParent != null&#41;
    y += getPageOffsetTop&#40;el.offsetParent&#41;;

  return y;
&#125;

//&#93;&#93;></script>

nastis
Δημοσιεύσεις: 124
Εγγραφή: 16 Φεβ 2005 16:28
Επικοινωνία:

Menu navigation issue onmouseout

Δημοσίευση από nastis » 02 Ιουν 2006 19:07

Fafos! κερνάω ! :pint:
thnx a lot. (για την απάντηση και για τον χρόνο που διέθεσες )

V.
www.oktonia.com - Παγκόσμιο Χωριό Γνώσης Λυμένα Θέματα Εξετάσεων - Ασκήσεις

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Menu navigation issue onmouseout

Δημοσίευση από skeftomilos » 03 Ιουν 2006 01:46

Καλά όλα αυτά αλλά γιατί να φορτώσει κανείς τη σελίδα του με 18KB κώδικα για κάτι που μπορεί να γίνει πολύ απλούστερα με CSS? Εκτός αυτού μήπως όλα αυτά τα DHTML effects είναι κάπως εκτός μόδας; Πάντως *-*cool*-* έχουν πάψει να είναι προ πολλού. :think:
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Menu navigation issue onmouseout

Δημοσίευση από cherouvim » 03 Ιουν 2006 02:24

google suckerfish

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Menu navigation issue onmouseout

Δημοσίευση από korgr » 31 Οκτ 2009 13:08

skeftomilos έγραψε:Καλά όλα αυτά αλλά γιατί να φορτώσει κανείς τη σελίδα του με 18KB κώδικα για κάτι που μπορεί να γίνει πολύ απλούστερα με CSS? Εκτός αυτού μήπως όλα αυτά τα DHTML effects είναι κάπως εκτός μόδας; Πάντως *-*cool*-* έχουν πάψει να είναι προ πολλού. :think:
Sorry που ξεθαβω το θεμα, αλλα θα ηθελα να ρωτησω πως γινεται με css να εχουμε onmouseout να κλεινει (display:none) ενα div που περιεχει αλλα objects (<div>, <img>, <a> κλπ)

Ενα παραδειγμα θα βοηθουσε πολυ!

Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

Menu navigation issue onmouseout

Δημοσίευση από Andreas_O » 31 Οκτ 2009 20:25

korgr έγραψε:
skeftomilos έγραψε:Καλά όλα αυτά αλλά γιατί να φορτώσει κανείς τη σελίδα του με 18KB κώδικα για κάτι που μπορεί να γίνει πολύ απλούστερα με CSS? Εκτός αυτού μήπως όλα αυτά τα DHTML effects είναι κάπως εκτός μόδας; Πάντως *-*cool*-* έχουν πάψει να είναι προ πολλού. :think:
Sorry που ξεθαβω το θεμα, αλλα θα ηθελα να ρωτησω πως γινεται με css να εχουμε onmouseout να κλεινει (display:none) ενα div που περιεχει αλλα objects (<div>, <img>, <a> κλπ)

Ενα παραδειγμα θα βοηθουσε πολυ!
Τι εννοείς
ενα div που περιεχει αλλα objects (<div>, <img>, <a> κλπ)
?
Anyway, αν κατάλαβα αυτό που θες είναι:

#to_div_sou{
display:none;
}
#to_div_sou:hover{
display:inline;
}

Όταν είναι σε normal state, δε θα εμφανίζεται, όταν όμως πας πάνω του, θα εμφανίζεται.
Προφανώς, δεν απάντησα αυτό που ήθελες, αλλά δεν κατάλαβα :oops: :oops: :-? :-?
;]

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Menu navigation issue onmouseout

Δημοσίευση από korgr » 31 Οκτ 2009 22:00

Αντρεα, φαντασου το σαν menu.
Για να εμφανιστει το κρυφο πινακακι, θα πρεπει καποιο αλλο button ή link να δωσει την εντολη. Δεν μπορεις να πας πανω του για να εμφανιστει αφου πριν εμφανιστει δεν το βλεπει ο χρηστης.
Για να το λεει ο skeftomilos πρεπει να υπαρχει τροπος, αλλα δεν μπορω να καταλαβω πως γινεται κατι τετοιο χωρις javascript.

Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

Menu navigation issue onmouseout

Δημοσίευση από Andreas_O » 31 Οκτ 2009 22:04

korgr έγραψε:Αντρεα, φαντασου το σαν menu.
Για να εμφανιστει το κρυφο πινακακι, θα πρεπει καποιο αλλο button ή link να δωσει την εντολη. Δεν μπορεις να πας πανω του για να εμφανιστει αφου πριν εμφανιστει δεν το βλεπει ο χρηστης.
Για να το λεει ο skeftomilos πρεπει να υπαρχει τροπος, αλλα δεν μπορω να καταλαβω πως γινεται κατι τετοιο χωρις javascript.
Ωραία, κατάλαβα, νομίζω.

Ας πούμε ότι έχεις 2 div. 1 που ονομάζεται "#div1" και 1 που ονομάζεται "#div2".
Και όταν το #div1 είναι hover να εμφανίζεται το #div2, σωστα?

CSS:

Κώδικας: Επιλογή όλων

#div1 #div2&#123;
display&#58;none;
&#125;
#div1&#58;hover #div2&#123;
display&#58;inline;
&#125;

Αν, ενδιαφέρεσαι συγκεκριμένα, για menu, εγώ έχω φτιάξει μετά από κόπο (?) ένα css dropdown, που τουλάχιστον παίζει και σε IE και είναι ~50 γραμμές κώδικα :D :D
;]

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Menu navigation issue onmouseout

Δημοσίευση από korgr » 01 Νοέμ 2009 11:35

Αντρεα, αυτο το τελευταιο που μου προτεινες, απλα το εγραψες ή το δοκιμασες και σου παιζει?
Μιλαω για το

Κώδικας: Επιλογή όλων

#div1 #div2&#123;
display&#58;none;
&#125;
#div1&#58;hover #div2&#123;
display&#58;inline;
&#125;
γιατι σε μενα δεν κανει τιποτα
Anyway απλα απο απορια ρωτησα μπας και ειναι κατι πιο απλο 50 γραμμες που μου ειπες.
Προσωπικα ειμαι της γνωμης,
css για styling
js για διαδραση

Δεν ειμαι απο τους κολημενους του τυπου "δεν ενεργοποιω js ή flash στον browser μου"

Και φυσικα δεν μιλαω για μακρυναρια js code σαν αυτο στην αρχη αυτου του topic.
Προσωπικα, και χαρη στις κατευθυνσεις που μου εδωσε η Λια Βερου κατεληξα στην ακολουθη function

Κώδικας: Επιλογή όλων

function hideDIV&#40;e, id&#41;&#123;
if &#40;!e&#41; var e = window.event;
var tg = &#40;window.event&#41; ? e.srcElement &#58; e.target;
if &#40;tg.nodeName != 'DIV'&#41; return;
var reltg = &#40;e.relatedTarget&#41; ? e.relatedTarget &#58; e.toElement;
while &#40;reltg != tg && reltg.nodeName != 'BODY'&#41;
reltg= reltg.parentNode
if &#40;reltg== tg&#41; return;
document.getElementById&#40;id&#41;.style.visibility='hidden';
&#125;
και το καλουμε με

Κώδικας: Επιλογή όλων

<div id="someID" style="visibility&#58;hidden; padding&#58;10px; background&#58;url&#40;images/blank.gif&#41;" onmouseout="hideDIV&#40;event, this.id&#41;">
To padding ειναι απαραιτητο για να πυροδοτηθει το event στο div που θελουμε ενω το background image ειναι ενα transparent gif το οποιο καλυπτει την αδυναμια του IE6 να αναγνωρισει empty paddings. Ολη η ιστορια αφορα divs που περιεχουν αλλα περιεχομενα (links κλπ) και πρεπει να εξεταζουμε καθε εσωτερικο event λογω EVENT BUBBLING & CAPTURING

Για να εμφανισουμε το div απο καποιο αλλο button ειναι αρκετο ενα

Κώδικας: Επιλογή όλων

onmouseover="document.getElementById&#40;'someID'&#41;.style.display='block'"

Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

Menu navigation issue onmouseout

Δημοσίευση από Andreas_O » 01 Νοέμ 2009 12:31

Καλημέρα!

Το παραπάνω, αν όχι με αυτό τον τρόπο, το έχω χρησιμοποιήσει πάμπολλες φορές.
Συγκεκριμένα, το έχω δοκιμάσει και σε dropdown menu, που όταν γίνεται hover ένα κουμπί, εμφανίζονται οι επιλογές.

Αν υποθέσουμε, ότι όλα αυτά τα εφαρμόζουμε μέσα στο div με όνομα menu, ο κώδικας του css, είναι ο παρακάτω

Κώδικας: Επιλογή όλων


#menu ul &#123;
font-size&#58;12px;
font-family&#58;Georgia,Trebuchet Ms,Calibri,Arial,Tahoma,Arial;
margin&#58; 0;
padding&#58; 0;
z-index&#58;1;
list-style&#58; none;
&#125;
#menu ul li &#123;
display&#58; block;
position&#58; relative;
float&#58; left;
&#125;
#menu li ul &#123; display&#58; none; &#125;
#menu ul li a &#123;
display&#58; block;
text-decoration&#58; none;
color&#58; #ffffff;
background&#58; #fa007a;
margin-left&#58; 0px;
white-space&#58; nowrap;
margin-right&#58;10px;
padding&#58;7px;
text-decoration&#58;none;
color&#58;#000;
font-size&#58;12px;
&#125;
#menu ul li a&#58;hover &#123; 
background&#58; #fff; z-index&#58;1;
&#125;
#menu li&#58;hover ul &#123; 
display&#58; block; 
position&#58; absolute;
&#125;
#menu li&#58;hover li &#123; 
float&#58; none;
font-size&#58; 12px;
&#125;
#menu li&#58;hover a &#123; background&#58; #fff;
z-index&#58;1;
&#125;
#menu li&#58;hover li a&#58;hover &#123; background&#58;#fa007a; color&#58;#fff; z-index&#58;1;&#125;
Και στο body, βάζουμε

Κώδικας: Επιλογή όλων

<ul>
<li>Επιλογή 1
      <ul><li>Επιλογή κάθετου μενού 1</li>
             <li>Επιλογή κάθετου μενού 2</li> </ul>
</li>
<li>Επιλογή 2 Χωρίς Μενού</li>
</ul>
Δηλαδή, εκεί που θέλω να έχω menu, εισάγω μέσα στο <li> μία ακόμα unordered list (ul)

Τουλάχιστον, αυτό το έχω φτιάξει, δοκιμάσει και παίζει.
Δες το εδώ www.oasisdesign.gr "ζωντανά" (θα δεις και κάτι σαν σκιά. Τη σκιά την αφαίρεσα για το παράδειγμα εδώ, για να κάνω πιο απλό τον κώδικα)
Δε θεωρώ ότι είναι υπερβολικός ο κώδικας που έχω δώσει.
;]

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Menu navigation issue onmouseout

Δημοσίευση από korgr » 01 Νοέμ 2009 13:41

χμμ κατανοητο τωρα γιατι μου προτεινες την αρχικη σου προταση και δεν μου δουλεψε ενω εσενα σου δουλεψε.
Κατ' αρχας το menu ειναι παραδειγμα, εγω δεν θελω αυτο το functionality μονο για menu

Η διαφορα ειναι πως εσυ καταλαβες πως το div2 ειναι μεσα στο div1
Στην περιπτωση μου θελω τα δυο div να ειναι ανεξαρτητα (και τοτε φυσικα δεν παιζει η προταση σου).

Δηλαδη ενω παιζει αυτο:

Κώδικας: Επιλογή όλων

<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
#div1 #div2&#123;
display&#58;none;
&#125;
#div1&#58;hover #div2&#123;
display&#58;inline;
&#125; 
-->
</style>
</head>

<body>
<div id="div1">Mouse over me to show div2
<div id="div2" >I am div2</div>
</div>
</body>
</html>
δεν παιζει αυτο που ειναι και το ζητουμενο μου:

Κώδικας: Επιλογή όλων

<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
#div1 #div2&#123;
display&#58;none;
&#125;
#div1&#58;hover #div2&#123;
display&#58;inline;
&#125; 
-->
</style>
</head>

<body>
<div id="div1">Mouse over me to show div2</div>
<div> Καποιο ασχετο περιεχομενο</div>
<div id="div2" >I am div2</div>
</body>
</html>
Δεν ξερω αν και αυτο γινεται με καποιο advanced css (δεν ειναι το φορτε μου) αλλα η js δεν εχει κανενα προβλημα να το κανει...

Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

Menu navigation issue onmouseout

Δημοσίευση από Andreas_O » 01 Νοέμ 2009 16:58

Όντως, μάλλον δε γίνεται με css. :-?
Δεν είχα καταλάβει το ζητούμενό σου.
:oops:
(Θα ψάξω και θα σου πώ. Και γω τώρα μαθαίνω :D )

edit: τώρα που το σκέφτομαι, αυτό το είχα υλοποιήσει με ένα script που είχα βρει μετά από google search, κάποτε που το χρειάστηκα :roll:
;]

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες