Menus [Archive] - Dynamic Drive Forums

pcbrainbuster

02-21-2007, 10:35 PM

Lol,

Well I really thought i knew nothing i just did a few tests and there comin out just fine but still I have a few issues one thing is that I can't do seem to position it correctly i mean that i want it to come just under the main text itself but i do not know how to do that everything is great though - here's the script -

<html>
<head>
<body>
<script>
function asd() {
document.getElementById('menu1').style.visibility="visible"
document.getElementById('menu1').style.left=
document.getElementById('menu1').style.top=
}
</script>
<div align="center">
<span onmouseover="asd()">Search Engines</span>
<span id="menu1" style="visibility: hidden; position: absolute;"><b>Menu</b><br><i><a href="http://www.google.com">Google</a></i><br><i><a href="http://www.yahoo.co.uk">Yahoo!</a></i></span>
</div>
</body>
</head>
</html>

I realize that i can use the values 100 or whatever in the doument.getElementById(...).style.left/top and that the document part can be a variable but this was just a test and it is lame but a test is test right?

So I just need to know how i will do the position part
Thanks for ye time:)

BLiZZaRD

02-21-2007, 10:54 PM

Well, the way the web is going today you would want to use CSS for styling and positioning.

As your code stand at the moment it won't validate (if you are concerned with that sort of thing.

However, you can add style to your tags (not valid nor recommended by me :) )

something like:

<span id="menu1" style="visibility: hidden; text-align: left; width: 100%; padding: 0; margin: 0; position: absolute; top: 0; left: 0">

and so on and so forth. Of course, as stated these methods are depreciated.

Check HERE (http://www.w3.org/TR/html401/present/graphics.html#h-15.1.2) for more on alignment and floating.

pcbrainbuster

02-21-2007, 11:02 PM

Yup,

Just before you replied I found out how to do some positioning through what i thought was going to work and i succeeded hahaha but what do you mean by validation it works correctly did you by any chance mean tht it is not correctly structured and if so then in proper structure really needed ???
I wonder (???)

BLiZZaRD

02-21-2007, 11:21 PM

Check out the consortium's reasons for valid mark up (http://validator.w3.org/docs/why.html)

pcbrainbuster

02-21-2007, 11:30 PM

Yup I have decided I don't care LOL,

But anyway I have pretty gotten the concept of menus I only didn't understand because of all the hard scripts out there but now it's just to easy. But to fininsh of this topic I need one more answer some people are able to customize the right click menu i wish to do the same i can desighn the menu but can't manke it the context menu here's the script anyway -

<script>
function sm() {
document.getElementById('menu2').style.visibility="visible"
document.getElementById('menu2').style.left=event.clientX
document.getElementById('menu2').style.top=event.clientY
}
</script>
<span id="menu2" style="position: absolute; visibility: hidden;"><b>My Menu!</b><br><br><b>Search Engines</b><br><a href="http://www.google.com">Google</a><br><a href="http://www.yahoo.co.uk">Yahoo!</a><br><br><b>Games Sites</b><br><a href="http://www.miniclip.com">Miniclip</a><br><a href="http://www.mofunzone.com">Mofunzone</a><br><a href="http://www.freeonlinegames.com">FreeOnlineGames</a></span>

I have realized there is no mouseout event but its alright - this is just a test...

So ummmm yeh please help me :)
Thanks !!!

BLiZZaRD

02-21-2007, 11:41 PM

The context menu is a completely different beast.

check out this link (http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm) for how one is changed, and you can get your further ideas from that :D

pcbrainbuster

02-21-2007, 11:51 PM

Yeah well I tried over and over again but I just can't seem to get what is actuall making it connect to the context menu.

Is there anyway you can help me ??? :)

BLiZZaRD

02-21-2007, 11:52 PM

hmmm... not unless you want to do it in Flash :D beyond that I don't know.

I know it is possible with javascript, but I couldn't tell you how.

Let me look around

pcbrainbuster

02-21-2007, 11:55 PM

Well atleast you tried right ???
But anyway Thanks alot,
I still will be visiting this area for a few more days and i will be here for about a 30 and hour :)

pcbrainbuster

02-22-2007, 12:20 AM

So any good results yet?

BLiZZaRD

02-22-2007, 05:01 PM

Yeah WebMonkey to the rescue (http://www.webmonkey.com/webmonkey/05/10/index4a_page5.html?tw=programming)

Should at least give you the idea of how it works, you can do your own specialties with it after you have the basics.

pcbrainbuster

02-22-2007, 06:55 PM

WOW,

I am as dumb as a pickle...:(

I still can't work it out properly:):):)

By any chance did you get it???

pcbrainbuster

02-22-2007, 07:20 PM

Yes I beat the PICKLE - humans RULE !!!

Ok now seriously all you do in the script is

<script>
function showmenu() {

}

function hidemenu() {

}

function removeoriginal()
{ return false; }

document.oncontextmenu = removeoriginal
</script>

And that's simply it the last part, that last part removes the original but you can still use the oncontextmenu event for your menu script!!!:)

Well I guess this topic is over.

Thanks for ALL your help!!!:)

BLiZZaRD

02-22-2007, 07:58 PM

Good job!

pcbrainbuster

02-22-2007, 08:06 PM

Actually I was wrong so there is some time left- lol -
Now I have a problem were i can completely set the menu up along with the scripts but what happens is that in my menu whenever i go into a field that was created with the <br> tag it turns off the menu !!!

The script -

<html>
<head>
<style>
#menu1 {background: gray}
</style>
<body text="yellow" bgcolor="black" alink="yellow" vlink="yellow" link="yellow" oncontextmenu="sm()">
<script>
function asd() {
document.getElementById('menu1').style.visibility="visible"
}

function dsa() {
document.getElementById('menu1').style.visibility="hidden"
}
</script>
<div align="center">
<span onmouseover="asd()" id="main" onmouseout="dsa()">Search Engines</span><br>
<span id="menu1" onmouseover="asd()" onmouseout="dsa()" style="padding: 1; visibility: hidden; position: absolute;"><b>Menu</b><br><i><a href="http://www.google.com">Google</a></i><br><i><a href="http://www.yahoo.co.uk">Yahoo!</a></i></span>

<script>
function sm() {
document.getElementById('menu2').style.visibility="visible"
document.getElementById('menu2').style.left=event.clientX
document.getElementById('menu2').style.top=event.clientY
}

function hide() {
document.getElementById('menu2').style.visibility="hidden"
}

function hideoriginal()
{ return false; }

document.oncontextmenu= hideoriginal
</script>
<span id="menu2" onmouseout="hide()" style="position: absolute; visibility: hidden;"><b>Custom Menu!</b><br><br><b>Search Engines</b><br><a href="http://www.google.com">Google</a><br><a href="http://www.yahoo.co.uk">Yahoo!</a><br><br><b>Games Sites</b><br><a href="http://www.miniclip.com">Miniclip</a><br><a href="http://www.mofunzone.com">Mofunzone</a><br><a href="http://www.freeonlinegames.com">FreeOnlineGames</a></span>

</div>
</body>
</head>
</html>

Just copy and paste the script into a text file and change the extension to .htm to test it out.

If you did check it out then as you should be able to see that whenever you go into the <br> tags area or go round the menu into the text the menu turns off...

Can anyone please tell me what went wrong???

BLiZZaRD

02-22-2007, 08:37 PM

Well, changing

span id="menu2" onmouseout="hide()"

to

span id="menu2" onmousedown="hide()"

Will keep it up until you click inside the menu NOT on a link.

You can play around with that from there :)

pcbrainbuster

02-22-2007, 08:51 PM

Lol it made it worse:)

What happend is that links no longer worked, the menu stayed there until i click inside it (I need it to go if the mouse goes out the menu) and that's pretty much what happend.

So any ideas:)

BLiZZaRD

02-22-2007, 09:09 PM

oops! Sorry about that. here is your working script:

<html>
<head>
<style>
#menu1 {background: gray}
</style>
<body text="yellow" bgcolor="black" alink="yellow" vlink="yellow" link="yellow" oncontextmenu="sm()">
<script>
function asd() {
document.getElementById('menu1').style.visibility="visible"
}

function dsa() {
document.getElementById('menu1').style.visibility="hidden"
}
</script>
<div align="center">
<span onmouseover="asd()" id="main" onmouseout="dsa()">Search Engines</span><br>
<span id="menu1" onmouseover="asd()" onmouseout="dsa()" style="padding: 1; visibility: hidden; position: absolute;"><b>Menu</b><br><i><a href="http://www.google.com">Google</a></i><br><i><a href="http://www.yahoo.co.uk">Yahoo!</a></i></span>

<script>
function sm() {
document.getElementById('menu2').style.visibility="visible"
document.getElementById('menu2').style.left=event.clientX
document.getElementById('menu2').style.top=event.clientY
}

function hide() {
document.getElementById('menu2').style.visibility="hidden"
}

function hideoriginal()
{ return false; }

document.oncontextmenu= hideoriginal
</script>

<span id="menu2" onmouseover="sm()" onmouseout="hide()" style="position: absolute; visibility: hidden;"><b>Custom Menu!</b><br><br><b>Search Engines</b><br><a href="http://www.google.com">Google</a><br><a href="http://www.yahoo.co.uk">Yahoo!</a><br><br><b>Games Sites</b><br><a href="http://www.miniclip.com">Miniclip</a><br><a href="http://www.mofunzone.com">Mofunzone</a><br><a href="http://www.freeonlinegames.com">FreeOnlineGames</a></span>

</div>
</body>
</head>
</html>

Needed to add the onmouseover="sm()" to the script there :D

mburt

02-22-2007, 09:41 PM

Wow, works surprisingly well in IE and FireFox (of course, if you turn of JS it doesn't work). Keep up the good work. :)

pcbrainbuster

02-22-2007, 09:57 PM

What works suprisingly well in IE and FF ???

And again for some reason something goes wrong but through my tests i have found out that the <br> tag is the culprit but unfortunalty it is a needed sucker I guess (apparently the <br> tag counts as an open "outside" space if you know what i mean)...

What happens with the above script is that as soon as you put your mouse on the menu it goes a few pixels ahead put it in the <br> tag and it shuts off...

I simply will try some more tests using &nbsp then if that aint gonna work i mght start another test with the <hr> tag...

Then I will start part 2 to this topic if all tests here are successfull in this topic though about the dissolve, fade in... Effects
But the this topic hasn't died yet, well not untill the fat lady jumps up and down three time rotating on a conveyor belt at 336MPH atleast:)

BLiZZaRD

02-22-2007, 10:03 PM

hmmm.. it worked on my testing, and only disappeared when I took the mouse out of the area of the menu....

pcbrainbuster

02-22-2007, 10:23 PM

HMMMMMM, I wonder what's possibily wrong.....
I guess I will do another test on my desktop computer to see if it's my end it's end thats not quite working but most likely mine...:(

Lol I just realized your location :)

mburt

02-22-2007, 10:49 PM

When you mouse over the object it keeps refreshing what "event.clientX" and "event.clientY" are. So it tries to move it down.
BTW, event.clientX/Y only work in IE. Set "e" in your function:

function sm(e) {
var ev = event||e
document.getElementById('menu2').style.visibility="visible"
document.getElementById('menu2').style.left=ev.clientX
document.getElementById('menu2').style.top=ev.clientY
}

pcbrainbuster

02-22-2007, 10:52 PM

Hello Mike,

I already new about the refreshing part and everything except the e in the () part please explain that further (why is it needed, does it have other uses, the logic behind it...) while i test out the script....

mburt

02-22-2007, 10:56 PM

Firefox doesn't read "event" as Internet Explorer does, so it uses the argument "e". It basically means "this" or in IE language "event.srcElement", so if you click on the body that's the element it is referring to when compared to the <body> tag.

pcbrainbuster

02-22-2007, 10:57 PM

Ohhh man:(,

You guessed it no results...

But about the e in () part - is anything put between that considered a variable ?

Why is it that when you set document.(event)=(function) you remove the brackets there (of the function)?

And a few more things i am using ie7 as i prefer that (opinion...) but also please go on further about event.srcElement

Thanks :)

mburt

02-22-2007, 11:31 PM

Oh boy... event.srcElement basically refers to the element when called by an event handler. Example:

<span onclick="alert(event.srcElement.className)" class="myclass">alert my class</span>
Instead of the referring to an object with an ID or name, you can call it with event.srcElement.

pcbrainbuster

02-22-2007, 11:34 PM

Ummmm still very confused .....
LOL

mburt

02-23-2007, 12:05 AM

Believe me... it's not important, it being an IE only hack. Try learning the more traditional way of doing things :p

pcbrainbuster

02-23-2007, 07:40 AM

Still confused about that what you mean by traditional and IE only hack parts- lol:)

BLiZZaRD

02-23-2007, 05:23 PM

He means that when coding a website for cross browser support, you will have to add extra things in the code you normally wouldn't have to add just to get it to work correctly in IE. This is become known as an IE "hack"

Basically you are hacking the code to bits and piecing it together to force IE to understand it. Not "hack" like a Hollywood computer guy trying to get into Microsoft's databases from your laptop in a dark corner.

NOT using the IE hacks is called the "traditional way" Doing it the way it should be done and worrying about how IE responds to it after you are done.

mburt

02-23-2007, 07:08 PM

Hack and crack are often confused. A hack could be an edit or change for your benefit to a program. The way the rest of the world sees a hack is as some horrible act of crime by getting into people harddrives, and such.

pcbrainbuster

02-23-2007, 07:24 PM

Hmm i see thanks for the help :)

But now back to buisness :)

