cacher div un de plus

**angel2005** · 26/01/2008, 17h08

bonjour, j'ai un souci pour cacher un div. etant totalement debutant en JS, je me suis inspirer du tuto sur ce site, mais voila je pense avoir fais des faux pas en JS, car je ne comprend pas tout.

j'ai sur une page un block div qui apparait quand on clic sur un bouton. jusque la tout va bien. dans ce block j'ai un bouton qui permet de cacher, ce bouton s'appel fermer mais je pense pas que ce soit le nom du bouton le probleme.

j'a donc le code JD comme suis dans lequel les fonctions montre et cacher sont declarer.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<script language="javascript">
//
function checkBrowser() {
    this.ver = navigator.appVersion;
    this.dom = document.getElementById ? 1 : 0;
    this.ie6 = (this.ver.indexOf("MSIE 6") > -1 && this.dom) ? 1 : 0;
    this.ie55 = ((this.ver.indexOf("MSIE 5.5") > -1 || this.ie6) && this.dom) ? 1 : 0;
    this.ie5 = ((this.ver.indexOf("MSIE 5") > -1 || this.ie5 || this.ie6) && this.dom) ? 1 : 0;
    this.ie4 = (document.all && !this.dom) ? 1 : 0;
    this.ns5 = (this.dom && parseInt(this.ver) >= 5) ? 1 : 0;
    this.ns4 = (document.layers && !this.dom)? 1 : 0;
    this.ie4plus = (this.ie6 || this.ie5 || this.ie4);
    this.ie5plus = (this.ie6 || this.ie5);
    this.bw = (this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns5);
    this.crosoft = (this.ie6 || this.ie55 || this.ie5 || this.ie4 || this.ie4plus || this.ie5plus);
 
    return this;
}
 
theBrowser = new checkBrowser();
 
if (!document.getElementById) {
    document.getElementById = getObjectById;
}
function getObjectById(ID) {
    var obj;
    if (theBrowser.dom) return document.getElementById(ID);
    else if (theBrowser.ie4) return document.all(ID);
    else if (theBrowser.ns4) return eval('document.' + ID);
}
function getObjectStyle(obj) {
    if (!getObjectById) return;
    if (theObj = getObjectById(obj)) return theObj.style;
}
function getObjectClasse(obj) {
    if (!getObjectById) return;
    if (theObj = getObjectById(obj)) return theObj;
}
function getDimensionObj(obj, act) {
    if (!getObjectById) return;
    if (theObj = getObjectById(obj)) {
        switch(act) {
            case 'top' : return theObj.offsetTop;
            break;
            case 'left' : return theObj.offsetLeft;
            break;
            case 'width' : return theObj.offsetWidth;
            break;
            case 'height' : return theObj.offsetHeight;
            break;
        }
    }
}
function setDimensionObj(obj, act, dim) {
    if (!getObjectStyle) return;
    if (theObj = getObjectStyle(obj)) {
        switch(act) {
            case 'top' : theObj.top = dim + 'px';
            break;
            case 'left' : theObj.left = dim + 'px';
            break;
            case 'width' : theObj.width = dim + 'px';
            break;
            case 'height' : theObj.height = dim + 'px';
            break;
        }
    }
}
function setVisibilityObj(obj, act) {
    if (!getObjectStyle) return;
    if (theObj = getObjectStyle(obj)) {
        switch(act) {
            case 'aff' : theObj.visibility = 'visible';
            break;
            case 'cacher' : theObj.visibility = 'hidden';
            break;
        }
    }
}
function afficherBox(obj, widthBox, heightBox, evt) {
    //var largeurBox = parseInt(obj.width.substring(0, (obj.width.length - 2))) + 20;
    var largeurBox = getDimensionObj(obj, 'width');
    if (evt.pageY) {
        setDimensionObj(obj, 'left', evt.pageX - largeurBox);
        setDimensionObj(obj, 'top', evt.pageY);
    }
    else {
        setDimensionObj(obj, 'left', event.x - largeurBox);
        // Ajoute la hauteur du d�filement du scrollbar
        setDimensionObj(obj, 'top', document.body.scrollTop + event.y);
    }
    setVisibilityObj(obj, 'aff');
}
//
//
//
function infoMailing(act, id, evt) {
    var obj = 'infoMailing';
    formCmd = document.forms['updateStatus'];
    formBox = document.forms['infoMail'];
    switch (act) {
        case 'supprimer' :
            var id = formBox.elements['key'].value;
            setVisibilityObj(obj, 'cacher');
            formCmd.elements['update_oID[' + id + ']'].checked = false;
            if (theObj2 = getObjectClasse('tr_' + id)) {
                if (theObj2.className !== 'dataTableRow2') theObj2.className = 'dataTableRow2';
            }
        break
        case 'update' :
            var id = formBox.elements['key'].value;
            var selected_value = formBox.elements['info_status'].selectedIndex;
            formCmd.elements['new_status[' + id + ']'].value = formBox.elements['info_status'].options[selected_value].value;
            formCmd.elements['comments[' + id + ']'].value = formBox.elements['info_comments'].value;
            formCmd.elements['update_oID[' + id + ']'].checked = true;
            if (formBox.elements['info_notify'].checked) {
                formCmd.elements['notify[' + id + ']'].value = true;
            }
            else {
                formCmd.elements['notify[' + id + ']'].value = false;
            }
            setVisibilityObj(obj, 'cacher');
            if (theObj2 = getObjectClasse('tr_' + id)) {
                if (theObj2.className !== 'dataTableRowSelected2') theObj2.className = 'dataTableRowSelected2';
            }
        break;
        case 'montrer' :
                formBox.elements['key'].value = id;
                formBox.elements['info_comments'].value = formCmd.elements['comments[' + id +']'].value;
                formBox.elements['info_status'].value = formCmd.elements['new_status[' + id +']'].value;
                if (formCmd.elements['notify[' + id + ']'].value == 'true') {
                    formBox.elements['info_notify'].checked = true;
                }
                else {
                    formBox.elements['info_notify'].checked = false;
                }
                afficherBox(obj, 0, 0, evt);
        break;
    }
}
//
function checkAll(act) {
    var nbOid = <?php echo $tot_query; ?>;
    for(i=0; i < nbOid; i++) {
        document.forms['updateStatus'].elements['update_oID[' + i + ']'].checked = act;
        document.forms['updateStatus'].elements['notify[' + i + ']'].value = act;
    }
}
</script>

et dans ma page le code div qui affiche donc un block

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="infoMailing" style="position: absolute; top: 120px; left: 250px; height: 1px; visibility: hidden;">
    <form name="infoMail">
    <?php echo tep_draw_hidden_field('key', '0'); ?>
    <table border="0" cellspacing="0" cellpadding="0" style="width: 470px; height: 150px; background: #f0f0f0; border: 2px solid #cccccc;">
    <tr style="text-align: right;">
        <td colspan="4" class="main"><input type="button" value="fermer" onclick="javascript:infoMailing('fermer');">&nbsp;&nbsp;</td>
    </tr>
    <tr style="height: 25px;">
        <td class="main" style="text-align: right;"><?php echo BUS_NOTIFY_CUSTOMERS; ?>&nbsp;:</td>
        <td class="main"><?php echo tep_draw_checkbox_field('info_notify', 'off'); ?></td>
        <td class="main" style="text-align: right;"><?php echo BUS_TEXT_NEW_STATUS; ?>&nbsp;:</td>
        <td><?php echo tep_draw_pull_down_menu('info_status', $orders_statuses); ?></td>
    </tr>
    <tr style="text-align: center;">
        <td colspan="4"><?php echo tep_draw_textarea_field('info_comments', 'soft', '60', '5', 'Un commentaire ...', 'style="width: 450px;"'); ?></td>
    </tr>
    <tr>
        <td colspan="4" class="main" style="text-align: right;"><?php echo tep_image_button('button_update.gif', IMAGE_UPDATE, 'onclick="infoMailing(\'update\', 0)"').'&nbsp;'.tep_image_button('button_delete.gif', IMAGE_DELETE, 'onclick="infoMailing(\'supprimer\', 0)"'); ?>&nbsp;</td>
    </tr>
    </table>
    </form>
</div>

si quelqu'un a une aide elle serait la bienvenu si possible avec une petite explication histoire que je comprenne un peu mieux.

merci

cordialement

angel