zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Shadowboy und JS Innerfade funktionieren nicht zusammen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 08.01.2009, 03:40
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard

hi also ich komme einfach nicht klar. ich will es jetzt noch einmal mit jquery und lightbox versuchen. Ich habe hier eine deutsche Lösung zu meinem Problem gefunden:

jQuery Konflikt mit Lightbox / Thickbox dank prototype.js

Der Lösungsvorschlag lautet:

Zitat:
1. Man muss dafür Sorge tragen, dass zuerst die Prototype.js geladen wird.
2. Danach muss die jQuery.js geladen werden.
3. Damit die jQuery.js und die Prototype.js sich nicht in die Quere kommen, muss der Befehl jQuery.noConflict(); in der jeweiligen Datei, welche jQuery nutzt, vorangestellt werden bzw. ganz am Anfang geladen werden.
4. Nun muss man alle vorhandenen $ in der ausführenden Datei, die jQuery nutzt, in etwas anderes ändern. Geht am einfachsten durch “Suchen und Ersetzen”
5. Bei Prototype bleibt alles beim alten - das $ bleibt die Variable für Prototype.
Nun versuche ich diesen Lösungsanschlag bei mir anzuwenden. Habe wie in der Anleitung meinen Header wie folgt geändert:

HTML-Code:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
     jQuery.noConflict();

     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>


<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


<script type="text/javascript">
	   $(document).ready(
				function(){


					$('ul#portfolio').innerfade({
						speed: 'slow',
						timeout: 6000,
						type: 'sequence',
						containerheight: '180px'
					});

			});
</script>
Nun habe ich in der jquery.innerfade.js wie in der Beschreibung angegeben ganz am Anfang die Funktion "jQuery.noConflict();" aufgerufen und alle $ zeichen in z.B. $123 umgewandelt.

Das Ergebnis zeigt sich hier:


Die Page wird nicht mehr geladen und die Fehlerkonsole spuckt

Zitat:
Fehler: $("someid") is null
Quelldatei: test
Zeile: 24
und

Zitat:
Fehler: $(document).ready is not a function
Quelldatei: test
Zeile: 34
aus. Kann mir wer sagen was ich falsch mache? Ich bekomm so langsam die Kriese hier

Gruß
ChOp

Geändert von ChOpSueY! (13.11.2010 um 23:09 Uhr)
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 08.01.2009, 15:52
Benutzerbild von uspri
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.07.2005
Beiträge: 900
uspri sorgt für eine eindrucksvolle Atmosphäreuspri sorgt für eine eindrucksvolle Atmosphäre
Standard

Beachte Punkt 4 Deines Lösungsvorschlages und schau nochmal in Dein JS rein, da sehe ich viel $ bei dem innerfade().
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 08.01.2009, 17:33
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von uspri Beitrag anzeigen
Beachte Punkt 4 Deines Lösungsvorschlages und schau nochmal in Dein JS rein, da sehe ich viel $ bei dem innerfade().

Hm also das is meine innerfade...

PHP-Code:
jQuery.noConflict();
/* =========================================================

// jquery.innerfade.js

// Datum: 2007-01-29
// Firma: Medienfreunde Hofmann & Baldes GbR
// Autor: Torsten Baldes
// Mail: t.baldes@medienfreunde.com
// Web: http://medienfreunde.com

// based on the work of Matt Oakes http://portfolio.gizone.co.uk/applications/slideshow/

// ========================================================= */


