/    Sign up×
Community /Pin to ProfileBookmark

Dynamically creating a context menu

Copy linkTweet thisAlerts:
Jan 03.2007

How can I write divs to my page at run time? I need to change my context menu regularly depending on where the user clicks.

So if anyone can tell me how to create DIVs dynamically and edit them and delete them, I would be very appreciative.
Thanks

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@ricpJan 03.2007 — By using the createElement method, like so..

<i>
</i>var myDiv = document.createElement("myDiv");
myDiv.innerHTML = "I was dynamically created";
myDiv.style.border = "5px dotted red";
myDiv.style.padding = "20px";
document.body.appendChild(myDiv);

That would create and append a <div> to the <body>. Obviously appendChild will only append the element to the bottom of the HTML (and to the bottom of the page unless you set style to position it). There are also the..
<i>
</i>parentObj.removeChild(childObj);
parentObj.replaceChild(newChildObj, oldChildObj);

..methods. parentObj in that instance is a reference to the parent, er, object.. ?
Copy linkTweet thisAlerts:
@darkling235authorJan 04.2007 — Thanks that clears a few things up. One question: is it legal in javascript to rewrite the contetx menu after a page has been loaded?
Copy linkTweet thisAlerts:
@OverstatementJan 04.2007 — Yes it is, you can even use HTML tags dynamically
<i>
</i>MyDiv.innerHTML = '&lt;b&gt;This is bold? Yes!&lt;/b&gt;';
Copy linkTweet thisAlerts:
@darkling235authorJan 04.2007 — Can anyone tell me what the "attribute" is to set the actual text inside the tag?

Like if I had <Input = button name = "mine" value = "Somevalue"> THIS STUFF HERE </INPUT>

I can use setAttribute to set the name and value attributes I know but what can I use to write THIS STUFF HERE inside of the tag?
Copy linkTweet thisAlerts:
@darkling235authorJan 08.2007 — Basically I need to set what the context menu options will be. At the moment really nothing pops up except a black bar. No menu items at all. My code is

<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onMouseDown="mine(event)" display:none>

</div>

In the page itself. When the menu needs to be created I call

function Base(node)

{

alert("In base");

for(var x = 0; x < BaseMenu.length; x = x +2)

{

var MenuItem = document.createElement("DIV");

MenuItem.setAttribute("verb", BaseMenu[x]);

MenuItem.setAttribute("type", BaseMenu[x+1]);

node.appendChild(MenuItem);

}

}

passing in my ie5menu div as the node so these new divs should all belong to it. Thing is when I use view page source I don't see any of them.

This function should iterate over my array and put all the objects into the context menu. For some reason its not working can anyone tell me why?



To get the context menu itself I use

oncontextmenu = "MakeContextMenu();"

So that when you right click my methods making the context menu should be called.

But all that comes up is an empty context menu represnted by a long horizontal black line.


Thank you
×

Success!

Help @darkling235 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...