[Erledigt] Nutzen von document.ready() bei jquery - Seite 3

Igäl · 30.06.2011, 15:55

Dann werde ich diesen Ansatz mal weiter verfolgen und eure Tipps beherzigen. Herzlichen Dank für eure Hilfe. Der Thread hat viel zu meinem Verständnis für den Aufbau beigetragen.

Gruss Igäl

rudygotya · 30.06.2011, 16:05

Zitat:

var $this = $this

Was ist das?

Ein Flüchtigkeitsfehler im Eifer des Gefechts.

PHP-Code:

  $(function()    {
    $(".change_color").click(function()    {
        var $this = $(this),
            fallbackColor = 'magenta',
            colors = {
                test1 : 'red',
                test2 : 'blue'  
            };
        
        $this.css({
            "color" : colors [ $this.attr( "id" ) ] || fallbackColor
        });
    });
});

Igäl · 30.06.2011, 17:35

Sollte mal irgendjemand ähnliche Probleme haben. Ich habe es jetzt so gelöst:

Im CSS:

Code:

/*************************************/
/** Elemente fürs Popup                **/
/*************************************/
.popup {
    display: none;
    position: fixed;
    width: 0;
    height: 0;
    background-image: url("../gfx/layout/box_body_bg.gif");
    z-index: 2;
    border: 1px solid #CCCCCC;
}

.popup h3 {
    background-image: url("../gfx/layout/box_title_bg.gif");
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid #CCCCCC;
}

.popup_background {
    display: none;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000000;
}

.popup_body {
    padding: 10px;
}

Java Script:

PHP-Code:

      //popContainer wird dynamisch durch das PHP erzeugt
    function getPopupProp(requestedPopup)    {
        var popContainer = {
            login_popup : '350,150,200,1',
            logout_popup : '270,80,200,1'
        }

        return popContainer[requestedPopup];
    }
    $(document).ready(function() {
        $(".popup_trigger")
            .click(function()    {
                var _self = $(this);

                var popupTriggerName = _self.attr("id");        //Id der Referenz um die Eigenschaften des Popups abzurufen
                var popupName = popupTriggerName + "_div";        //Id des <div>-Element, worin das Popup eingebettet ist 

                var _pProp = getPopupProp(popupTriggerName);    //Eigenschaften (width, height, top, bgTrigger) werden angefordert. Rückgabe ist ein String
                var pProp = _pProp.split(",");                    //String wird aufgespalten, die einzelnen Eigenschaften in einem Array abgelegt
                
                handlePopup(popupName, pProp[0], pProp[1], pProp[2], pProp[3]);
            });
    });
/*************************************************************************/
/** POPUP-FUNKTIONEN                                                    **/
/*************************************************************************/
/** Initialisieren des Popups                                            **/
/*************************************************************************/
function handlePopup(popupId, width, height, top, bgTrigger)    {
    if(popupStatus == 0)    {
        showPopup(popupId, width, height, top, bgTrigger);
    }else{
        closePopup(popupId, bgTrigger);
    }
}
/*************************************************************************/
function showPopup(popupId, width, height, top, bgTrigger)    {
    if(bgTrigger != 0)    {
        $("#popup_bg").css({
            "opacity" : "0.7"
        });
    $("#popup_bg").fadeIn('slow');
    }
    
    setPopupPosition(popupId, width, height, top);

    $("#" + popupId).fadeIn('slow');

    popupStatus = 1;
}
/*************************************************************************/
/** Funktion um die Position auf dem Bildschirm des Popups zu bestimmen    **/
/*************************************************************************/
function setPopupPosition(popupId, width, height, top) {
    var windowWidth = document.documentElement.clientWidth;  

    $("#" + popupId).css({
        "position" : "absolute",
        "width" : width + "px",
        "height" : height + "px",
        "top" : top + "px",
        "left" : windowWidth/2-width/2
    });
}
/*************************************************************************/
/** Funktion um das ausgewählte Popup zu schliessen                        **/
/*************************************************************************/
function closePopup(popupId, bgTrigger)    {
    if(bgTrigger == 1)    {
        $("#popup_bg").fadeOut('slow');
    }
    $("#" + popupId).fadeOut('slow');

    popupStatus = 0;
}

Im HTML

Code:

        <img src="gfx/layout/login.png" id="login_popup" class="popup_trigger" style="float:right;margin: 2px 10px 0 0;cursor:pointer;" />
<!-- Verstecktes Popup für das Login -->
<div id="login_popup_div" class="popup">
    <h3>
        Login <a id="login_popup" class="popup_trigger" style="cursor:pointer;float:right;">X</a>
    </h3>
    <div class="popup_body">
        Nicknam&auml; <span style="margin-left:20px;"><input type="text" name="flogin_name" /><br /><br />
        Passwort <span style="margin-left:24px;"><input type="password" name="flogin_pass" /></span><br /><br />
        <span style="margin-left:82px;">
            <input class="sub_btn" type="submit" name="flogin_submit" value="iilogg&auml;" />
        </span>
    </div>
</div>

So das hält erstmals. Vielleicht mach ichs dann professioneller, wenn ich mal gross bin

Danke allen für die Hilfe.

nikosch · 01.07.2011, 21:53

Zitat:

style="float:right;margin: 2px 10px 0 0;cursor:pointer;"

Auf inline-CSS solltest Du ebenfalls verzichten. Erst recht, wenn es ohnehin mit einer gegebenen JS-Funktionalität (hier: Pointer bei trigger) zusammenhängt.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Einsatz von Milestones (jQuery)	dreamcatcher	JavaScript, Ajax und mehr	4	28.06.2011 12:07
PHP und jquery	mehlwurm	PHP Einsteiger	13	30.05.2011 23:09
Einfaches JQuery resize und scoll läuft nicht	smilla	JavaScript, Ajax und mehr	5	08.02.2011 20:44
Zwei verschiedene jQuery Aktionen	Electrofreak	JavaScript, Ajax und mehr	3	14.01.2011 14:40
jQuery, einem DOM-Knoten eine Payload anhängen	Chriz	JavaScript, Ajax und mehr	6	22.12.2010 15:31
jQuery ":not" selektor	Paul.Schramenko	JavaScript, Ajax und mehr	13	03.12.2010 17:11
jQuery - Text an Cursorposition einfügen	Koala	JavaScript, Ajax und mehr	5	11.11.2010 21:28
[Erledigt] jQuery Slider - In eine Richtung sperren	Trainmaster	JavaScript, Ajax und mehr	2	08.08.2010 16:06
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jquery: dialogbox funktioniert nicht	Dreamwatcher	JavaScript, Ajax und mehr	16	22.07.2010 18:22
jQuery findet Element nicht	ByStones	JavaScript, Ajax und mehr	8	11.06.2010 14:03
jQuery Plug scroll to - wie einbetten?	mxxxx	JavaScript, Ajax und mehr	5	24.04.2010 18:12
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35

30.06.2011, 15:55
Igäl Erfahrener Benutzer Registriert seit: 16.08.2007 Beiträge: 702 PHP-Kenntnisse: Anfänger	Dann werde ich diesen Ansatz mal weiter verfolgen und eure Tipps beherzigen. Herzlichen Dank für eure Hilfe. Der Thread hat viel zu meinem Verständnis für den Aufbau beigetragen. Gruss Igäl __________________ Das Recht auf Dummheit gehört zur Garantie der freien Entfaltung der Persönlichkeit. Mark Twain


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