(function($123) {

$
123.fn.innerfade = function(options) {

    
this.each(function(){

        var 
settings = {
            
animationtype'fade',
            
speed'normal',
            
timeout2000,
            
type'sequence',
            
containerheight'auto',
            
runningclass'innerfade'
        
};

        if(
options)
            $
123.extend(settingsoptions);

        var 
elements = $123(this).children();

        if (
elements.length 1) {

            $
123(this).css('position''relative');

            $
123(this).css('height'settings.containerheight);
            $
123(this).addClass(settings.runningclass);

            for ( var 
0elements.lengthi++ ) {
                $
123(elements[i]).css('z-index'String(elements.length-i)).css('position''absolute');
                $
123(elements[i]).hide();
            };

            if ( 
settings.type == 'sequence' ) {
                
setTimeout(function(){
                    $
123.innerfade.next(elementssettings10);
                }, 
settings.timeout);
                $
123(elements[0]).show();
            } else if ( 
settings.type == 'random' ) {
                
setTimeout(function(){
                    do { 
current Math.floor Math.random ( ) * ( elements.length ) ); } while ( current == )
                    $
123.innerfade.next(elementssettingscurrent0);
                }, 
settings.timeout);
                $
123(elements[0]).show();
            }    else {
                
alert('type must either be \'sequence\' or \'random\'');
            }

        }

    });
};


$
123.innerfade = function() {}
$
123.innerfade.next = function (elementssettingscurrentlast) {

    if ( 
settings.animationtype == 'slide' ) {
        $
123(elements[last]).slideUp(settings.speed, $123(elements[current]).slideDown(settings.speed));
    } else if ( 
settings.animationtype == 'fade' ) {
        $
123(elements[last]).fadeOut(settings.speed);
        $
123(elements[current]).fadeIn(settings.speed);
    } else {
        
alert('animationtype must either be \'slide\' or \'fade\'');
    };

    if ( 
settings.type == 'sequence' ) {
        if ( ( 
current ) < elements.length ) {
            
current current 1;
            
last current 1;
        } else {
            
current 0;
            
last elements.length 1;
        };
    }    else if ( 
settings.type == 'random' ) {
        
last current;
        while (    
current == last ) {
            
current Math.floor Math.random ( ) * ( elements.length ) );
        };
    }    else {
        
alert('type must either be \'sequence\' or \'random\'');
    };
    
setTimeout((function(){$123.innerfade.next(elementssettingscurrentlast);}), settings.timeout);
};
})(
jQuery); 

ich habe halt in $123 geändert. Soll ich die $ ganz weg lassen und nur 123 schreiben? Hatte ich auch schon versucht, da kommt der gleiche Fehler o_O
Mit Zitat antworten
  #14 (permalink)  
Alt 08.01.2009, 20:37
Neuer Benutzer
neuer user
 
Registriert seit: 10.05.2005
Beiträge: 6
Hisky befindet sich auf einem aufstrebenden Ast
Standard

Nabend!

Also:
Ob Du $123 oder 123 schreibst ist egal.

Schätze Du musst die jQuery.noConflict(); anders definieren.

So hab ich umgesetzt.

Vorher:
Code:
jQuery(document).ready(function() {
var $ = jQuery;
Danach:
Code:
jQuery.noConflict();
jQuery(document).ready(function() {
var $j = jQuery;
Datei 2 - Vorher:
Code:
jQuery(document).ready(function() {
var $ = jQuery;
Danach:
Code:
jQuery.noConflict();
jQuery(document).ready(function() {
var $j = jQuery;
Bei Dir müsst es aber auch so gehen - siehe den fetten Teil:
Referencing Magic - Shortcuts for jQuery

If you don't like typing the full "jQuery" all the time, there are some alternative shortcuts:

* Reassign jQuery to another shortcut
o var $j = jQuery;
o (This might be the best approach if you wish to use different libraries)
* Use the following technique, which allows you to use $ inside of a block of code without permanently overwriting $:
o (function($) { /* some code that uses $ */ })(jQuery)
o Note: If you use this technique, you will not be able to use Prototype methods inside this capsuled function that expect $ to be Prototype's $, so you're making a choice to use only jQuery in that block.
* Use the argument to the DOM ready event:
o jQuery(function($) { /* some code that u
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
div Deklarationen funktionieren nicht zusammen -DerLux- CSS 1 22.04.2011 17:58
Nicht alle Links funktionieren in Firefox Stesifa CSS 5 09.06.2010 21:38
Effekte in der Navi funktionieren nicht... Mthi77 CSS 1 06.12.2008 22:26
PNG Fixe funktionieren komischerweise nicht Lokal human CSS 4 04.05.2007 22:57
XHTML und JavaScript funktionieren nicht zusammen?! hyperterminal (X)HTML 2 22.08.2005 21:16


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:49 Uhr.