element groote veranderen.
Ik probeer met jquery een element groter te maken en als ik op een ander element klik, met deze code:
Code (php)
1
2
3
4
5
2
3
4
5
$ (function (){
$(".appwindowbar").click({
$(".appwindow").addClass("fullsize");
});
});
$(".appwindowbar").click({
$(".appwindow").addClass("fullsize");
});
});
de class appwindowbar staat in een div met de class appwindow.
Maar op een of andere maniet werkt het niet! ik heb al een paar mensen gevraagd en volgens hun zou het moeten werken.
Met de class fullsize maak ik de div 100% breed en hoog
Ik hoop dat iemand hierbij kan helpen.
Fijne middag/avond,
Pascal
Krijg je een foutmelding? Wel met de developer tools kijken dan!
Is appwindowbar een dynamisch aangemaakt element?
Code (php)
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
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
<?php
session_start();
if (isset($_GET['id'])){
$packname = explode('.' , $_GET['id']);
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LemonOS</title>
<link rel="stylesheet" href="../SYSTEM/css/main.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script>
$ (function (){
$(".appwindow").draggable();
});
</script>
<script>
$ (function (){
$(".appwindowbar").click({
$(".appwindow").addClass("fullsize");
});
});
</script>
</head>
<body>
<?php
if (isset($_GET['id'])){
?>
<div class="appwindow">
<h1 class="appwindowbar"><?php echo $packname['2']; ?><a class="close" href="?">X</a></h1>
<p><iframe src="../SYSTEM/user/<?php echo $_SESSION['user']; ?>/apps/<?php echo $_GET['id']; ?>" frameborder="0" style="border:0"></iframe></p>
</div>
<?php
}
?>
session_start();
if (isset($_GET['id'])){
$packname = explode('.' , $_GET['id']);
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LemonOS</title>
<link rel="stylesheet" href="../SYSTEM/css/main.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script>
$ (function (){
$(".appwindow").draggable();
});
</script>
<script>
$ (function (){
$(".appwindowbar").click({
$(".appwindow").addClass("fullsize");
});
});
</script>
</head>
<body>
<?php
if (isset($_GET['id'])){
?>
<div class="appwindow">
<h1 class="appwindowbar"><?php echo $packname['2']; ?><a class="close" href="?">X</a></h1>
<p><iframe src="../SYSTEM/user/<?php echo $_SESSION['user']; ?>/apps/<?php echo $_GET['id']; ?>" frameborder="0" style="border:0"></iframe></p>
</div>
<?php
}
?>
en de rest is niet van toepassing
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script>
$ (function (){
$(".appwindow").draggable();
});
</script>
<script>
$ (function (){
$(".appwindowbar").click({
$(".appwindow").addClass("fullsize");
});
});
</script>
$ (function (){
$(".appwindow").draggable();
});
</script>
<script>
$ (function (){
$(".appwindowbar").click({
$(".appwindow").addClass("fullsize");
});
});
</script>
waarom niet
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<script>
$ (function () {
$(".appwindow").draggable();
$(".appwindowbar").click({
$(".appwindow").addClass("fullsize");
});
});
</script>
$ (function () {
$(".appwindow").draggable();
$(".appwindowbar").click({
$(".appwindow").addClass("fullsize");
});
});
</script>
Hoeveel appwindows heb je?
Indien je er één hebt: gebruik dan een id in plaats van een class. een class is meer voor een groep elementen.
Indien je er meerdere hebt maak je ze met jouw code dan allemaal fullsize. (als het zou werken).
Wat er nu gebeurt is dat de js code uitgevoerd wordt in de browser zodra het geladen is. Dat betekent dat er een event handler wordt gezien (de click functie) en dat de browser dan gaat zoeken naar het appwindowbar element. Dat element bestaat op dat moment echter nog niet, want dat wordt pas erna geladen. Resultaat: de event handler wordt aan geen enkel element gehangen en zal dus ook niet worden geactiveerd.
Oplossing 1: plaats alle event handlers (en bij voorkeur all jquery code) binnen een $(document).ready() blok. Dan wordt de code pas uitgevoerd als het hele document geladen is en dus ook alle elementen bestaan:
Code (js)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
$ (function (){
$(".appwindow").draggable();
});
$ (function (){
$(".appwindowbar").click({
$(".appwindow").addClass("fullsize");
});
});
});
$ (function (){
$(".appwindow").draggable();
});
$ (function (){
$(".appwindowbar").click({
$(".appwindow").addClass("fullsize");
});
});
});
Oplossing 2: Plaats al je javascript code in een script tag als allerlaatste voor de body sluiten tag. Op die manier wordt al je code wel direct uitgevoerd, maar omdat dan de elementen al bestaan kunnen de event handlers wel correct worden gelinkd.
Code (php)
1
2
2
$(".appwindowbar").click({
});
});
niet liever dit maken?
Code (php)
1
2
2
$(".appwindowbar").click(function() {
});
});
Toevoeging op 21/07/2014 20:38:44:
Volgens mij zit je er nu even naast erwin.
Code (php)
1
2
2
$ (function (){
});
});
is hetzelfde als
Code (php)
1
2
2
$(document).ready(function(){
});
});
Gewijzigd op 21/07/2014 20:40:39 door Frank Nietbelangrijk
Zo heb ik het nog nooit gebruikt en daarom er waarschijnlijk overheen gekeken. Inderdaad moet $(function(){}); ook werken en is dat deel dus niet het probleem. Je andere opmerking, daar zal het dan liggen....