So why does that issue happen???
(hehehhehehe)

And I can tell you how to make a html applications in seconds without any compiling if you need to know
it doesn't bring up the anoyying for your saftey javascript... has been blocked message it is treated as a real proper application and supports ALL HTML, Javascript... CSS.............:)

mburt

02-23-2007, 07:29 PM

Define "that issue". There has been several :)

pcbrainbuster

02-23-2007, 07:50 PM

HEY WHAT YOU MEAN THERE HAVE BEEN SO MANY ISSUES !!!:(

Ok the problem is that my menu works completely fine except that whenver the mouse goes over the <br>'s i make the menu turns off...

So do you have a solution??:)

-------
NOTES
-------
1) The <br> tag that is being talked about above is in the menu (please see the code in the last page)

BLiZZaRD

02-23-2007, 07:51 PM

Solution? Yeah.. quit using IE heh. :)

mburt

02-23-2007, 07:52 PM

There are scripts on the web very similar to this, and browser compliant. The way you are doing it now just isn't working, you may have to rethink your idea.

BLiZZaRD

02-23-2007, 07:55 PM

Or hack the one I made to work with your version of IE (although it tested fine on all my versions....)

pcbrainbuster

02-23-2007, 08:01 PM

Hmmmm I see but ummm Blizzzard I am stickin to IE :)

The simple reason on why I do not know alot of things is because I never went to what you may call "HTML" school instead I used the web to help me, and i have to say it is going great but you can not actually ask a person directly what i am doing wrong unlike in a school if you know what i mean and to tell the truth i am 13 lol (seriously that is no lie)...

And what do you mean by rethinking my idea?do you mean to use a "different approach" ?

pcbrainbuster

02-23-2007, 08:08 PM

And i do not exactly no how to hack so what do i need to do???

Can't you just use the if else statements in conjuction with the web browser detection script to see what browser the user is using and set the script???

BLiZZaRD

02-23-2007, 08:08 PM

Yes, come up with a new approach.

Age is a number, and 13 is old by today's standards, really. Most "master coders" (not referring to the DD post count name) made their first script/game/application around 8 or 9.

These people also (myself included here) taught themselves instead of taking a class here and there. Personally I think this is the best way.

Regardless, making something on the web should be for the web, not just for IE. If you have an idea, and you try it and it doesn't work, fix it. If you can't fix it, try a brand new approach.

pcbrainbuster

02-23-2007, 08:10 PM

Hmmm yeah me to / i agree....:)

So now what do you recommend i do ???

BLiZZaRD

02-23-2007, 08:14 PM

First... clear your cache (I will take it you know how to do this).

After that, delete any online examples you have uploaded, (wouldn't hurt to do this first, THEN clear cache)

Then we start with the last "almost" working code. (the full one I posted last page)

Test it again with a fresh upload.

Then see what is wrong for sure, and we will go from there.

pcbrainbuster

02-23-2007, 08:25 PM

Ok blizzard,

I cleared the cache backed-up then delected my uploaded files and put the file there and as before the results were the same, the event.clientY/X refresh themselves...

And ummmmm I was not using a server in the first place - instead i was pretty using my computer but i tride all methods mensioned and sadly they all failed...

But i do not know what's wrong with the br tag removing that fixes the problem...

So the next step is...:)

BLiZZaRD

02-23-2007, 09:19 PM

http://cleverwasteoftime.com/blizzcorner/testing.html

Try it here, see if you have the same issues. Then let me know :)

pcbrainbuster

02-24-2007, 03:33 PM

Yup the same problem :(

But this time i am going to remove what is actually causing the roblem and then i will report back :)

BLiZZaRD

02-24-2007, 03:37 PM

Okay, tested in IE7 and I see what you mean now... ewewww I hate IE.

It also isn't working how you want in FF either then, as the CM only shows up in one spot.

Let's see if we can mesh the two together to get a cross-browser, working edition.

Don't worry, I need a break today from my grotesque pixel art trials...

(any artists out there that want to give me a hand? :) )

pcbrainbuster

02-24-2007, 03:50 PM

Lol :),

I just found out that the br tag was not it at all it is the onmouseout part in the menu, it causes the menu to shut of when the mouse goes on a new line in the menu

BLiZZaRD

02-24-2007, 03:56 PM

But only in IE, you still have issues with other browsers.

pcbrainbuster

02-24-2007, 04:00 PM

Yeah, well i pretty much realized that but right now i am going to focus on ie then slowly others i've got more than enough time :)...

BLiZZaRD

02-24-2007, 04:01 PM

Okay. Your ball of fun. :D

pcbrainbuster

02-24-2007, 04:02 PM

