PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
?

element groote veranderen.

Door Onbekende gebruiker op 21-07-2014 16:57
1.164 views
Beste,

Ik probeer met jquery een element groter te maken en als ik op een ander element klik, met deze code: 

$ (function (){
            $(".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
E
Erwin H
21-07-2014 17:34
Wat werkt er wel, wat werkt er niet? Wordt de class wel aan het element gegeven, maar werkt de css niet? Of komt de class er zelfs niet bij?
?
Onbekende gebruiker
21-07-2014 17:43
De class komt er niet bij als ik bij inspect element kijk
E
Erwin H
21-07-2014 18:18
Jquery wel ingeladen?
Krijg je een foutmelding? Wel met de developer tools kijken dan!
Is appwindowbar een dynamisch aangemaakt element?
?
Onbekende gebruiker
21-07-2014 18:22
jQuery is ingeladen via Google Hosted Libaries. Via de console kreeg ik wel een foutmelding maar dat was een php foutje. de class appwindowbar is een element die ik zelf erin heb gezet en die niet via JS op jQuery word aangemaakt
E
Erwin H
21-07-2014 18:44
Waar staat bovenstaande code? Bovenaan in het document, of onderop? Of staat het binnen een $(document).ready() stuk?
?
Onbekende gebruiker
21-07-2014 19:57
Ik geef wel even de hele code: 

<?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
Frank Nietbelangrijk
21-07-2014 20:25
Waarom 

    <script>
        $ (function (){
            $(".appwindow").draggable();
        });
    </script>
    <script>
        $ (function (){
            $(".appwindowbar").click({
                $(".appwindow").addClass("fullsize");
            });
        });

    </script>


waarom niet

    <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).

E
Erwin H
21-07-2014 20:30
Daar was ik inderdaad al bang voor.
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 lang=js]
$(document).ready(function(){
$ (function (){
$(".appwindow").draggable();
});
$ (function (){
$(".appwindowbar").click({
$(".appwindow").addClass("fullsize");
});
});
});
[/code]

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.
Frank Nietbelangrijk
21-07-2014 20:35 gewijzigd op 21-07-2014 20:40
zou je van 

$(".appwindowbar").click({
});

niet liever dit maken?

$(".appwindowbar").click(function() {
});



Toevoeging op 21/07/2014 20:38:44:

Volgens mij zit je er nu even naast erwin.


$ (function (){
});


is hetzelfde als

$(document).ready(function(){
});

E
Erwin H
21-07-2014 22:27
Ik ga je helemaal gelijk geven Frank!
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....

Reageren

Inloggen om te reageren