23. oktober 2009 - 21:49
#5
Så lærte man det, det løser dog ikke mit problem for hvis jeg slet ikke bruger innerHTML så forsvinder indholdet ikke og textNode laver tegn om til tegnkoder...
Her er min kode, ikke så renskrevet men whatever:
<script type="text/javascript">
var ta_anim = null;
var ta_anim_i = 0;
var ta_anim_i2 = 0;
var ta_smileys = {
"joy" : [
{ tag:":smil:", name:"~Smiler~", file:"smile.gif"},
{ tag:":grin:", name:"~Griner~", file:"bigsmile.gif"},
{ tag:":glad:", name:"~Glad~", file:"happy.gif"},
{ tag:":anime:", name:"~Anime~", file:"anime.gif"},
{ tag:":tunge:", name:"~Fjollet~", file:"goofy.gif"},
{ tag:":forelsket:", name:"~Forelsket~", file:"love.gif"}
],
"anger" : [
{ tag:":sur:", name:"~Sur~", file:"angry.gif"},
{ tag:":ond:", name:"~Ond~", file:"evil.gif"},
{ tag:":gal:", name:"~Skør~", file:"verybigsmile.gif"},
{ tag:":ligeglad:", name:"~Ligeglad~", file:"indifferent.gif"}
],
"other" : [
{ tag:":blink:", name:"~Blink~", file:"wink.gif"},
{ tag:":syg:", name:"~Kvalme~", file:"disgusted.gif"},
{ tag:":usikker:", name:"~Usikker~", file:"dunno.gif"},
{ tag:":tommel:", name:"~Tommelfinger~", file:"thumb.gif"},
{ tag:":wow:", name:"~WOW~", file:"holyshit.gif"},
{ tag:":hvad:", name:"~Tænker~", file:"pondering.gif"}
],
"sadness" : [
{ tag:":trist:", name:"~Trist~", file:"sad.gif"},
{ tag:":sky:", name:"~Genert~", file:"embarrased.gif"},
{ tag:":ked:", name:"~Græder~", file:"verysad.gif"},
{ tag:":underlig:", name:"~Underlig~", file:"weird.gif"},
{ tag:":stille:", name:"~Siger Ingenting~", file:"zipped.gif"}
],
"types" : [
{ tag:":maler:", name:"~Maler~", file:"painter.gif"},
{ tag:":morgen:", name:"~Træt~", file:"busted.gif"},
{ tag:":pirat:", name:"~Pirat~", file:"pirate.gif"},
{ tag:":klovn:", name:"~Klovn~", file:"clown.gif"},
{ tag:":ninja:", name:"~Ninja~", file:"ninja.gif"},
{ tag:":blank:", name:"~Blank~", file:"blank.gif"}
]
};
<?php
$pixstr = "var ta_galleries = {\n";
foreach($pixarr as $gal => $cat) {
$pixstr .= "\"".$galarr[$gal]."\" : [\n";
foreach($cat as $n => $o) {
$pixstr .= $o.",\n";
}
$pixstr = substr($pixstr, 0, -2)."],\n";
}
echo substr($pixstr, 0, -2)."\n};";
?>
var ta_toolbar = [];
//var ie = ((/msie/i.test(navigator.userAgent)) && !(/opera/i.test(navigator.userAgent)));
function ta_insertTag(textarea, open, close){
if(document.selection){
s = document.selection.createRange().text;
textarea.focus();
s = open+s+close;
document.selection.createRange().text = s;
document.selection.createRange().select();
} else {
f=textarea;
s=f.scrollTop;
t=f.value;
before = t.substr(0, f.selectionStart);
middle = t.substr(f.selectionStart, (f.selectionEnd - f.selectionStart));
after = t.substr(f.selectionEnd);
t=before + open + middle + close + after;
f.value=t;
f.scrollTop=s;
f.focus();
}
}
function ta_set_div_pos(div, a) {
var w = a;
var v = a;
if(w.offsetParent) {
var top = left = 0;
do {
top += w.offsetTop;
left += w.offsetLeft;
} while(w=w.offsetParent);
do {
if(v.nodeName=="DIV"
&& v.nodeType==1) {
top -= v.scrollTop;
left -= v.scrollLeft;
}
v=v.parentNode;
} while(v!=null);
div.style.top = (16+top)+"px";
div.style.left = (left)+"px";
}
}
function ta_something_scrolled() {
for(t in ta_toolbar) {
ta_set_div_pos(ta_toolbar[t].smileybar, ta_toolbar[t].smileylink);
ta_set_div_pos(ta_toolbar[t].painbar, ta_toolbar[t].painlink);
}
}
function ta_make_all_that_scrolls_work_too(who) {
if(who.nodeType==1) {
if(who.style.overflow=="auto"
|| who.style.overflow=="scroll") {
who.onscroll = ta_something_scrolled;
}
}
for(var n=0; n<who.childNodes.length; n++) {
ta_make_all_that_scrolls_work_too(who.childNodes[n]);
}
}
function ta_closePanel(reset) {
if(ta_anim!=null) {
clearInterval(ta_anim);
ta_anim = null;
}
ta_anim_i=0;
ta_anim_j=0;
if(reset) {
for( var b in this.buttons ) {
this.buttons[b].style.top = "0px";
this.buttons[b].style.left = "0px";
//this.style.display = "none";
this.isVisible = false;
}
}
}
function ta_populate_toolbar(tools, ta) {
// END OF SMILEY vvvv
var ta_smiley_icon = document.createElement("img");
ta_smiley_icon.src = "_img/smiley/smile.gif";
ta_smiley_icon.alt = "Indsæt smiley";
var ta_smiley_link = document.createElement("a");
ta_smiley_link.href = "#";
var ta_smiley_panel = document.createElement("div");
ta_smiley_panel.style.display = "none";
ta_smiley_panel.isVisible = false;
ta_smiley_panel.buttons = [];
var ta_cols=0;
var ta_rows=0;
var ta_maxcol = 0;
var ta_maxrow = 0;
for( var cat in ta_smileys ) {
ta_cols=0;
for( var ss in ta_smileys[cat] ) {
var tag = ta_smileys[cat][ss].tag;
var name = ta_smileys[cat][ss].name;
var file = ta_smileys[cat][ss].file;
var but = document.createElement("div");
but.style.padding = "4px";
but.style.border = "1px solid #c0c0c0";
but.style.margin = "2px";
but.style.position = "absolute";
but.style.left = "0px";
but.style.top = "0px";
var img = document.createElement("img");
img.src = "_img/smiley/"+file;
img.alt = name;
img.title = name;
var a = document.createElement("a");
a.href = "#";
a.tag = tag;
a.ta = ta;
a.onclick = function() {
ta_insertTag(this.ta, "", this.tag);
ta_smiley_icon.onclick();
return false;
};
but.col = ta_cols;
but.row = ta_rows;
a.appendChild(img);
but.appendChild(a);
ta_smiley_panel.buttons[ta_smiley_panel.buttons.length] = but;
ta_smiley_panel.appendChild(but);
ta_cols++;
if(ta_cols>ta_maxcol) ta_maxcol=ta_cols;
}
ta_rows++;
ta_maxrow=ta_rows;
}
ta_smiley_panel.closePanel = ta_closePanel;
ta_smiley_panel.animate = function() {
if(ta_anim_i>=ta_maxrow) {
ta_anim_j++;
for( var b in ta_smiley_panel.buttons ) {
button = ta_smiley_panel.buttons[b];
button.style.left = 32*Math.floor(ta_anim_j*(button.col/ta_maxcol))+"px";
}
if(ta_anim_j>=ta_maxcol) {
ta_smiley_panel.closePanel(false);
}
} else {
ta_anim_i++;
ta_smiley_panel.style.height = (32*ta_anim_i+32)+"px";
for( var b in ta_smiley_panel.buttons ) {
button = ta_smiley_panel.buttons[b];
button.style.top = 32*Math.floor(ta_anim_i*(button.row/ta_maxrow))+"px";
}
}
};
ta_smiley_icon.onclick = function() {
if(ta_pain_panel.showingsub) {
ta_pain_panel.subShow();
}
ta_pain_panel.closePanel(true);
if(!ta_smiley_panel.isVisible) {
//ta_smiley_panel.closePanel(true); //Try an comment it out and nothing should happen =)
var style = {
"position":"absolute",
"backgroundColor":"#ffffff",
"border":"1px solid #000000",
"width":(32*ta_maxcol+32)+"px",
"height":(32)+"px",
"display":""
};
for(var s in style) ta_smiley_panel.style[s] = style[s];
ta_smiley_panel.isVisible = true;
ta_set_div_pos(ta_smiley_panel, ta_smiley_link);
ta_smiley_panel.animate();
ta_anim = setInterval(
ta_smiley_panel.animate,
100
);
} else {
ta_smiley_panel.closePanel(true);
}
return false;
};
// END OF SMILEY ^^^^
// START OF PAINTING vvvv
var ta_pain_panel = document.createElement("div");
ta_pain_panel.style.display = "none";
ta_pain_panel.isVisible = false;
ta_pain_panel.buttons = [];
ta_pain_panel.showingsub = false;
ta_pain_panel.subShow = function() {
this.innerHTML = "";
var b;
for( b in this.buttons ) {
button = this.buttons[b];
this.appendChild(button);
}
this.showingsub = false;
};
ta_pain_panel.subHide = function(but) {
this.innerHTML = "";
for( var i=0; i<but.pains.length; i++ ) {
this.appendChild(but.pains[i]);
}
this.showingsub = true;
};
var ta_pain_link = document.createElement("a");
ta_pain_link.href = "#";
ta_pain_link.title = "Indsæt billede";
ta_pain_link_icon = document.createElement("img");
ta_pain_link_icon.src = "_img/painting.gif";
ta_pain_link_icon.alt = "Indsæt billede";
var ta_rows2=0;
for( var cat in ta_galleries ) {
var but = document.createElement("div");
but.style.padding = "4px";
but.style.border = "1px solid #c0c0c0";
but.style.margin = "2px";
but.style.position = "absolute";
but.style.left = "0px";
but.style.top = "0px";
but.pains = [];
var a = document.createElement("a");
a.href = "#";
for( var ss in ta_galleries[cat] ) {
var tag = ta_galleries[cat][ss].tag;
var name = ta_galleries[cat][ss].name;
var file = ta_galleries[cat][ss].file;
var subbut = document.createElement("div");
subbut.style.padding = "4px";
subbut.style.border = "1px solid #c0c0c0";
subbut.style.margin = "2px";
subbut.style.position = "absolute";
subbut.style.left = (90*(ss%5))+"px";
subbut.style.top = (Math.floor(ss/5)*90)+"px";
subbut.tag = tag;
subbut.name = name;
subbut.file = file;
var suba = document.createElement("a");
suba.href = "#";
suba.tag = tag;
suba.ta = ta;
suba.but = but;
suba.onclick = function() {
ta_insertTag(this.ta, "", this.tag);
ta_pain_link.onclick(true);
return false;
};
suba.innerHTML = file;
subbut.appendChild(suba);
but.pains[but.pains.length] = subbut;
}
a.but = but;
a.onclick = function() {
ta_pain_panel.subHide(this.but);
return false;
};
but.row = ta_rows2;
a.appendChild(document.createTextNode(cat));
but.appendChild(a);
ta_pain_panel.buttons[ta_pain_panel.buttons.length] = but;
ta_pain_panel.appendChild(but);
ta_rows2++;
}
ta_pain_panel.closePanel = ta_closePanel;
ta_pain_panel.animate = function() {
ta_anim_i++;
for( var b in ta_pain_panel.buttons ) {
button = ta_pain_panel.buttons[b];
button.style.top = 32*Math.floor(ta_anim_i*(button.row/ta_rows2))+"px";
}
if(ta_anim_i>=ta_rows2) {
ta_pain_panel.closePanel(false);
}
};
ta_pain_link.onclick = function(finalClick) {
ta_smiley_panel.closePanel(true);
if(!ta_pain_panel.isVisible) {
//ta_pain_panel.closePanel(true); //See smiley
hhhhhhhh = (5*ta_rows2+90);
if(ta_pain_panel.buttons.length*40>hhhhhhhh) hhhhhhhh = ta_pain_panel.buttons.length*40;
var style = {
"position":"absolute",
"backgroundColor":"#ffffff",
"border":"1px solid #000000",
"width":(450+32)+"px",
"height":hhhhhhhh+"px",
"display":""
};
for(var s in style) ta_pain_panel.style[s] = style[s];
ta_pain_panel.isVisible = true;
ta_set_div_pos(ta_pain_panel, ta_pain_link);
ta_pain_panel.animate();
ta_anim = setInterval(
ta_pain_panel.animate,
100
);
} else {
if(ta_pain_panel.showingsub) {
ta_pain_panel.subShow();
if(finalClick===true) ta_pain_panel.closePanel(true);
} else ta_pain_panel.closePanel(true);
}
return false;
};
// END OF PAINTING ^^^^
// START OF TAGS vvvv
var ta_tag_link = document.createElement("a");
ta_tag_link.href = "tags.html";
ta_tag_link.target = "_blank";
ta_tag_link.title = "Se listen over tags";
ta_tag_link_txt = document.createTextNode("<tags>");
// END OF TAGS ^^^^
ta_smiley_link.appendChild(ta_smiley_icon);
ta_pain_link.appendChild(ta_pain_link_icon);
ta_tag_link.appendChild(ta_tag_link_txt);
tools.appendChild(ta_smiley_link);
tools.appendChild(document.createTextNode(" "));
tools.appendChild(ta_pain_link);
tools.appendChild(document.createTextNode(" "));
tools.appendChild(ta_tag_link);
document.body.appendChild(ta_smiley_panel);
document.body.appendChild(ta_pain_panel);
var t = ta_toolbar.length;
ta_toolbar[t] = {
smileybar : ta_smiley_panel,
smileylink : ta_smiley_link,
smileyicon : ta_smiley_icon,
painbar : ta_pain_panel,
painlink : ta_pain_link,
painicon : ta_pain_link_icon
};
}
window.onload = function() {
var tas = document.getElementsByTagName("textarea");
for( var t=0; t<tas.length; t++ ) {
if(tas[t].className=="fancy") {
var tool = tas[t].previousSibling;
ta_populate_toolbar(tool, tas[t]);
}
}
ta_make_all_that_scrolls_work_too(document.body);
};
window.onscroll = ta_something_scrolled;
window.onresize = ta_something_scrolled;
</script>
24. oktober 2009 - 12:28
#9
"En kæmpe bunke, og stadigvæk ikke kørbar kode da HTML delen mangler."
Her er alt HTML'en som har/kan have indflydelse på koden, som jeg så håber du kan forstå hvordan virker :
<div class="fancy"></div>
<textarea class="fancy">[/textarea]
"...at du laver to divs i stedet for en, en med hver af de to tilstande, og du skifter så imellem at vise den ene og den anden"
Det lyder som en bedre tilgang til det end hvad jeg har gjort, tak, det skal jeg da lige prøve.
"Har du prøvet at undersøge din arrays indhold nærmere?" Ja men måske ikke nok.
"Ved du med sikkerhed at et DOM element har samme egenskaber som Object?" Min forståelse af javascript bygger på at det skal kunne lade sig gøre, fordi du kan tilføje dit eget dom element til et html tag du har skrevet. Den kan være en misforståelse, så kan godt se din pointe - at det er en mulig faldgrube.
"innerHTML skal jo blanke en masse members, og det kunne vel ramme dine members i nogen browsere?" ja, ik?
Godt jeg prøver jeres forslag, at have det hele i et objekt der ikke er med på siden og at benytte 2 diver som man skifter imellem i stedet for at erstatte indholdet af et enkelt.
Skidtet skulle renskrives alligevel.
Tak, smid i øvrigt gerne et svar tjens - det kunne bruges.
24. oktober 2009 - 15:21
#10
#9 Din opfattelse af at bygge DOM elementer med javascript og få HTML-tags ud af det, er helt korrekt.
Men der hvor jeg er i tvivl om gyldigheden er den nederste linie af disse:
var ta_pain_panel = document.createElement("div");
ta_pain_panel.style.display = "none";
ta_pain_panel.isVisible = false;
ta_pain_panel.buttons = [];
I anden linie vedligeholder du style.display som allerede finde i DOM elementet.
Men i sidste linie sætter du buttons til et tomt array. Her ville min logik sige mig at der skulle komme en fejl, da DOM element div ikke i sig selv har egenskab buttons.
Du bruger dermed teknikker fra javascript Object på objektet fra createElement. Og her kommer jeg så i tvivl om hvad der sker, når man bruger den lettere ukurante innerHTML, som jo i praksis fjerner alt indhold.
Men det at din kode hovedsagelig virker, beviser vel at det ikke er helt ugyldig :-)
Så hvis du erstatter innerHTML = "" med removeChild, kan det være det virker.
Denne linie burde gøre det samme:
while( ta_pain_panel.hasChildNodes() )
{ ta_pain_panel.removeChild( ta_pain_panel.lastChild ); }
