Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hidden/Alternate Menu

    Here is a quick menu hidden in a Mouse Gesture for additional navigation on a site or administraitive duties.

    To activate the menu simply right click anywhere on the screen , hold the button down, then move the mouse down 50px's and release. This will display the hidden menu.

    There are two parts to it, first the Style and Script....

    <style>
    .expanded {
    position:absolute;
    padding:1px;
    font:Arial, Helvetica, sans-serif;
    font-size:11px;
    text-align:left;
    background-color:#D4D0C8;
    width:150px;
    border-left :2px solid #FFFFFF;
    border-top :2px solid #FFFFFF;
    border-right :2px solid #999999;
    border-bottom : 2px solid #999999;
    }
    a.expanda {
    padding-left:15px;
    padding-right:15px;
    display:block;
    text-decoration:none;
    color:#000000;
    }
    a.expanda:hover {
    background-color:#003366;
    color:#FFFFFF;
    }
    </style>
    <script language="javascript">
    document.oncontextmenu = null;
    document.onmousedown = doDown;
    document.onmouseup = doUp;
    var timerID = 1;
    var ly;
    var ny;
    var targ;
    function doDown(e)
    {
    clearTimeout(timerID);
    document.oncontextmenu = null;
    var rightclick;
    if (!e) e = window.event
    if (e.which) rightclick = (e.which == 3);
    else if (e.button) rightclick = (e.button == 2);
    try
    {
    if (e.target) targ = e.target.getAttribute('id');
    else if (e.srcElement) targ = e.srcElement.getAttribute('id');
    if (targ != "navlink") {document.getElementById('altnav').style.display = 'none';}
    }
    catch(e)
    {
    document.getElementById('altnav').style.display = 'none';
    }
    if (rightclick != false)
    {
    ly = e.clientY;
    }
    return false;
    }

    function doUp(e)
    {
    var rightclick;
    if (!e) e = window.event
    if (e.which) rightclick = (e.which == 3);
    else if (e.button) rightclick = (e.button == 2);
    if (rightclick != false)
    {
    if (!e) var e = window.event;
    ny=e.clientY;
    lytemp = ly+50;
    if (ny>lytemp)
    {
    document.getElementById('altnav').style.display = "block";
    document.getElementById('altnav').style.left = e.clientX + 2;
    document.getElementById('altnav').style.top = ly+2;
    window.status = "down menu";
    document.oncontextmenu = fakecontext;
    timerID = setTimeout("document.getElementById('altnav').style.display = 'none';", 5000);
    }
    }
    ly = null;
    ny = null;
    }
    function fakecontext(){return false;};
    </script>

    And the menu div to place inside the body tag. Edit this to act as the menu you would like. Remember that you can access the event.target if you want to have the menu dynamicaly effect things based on whats clicked.

    <div style="display:none" class="expanded" id="altnav">
    <a href="http://www.news.com" class="expanda" id="navlink"><div style="float:right;width:20px;text-align:left;">Ctrl+?</div>Option 1</a>
    <a href="http://www.cnn.com" class="expanda" id="navlink"><div style="float:right;width:20px;text-align:left;">Ctrl+?</div>Option 2</a>
    </div>
    Last edited by SlySecretSpy; 01-08-2004 at 06:51 PM.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Demo?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    New Coder
    Join Date
    Nov 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://portalaska.com/mouse.html there is an example page.

    I have modified the code a bit.

    Just save http://portalaska.com/altright.js anywhere. Then place...

    <script src="altright.js"></script> with the src pointing to the globabl address.

    The new code is...

    document.write("<style>");document.write(".expanded {position:absolute;padding:1px;font:Arial, Helvetica, sans-serif;font-size:11px;text-align:left;background-color:#D4D0C8;width:150px;border-left :2px solid #FFFFFF;border-top :2px solid #FFFFFF;border-right :2px solid #999999;border-bottom : 2px solid #999999;}");
    document.write("a.expanda {padding-left:15px;padding-right:15px;display:block;text-decoration:none;color:#000000;}");
    document.write("a.expanda:hover {background-color:#003366;color:#FFFFFF;}");
    document.write("</style>");
    document.write("<div style=\"display:none\" class=\"expanded\" id=\"altnav\">");
    document.write("<a href=\"http://www.news.com\" class=\"expanda\" id=\"navlink\"><div style='float:right;width:20px;text-align:left'>Ctrl+?</div>Option 1</a>");
    document.write("<a href=\"http://www.cnn.com\" class=\"expanda\" id=\"navlink\"><div style='float:right;width:20px;text-align:left'>Ctrl+?</div>Option 2</a>");
    document.write("</div>");
    document.oncontextmenu = null;
    document.onmousedown = doDown;
    document.onmouseup = doUp;
    var timerID = "null";
    var ly;
    var ny;
    var targ;
    function doDown(e)
    {
    clearTimeout(timerID);
    document.oncontextmenu = null;
    var rightclick;
    if (!e) e = window.event
    if (e.which) rightclick = (e.which == 3);
    else if (e.button) rightclick = (e.button == 2);
    try
    {
    if (e.target) targ = e.target.getAttribute('id');
    else if (e.srcElement) targ = e.srcElement.getAttribute('id');
    if (targ != "navlink") {document.getElementById('altnav').style.display = 'none';}
    }
    catch(e)
    {
    document.getElementById('altnav').style.display = 'none';
    }
    if (rightclick != false)
    {
    ly = e.clientY;
    }
    return false;
    }

    function doUp(e)
    {
    var rightclick;
    if (!e) e = window.event
    if (e.which) rightclick = (e.which == 3);
    else if (e.button) rightclick = (e.button == 2);
    if (rightclick != false)
    {
    if (!e) var e = window.event;
    ny=e.clientY;
    lytemp = ly+50;
    if (ny>lytemp)
    {
    document.getElementById('altnav').style.display = "block";
    document.getElementById('altnav').style.left = e.clientX + 2;
    document.getElementById('altnav').style.top = ly+2;
    window.status = "down menu";
    document.oncontextmenu = fakecontext;
    timerID = setTimeout("document.getElementById('altnav').style.display = 'none';", 5000);
    }
    }
    ly = null;
    ny = null;
    }
    function fakecontext(){return false;};

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's neat - I like that

    I'm trying to think if there are any accessibility issues, but nothing springs to mind ... the regular context menu is still there, and the minimum drag distance is enough that you're unlikely to do it by accident.

    Nice one ]

    btw - have you thought of using CSS system colors - get the menu to fit the user's GUI - http://www.w3.org/TR/REC-CSS2/ui.html#system-colors
    Last edited by brothercake; 01-09-2004 at 06:24 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    New Coder
    Join Date
    Nov 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think my biggest step is to make some sort of configuration setup to generate the actualy menu div. So you can just fill in the blanks.

    BTW: My next use for this is a right-click-replace that substitutes the context menu with the same features, but also has places for advertising. Coding it for a buddy to use on his free hosting provider. It can insert at the same time as the banner ad.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is that possible though - can you re-create all the functions of the default context menu from javascript?

    I like what you're doing now because it's non-intrusive - I wouldn't wanna change that if I were you.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #7
    New Coder
    Join Date
    Nov 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The recreation script is a seperate one. This non-intrusive one is mostly done. Unless people can think of other features. I don;t really have a use for it, was just dinking around, so it pretty much dies after this thread goes away.

    Mozilla has a lot of limitations when it comes to recreating cut/copy/paste but the rest of the features are pretty easy.

    MSIE can do it all pretty easy, but its not very conforming.

    I think I'll just deliver the advertising menu to msie users and just have a little floating add to the right of the normal context menu for mozilla users.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, your choice but I must admit you've lost me there mate.

    I liked the non-intrusive one; I don't think you should try to replace the normal context menu with your own reconstructed version - remember that the menu varies between browser versions and OSs, and in any case it's user-customisable - you can't know what's in a person's menu, all you can do is recreate the one that you see.

    It's great to add to a user's browsing toolset, but I don't believe you should ever assume to remove, replace or modify the toolset they already have.
    Last edited by brothercake; 01-12-2004 at 11:55 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #9
    New Coder
    Join Date
    Nov 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The replacement one would be specificaly for a friend of mines free hosting provider. I would add small advertisements to the right click for him to generate revenue.

    It would be offensive to do it on a business site, but on a free hosting provider he needs to get as much advertisments as he can with out having to use pop-ups (which are now blocked anyways).

  • #10
    New Coder
    Join Date
    Feb 2003
    Location
    Miami. Fl.
    Posts
    47
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Hidden/Alternate Menu

    YEAH ..........

    JAVASCRIPT RULES !!!!!!!!!!!!!!!!!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •