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