Hjælp til brug af script / sti fejl
Hejsa. Jeg vil gerne have stylet nogle select bokse, og jeg har også fundet ud af, hvordan man gør det med javascript - nemlig ved brug af bl.a. dette script: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/Det virker perfekt, hvis jeg bare laver en mappe på et andet domæne og putter filerne ind i samme niveau. Men ligeså snart jeg putter nogle filer ind i forskellige mapper, og der er noget .htaccess på, så bliver billedet ikke vist - men bortset fra det, så fungerer det. Derfor går jeg ud fra, at det er fordi, der er nogle fejl i stien. Men selvom jeg ligger billedet i nærmest alle mapper og har prøvet mange forskellige stier, så virker det bare ikke.
Jeg ved simpelthen ikke, hvad jeg skal gøre, jeg synes nærmest jeg har prøvet alt - så derfor spørger jeg her.
Oversigt over hvordan filerne ligger
/hentboksere.php (der hvor select skal vises)
/style.css
/ress/formstyling.php (der hvor js scriptet er i)
/ress/head.php (hertil hentes js scriptet + css scriptet. Denne fil bliver så lagt ind i alle filer, fx hentboksere.php)
/img/select.png (billedet)
Den relevante del af hentboksere.php
<!-- head.php er inkluderet korrekt -->
<select class="styled" name="osLand">
<option value="dk">Danmark</option>
<option value="de">Tyskland</option>
<option value="gb">England</option>
<option value="usa">USA</option>
</select>
Den relevenate del af style.css
.select {
position: absolute;
width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url("/img/select.png") no-repeat;
overflow: hidden;
}
Formstyling.php
/*
CUSTOM FORM ELEMENTS
Created by Ryan Fait
www.ryanfait.com
The only things you may need to change in this file are the following
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)
The numbers you set for checkboxHeight and radioHeight should be one quarter
of the total height of the image want to use for checkboxes and radio
buttons. Both images should contain the four stages of both inputs stacked
on top of each other in this order: unchecked, unchecked-clicked, checked,
checked-clicked.
You may need to adjust your images a bit if there is a slight vertical
movement during the different stages of the button activation.
The value of selectWidth should be the width of your select list image.
Visit http://ryanfait.com/ for more information.
*/
var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";
/* No need to change anything after this */
document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
position = "0 -" + (checkboxHeight*2) + "px";
span[a].style.backgroundPosition = position;
} else {
position = "0 -" + (radioHeight*2) + "px";
span[a].style.backgroundPosition = position;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
inputs = document.getElementsByTagName("select");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].className == "styled") {
option = inputs[a].getElementsByTagName("option");
active = option[0].childNodes[0].nodeValue;
textnode = document.createTextNode(active);
for(b = 0; b < option.length; b++) {
if(option.selected == true) {
textnode = document.createTextNode(option\[b].childNodes[0].nodeValue);
}
}
span[a] = document.createElement("span");
span[a].className = "select";
span[a].id = "select" + inputs[a].name;
span[a].appendChild(textnode);
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
if(!inputs[a].getAttribute("disabled")) {
inputs[a].onchange = Custom.choose;
} else {
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
}
}
}
document.onmouseup = Custom.clear;
},
pushed: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
} else if(element.checked == true && element.type == "radio") {
this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
} else if(element.checked != true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight + "px";
}
},
check: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 0";
element.checked = false;
} else {
if(element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
group = this.nextSibling.name;
inputs = document.getElementsByTagName("input");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
inputs[a].previousSibling.style.backgroundPosition = "0 0";
}
}
}
element.checked = true;
}
},
clear: function() {
inputs = document.getElementsByTagName("input");
for(var b = 0; b < inputs.length; b++) {
if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
}
}
},
choose: function() {
option = this.getElementsByTagName("option");
for(d = 0; d < option.length; d++) {
if(option[d].selected == true) {
document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
}
}
}
}
window.onload = Custom.init;
[b]Head.php (2 ting trukket ud)
<link href="/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/ress/formstyling.js"></script>
Det er meget at kigge på, det ved jeg godt - men jeg vil blive meget taknemmelig, hvis nogle kan hjælpe mig! :)
Mvh. Christian
PS: Hvis live eksempel ønskes, er det muligt.
PS2: Tråden køre sideløbende på udvikleren.dk. Det er lidt svært at overskue teksten her, så hvis du foretrækker det, kan det samme ses her: http://www.udvikleren.dk/forum/35420/hjaelp-til-brug-af-script-sti-fejl/