30.06.2011, 17:35
Igäl Erfahrener Benutzer Registriert seit: 16.08.2007 Beiträge: 702 PHP-Kenntnisse: Anfänger	Sollte mal irgendjemand ähnliche Probleme haben. Ich habe es jetzt so gelöst: Im CSS: Code: /***********************************/ / Elemente fürs Popup / /*********************************/ .popup { display: none; position: fixed; width: 0; height: 0; background-image: url("../gfx/layout/box_body_bg.gif"); z-index: 2; border: 1px solid #CCCCCC; } .popup h3 { background-image: url("../gfx/layout/box_title_bg.gif"); margin: 0; padding: 5px; border-bottom: 1px solid #CCCCCC; } .popup_background { display: none; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; background-color: #000000; } .popup_body { padding: 10px; } Java Script: PHP-Code: //popContainer wird dynamisch durch das PHP erzeugt function getPopupProp(requestedPopup) { var popContainer = { login_popup : '350,150,200,1', logout_popup : '270,80,200,1' } return popContainer[requestedPopup]; } $(document).ready(function() { $(".popup_trigger") .click(function() { var _self = $(this); var popupTriggerName = _self.attr("id"); //Id der Referenz um die Eigenschaften des Popups abzurufen var popupName = popupTriggerName + "_div"; //Id des <div>-Element, worin das Popup eingebettet ist var _pProp = getPopupProp(popupTriggerName); //Eigenschaften (width, height, top, bgTrigger) werden angefordert. Rückgabe ist ein String var pProp = _pProp.split(","); //String wird aufgespalten, die einzelnen Eigenschaften in einem Array abgelegt handlePopup(popupName, pProp[0], pProp[1], pProp[2], pProp[3]); }); }); /*********************************************************************/ / POPUP-FUNKTIONEN / /*********************************************************************/ / Initialisieren des Popups / /*********************************************************************/ function handlePopup(popupId, width, height, top, bgTrigger) { if(popupStatus == 0) { showPopup(popupId, width, height, top, bgTrigger); }else{ closePopup(popupId, bgTrigger); } } /*********************************************************************/ function showPopup(popupId, width, height, top, bgTrigger) { if(bgTrigger != 0) { $("#popup_bg").css({ "opacity" : "0.7" }); $("#popup_bg").fadeIn('slow'); } setPopupPosition(popupId, width, height, top); $("#" + popupId).fadeIn('slow'); popupStatus = 1; } /*********************************************************************/ / Funktion um die Position auf dem Bildschirm des Popups zu bestimmen / /*********************************************************************/ function setPopupPosition(popupId, width, height, top) { var windowWidth = document.documentElement.clientWidth; $("#" + popupId).css({ "position" : "absolute", "width" : width + "px", "height" : height + "px", "top" : top + "px", "left" : windowWidth/2-width/2 }); } /*********************************************************************/ / Funktion um das ausgewählte Popup zu schliessen / /**********************************************************************/ function closePopup(popupId, bgTrigger) { if(bgTrigger == 1) { $("#popup_bg").fadeOut('slow'); } $("#" + popupId).fadeOut('slow'); popupStatus = 0; } Im HTML Code: <img src="gfx/layout/login.png" id="login_popup" class="popup_trigger" style="float:right;margin: 2px 10px 0 0;cursor:pointer;" /> <!-- Verstecktes Popup für das Login --> <div id="login_popup_div" class="popup"> <h3> Login <a id="login_popup" class="popup_trigger" style="cursor:pointer;float:right;">X</a> </h3> <div class="popup_body"> Nicknamä <span style="margin-left:20px;"><input type="text" name="flogin_name" /><br /><br /> Passwort <span style="margin-left:24px;"><input type="password" name="flogin_pass" /></span><br /><br /> <span style="margin-left:82px;"> <input class="sub_btn" type="submit" name="flogin_submit" value="iiloggä" /> </span> </div> </div> So das hält erstmals. Vielleicht mach ichs dann professioneller, wenn ich mal gross bin Danke allen für die Hilfe. __________________ Das Recht auf Dummheit gehört zur Garantie der freien Entfaltung der Persönlichkeit. Mark Twain*