Hallo, ik heb jullie hulp nodig want ik kom er echt niet uit:shocked:
onder de tags <script> heb ik een stukje code zitten wat uitgevoerd moet worden als de pagina ingeladen wordt.
Ben nu al een paar uur bezig en heb van alles geprobeerd maar kom er helaas niet uit,
Kan iemand mij misschien een handje helpen?
[JS]<!DOCTYPE html>
<html>
<head>
<title>hallo!</title>
<style>
body {
margin: 50px;
}
p {
text-align: center;
margin: 8px;
font-size:36px;
font-family: Helvetica, Arial, Verdana;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
zoom: 1;
}
#hello {
color:green;
-webkit-animation: hello 5s infinite; /* Saf5, Chrome */
-moz-animation: hello 5s infinite; /* FF5+ */
-ms-animation: hello 5s infinite; /* IE10 */
}
.selected { color:red; }
.highlight {
-webkit-animation: goodbye 5s infinite; /* Saf5, Chrome */
-moz-animation: goodbye 5s infinite; /* FF5+ */
-ms-animation: goodbye 5s infinite; /* IE10 */
}
@-webkit-keyframes hello {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@-moz-keyframes hello {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@-ms-keyframes hello {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@-webkit-keyframes goodbye {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 0.0; }
}
@-moz-keyframes goodbye {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 0.0; }
}
@-ms-keyframes goodbye {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 0.0; }
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
//Onderstaande code is waar het om gaat.
$("p:last").addClass("selected highlight");
</script>
</head>
<body>
<p id="hello">hallo</p>
<p>beste</p>
<p>bezoeker</p>
</body>
</html>
[/JS]
alvast heel erg bedankt voor de hulp!
onder de tags <script> heb ik een stukje code zitten wat uitgevoerd moet worden als de pagina ingeladen wordt.
Ben nu al een paar uur bezig en heb van alles geprobeerd maar kom er helaas niet uit,
Kan iemand mij misschien een handje helpen?

[JS]<!DOCTYPE html>
<html>
<head>
<title>hallo!</title>
<style>
body {
margin: 50px;
}
p {
text-align: center;
margin: 8px;
font-size:36px;
font-family: Helvetica, Arial, Verdana;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
zoom: 1;
}
#hello {
color:green;
-webkit-animation: hello 5s infinite; /* Saf5, Chrome */
-moz-animation: hello 5s infinite; /* FF5+ */
-ms-animation: hello 5s infinite; /* IE10 */
}
.selected { color:red; }
.highlight {
-webkit-animation: goodbye 5s infinite; /* Saf5, Chrome */
-moz-animation: goodbye 5s infinite; /* FF5+ */
-ms-animation: goodbye 5s infinite; /* IE10 */
}
@-webkit-keyframes hello {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@-moz-keyframes hello {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@-ms-keyframes hello {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@-webkit-keyframes goodbye {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 0.0; }
}
@-moz-keyframes goodbye {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 0.0; }
}
@-ms-keyframes goodbye {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 0.0; }
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
//Onderstaande code is waar het om gaat.
$("p:last").addClass("selected highlight");
</script>
</head>
<body>
<p id="hello">hallo</p>
<p>beste</p>
<p>bezoeker</p>
</body>
</html>
[/JS]
alvast heel erg bedankt voor de hulp!