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

**SMTS** · 08-18-2011 01:58 PM

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

**hyperX** · 08-18-2011 07:45 PM

There doesn't seem to be a link at the bottom of that page you sent us to.

**SMTS** · 08-18-2011 09:23 PM

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.

**jalarie** · 08-20-2011 02:36 PM

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/

**Frank62** · 08-21-2011 05:23 AM

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.

**aj_nsc** · 08-21-2011 04:02 PM

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>

**SMTS** · 08-21-2011 04:40 PM

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;
}
}

**Frank62** · 08-21-2011 04:51 PM

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.

**SMTS** · 08-21-2011 05:13 PM

Thankyou Frank62. A agree. It should work in FireFox.

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

**Frank62** · 08-21-2011 06:50 PM

It should work in FireFox.

It doesn't in FF 4, at least not the online version.

**SMTS** · 08-22-2011 09:56 PM

Originally Posted by Frank62

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.

**Frank62** · 08-22-2011 10:50 PM

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.)

**SMTS** · 08-24-2011 01:38 PM

Good suggestion. I might take it there...

Thankyou for all of the help

**Frank62** · 08-24-2011 02:05 PM

Please let me know how if you get it working in FF, either in this thread or by PM. Good luck.

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

Thread Tools

Display

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

Thankyou

it should...

Thankyou.

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions