Afficher une page web réalisée en JS

**coeurdamande** · 17/06/2012, 21h04

Bonjour,

Je suis actuellement étudiante en stage d'entreprise et je dois réaliser entre autres choses un programme dont la page d'accueil doit être en javascript(le chef de projet, qui est absent en ce moment, a déjà codé cette page en HTML, je me base donc dessus). Je suis dessus depuis une semaine mais je n'arrive pas à afficher cette page (j'obtiens juste le fond en couleur noire)...
Mon architecture est la suivante: j'ai une page avec mes fonctions js (je ne la mets pas ici), une autre avec ma page d'accueil en js, une page html qui appellera au final cette page js et qui se chargera d'afficher l'accueil,une feuille de style.

Quelqu'un peut-il me donner un coup de main en jetant un oeil sur mon code?
Merci beaucoup!

feuille sur laquelle je me base:

Code html :

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
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<div id="button_calender" class="button" onmouseover="javascript:displayPreview('button_calender')" 
onmouseout="javascript=initPage('button_calender')">
<a href="index.php?option=com_jtagcalendar&amp;view=main&amp;Itemid=121">
<img src="image/button_calendar.png" alt="button calendar" border="0" height="127" width="253" /></a></div>
 
<div id="button_transaction" class="button" onmouseover="javascript:displayPreview('button_transaction')" onmouseout="javascript=initPage('button_transaction')"><a href="index.php?option=com_content&amp;view=article&amp;id=6:salon-virtuel&amp;catid=14:salon-virtuel&amp;Itemid=127"><img src="image/button_expo.png" alt="button expo" border="0" height="127" width="253" /></a></div>
 
<div id="button_ecoData" class="button" onmouseover="javascript:displayPreview('button_ecoData')" onmouseout="javascript=initPage('button_ecoData')"><a href="index.php?option=com_content&amp;view=article&amp;id=209&amp;Itemid=276"><img src="image/button_ecoData.png" alt="button ecoData" border="0" height="127" width="253" /></a></div>
 
<div id="button_expert" class="button" onmouseover="javascript:displayPreview('button_expert')" onmouseout="javascript=initPage('button_expert')"><a href="index.php?option=com_content&amp;view=article&amp;id=15&amp;Itemid=144"><img src="image/button_expert.png" alt="button expert" border="0" height="127" width="253" /></a></div>
 
<div id="button_expo" class="button" onmouseover="javascript:displayPreview('button_expo')" onmouseout="javascript=initPage('button_expo')"><img src="image/button_transaction.png" alt="button transaction" border="0" height="127" width="253" /></div>
 
<div id="button_jobs" class="button" onmouseover="javascript:displayPreview('button_jobs')" onmouseout="javascript=initPage('button_jobs')"><img src="image/button_jobs.png" alt="button jobs" border="0" height="127" width="253" /></div>
 
<div id="button_smallAds" class="button" onmouseover="javascript:displayPreview('button_smallAds')" onmouseout="javascript=initPage('button_smallAds')"><img src="image/button_smallAds.png" alt="button smallAds" border="0" height="127" width="253" /></div>
 
<div id="button_socialNetwork" class="button" onmouseover="javascript:displayPreview('button_socialNetwork')" onmouseout="javascript=initPage('button_socialNetwork')"><a href="index.php?option=com_community&amp;view=frontpage&amp;Itemid=264"><img src="image/button_socialNetwork.png" alt="button socialNetwork" border="0" height="127" width="253" /></a></div>
 
<div id="button_toolsBox" class="button" onmouseover="javascript:displayPreview('button_toolsBox')" onmouseout="javascript=initPage('button_toolsBox')"><a href="index.php?option=com_content&amp;view=article&amp;id=243:accueil-outils&amp;catid=110:toolbox&amp;Itemid=217"><img src="image/button_toolsBox.png" alt="button toolsBox" border="0" height="127" width="253" /></a>
 
</div>

