• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit ein-/ausblenden eines Div-Containers

McCry

Mitglied
Hi,
ich habe folgendes Problem:
ich habe aus einem Tut-Video, wie ich einen Div Container vergrößere.
Im Video macht er es mit Chrome. ich habe auch Chrome benutzt, aber es funktioniert nicht. Habs auch mit Firefox getestet, und da gehts!
mein Code:
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
    $(function() {
       $('#profil').click(function() {
        $(this).animate({
        width: '300px'
        }, 1000, function() {
        // Animation complete.
        });
       }); 
    });

Könnt ihr mir helfen?

In Safari, Opera und Firefox gehts einwandfrei.
 
Werbung:
Was genau ist denn dein Fehler? Bei mir geht der Code ( wenn ich dein fehlendes </script> ergaenze)

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
    $(function() {
       $('#profile').click(function() {
        $(this).animate({
        width: '300px'
        }, 1000, function() {
        // Animation complete.
        });
       }); 
    });
</script>
</head>

<body>

<div id="profile" style="background:black;width:100px; height:200px;">
    
</div>
</body>
</html>
 
Oh. das </script> habe ich vergessen zu kopieren.
Hier mal der Code von der kompletten Seite:
Code:
<html>
    <head>
        <?php
           require'include/design/head.php';
        ?>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script>
            $(function() {
               $('#profil').click(function() {
                $(this).animate({
                width: '300px'
                }, 1000, function() {
                // Animation complete.
                });
               }); 
               $('#profilC').click(function() {
                $(this).animate({
                width: '20px'
                }, 1000, function() {
                // Animation complete.
                });
               }); 
            });
        </script>
    </head>
    <body>
        <div id="profil"></div>
        <?php
           require 'include/design/body.php';
        ?>
    </body>
</html>

CSS:
Code:
#profil{
    width:20px;
    height: 700px;
    float: left;
    margin-top: 20px;
    background-color: grey;
    position: absolute;
}
 
Werbung:
Also deinen Code kopiert ( nur die includes weggelassen)

Code:
<html>
    <head>
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script>
            $(function() {
               $('#profil').click(function() {
                $(this).animate({
                width: '300px'
                }, 1000, function() {
                // Animation complete.
                });
               }); 
               $('#profilC').click(function() {
                $(this).animate({
                width: '20px'
                }, 1000, function() {
                // Animation complete.
                });
               }); 
            });
        </script>
        <style type="text/css">
            #profil{
                width:20px;
                height: 700px;
                float: left;
                margin-top: 20px;
                background-color: grey;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="profil"></div>
    </body>
</html>

Funktioniert bei mir auch im Chrome....

Hast du eventuell einen Link zur Seite? Vllt spielen anderen Faktoren eine Rolle
 
Glaub nicht dass es an XAMPP an sich liegt... Habs selber mit ner XAMPP Installation getestet...
Kopier mal den Code den ich grade gepostet hab in ne neue Seite und schau obs dort geht. Wuerd mich mal interessieren.
 
Werbung:
Kann ich mir schwer vorstellen, aber wenn dus sagst ;).
Nicht mal Javascript Fehler im Error-Log von Chrome? Vllt hast du fuer localhost aus versehen Javascript verboten im Chrome, oder es ist nicht erlaubt irgendwelche exterenen Skripte zu laden...

Ich mein im Prinzip brauchst du ja nicht mal XAMPP um die Seite auszufuehren... Ist ja kein serverseitiger Code dabei!
 
Kleiner Tipp am Rande: wenn es um Darstellungen oder Interaktionen im Browser geht, ist der erzeugte HTML-Code relevant. Der PHP-Code bringt niemandem etwas, da es hier dann durchaus Unterschiede zum erzeugten HTML-Code geben kann und wird. Dein HTML-Code ist zudem nicht vollständig, da dort der Doctype fehlt.
 
Werbung:
Zurück
Oben