/    Sign up×
Community /Pin to ProfileBookmark

Create DOM in prototype

Copy linkTweet thisAlerts:
Feb 02.2009

I need to create a dom of elements below with prototype builder,but I can’t insert element to class=”egitimkutu”, anyone can help?
in my page I have :[COLOR=”Red”]<div id=”kutularalani” class=”kutularalani”></div>[/COLOR]
want to insert [COLOR=”Red”]<div class=”egitimkutu”>[/COLOR] inside it.

[COLOR=”Red”]<div class=”yonetimkutu”>
<div id=”yonk_korfezticaret” >
<a href=”#” caption=”Korfez Ticaret Odasi” id=”kto”><img src=”png_thumb/5_thumb.png” class=”kutu”/></a>
</div>
<div class=”bulut” style=”display:none”><img src=”scriptaculous.gif”></div>
</div>[/COLOR]

I started someting like these:
[COLOR=”Red”]$(‘kutularalani’).insert(‘<div class=”yonetimkutu”></div>’);
document.getElementsByClassName(‘yonetimkutu’).insert(‘<div id=”yonk_korfezticaret”></div>’);[/COLOR]
by adding second string it gives me error.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsFeb 02.2009 — [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.egitimkutu {
width:100px;height:100px;background-Color:red;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function Insert(id,tag,cls){
var obj=document.getElementById(id);
var newobj=document.createElement(tag);
newobj.className=cls;
obj.appendChild(newobj);
}
/*]]>*/
</script>
</head>

<body>
<div id="kutularalani" class="kutularalani"></div>
<input type="button" name="" value="Insert" onclick="Insert('kutularalani','DIV','egitimkutu');"/>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@FangFeb 02.2009 — [I]getElementsByClassName[/I] returns an array

http://www.prototypejs.org/api/element/getElementsByClassName
Copy linkTweet thisAlerts:
@mimartjauthorFeb 02.2009 — I WILL HAVE 7 MAIN CLASSES AND ABOUT 120 MODULES OF THIS KIND,SO I WANT TO CREATE A DOM ELEMENTS.ALL THESE MODULES WILL BE LOCATED AT <DIV id="kutularalani" class="kutularalani"></DIV>.As page opens all modules must be loaded.I have created them all in my page but, making some replacements and changes of modules is exhausting.So I decided to create DOM elements, or at list I have to, not to sweat.

I am trying to create them by Prototype framework as:

[COLOR="DimGray"]function kutu()

{

$('kutularalani').insert('<div class="yonetimkutu" id="yonk_korfezticaret_0"></div>');

$('yonk_korfezticaret_0').insert('<div id="yonk_korfezticaret">');

$('yonk_korfezticaret').insert('<a href="#" caption="Korfez Ticaret Odasi" id="kto" class="lightwindow"><img src="png_thumb/3_thumb.png" class="kutu"/></a>');

$('yonk_korfezticaret_0').insert('<div class="bulut" style="display:none"><img src="scriptaculous.gif"></div>');

}[/COLOR] But it doesn't work as native module as html page. Pleae help, or give some tips.

//----------------------------------------

[COLOR="Red"]<div class="yonetimkutu" id="yonk_korfezticaret_0">

<div id="yonk_korfezticaret" >

<a href="http://www.alink.html" caption="Korfez Ticaret Odasi" id="kto" class="lightwindow"><img src="image.jpg" class="kutu"/></a></div><div class="bulut" style="display:none"><img src="image2.jpg"></div>

<script type="text/javascript">

new Tip('yonk_korfezticaret', $('yonk_korfezticaret').up('div.yonetimkutu').down('.bulut').cloneNode(true),

{

title: "Korfez Ticaret Odasi",

style: 'darkgrey',

offset: { x: 10, y: 20 },

width: 'auto',

height: 'auto'

});</script>

</div>[/COLOR]

//----------------------------------------

[SIZE="2"][COLOR="Gray"](function() {


$('kto').observe('mouseover', timer2);

$('kto').observe('mouseout', kay_iptal2);



function yonk_korfezticaret() {

new Effect.Highlight('sc_alt_korfezticaret', { startcolor: '#2b2f2f',endcolor: 'ff0000',restorecolor:'ff0000' });

korfezticaret_bulut();

}

function timer2(){

newtime2 = setTimeout(kay_korfez,500);

}

function kay_iptal2(){

clearTimeout(newtime2);

}

function kay_korfez2(){

durdur('scrollbaslik', 'sc_korfezticaret');

}

function kay_korfez(){

moveTo('scrollbaslik', 'sc_korfezticaret');

}



function yonk_korfezticaret_out(){

new Effect.Highlight('sc_alt_korfezticaret', { startcolor: '#ff0000',endcolor: '#2b2f2f',restorecolor:'#2b2f2f' });

}

})();[/COLOR][/SIZE]

//-----------------------------------------

Vwphillips your script is good but not what I want,the thing I want is more complex. This module scrolls a content in <div> ,creates tooltip.
Copy linkTweet thisAlerts:
@mimartjauthorFeb 02.2009 — Hey,I think I found what I need:by using builder of scriptaculous

I converted this module:
[CODE]<div class="yonetimkutu" >
<div id="yonk_korfezticaret" >
<a href="http://www.alink.html" caption="Korfez Ticaret Odasi" id="kto" class="lightwindow"><img src="image.jpg" class="kutu"/></a>
</div><div class="bulut" style="display:none"><img src="image2.jpg"></div>
</div>[/CODE]

to this:

[CODE]var proje1 = Builder.node('div', {className: 'yonetimkutu'}, [
Builder.node('div',{id: 'yonk_korfezticaret'}, [
Builder.node('a', {href: 'http://www.alink.html', caption: 'Korfez Ticaret Odasi', id: 'kto', className: 'lightwindow'},
Builder.node('img', {src: 'image.jpg', className: 'kutu'}))]),
Builder.node('div', {className: 'bulut', style: 'display:none'},Builder.node('img', {src:'image2.jpg'}))
]);
$('kutularalani').appendChild(proje1);[/CODE]


and it worked....? except this one-its a tooltip-I couldn't assign it to dom module:
[CODE]<script type="text/javascript">
new Tip('yonk_korfezticaret', $('yonk_korfezticaret').up('div.yonetimkutu').down('.bulut').cloneNode(true),
{
title: "Korfez Ticaret Odasi",
style: 'darkgrey',
offset: { x: 10, y: 20 },
width: 'auto',
height: 'auto'
});</script>[/CODE]



any idea to simplify it a little more?
×

Success!

Help @mimartj 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...