[PHP maar vooral JS] Grafische Checkboxjes maken - Softwareontwikkeling

maandag 9 december 2002 13:46

Acties:

Topicstarter

Ik ben al een tijdje bezig om de standaard HTML checkboxjes te vervangen door iets wat hetzelfde kan maar waarbij jezelf 2 plaatjes opgeeft om als uiterlijk van de checkbox te gebruiken.
De bedoeling is dat het een combinatie van plaatjes en een hidden input field wordt en dat de checkboxjes dmv één regeltje gecreëerd kunnen worden.

Nu ben ik echter geen held in JS en ondank vele pogingen krijg ik het niet voor elkaar het geheel werkend te maken.
In het bestand dat de postboxjes moet bevatten include ik een php-file met de volgende functie:

PHP:

function maakBox($veldnaam,$waarde){

    global $imgdir;

    $object = "[img]\"$imgdir/input_checkbox_$waarde.gif\"[/img]\n";
    $object .= "<input type=\"hidden\" name=\"$veldnaam\" value=\"$waarde\">\n";

    return $object;
}

Daarna plaats ik hetvolgende Javascript in de header van het bestand dat ik van de boxjes wil voorzien:

code:

<script language="JavaScript">
<!--
function toggleBox(veldnaam) {
    
    if (eval("document.input['"+veldnaam+"'].value == true")) {
        eval("document.images['pic'"+veldnaam+"'].src = ('<?=$imgdir?>/input_checkbox_0.gif');");
        eval("document.input['"+veldnaam+"'].value = false;");
    } else {
        eval("document.images['pic'"+veldnaam+"'].src = ('<?=$imgdir?>/input_checkbox_1.gif');");
        eval("document.input['"+veldnaam+"'].value = false;");
    }
}
//-->
</script>

En vervolgens maak ik met de volgende regel een postboxje aan:

PHP:

1	maakBox("mijnveld",true);

Nu zit mijn probleem in het Javascriptje. Ik geloof dat ik hierin eval moet gebruiken omdat de veldnaam variabel is maar of dit de juiste opzet is weet ik dus niet en hoe ver ik ook zoek, veel verder kom ik niet.

Kan iemand mij van wat hint voorzien?
Dank is groot,

p.s. Sorry van layout-'herindling'

[ Voor 13% gewijzigd door Maxonic op 09-12-2002 13:47 ]

maandag 9 december 2002 13:48

Acties:

thomaske

» » » » » »

je hebt helemaal geen eval nodig!

Brusselmans: "Continuïteit bestaat niet, tenzij in zinloze vorm. Iets wat continu is, is obsessief, dus ziekelijk, dus oninteressant, dus zinloos."

maandag 9 december 2002 13:55

Acties:

whoami

JS is vooral W&G.

P&W -> W&G dus.

https://fgheysels.github.io/

maandag 9 december 2002 14:00

Acties:

crisp

Devver

Pixelated

eval is inderdaad niet nodig; tevens bestaat er geen document.input array.
Ik neem aan dat je de checkboxjes binnen een form aanmaakt. Zo niet, dan kan je beter met id's werken en de inputs met document.getElementById(veldnaam) aanspreken:

JavaScript:

<script type="text/javascript">

function toggleBox(veldnaam) {
    
    if (document.forms['naamvanjeform'].elements[veldnaam].value == 'true') {
        document.images['pic'+veldnaam].src = '<?=$imgdir?>/input_checkbox_0.gif';
        document.forms['naamvanjeform'].elements[veldnaam].value == 'false';
    } else {
        document.images['pic'+veldnaam].src = '<?=$imgdir?>/input_checkbox_1.gif';
        document.forms['naamvanjeform'].elements[veldnaam].value == 'true';
    }
}

</script>

[ Voor 13% gewijzigd door crisp op 09-12-2002 14:01 ]

Intentionally left blank

maandag 9 december 2002 14:03

Acties:

Maxonic

Topicstarter

Heej tnx..
De naam van het forum kan variëren dus ik zal de boxjes idd een id moeten geven

maandag 9 december 2002 14:05

Acties:

crisp

Devver

Pixelated

Maxonic schreef op 09 December 2002 @ 14:03:
Heej tnx..
De naam van het forum kan variëren dus ik zal de boxjes idd een id moeten geven

of de naam van het form ook als parameter meegeven

Intentionally left blank

maandag 9 december 2002 14:09

Acties:

Maxonic

Topicstarter

Afbeeldingslocatie: http://maxonic.mindconnect.nl/tt/images/smilies/sammy.gif

...

Afbeeldingslocatie: http://maxonic.mindconnect.nl/tt/images/smilies/huh.gif

...

Afbeeldingslocatie: http://maxonic.mindconnect.nl/tt/images/smilies/idea.gif

Intelligentie is weer ver bij mij te zoeken.

Werkt GetElementById trouwens in alle versie 5+ browsers?

maandag 9 december 2002 14:10

Acties:

crisp

Devver

Pixelated

Maxonic schreef op 09 December 2002 @ 14:09:
[afbeelding]...[afbeelding]...[afbeelding]

Intelligentie is weer ver bij mij te zoeken.

Werkt GetElementById trouwens in alle versie 5+ browsers?

nee, getElementById wel

Intentionally left blank

maandag 9 december 2002 14:31

Acties:

Maxonic

Topicstarter

Ok, het is werkend.. tnx
Voor de mensen die het script willen:

PHP:

<?
$img = "http://maxonic.mindconnect.nl/tt/images/thema2/input_checkbox_"; //begin van url van je plaatjes

function maakBox($veldnaam,$waarde, $tekst){

    global $img;

    $object = "[img]\"$img$waarde.gif\"[/img]\n";
    $object .= "<input type=\"hidden\" name=\"$veldnaam\" id=\"$veldnaam\" value=\"$waarde\">\n";
    $object .= "&nbsp;<a onclick=\"toggleBox('$veldnaam')\">$tekst</a>";

    return $object;
}

?>

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Blaat </title>
<script language="JavaScript">
<!--
function toggleBox(veldnaam) {
    
    if (document.getElementById(veldnaam).value == 'true') {
        document.images['pic'+veldnaam].src = '<?=$img?>false.gif';
        document.getElementById(veldnaam).value = 'false';
    } else {
        document.images['pic'+veldnaam].src = '<?=$img?>true.gif';
        document.getElementById(veldnaam).value = 'true';
    }
}
//-->
</script>
</head>
<body>
<form method="post" name="input" code="post/reply" enctype="multipart/form-data">
 <? 
 echo maakBox("mijnveld",'true',"Checkboxje 1");
 ?>
 <br>
 <?
 echo maakBox("anderveld",'false',"Checkboxje 2");
  ?>
<br>
</form>
</body>
</html>

maandag 9 december 2002 20:00

Acties:

Verwijderd

Naar aanleiding van jouw probleempje ben ik aan de slag gegaan met eenzelfde script voor checkboxes:

Voorbeeld

[ Voor 3% gewijzigd door Verwijderd op 10-12-2002 15:23 ]

maandag 9 december 2002 20:34

Acties:

Maxonic

Topicstarter

Gaaf..

Ziet er leuk uit. Alleen jammer dat je geen standaard waarde kan opgeven, maar dat valt natuurlijk zo te regelen.

Ik heb een keer een tv-gids-site gezien die hetzelfde concept ook op deze manier heeft opgelost. Dat zag er ook cwl uit, ben alleen de url kwijt.

maandag 9 december 2002 20:41

Acties:

Verwijderd

Maxonic schreef op 09 december 2002 @ 20:34:
Gaaf..

Ziet er leuk uit. Alleen jammer dat je geen standaard waarde kan opgeven, maar dat valt natuurlijk zo te regelen.

Ik heb een keer een tv-gids-site gezien die hetzelfde concept ook op deze manier heeft opgelost. Dat zag er ook cwl uit, ben alleen de url kwijt.

Check again.... kan wel

maandag 9 december 2002 23:12

Acties:

Carnifex

auch

kun je die images ook gewoon preloaden? Ik zie nu namelijk de 1e keer de regel verspringen omdat ie ff moet zoeken naar het 2e plaatje (gebeurt maar 1 keer, weet ik, maar is nog net ff iets netter misschien

). Ik weet niet zo veel van JS, maar ik heb ergens een keer iets gelezen over het preloaden van images, of slaat dit weer helemaal nergens op?

maandag 9 december 2002 23:28

Acties:

crisp

Devver

Pixelated

Maxonic schreef op 09 December 2002 @ 20:34:
Gaaf..

Ziet er leuk uit. Alleen jammer dat je geen standaard waarde kan opgeven, maar dat valt natuurlijk zo te regelen.

Ik heb een keer een tv-gids-site gezien die hetzelfde concept ook op deze manier heeft opgelost. Dat zag er ook cwl uit, ben alleen de url kwijt.

Check het voorkeuren window van de GoT Tracker maar eens; zijn bijna allemaal custom controls...

Intentionally left blank

dinsdag 10 december 2002 00:05

Acties:

Maxonic

Topicstarter

crisp schreef op 09 December 2002 @ 23:28:
[...]

Check het voorkeuren window van de GoT Tracker maar eens; zijn bijna allemaal custom controls...

Ja, dat is zekerleuk gedaan.. Maar sorry Crisp.. Ik zweer toch bij Hopttopic

kun je die images ook gewoon preloaden?

PHP:

function preload($plaatjes){

    $imgdir = "http://server.nl/dir/images/"; // Map met je plaatjes

    $plaatjesarray = explode(",",$plaatjes);
    $script  = "function preload(naam,url) {\n";
    $script .= "        if (document.images) {\n";
    $script .= "            eval(naam + ' = new Image()')\n";
    $script .= "            eval(naam + '.src = \"' + url + '\"')\n";
    $script .= "        }\n";
    $script .= "}\n\n";

    for($a = 0; $plaatjesarray[$a]; $a++)
        $script .= "preload('$plaatjesarray[$a]','$imgdir/$plaatjesarray[$a]')\n";
        
    return $script;
}

In de header van html:

PHP:

<?

echo preload('radio_1.gif,radio_0.gif,checkbox_1.gif_checkbox_0.gif');

?>

[ Voor 24% gewijzigd door Maxonic op 10-12-2002 00:06 ]

dinsdag 10 december 2002 09:14

Acties:

crisp

Devver

Pixelated

Maxonic schreef op 10 december 2002 @ 00:05:
[...]

Ja, dat is zekerleuk gedaan.. Maar sorry Crisp.. Ik zweer toch bij Hopttopic

Ieder z'n meug

[...]

PHP:

function preload($plaatjes){

    $imgdir = "http://server.nl/dir/images/"; // Map met je plaatjes

    $plaatjesarray = explode(",",$plaatjes);
    $script  = "function preload(naam,url) {\n";
    $script .= "        if (document.images) {\n";
    $script .= "            eval(naam + ' = new Image()')\n";
    $script .= "            eval(naam + '.src = \"' + url + '\"')\n";
    $script .= "        }\n";
    $script .= "}\n\n";

    for($a = 0; $plaatjesarray[$a]; $a++)
        $script .= "preload('$plaatjesarray[$a]','$imgdir/$plaatjesarray[$a]')\n";
        
    return $script;
}

In de header van html:

PHP:

<?

echo preload('radio_1.gif,radio_0.gif,checkbox_1.gif_checkbox_0.gif');

?>

Waarom met zo'n smerige eval? Je kan het ook in een array stoppen:

JavaScript:

var plaatjesArray = new Array();
var imageDir = 'http://server.nl/dir/images/';

function preload(plaatjes) {

  var tempArray = plaatjes.split(',');

  for (var i = 0; i < tempArray.length; i++) {

    plaatjesArray[i] = new Image();
    plaatjesArray[i].src = imageDir + tempArray[i];

  }

}

preload('radio_1.gif,radio_0.gif,checkbox_1.gif_checkbox_0.gif');

Intentionally left blank