Ma feuille JS (je n'ai pas tout fait, vu que je suis bloquée dès la 1ère image)

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
var mainDiv = document.createElement('div');
 
var newDiv = document.createElement('div');
newDiv.setAttribute("class", "background");
mainDiv.appendChild(newDiv);
 
var newOtherDiv = document.createElement('div');
newOtherDiv.setAttribute("class", "page");
 newDiv.appendChild(newOtherDiv);
 
var p = document.createElement('div');
p.setAttribute("class", "layout");
 newOtherDiv.appendChild(p);
 
var t = document.createElement('div');
t.id = 'preview';
t.setAttribute("class", "hidden");
p.appendChild(t);
 
var newText = document.createTextNode(' ');
t.appendChild(newText);
 
var tSuite =  document.createElement('div');
tSuite.id = 'previewSelect';
tSuite.setAttribute("class", "hidden previewPanel");
p.appendChild(tSuite);
 
var newText = document.createTextNode(' ');
tSuite.appendChild(newText);
 
var v_div = document.createElement("div");
  v_div.id = 'button_calendar';
  v_div.setAttribute("class", "button button_calendar"); 
 
var ele_JS = document.createAttribute('OnMouseOver');
ele_JS.nodeValue = "javascript:displayPreview('button_calendar')";
v_div.setAttributeNode(ele_JS);
 
var souris = document.createAttribute('onmouseout');
souris.nodeValue = "javascript=initPage('button_calendar')";
v_div.setAttributeNode(souris);
 
p.appendChild(v_div);
document.body.appendChild(mainDiv);
//document.getElementById('toto').appendChild(mainDiv);

Page finale qui appelera ma JS:

Code html :

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

1
2
3
4
5
6
7
8
9
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style_accueil.css">
<script type='text/javascript' src='accueilJS.js'></script>
</head>
<!-- load the page panel -->
<body><div id="toto"></div></body></html>
<script>document.getElementById('toto').appendChild(mainDiv);
</script>

Ma CSS:

Code css :

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
150
151
152
153
154
155
156
157
158
159
160
161
162
		.background {
		background-color: #000000;
		position: relative;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        height:    1080px;
        background-image:url(welcomePageBackground.png);
        background-repeat: no-repeat;
        }
 
        .page {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width:    1024px;
        height:    667px;
        }
 
        #layout {
        position: absolute;
        margin-top: 80px;
        width:    1024px;
        height:    667px;
        background-image:url(image/t6.jpg);
        background-repeat: no-repeat;
        border: 1px;
        border-style: solid;
        border-color: #81796c;
        border-radius: 20px;
        }
 
 
 
        .hidden {
        display: none;
        }
 
        .visible {
        display: inline;
        }
 
 
 
        .previewPanel {
        position: absolute;
        width: 292px;
        height: 355px;
        opacity: 1;
        border:1px solid #81796c;
        filter:alpha(opacity=100);
        top: 167px;
        left: 395px;
        z-index: 15;
        border-radius: 10px;
        background-repeat: no-repeat;
        }
 
        .previewPanelV
        {
            width:400px;
            height:262px;
            top:200px;
            left:350px;
            border:1px solid #81796c;
 
        }
 
        .previewbutton_calendar {
        background-image:url(image/preview.png);
        }
        .previewbutton_expert {
        background-image:url(image/previewce.png);
        }
        .previewbutton_socialNetwork {
        background-image:url(image/previewrs.png);
        }
        .previewbutton_toolsBox {
        background-image:url(image/previewbo.png);
        }
        .previewbutton_expo{
        border:none;
        }
        .previewbutton_transaction {
        background-image:url(image/previewsv.png);
        }
        .previewbutton_ecoData {
        background-image:url(image/previewde.png);
        }
        .previewbutton_jobs {
        border:none;
        }
        .previewbutton_smallAds {
        border:none;
        }
 
        .button {
        position: absolute;
        cursor: pointer;
        width: 253px;
        height: 127px;
        }
 
        .button img:hover {
        margin: auto;
        width: 278px;
        height: 139px;
        }
 
        #button_calendar { 
        top: 47px;
        left: 193px;
        }
        #button_transaction {
        top: 13px;
        left: 411px;
        }
 
 
        #button_ecoData {
        top: 503px;
        left: 192px;
        }
 
        #button_expert {
        top: 288px;
        left: 795px;
        }
 
        #button_expo {
        top: 208px;
        left: 48px;
        }
 
        #button_jobs {
        top: 468px;
        left: 727px;
        }
 
        #button_smallAds {
        top: 388px;
        left: 0px;
        }
 
        #button_socialNetwork {
        top: 50px;
        left: 669px;
        }
 
        #button_toolsBox {
        top: 525px;
        left: 504px;
        }
 
        .buttonMouseOver {
        z-index: 20;
        }
 
        .buttonMouseOut {
        z-index: 0;
        }

**Darkyl** · 17/06/2012, 22h20

Salut,

A la fin de ta page js, tu marque :

Code :

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

document.body.appendChild(mainDiv);

comme dans ta page html:

Code :

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

document.getElementById('toto').appendChild(mainDiv);

Je pense que tu as déjà un problème de conception.

Aprés, si tu travailles à déclarer des choses que tu veux rajouter dans un div qui n'est pas encore créer, je te conseil de faire une fonction où tu met dedans :
- La creation de ton div principal,
- Les setattribut qui vont bien...

Puis tu passes à l'élément suivant, etc...

Dans ta page html, tu n'as plus qu'a appelé la fonction.

Conseil: fais attention avec les manipulation du DOM car c'est une partie où les navigateurs sont trés différents, donc il se peut que ton code soit compatible dans IE et pas ff ou chrome... Vérifie bien les spécifications.

Sinon, c'est un bon apprentissage ce que tu fais, tu gère au plus bas niveau l'insertion d'élément dans le DOM, donc

mais aujourd'hui on créerai le div avec createElement (ou append en jquery) mais on utiliserai plutôt ajax pour y insérer son contenu.

Pour changer le contenu d'un div en ajax.
Soit tu le gère en ajax pure (je te conseil vivement de te mettre à cette techno), soit tu le fait gérer par jquery:

Code :

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

$('#id_du_div').html("contenu que je veux mettre");

Sinon, je vois pas trop...

**coeurdamande** · 17/06/2012, 23h09

Merci Darkyl,

En fait j'ai bien créé des div puis ajouté les id et class qui vont avec (parfois il y a un id et class sur le mm div) les uns à la suite des autres (je t'accorde que les noms d'attributs ne sont pas très clairs, ça sera changé après résolution des problèmes).

Après, quand tu parles d'ajax, en fait, dans ma page, je n'ai que des images à afficher (donc je dois récupérer des url, des évèments, etc) et je ne sais pas mais il me semble que dans ta proposition, tu ajoutes du contenu texte non?
Du coup, ça ne me servira pas.

Mon problème se situe au niveau de la récupération des url des images, qui sont dans mon css. Quand je crée une div et que je lui donne un nom avec setAttribute, apparemment ce nom de classe, mm s'il correspond au nom de classe dans le css (qui contient l'url),ne suffit pas à permettre d'afficher une image...

Tu as peut-être une idée...

**Darkyl** · 18/06/2012, 00h50

Code :

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

$('#id_du_div').html("contenu que je veux mettre");

C'était un exemple.
Tu peux aussi mettre:

Code :

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

$('#id_du_div').html("<img src='bidule.png'>");

C'est pour cela qu'ajax (jquery simplifie grandement ajax) te permet d'écrire ton contenu dans le div qui n'existe pas, comme tu le ferait s'il existait...
C'est plus simple à concevoir. Sinon concernant ton problème:

Si ton but c'est de généré cela:

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
<div id="button_transaction" class="button" onmouseover="javascript:displayPreview('button_transaction')" onmouseout="javascript=initPage('button_transaction')"><a href="index.php?option=com_content&amp;view=article&amp;id=6:salon-virtuel&amp;catid=14:salon-virtuel&amp;Itemid=127"><img src="image/button_expo.png" alt="button expo" border="0" height="127" width="253" /></a></div>
 
<div id="button_ecoData" class="button" onmouseover="javascript:displayPreview('button_ecoData')" onmouseout="javascript=initPage('button_ecoData')"><a href="index.php?option=com_content&amp;view=article&amp;id=209&amp;Itemid=276"><img src="image/button_ecoData.png" alt="button ecoData" border="0" height="127" width="253" /></a></div>
 
<div id="button_expert" class="button" onmouseover="javascript:displayPreview('button_expert')" onmouseout="javascript=initPage('button_expert')"><a href="index.php?option=com_content&amp;view=article&amp;id=15&amp;Itemid=144"><img src="image/button_expert.png" alt="button expert" border="0" height="127" width="253" /></a></div>
 
<div id="button_expo" class="button" onmouseover="javascript:displayPreview('button_expo')" onmouseout="javascript=initPage('button_expo')"><img src="image/button_transaction.png" alt="button transaction" border="0" height="127" width="253" /></div>
 
<div id="button_jobs" class="button" onmouseover="javascript:displayPreview('button_jobs')" onmouseout="javascript=initPage('button_jobs')"><img src="image/button_jobs.png" alt="button jobs" border="0" height="127" width="253" /></div>
 
<div id="button_smallAds" class="button" onmouseover="javascript:displayPreview('button_smallAds')" onmouseout="javascript=initPage('button_smallAds')"><img src="image/button_smallAds.png" alt="button smallAds" border="0" height="127" width="253" /></div>
 
<div id="button_socialNetwork" class="button" onmouseover="javascript:displayPreview('button_socialNetwork')" onmouseout="javascript=initPage('button_socialNetwork')"><a href="index.php?option=com_community&amp;view=frontpage&amp;Itemid=264"><img src="image/button_socialNetwork.png" alt="button socialNetwork" border="0" height="127" width="253" /></a></div>
 
<div id="button_toolsBox" class="button" onmouseover="javascript:displayPreview('button_toolsBox')" onmouseout="javascript=initPage('button_toolsBox')"><a href="index.php?option=com_content&amp;view=article&amp;id=243:accueil-outils&amp;catid=110:toolbox&amp;Itemid=217"><img src="image/button_toolsBox.png" alt="button toolsBox" border="0" height="127" width="253" /></a>
 
</div>

Tu peux facilement affecter une class css dynamiquement à un div (que tu viens de créer) mais il faut aussi que tu rajoute les balises img qu'il y a dans les div. Celle-ci ne sont pas généré à partir de la class css...

Donc, je te propose:
Tu généres chacun de tes div dynamiquement par la méthode de ton choix soit createElement soit ajax et tu les remplis avec les images qui vont bien.

Moi si j'étais toi je m'embêterai pas:
par ex:
prenons ce div

Code :

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

1
2
3
4
<div id="button_calender" class="button" onmouseover="javascript:displayPreview('button_calender')" 
onmouseout="javascript=initPage('button_calender')">
<a href="index.php?option=com_jtagcalendar&amp;view=main&amp;Itemid=121">
<img src="image/button_calendar.png" alt="button calendar" border="0" height="127" width="253" /></a></div>

Tu dois le créer. Ça tu sais faire.
Tu dois lui affecter un id (button_calender), une class (button),
un mouseover ("javascript:displayPreview('button_calender')"),
un mouseout ("javascript=initPage('button_calender')")
d'ailleur en passant, pas la peine de mettre 'javascript:' sur un appel de fonction par évènement
Tous cela , tu le fait avec setAttribute.
A partir de là, tu l'ajoute au parent.
Là, le div existe dans le DOM et tu peux donc changer son contenu (qui pour l'instant est vierge).
Pour changer son contenu, tu es obligé de passer par ajax.
De deux choses l'une, soit tu peux te servir de jquery au sein de ton entreprise et là c'est facile:

Code :

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

1
2
$('#button_calender').html('<a href="index.php?option=com_jtagcalendar&amp;view=main&amp;Itemid=121">
<img src="image/button_calendar.png" alt="button calendar" border="0" height="127" width="253" /></a>');

soit tu ne peux pas et là il va valoir que tu apprennes les bases d'ajax et je te laisse le soin de chercher des tutos (on restes pas loin si tu as besoin d'aide

).
Voilà, ça ce sont les étapes pour un div...

Note: les premières parties des étapes avec setAttribut: c'est bien parce que tu veux les utiliser (et je te conseille de bien le bosser) mais sinon tu peux carrément faire l'ajout total en ajax:

Code :

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

1
2
3
4
$('#div_parent').append('<div id="button_calender" class="button" onmouseover=displayPreview("button_calender") 
onmouseout=initPage("button_calender")>
<a href="index.php?option=com_jtagcalendar&amp;view=main&amp;Itemid=121">
<img src="image/button_calendar.png" alt="button calendar" border="0" height="127" width="253" /></a></div>');

(méthode jquery, mais la pure ajax revient au même)
C'est quand même plus simple!!!

Afficher une page web réalisée en JS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager