Paul 119
Gebruiker
- Lid geworden
- 21 jul 2010
- Berichten
- 76
Hoi. ik ben bezig om een javascript createChild element te bouwen. Hij werkt bijna volledig. Het probleem zit in het weghalen van het element. Dit krijg ik niet voor elkaar. Weet iemand hoe dit precies werkt?
html file:
binddiv.js file
[JS]window.onload = function() {
var all = document.getElementsByTagName("input");
for (var i=0; i<all.length; i++) {
spl = all;
if (spl.className == 'sp-slider'){
spl.onfocus = spDivShow;
spl.onblur = spDivHide;
}
}
};
function spDivShow(e) {
e= e||window.event;
var spTarget = e.target||e.srcElement;
spTarget.style.backgroundColor = "red";
var spdiv = document.createElement('div');
var dividName = 'spCreatedDiv';
spdiv.setAttribute('class',dividName)
spdiv.innerHTML = 'Div created ';
spdiv.style.height = '200px';
spdiv.style.width = '200px';
spdiv.style.position = 'absolute';
spdiv.style.clear = 'both';
spdiv.style.left = '100px';
spdiv.style.top = '100px';
spdiv.style.zIndex = '100000';
spdiv.style.border = '1px solid';
spdiv.style.borderColor = "#FF0000";
spdiv.style.background = "#7AFFFF";
document.getElementsByTagName('body')[0].appendChild(spdiv);
}
function spDivHide(e){
this.style.backgroundColor = "white";
var dividName = 'spCreatedDiv';
document.getElementsByTagName('body')[0].removeChild(dividName);
}[/JS]
Ik weet dat dit makkelijker gaat binnen een framework(jQuerry/mooTools) maar ik werk binnen een cms die aangepaste framework gebruikt waardoor ik dan conflicten krijg.
alvast bedankt.
html file:
HTML:
<html>
<head>
<title>javadiv - test</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script language="JavaScript" src="binddiv.js"></script>
</head>
<body>
<input type="text" name="inputsmall" class="sp-slider" id="sp-input-small" />
<input type="text" name="inputmedium" class="sp-slider" id="sp-input-medium" />
<input type="text" name="inputbig" class="sp-slider" id="sp-input-big" />
</body>
</html>binddiv.js file
[JS]window.onload = function() {
var all = document.getElementsByTagName("input");
for (var i=0; i<all.length; i++) {
spl = all;
if (spl.className == 'sp-slider'){
spl.onfocus = spDivShow;
spl.onblur = spDivHide;
}
}
};
function spDivShow(e) {
e= e||window.event;
var spTarget = e.target||e.srcElement;
spTarget.style.backgroundColor = "red";
var spdiv = document.createElement('div');
var dividName = 'spCreatedDiv';
spdiv.setAttribute('class',dividName)
spdiv.innerHTML = 'Div created ';
spdiv.style.height = '200px';
spdiv.style.width = '200px';
spdiv.style.position = 'absolute';
spdiv.style.clear = 'both';
spdiv.style.left = '100px';
spdiv.style.top = '100px';
spdiv.style.zIndex = '100000';
spdiv.style.border = '1px solid';
spdiv.style.borderColor = "#FF0000";
spdiv.style.background = "#7AFFFF";
document.getElementsByTagName('body')[0].appendChild(spdiv);
}
function spDivHide(e){
this.style.backgroundColor = "white";
var dividName = 'spCreatedDiv';
document.getElementsByTagName('body')[0].removeChild(dividName);
}[/JS]
Ik weet dat dit makkelijker gaat binnen een framework(jQuerry/mooTools) maar ik werk binnen een cms die aangepaste framework gebruikt waardoor ik dan conflicten krijg.
alvast bedankt.
