✔ jQuery .resize findet existierende DIV Elemente nicht...

NetBull

NetBull

Erfahrenes Mitglied
Moin,

arbeite mich nun in jQuery ein und folgendes Konstrukt macht mir Probleme:

Code: 
<script>

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

            $(window).resize(function(){
                setLoginFramePosition();
            });

            function setLoginFramePosition(){
                var bH = $('#PageWrapper').outerHeight();
                var wH = $(window).innerHeight();
                var nH = 0;
                if( wH > bH ){
                    nH = parseInt((wH - bH)/2);
                    $('#PageWrapper').css('padding-top', nH + 'px');
                }
            }
   
        </script>

Beim Feuern des .ready Events wird das DIV gefunden und richtig positioniert, beim Feuern des .resize() nicht. Da ist der Fehler das var bH = $('#PageWrapper') undefined ist. Woran liegt das?

LG NetBu||
 
Hallo,

auf die Schnelle konnte ich in der HTML-Spezifikation und im Internet nichts Offizielles bzgl. des Zeitpunkts des ersten resize-Events lesen.

Als Zwischenlösung könntest du den resize-Handler einfach erst im ready-Handler registrieren.
 
@ComFreek

Habs mal umgestellt:

Code: 
<script>

            $(document).ready(function(){
                setLoginFramePosition();
                $(window).resize(function(){                    
                    setLoginFramePosition();
                });
            });           

            function setLoginFramePosition(){
                // this method is placing the main div element centered in vertical way
                var bH = $('#PageWrapper').outerHeight();
                var wH = $(window).innerHeight();
                var nH = 0;
                if( wH > bH ){
                    nH = parseInt((wH - bH)/2);
                    $('#PageWrapper').css('padding-top', nH + 'px');
                }
            }
   
        </script>

Aber der Fehler bleibt...
 
klar... Hier der HTML Code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" dir="ltr">

    <head>
  
          <base href="http://mosys-dev.vbx/dml-joomla/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="author" content="Super User" />
  <meta name="description" content="Mein Profil im Internet das sowohl bei privaten als auch bei beruflichen Kontakten viele Fragen klären kann" />
  <meta name="generator" content="Joomla! - Open Source Content Management" />
  <title>Home</title>
  <link href="http://mosys-dev.vbx/dml-joomla/" rel="canonical" />
  <link href="/dml-joomla/templates/dmltemplate/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <script src="/dml-joomla/media/jui/js/jquery.min.js" type="text/javascript"></script>
  <script src="/dml-joomla/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
  <script src="/dml-joomla/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
  <script src="/dml-joomla/media/system/js/caption.js" type="text/javascript"></script>
  <script type="text/javascript">
jQuery(window).on('load',  function() {
                new JCaption('img.caption');
            });
  </script>

        <!-- include style sheet for offline page only -->
        <link rel="stylesheet" href="/dml-joomla/templates/dmltemplate/css/offline.css" type="text/css" />
                  
        <link rel="stylesheet" href="/dml-joomla/templates/system/css/general.css" type="text/css" />

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      
        <script>

            $(document).ready(function(){
                setLoginFramePosition();
                $(window).resize(function(){
                    setLoginFramePosition();
                });
            });          

            function setLoginFramePosition(){
                // this method is placing the main div element centered in vertical way
                var bH = $('#PageWrapper').outerHeight();
                var wH = $(window).innerHeight();
                var nH = 0;
                if( wH > bH ){
                    nH = parseInt((wH - bH)/2);
                    $('#PageWrapper').css('padding-top', nH + 'px');
                }
            }
  
        </script>
  
    </head>
  
    <body>
  
        <div id="PageWrapper">
      
            <div id="system-message-container">
    </div>

          
            <div id="frame" class="outline">
                  
                <div id="logo"></div>
                          
                <h1>
                    Mein Internet Profil                </h1>
              
                <p>Meine Internet-Seite ist derzeit nur für registrierte Benutzer zugänglich. Wenn Sie ein Benutzerkonto haben dann melden Sie sich bitte hier an..</p>  
                <form action="/dml-joomla/index.php" method="post" id="form-login">
                    <fieldset class="input">
                        <p id="form-login-username">
                            <label for="username">Benutzername</label>
                            <input name="username" id="username" type="text" class="inputbox" alt="Benutzername" size="18" />
                                <div class="EndFloat"></div>
                            </p>
                            <p id="form-login-password">
                                <label for="passwd">Passwort</label>
                            <input type="password" name="password" class="inputbox" size="18" alt="Passwort" id="passwd" />
                        </p>
  
                                                                      
                                                        <p id="form-login-remember">
                                <label for="remember" id="rememberLabel">Angemeldet bleiben</label>
                                <input type="checkbox" name="remember" class="inputbox" value="yes" alt="Angemeldet bleiben" id="remember" />
                                </p>                      
                        <p id="submit-buton">
                            <label>&nbsp;</label>
                            <input type="submit" name="Submit" class="button login" value="Anmelden" />
                        </p>
                      
                        <input type="hidden" name="option" value="com_users" />
                        <input type="hidden" name="task" value="user.login" />
                        <input type="hidden" name="return" value="aHR0cDovL21vc3lzLWRldi52YngvZG1sLWpvb21sYS8=" />
                      
                        <input type="hidden" name="c11ffc78efa7ff5a87bf48a30f31072a" value="1" />                    </fieldset>
                </form>
                  
            </div>
              
        </div>
      
    </body>
  
</html>
 
Zuletzt bearbeitet:
Danke, und wo tritt der Fehler genau auf? Du sagtest bei var bh = .... Kannst du bitte die vollständige Fehlermeldung kopieren? Falls Zeilenangaben enthalten sind, bitte diese auch mit dem HTML oben abgleichen, ob sie immer noch übereinstimmen.
 
Uncaught TypeError: undefined is not a function
In Zeile 43 : var bH = $('#PageWrapper').outerHeight();
 
mit folgendem Construct bekomme ich den gleichen Fehler.
console.log($('#PageWrapper'));
var bH = $('#PageWrapper').outerHeight();
und ich teste derzeit auf FireFox und Chrome.
Die Fehlermeldung war aus Chrome in FireFox heisst es nur TypeError: $ is not a function
 
Wenn ich bei Chrome/Firefox folgendes direkt in der Konsole ausgebe bekomme ich den gleichen Fehler:
$(document) ... ??? müsste mir das nicht automatisch den Baum von Document zurückgeben?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück