| Autor |
Nachricht |
snoobs
Threadersteller
Dabei seit: 25.09.2007
Ort: -
Alter: 41
Geschlecht: 
|
Verfasst Mi 19.12.2007 16:50
Titel checkbox von crir anpassen |
  |
|
hallo zusammen
habe meine checkboxen mit dem javascript von crir crir angepasst.
nun möchte ich gerne dass die checkboxen rechts vom text sind und nicht links, nur find ich die stelle im javascript nicht wo ich dies ändern kann.
wäre toll wenn mir jemand sagen könnte wo und wie ich dies ändern kann.
javascript:
| Code: |
/*
CRIR - Checkbox & Radio Input Replacement
Author: Chris Erwin (me[at]chriserwin.com)
www.chriserwin.com/scripts/crir/
Updated July 27, 2006.
Jesse Gavin added the AddEvent function to initialize
the script. He also converted the script to JSON format.
Updated July 30, 2006.
Added the ability to tab to elements and use the spacebar
to check the input element. This bit of functionality was
based on a tip from Adam Burmister.
*/
crir = {
init: function() {
arrLabels = document.getElementsByTagName('label');
searchLabels:
for (var i=0; i<arrLabels.length; i++) {
// get the input element based on the for attribute of the label tag
if (arrLabels[i].getAttributeNode('for') && arrLabels[i].getAttributeNode('for').value != '') {
labelElementFor = arrLabels[i].getAttributeNode('for').value;
inputElement = document.getElementById(labelElementFor);
}
else {
continue searchLabels;
}
inputElementClass = inputElement.className;
// if the input is specified to be hidden intiate it
if (inputElementClass == 'crirHiddenJS') {
inputElement.className = 'crirHidden';
inputElementType = inputElement.getAttributeNode('type').value;
// add the appropriate event listener to the input element
if (inputElementType == "checkbox") {
inputElement.onclick = crir.toggleCheckboxLabel;
}
else {
inputElement.onclick = crir.toggleRadioLabel;
}
// set the initial label state
if (inputElement.checked) {
if (inputElementType == 'checkbox') { arrLabels[i].className = 'checkbox_checked'}
else { arrLabels[i].className = 'radio_checked' }
}
else {
if (inputElementType == 'checkbox') { arrLabels[i].className = 'checkbox_unchecked'}
else { arrLabels[i].className = 'radio_unchecked' }
}
}
else if (inputElement.nodeName != 'SELECT' && inputElement.getAttributeNode('type').value == 'radio') { // this so even if a radio is not hidden but belongs to a group of hidden radios it will still work.
arrLabels[i].onclick = crir.toggleRadioLabel;
inputElement.onclick = crir.toggleRadioLabel;
}
}
},
findLabel: function (inputElementID) {
arrLabels = document.getElementsByTagName('label');
searchLoop:
for (var i=0; i<arrLabels.length; i++) {
if (arrLabels[i].getAttributeNode('for') && arrLabels[i].getAttributeNode('for').value == inputElementID) {
return arrLabels[i];
break searchLoop;
}
}
},
toggleCheckboxLabel: function () {
labelElement = crir.findLabel(this.getAttributeNode('id').value);
if(labelElement.className == 'checkbox_checked') {
labelElement.className = "checkbox_unchecked";
}
else {
labelElement.className = "checkbox_checked";
}
},
toggleRadioLabel: function () {
clickedLabelElement = crir.findLabel(this.getAttributeNode('id').value);
clickedInputElement = this;
clickedInputElementName = clickedInputElement.getAttributeNode('name').value;
arrInputs = document.getElementsByTagName('input');
// uncheck (label class) all radios in the same group
for (var i=0; i<arrInputs.length; i++) {
inputElementType = arrInputs[i].getAttributeNode('type').value;
if (inputElementType == 'radio') {
inputElementName = arrInputs[i].getAttributeNode('name').value;
inputElementClass = arrInputs[i].className;
// find radio buttons with the same 'name' as the one we've changed and have a class of chkHidden
// and then set them to unchecked
if (inputElementName == clickedInputElementName && inputElementClass == 'crirHidden') {
inputElementID = arrInputs[i].getAttributeNode('id').value;
labelElement = crir.findLabel(inputElementID);
labelElement.className = 'radio_unchecked';
}
}
}
// if the radio clicked is hidden set the label to checked
if (clickedInputElement.className == 'crirHidden') {
clickedLabelElement.className = 'radio_checked';
}
},
addEvent: function(element, eventType, doFunction, useCapture){
if (element.addEventListener)
{
element.addEventListener(eventType, doFunction, useCapture);
return true;
} else if (element.attachEvent) {
var r = element.attachEvent('on' + eventType, doFunction);
return r;
} else {
element['on' + eventType] = doFunction;
}
}
}
crir.addEvent(window, 'load', crir.init, false);
|
css:
| Code: |
/* Checkboxes */
label.checkbox_checked {
background: #fff url(tick.png) no-repeat;
display: block;
margin: 10px 0;
height:24px;
padding-left: 25px;
}
label.checkbox_unchecked {
background: #fff url(cross.png) no-repeat;
display: block;
margin: 10px 0;
padding-left: 25px;
height:24px;
}
/* Radio Buttons */
label.radio_checked {
background: #fff url(bullet_green.png) no-repeat;
display: block;
margin: 10px 0;
height:24px;
padding-left: 25px;
}
label.radio_unchecked {
background: #fff url(bullet_white.png) no-repeat;
display: block;
margin: 10px 0;
height:24px;
padding-left: 25px;
}
/* Hover State */
label:hover{
color: #575B60;
}
label.highlighted {
border: 1px solid #333;
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* STOP EDITTING - DO NOT CHANGE OR REMOVE */
.crirHidden {
position: absolute;
left: -1000px;
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
|
|
|
| |
  |
 |
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mi 19.12.2007 17:13
Titel
|
|
|
bist du sicher, dass wir das im js zu suchen haben?
wo werden die funktionen aufgerufen?? (html)??
|
|
| |
 |
|
|
Anzeige
|
|
|
snoobs
Threadersteller
Dabei seit: 25.09.2007
Ort: -
Alter: 41
Geschlecht:
|
Verfasst Mi 19.12.2007 17:24
Titel
|
|
|
ja ich denke schon.
also der html-code ist folgender:
| Code: |
<label for="'.$row_kat['ID'].'">'.$row_kat['kategorie'].'</label>
<input type="checkbox" name="check[]" id="'.$row_kat['ID'].'" value="'.$row_kat['ID'].'" class="crirHiddenJS" />
|
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mi 19.12.2007 17:58
Titel Re: checkbox von crir anpassen |
|
|
| snoobs hat geschrieben: |
nun möchte ich gerne dass die checkboxen rechts vom text sind und nicht links |
also bei deinem html-beispiel sind die boxen doch rechts vom text...?? 
|
|
| |
|
|
snoobs
Threadersteller
Dabei seit: 25.09.2007
Ort: -
Alter: 41
Geschlecht:
|
Verfasst Mi 19.12.2007 18:35
Titel
|
|
|
|
nein sind sie eben nicht. sind wie auf der von crir links davon. deshalb denk ich muss man das javascript anpassen.
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mi 19.12.2007 18:46
Titel
|
|
|
ah, ok... sorry. war nicht aufmerksam genug 
das wird in deinem css definiert...
ersetz die folgenden klassen in der css-datei... dann sieht du es
| Code: |
label.checkbox_checked {
background: #fff url(tick.png) no-repeat top right;
display: block;
margin: 10px 0;
height:24px;
padding-left: 0px;
}
label.checkbox_unchecked {
background: #fff url(cross.png) no-repeat top right;
display: block;
margin: 10px 0;
padding-left: 0px;
height:24px;
}
/* Radio Buttons */
label.radio_checked {
background: #fff url(bullet_green.png) no-repeat top right;
display: block;
margin: 10px 0;
height:24px;
padding-left: 0px;
}
label.radio_unchecked {
background: #fff url(bullet_white.png) no-repeat top right;
display: block;
margin: 10px 0;
height:24px;
padding-left: 0px;
}
|
|
|
| |
|
|
snoobs
Threadersteller
Dabei seit: 25.09.2007
Ort: -
Alter: 41
Geschlecht:
|
Verfasst Do 20.12.2007 10:15
Titel
|
|
|
ja genau. das ist die lösung.
super. vielen dank dafür !!!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[php] checkbox
jquery checkbox
Checkbox Value übergeben
checkbox - pflichtfeld - AGB
Checkbox die wegspringt ...
php checkbox-wert
|
|
Willkommen auf dem Portal für Mediengestalter
