www.webdeveloper.com
Results 1 to 14 of 14

Thread: [RESOLVED] Right-Click Menu Issue, Want CSS answer NOT Javascript

  1. #1
    Join Date
    Apr 2010
    Posts
    121

    resolved [RESOLVED] Right-Click Menu Issue, Want CSS answer NOT Javascript

    While I am willing to use Javascript, I REALLY want to use CSS.
    Now... On to my issue.

    I have created a little Right-Click Menu, it is available Here (Click the link at the bottom of the page.)

    Here's the problem: The CSS hover effect works well, when I hover over a blank part of the menu background. However, when I put my mouse over the text that is "on top" of the menu background, the menu CSS hover effect is deactivated because I have my mouse over a different element.

    I am aware that there is not any CSS parent selector (this is true right?), but am sure there must be a creative way to solve this.

    Any Ideas? Here's the full code. (note that it differs from the code found on the online example because the Javascript is included here. In the online example, the javascript is an external file.

    HTML Code:
    <!DOCTYPE html>
    <head>
    <style>
    .r_left-m {
    background-image:url('images/bl.jpg');
    height:26px;
    width:34px;
    position:absolute;
    border-left:1px solid gray;
    }
    .r_left-t {
    background-image:url('images/bl.jpg');
    height:26px;
    width:34px;
    position:absolute;
    border-top:1px solid gray;
    border-left:1px solid gray;
    }
    .r_left-b {
    background-image:url('images/bl.jpg');
    height:26px;
    width:34px;
    position:absolute;
    border-bottom:1px solid gray;
    border-left:1px solid gray;
    }
    .r_middle-m {
    background-image:url('images/bt.jpg');
    background-repeat:repeat-x;
    height:26px;
    width:150px;
    position:absolute;
    margin-left:34px;
    }
    .r_middle-t {
    background-image:url('images/bt.jpg');
    background-repeat:repeat-x;
    height:26px;
    width:150px;
    position:absolute;
    margin-left:34px;
    border-top:1px solid gray;
    }
    .r_middle-b {
    background-image:url('images/bt.jpg');
    background-repeat:repeat-x;
    height:26px;
    width:150px;
    position:absolute;
    margin-left:34px;
    border-bottom:1px solid gray;
    }
    .r_right-m {
    background-image:url('images/br.jpg');
    height:26px;
    width:34px;
    position:absolute;
    margin-left:184px;
    }
    .r_right-b {
    background-image:url('images/br.jpg');
    height:26px;
    width:34px;
    position:absolute;
    margin-left:184px;
    border-bottom:1px solid gray; 
    border-right:1px solid gray;
    }
    .r_right-t {
    background-image:url('images/br.jpg');
    height:26px;
    width:34px;
    position:absolute;
    margin-left:184px;
    border-top:1px solid gray; 
    border-right:1px solid gray;
    }
    .menuitem:hover .r_left-t {background-image:url('images/blh.jpg');height:26px;width:34px;}
    .menuitem:hover .r_left-b {background-image:url('images/blh.jpg');height:26px;width:34px;}
    .menuitem:hover .r_left-m {background-image:url('images/blh.jpg');height:26px;width:34px;}
    .menuitem:hover .r_middle-t {background-image:url('images/bth.jpg');height:26px;width:150px;position:absolute;background-repeat:repeat-x;}
    .menuitem:hover .r_middle-b {background-image:url('images/bth.jpg');height:26px;width:150px;position:absolute;background-repeat:repeat-x;}
    .menuitem:hover .r_middle-m {background-image:url('images/bth.jpg');height:26px;width:150px;position:absolute;background-repeat:repeat-x;}
    .menuitem:hover .r_right-t {background-image:url('images/brh.jpg');height:26px;width:34px;}
    .menuitem:hover .r_right-b {background-image:url('images/brh.jpg');height:26px;width:34px;}
    .menuitem:hover .r_right-m {background-image:url('images/brh.jpg');height:26px;width:34px;}
    .mtxt {
    position:absolute;
    z-index:999;
    vertical-align: middle;
    margin-left:34px;
    height:26px;
    line-height:26px;
    cursor:default;
    min-width:100px;
    }
    </style>
    <script type="text/Javascript">
    document.onclick=function() { hp(); };
    function context(event,thepop) {
    var ev=ev || window.event;
    var pop=document.getElementById(thepop);
    var x,y
    
    if (document.all) { //for ie
    x=event.clientX + document.body.scrollLeft;
    y=event.clientY + document.body.scrollTop;
    alert("hi")
    } else {
    x=event.pageX;
    y=event.pageY;
    }
    pop.style.left=(x+1)+"px";
    pop.style.top=(y+1)+"px";
    pop.style.display="block";
    return false;
    }
    function hp() {
    document.getElementById('mymenu').style.display = 'none';
    }
    document.oncontextmenu=function() { context(window.event,'mymenu'); return false; };
    </script>
    </head>
    <body>
      <div id="mymenu" style="display:none;position:absolute;">
        <div class="menuitem" onclick="hp();">
          <div class="r_left-t r_left-b"></div><div class="r_middle-t r_middle-b"></div><div class="r_right-t r_right-b"></div></div>
          <div class="mtxt">
            My Menu Item
          </div>
        </div>
      </div>
    </body>
    </html>
    I deeply appreciate any useful input, although I may not agree with it.
    Now, hopefully I can get this project off the ground!

    ~Charles

  2. #2
    Join Date
    Aug 2011
    Posts
    6
    There doesn't seem to be a link at the bottom of that page you sent us to.

  3. #3
    Join Date
    Apr 2010
    Posts
    121
    Sorry. I had the website up for beta testing. The link is okay now. It's near the bottom of the page under "Find an Experiment".

    My Bad. I should have thought of it. It worked okay on my end because my IP was allowed for testing.

  4. #4
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    594
    You have a few coding errors. Fixing them might make it easier to find an answer to your problem. See them here:
    http://validator.w3.org/check?charse...m/Experiments/
    Please give me a hand at http://www.gofundme.com/bkzr98.

  5. #5
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    270
    Here's the problem: (etc.)
    I've read your description, visited your page and clicked the link at the bottom, but I still have no idea what the problem is and what you want to achieve. A right-click menu? What is that? A menu that appears when one clicks it with the right mouse button? And that's just for starters.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  6. #6
    Join Date
    Dec 2005
    Posts
    2,984
    This probably won't directly answer the question as asked, but i think you're crazy to be using that kind of markup anyway. All those empty div's just give IE7 and 8 rounded corners......stop being silly. Use the border-radius property and leave IE7/8 users without rounded corners. That way, you're markup then becomes infinitely cleaner:

    Code:
    <ul id="mymenu">
     <li><a href="#">My Menu Item</a></li>
    </ul>
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  7. #7
    Join Date
    Apr 2010
    Posts
    121

    Thankyou

    Code:
    function reply() {
    Thankyou for the helpful replies.
    I have solved the problem. I have used a semi-css semi-javascript solution to the problem, making javascript load a css class onmouseover.\

    Code:
    if(rantBecauseOf('aj_nsc') == true) {
    Oh, and the corners are from a image file. The divs have a background image. Once you get into positioning, gradient, transparency, AND rounded corners, you have so many browser compatibility issues that you might as well throw away firefox, opera, IE, and keep only Chrome. OH WAIT... I forgot. I cant do that because chrome only has 28% of the browser share. I just lost by other 72% of my users.

    BUT - I could include a buttload of CSS each line allowing for part compatibility with 1 more browser! Now, congratulations, I have 400 lines of CSS instead of 200. How will that affect loading time? Hm? DID YOU KNOW THERE ARE STILL PEOPLE USING DIAL-UP!?! Come on, people.

    Now we've got another browser to worry about. It's IE9. Finally catching onto the whole simple-slick user interface, but not web standards! WHO DO THEY THINK THEY ARE? Thank God their not W3C. It's like the new IE6. Because when IE10 comes out, they're gonna fix all of the kinks in IE9 (I hope) ... (OR DO I?)... because when they fix all of the kinks, the kinks are still gonna be in IE9.

    Code:
    //AW MAN!
    This means I will need to add compatibility for another browser. Speaking of IE6, did you know that a whopping 2.3% of people still use IE6. Wait... that's not very big. Nevermind.

    OR...

    I could just add 3 divs and an image background. CAN YOU HANDLE THAT? THREE DIVS.

    Code:
    if(document.THREEDIVS.length > 3) {
    CAN'T HANDLE.
    Code:
    } else {
    alert("WHAT's YOUR PROBLEM?\n\nIf you have a proble, click OK or close this");
    document.you.eatFace = true;
    CAN HANDLE.
    Code:
    }
    I think you can handle that.

    Code:
    document.LESSON = "Don't EVER get me started on compatibility issues. I hate how things are being handled by web browsers.";
    
    return false;
    } else {
    Thankyou for your help.
    Code:
    return true;
    }
    }
    Last edited by SMTS; 08-21-2011 at 05:11 PM.

  8. #8
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    270
    A menu that appears when one clicks it with the right mouse button?
    I now see that it indeed is just that, having opened the page in IE(8). And I must say, that might come in handy. A pity however, that it doesn't work in FF.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  9. #9
    Join Date
    Apr 2010
    Posts
    121
    Thankyou Frank62. A agree. It should work in FireFox.

    Your replies have been short but meaningful. (wow i'm sounding like my mother)

  10. #10
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    270
    It should work in FireFox.
    It doesn't in FF 4, at least not the online version.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  11. #11
    Join Date
    Apr 2010
    Posts
    121

    it should...

    Quote Originally Posted by Frank62 View Post
    It doesn't in FF 4, at least not the online version.
    Sorry, I meant it *should*. (as in I wish it did, and I need to fix it because it should)

    I apologize for the misunderstanding.

    It works in all other browsers, though.

  12. #12
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    270
    I apologize for the misunderstanding.
    Which in part is my own fault.

    Did you try other forums, that of javascript or PHP specialists? Maybe they know a work-around so that it does work in FF, too? (PHP specialists generally know a lot about javascript as well.)
    Last edited by Frank62; 08-22-2011 at 10:52 PM.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  13. #13
    Join Date
    Apr 2010
    Posts
    121

    resolved Thankyou.

    Good suggestion. I might take it there...

    Thankyou for all of the help
    "If life gives you lemons, make delicious chocolate baked goods and have the world wonder how you did it." ~Anna McNutt

  14. #14
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    270
    Please let me know how if you get it working in FF, either in this thread or by PM. Good luck.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles