Web Analytics Made Easy -
StatCounter hiding menu dynamically depends on user - CodingForum

Announcement

Collapse
No announcement yet.

hiding menu dynamically depends on user

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • hiding menu dynamically depends on user

    Hello everybody,

    i am developing a web based application in that i have to display the menu depends on the user.if it is admin the admin menu should display if it is otherone the admin menu should not display.
    the menu contents should hide dynamically using cookies concept
    for all the users the menu is same but the menu should hide dynamically using style.display="visible" or hide

    first of all i am trying to hiding the menu contents dynamically using onload method but that is not working

    the scrpit below



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>Chrome CSS Drop Down Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="chrometheme/chromestyle2.css" />

    <script type="text/javascript" src="chromejs/chrome.js">

    </script>

    </head>

    <body onload="hide()" >

    <script>
    function hide()
    {
    document.getElementById("dropmenu2").style.visibility="hidden"
    }
    </script>


    <div class="chromestyle" id="chromemenu">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Home</a></li>
    <li><a href="#" rel="dropmenu1" >Resources</a></li>
    <li><a href="#" rel="dropmenu2">News</a></li>
    <li><a href="#" rel="dropmenu3">Search</a></li>
    </ul>
    </div>

    <!--1st drop down menu -->
    <div id="dropmenu1" class="dropmenudiv">
    <a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
    <a href="http://www.cssdrive.com">CSS Drive</a>
    <a href="http://www.javascriptkit.com">JavaScript Kit</a>
    <a href="http://www.codingforum.net">Coding Forum</a>
    <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
    </div>


    <!--2nd drop down menu -->
    <div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
    <a href="http://www.cnn.com/">CNN</a>
    <a href="http://www.msnbc.com">MSNBC</a>
    <a href="http://news.bbc.co.uk">BBC News</a>
    </div>

    <!--3rd drop down menu -->
    <div id="dropmenu3" class="dropmenudiv" >
    <a href="http://www.google.com/">Google</a>
    <a href="http://www.yahoo.com">Yahoo</a>
    <a href="http://www.msn.com">MSN</a>
    </div>


    <script type="text/javascript">

    cssdropdown.startchrome("chromemenu")

    </script>




    </body>

    </html>


    can u plz tell me how to hide the menu content dynamicall
    with example code
    thanks in advance

  • #2
    Don't use the onload attribute. Use window.onload instead. Additionally, you didn't declare the type attribute of the script element that follows the body element—that code should probably be within the head element anyway; I would avoiding putting scripts outside the head element unless you need to utilize document.write, which IMHO should be avoided. Also note that the visibility property merely alters the visibility of elements and thus a space where the elements would have been will remain; if you want to have the space removed as well, you should be using the display property.

    Code:
    <script type="text/javascript">
      window.onload = function hide() {
        document.getElementById("dropmenu2").style.visibility = "hidden";
        }
    </script>
    Finally, keep in mind that since this is literally on-load, the administrator's menu will still be visible until the page has loaded and can probably be accessed if the user stops the page during the load process. It may be better to have it hidden by default and have the JavaScript un-hide it as necessary; however, anyone will still be able to see it by viewing the page's source.

    Comment


    • #3
      Originally posted by Arbitrator View Post
      Don't use the onload attribute. Use window.onload instead.
      Can you explain the reason for that
      Vladdy | KL
      "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

      Comment


      • #4
        Instead of doing onLoad you should do inside the head:
        Code:
        <style>
        #dropmenu2{
        visibility: hidden;
        }
        </style>
        After that I see that you used getElementById When you should have used:
        Code:
        document.all.dropmenu2.style.visibility = hidden;
        But after you've included in your code the css above, you won't need this line...

        Comment


        • #5
          Originally posted by Vladdy View Post
          Can you explain the reason for that
          Like the notion of separation of style and structure for CSS and HTML, it makes sense to separate script and structure. This means that all of your script information is in one place (e.g., within the head element), making the script code easier to read and manipulate. Considering how easy that is to do here, I don't see why you shouldn't unless the onload attribute does something that window.onload does not.

          Originally posted by BarrMan View Post
          After that I see that you used getElementById When you should have used:
          Code:
          document.all.dropmenu2.style.visibility = hidden;
          Why would you use document.all instead of getElementById()? Doesn't the former only work in Internet Explorer? Hmm… I just tested it and it works in Opera, however it does nothing in Firefox. I would avoid document.all.

          Comment


          • #6
            Originally posted by Arbitrator View Post
            Like the notion of separation of style and structure for CSS and HTML, it makes sense to separate script and structure. This means that all of your script information is in one place (e.g., within the head element), making the script code easier to read and manipulate. Considering how easy that is to do here, I don't see why you shouldn't unless the onload attribute does something that window.onload does not.
            Notion of separating script from content is good, though in this particular case you may be causing more problems than you are solving, especially when you plan to re-use the scripting component.
            When you have two or more scripts which use window.onload, only one of those scripts will get initialized. At least you should be using addEventListener (attachEvent in IE) to add initialization function.
            Still, when you consider reusing scripting components, you do not want to impose the restriction of initializing when window/document is loaded. There may be cases when you want to initialize one scripting component from another, there may be cases when you need a certain initialization order, there may be cases when you would want to initialize scripting component not when document loads, but some time later.
            Therefore, good practice is to document scripting component initialization function, but leave its use to page/script that imbeds that component, depending on particular circumstances.
            Vladdy | KL
            "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

            Comment


            • #7
              <script type="text/javascript">
              window.onload = function hide() {
              document.getElementsByID("dropmenu2").style.visibility = "hidden";
              }
              </script>

              this code is not working for me
              actually what my intention not to show the menu contents even by seeing the page source

              how to hide menu from user totally

              thanks for ur reply

              Comment


              • #8
                I'll keep your advice in mind, Vladdy.

                Originally posted by pradeep_yerra View Post
                <script type="text/javascript">
                window.onload = function hide() {
                document.getElementsByID("dropmenu2").style.visibility = "hidden";
                }
                </script>

                this code is not working for me
                Why did you change getElementById to getElementsByID?

                Comment

                Working...
                X