My ball of fun???

BLiZZaRD

02-24-2007, 07:00 PM

Well, it isn't my ball, I was just playing with it.

pcbrainbuster

02-24-2007, 07:44 PM

Lol i see :),

Well what sort of scripter are you really cross-browser, single-browser...
Currently i am single-browser but will be working on it:)

Well anyway so have you got any idea on my issue?

In the mean while i will simply look at other scripts and try ro understand...

BLiZZaRD

02-24-2007, 07:59 PM

Cross-browser, multi OS. You have to be, unless you only want 30% of those on the internet to look at your stuff.

Looking at other's work is a great way to learn, and there are some rather good scripts out there as well.

pcbrainbuster

02-24-2007, 11:46 PM

Lol i see :),
Well sometimes i could give you some great animation scripts just ask - but they all have some timeout issues just see the topic "why does my script repeat only once???" and you will probably see what i mean...

pcbrainbuster

02-25-2007, 10:24 PM

Uhhhh, what happend to blizzard?

BLiZZaRD

02-26-2007, 03:37 AM

Life. :D

Been a bit down with a nasty gum infection from a cut in my mouth. I am still around though.

Not sure I will be a whole lot of help with those time out issues though as I work backwards from you. I make all my stuff work in browsers that do it right, THEN worry about the IE Hacks. If I get the time I will try and see what I can do, though :)

pcbrainbuster

02-26-2007, 07:24 AM

OK I see:)
But is the nasty gum infection thingy happening to you really:confused:

BLiZZaRD

02-26-2007, 02:37 PM

Yes, it is. Should be almost over though, probably only a few more days of my teeth looking like they were put in by a kindergartener. The swelling is going down more and more every day :)

pcbrainbuster

02-26-2007, 04:10 PM

Ouch,

Does it hurt and how did you get it cut :confused:
And was there alot of blood?

BLiZZaRD

02-26-2007, 04:18 PM

Hurts like hell. Hmmm... don't know how to describe it, basically what has happened is all my nice little perfect teeth set in the nice perfect gums (and it took 9 years, 3 surgeries and a replacement titanium lower jaw to say that) the infection caused swelling to such extremes that my teeth got pushed into places and positions they weren't used too.

Take a fork, and gently push on one of your front bottom teeth, so that it slowly pushes it to the side and in contact with the tooth next to it. Do this until you can't stand the pain anymore. Now imagine all your lower teeth doing this 24 hours a day and nothing you can do to stop it.

But, it's getting better :)

P.S. PLEASE do NOT try the above mentioned example with the fork - anyone - this is both dangerous, and painful. You could result in accidental cutting, swelling, or even broken teeth. It was just an example.

Oh, and there was no blood, there isn't a lot of blood in your mouth as it is, mostly capillaries, but no arteries or veins, it's just so dirty in there that infection is on the verge every day :)

I would love to tell you that it was from being in a bar fight and "you should see the other guy" but I wasn't and the truth is I don't know how I got cut. Most likely a tortilla chip or something.

chechu

02-26-2007, 04:25 PM

To give you more ideas (and confuse you more ?),
have a look at the DD CSS library: http://www.dynamicdrive.com/style/csslibrary/all/

pcbrainbuster

02-26-2007, 05:35 PM

I feel sorry for you man very sorry :) To blizzard
And thanks to Chechu , but you understood it wrong, what i need is not a displayed menu but a context menu :)

BLiZZaRD

02-26-2007, 06:26 PM

Thanks for the concern. I appreciate it, really. But no worries, I can still type, and I am awake and walking around. I have had worse (much worse) this minor pain is really nothing compared.

(You want pain? Try having a 22 hour surgury where they cut all your teeth out in groups of 4, use small doses of nitro-glycerin to basically "explode" the remainder of your lower jaw, then replace that with a titanium plate. Only to go back and remount all your teeth. -- They wouldn't give me titanium teeth :) -- 6 months of a liquid diet, swelling to the point your eyes are still closed when you KNOW they are fully open, oh, and did I mention the catheter? :D )

No, my friend, this little minor set back is really nothing when you think about it.

And yes, I can bite an aluminum can in half and the neck off a beer bottle, but I only do that when I am bet that I can't and I am really drunk! :D

pcbrainbuster

02-26-2007, 06:39 PM

Wow talk about going to the extreme !!!

pcbrainbuster

02-27-2007, 07:26 PM

So uhhhh can anyone then simply tell me what is wong with my script :(

mburt

02-27-2007, 08:17 PM

I recently created a slide-out menu...
http://mburt.mb.funpic.org/projects/slideout

mburt

02-27-2007, 08:20 PM