Zum Inhalt springen

Problem mit JS-Bibliothek

Erstellt am 9. Februar 2011 · 8 Antworten · letzte Antwort am 11. Februar 2011

Tags: Frage

typo3_hp ·

Guten Abend!

Seid der Installation der pmkslimbox funktioniert meine individuell angepasste JS-Scrollbar nicht mehr und auch mein CSS-Dropdown-Menü!

Wenn ich pmkslimbox auf mootools umstelle, funktioniert zwar wieder das Menü aber meine per JS angepasst Scrollbar ist immer noch weg (nach der Installation der pmkslimbox)

Hier das JS-Scrollbar-Setup:

http://jscrollpane.kelvinluck.com/

Wie kann das sein, wann kann ich machen?

Ich vermute das die beiden JS-Bibliotheken JSQUERY und MOOTOOLS sich gegenseitig irgendwie stören - weiß aber nicht wie ich diese kombinieren kann, oder es irgendwie hinbekomme, dass sowohl JS-Scrollbar als auch pmkslimbox funktionieren!

Danke und Grüße

skydivematy ·

Hallo typo3_hp,
installiere dir einfach eine andere Lightbox, sowas wie rzcolorbox und dazu verwendest du noch t3jquery.
Oder du schaust das deine jQuery.js nicht unter der mootools.js im quellcode sitzt. Und ebenfalls muss deine jQuery auf noConlict laufen.

jQuery=jQuery.noConflict();
jQuery(function()
{
	jQuery('.scroll-pane').jScrollPane();
})(jQuery);

Scrips in den Header

page.includeJS {
  jQuery.external = 1
  jQuery = http//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js
  mootools1 = fileadmin/deineScripts/mootools1.js
  mootools2 = fileadmin/deineScripts/mootools2.js
}

oder in den Footer vor </body>

page.includeJSFooter {
jQuery.external = 1
  jQuery = http//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js
  mootools1 = fileadmin/deineScripts/mootools1.js
  mootools2 = fileadmin/deineScripts/mootools2.js
}

Nach http noch ein :
gruss maty

typo3_hp ·

Dankeschön,

habe es nun mal versucht, würde die pmkslimbox gerne pararell betreiben, jedoch scheint noch was nicht zu stimmen (der Scrollbalken wird noch nicht angezeigt?

Hier mein aktuelles TS:

config.doctype = xhtml_strict

[browser = msie]
config.xmlprologue = none
#config.doctypeSwitch = 1

[GLOBAL]


#page.headerData >
page.headerData.10 = TEXT
page.headerData.10.value (
<meta name="copywrite" content="http://www.domain.de" />
)
page.headerData.10.insertData = 1

page.headerData = COA
page.headerData.11 = TEXT
page.headerData.11.value = <script type="text/javascript" src="fileadmin/templates/javascripts/jquery.min.js"></script>

# Java Scritp für programmierte Scrollbar
page.headerData.12 = TEXT
page.headerData.12.value = <script type="text/javascript" src="fileadmin/templates/javascripts/jquery.jscrollpane.min.js"></script>

# Java Scritp für programmierte Scrollbar
page.headerData.13 = TEXT
page.headerData.13.value = <script type="text/javascript" src="fileadmin/templates/javascripts/jquery.mousewheel.js"></script>

# Java Scritp für programmierte Scrollbar
page.headerData.14 = TEXT
page.headerData.14.value (
<script type="text/javascript" id="sourcecode">
   $(function()
{
  $('.scroll-pane').jScrollPane({showArrows: true});
});

    </script>

)



# Java Scritp für programmierte CSS-Dropwdownmenü - wird für IE 6 benötigt
page.headerData.15 = TEXT
page.headerData.15.value (
<script type="text/javascript">
    //<![CDATA[
  function show(element){
           element.className += "hover";
   }
 function hide(element){
           element.className = element.className = "";
     }
    //]]>
</script>
)


#no conlict JS-Klasse
page.headerData.16 = TEXT
page.headerData.16.value (
<script type="text/javascript">
 jQuery=jQuery.noConflict();
jQuery(function()
{
  jQuery('.scroll-pane').jScrollPane();
})(jQuery);
</script>
)



page.includeJSFooter {
jQuery.external = 1
  jQuery = fileadmin/templates/javascripts/jquery.min.js
  mootools1 = fileadmin/templates/javascripts/mootools-1.2.1.js
}




#Startkonfiguration Verbindung CSS/HTML/DBASE
page = PAGE
page.typeNum = 0
page.20 = TEMPLATE
page.20 {
template = FILE
template.file = fileadmin/templates/template1.html

Danke und Grüße

skydivematy ·

Hi Typo3_hp,

schau das du alle "$" in deiner jquery configuration in "jQuery" änderst.

Also auch in deiner

page.headerData.14 = TEXT
page.headerData.14.value (
<script type="text/javascript" id="sourcecode">
   $(function()
{
  $('.scroll-pane').jScrollPane({showArrows: true});
});
 
    </script>
 
)

genauso wie in den Scripts von deiner Scrollbar selber.

Beispiel:

/*!
 * jScrollPane - v2.0.0beta9 - 2011-02-04
 * http://jscrollpane.kelvinluck.com/
 *
 * Copyright (c) 2010 Kelvin Luck
 * Dual licensed under the MIT and GPL licenses.
 */

// Script: jScrollPane - cross browser customisable scrollbars
//
// *Version: 2.0.0beta10, Last updated: 2011-02-04*
//
// Project Home - http://jscrollpane.kelvinluck.com/
// GitHub       - http://github.com/vitch/jScrollPane
// Source       - http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.js
// (Minified)   - http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.min.js
//
// About: License
//
// Copyright (c) 2010 Kelvin Luck
// Dual licensed under the MIT or GPL Version 2 licenses.
// http://jscrollpane.kelvinluck.com/MIT-LICENSE.txt
// http://jscrollpane.kelvinluck.com/GPL-LICENSE.txt
//
// About: Examples
//
// All examples and demos are available through the jScrollPane example site at:
// http://jscrollpane.kelvinluck.com/
//
// About: Support and Testing
//
// This plugin is tested on the browsers below and has been found to work reliably on them. If you run
// into a problem on one of the supported browsers then please visit the support section on the jScrollPane
// website (http://jscrollpane.kelvinluck.com/) for more information on getting support. You are also
// welcome to fork the project on GitHub if you can contribute a fix for a given issue. 
//
// jQuery Versions - tested in 1.4.2+ - reported to work in 1.3.x
// Browsers Tested - Firefox 3.6.8, Safari 5, Opera 10.6, Chrome 5.0, IE 6, 7, 8
//
// About: Release History
//
// 2.0.0beta10 - (in progress)
// 2.0.0beta9 - (2011-01-31) new API methods, bug fixes and correct keyboard support for FF/OSX
// 2.0.0beta8 - (2011-01-29) touchscreen support, improved keyboard support
// 2.0.0beta7 - (2011-01-23) scroll speed consistent (thanks Aivo Paas)
// 2.0.0beta6 - (2010-12-07) scrollToElement horizontal support
// 2.0.0beta5 - (2010-10-18-) jQuery 1.4.3 support, various bug fixes
// 2.0.0beta4 - (2010-09-17) clickOnTrack support, bug fixes
// 2.0.0beta3 - (2010-08-27) Horizontal mousewheel, mwheelIntent, keyboard support, bug fixes
// 2.0.0beta2 - (2010-08-21) Bug fixes
// 2.0.0beta1 - (2010-08-17) Rewrite to follow modern best practices and enable horizontal scrolling, initially hidden
//							 elements and dynamically sized elements.
// 1.x - (2006-12-31 - 2010-07-31) Initial version, hosted at googlecode, deprecated

(function(jQuery,window,undefined){

	jQuery.fn.jScrollPane = function(settings)
	{
		// JScrollPane "class" - public methods are available through jQuery('selector').data('jsp')
		function JScrollPane(elem, s)
		{
			var settings, jsp = this, pane, paneWidth, paneHeight, container, contentWidth, contentHeight,
				percentInViewH, percentInViewV, isScrollableV, isScrollableH, verticalDrag, dragMaxY,
				verticalDragPosition, horizontalDrag, dragMaxX, horizontalDragPosition,
				verticalBar, verticalTrack, scrollbarWidth, verticalTrackHeight, verticalDragHeight, arrowUp, arrowDown,
				horizontalBar, horizontalTrack, horizontalTrackWidth, horizontalDragWidth, arrowLeft, arrowRight,
				reinitialiseInterval, originalPadding, originalPaddingTotalWidth, previousContentWidth,
				wasAtTop = true, wasAtLeft = true, wasAtBottom = false, wasAtRight = false,
				originalElement = elem.clone(false, false).empty(),
				mwEvent = jQuery.fn.mwheelIntent ? 'mwheelIntent.jsp' : 'mousewheel.jsp';

			originalPadding = elem.css('paddingTop') + ' ' +
								elem.css('paddingRight') + ' ' +
								elem.css('paddingBottom') + ' ' +
								elem.css('paddingLeft');
			originalPaddingTotalWidth = (parseInt(elem.css('paddingLeft'), 10) || 0) +
										(parseInt(elem.css('paddingRight'), 10) || 0);

			function initialise(s)
			{

				var clonedElem, tempWrapper, /*firstChild, lastChild, */isMaintainingPositon, lastContentX, lastContentY,
						hasContainingSpaceChanged, originalScrollTop, originalScrollLeft;

				settings = s;

				if (pane === undefined) {
					originalScrollTop = elem.scrollTop();
					originalScrollLeft = elem.scrollLeft();
					elem.css(
						{
							overflow: 'hidden',
							padding: 0
						}
					);
typo3_hp ·

Guten Morgen!

Habe nun die $ in jQuery geändert im TS.
Ebenso habe ich ein Replace $ durch jQuery in den JS-Files durchlaufen lassen.

Die Scrollbar wird nun gar nicht mehr angezeigt!

Hier meine Fehlermeldungen:

Warnung: reference to undefined property window.CollectGarbage
Quelldatei: http://www.domain.de/webseite/typo3conf/ext/pmkslimbox/res/scripts/mootools-1.2.1.js
Zeile: 130

Warnung: anonymous function does not always return a value
Quelldatei: http://www.domain.de/webseite/fileadmin/templates/javascripts/jquery.jscrollpane.min.js
Zeile: 9, Spalte: 7
Quelltext:
n false}})}if(aE){G.bind("mousedown.jsp",function(aO){if(aO.originalTarget===c||aO.originalTarget==aO.currentTarget){var aM=b(this),aP=aM.offset(),aN=aO.pageX-aP.left-Z,aK,aJ=true,s=function(){var aS=aM.offset(),aT=aO.pageX-aS.left-at/2,aQ=aj*ay.scrollPag

Warnung: anonymous function does not always return a value
Quelldatei: http://www.domain.de/webseite/fileadmin/templates/javascripts/jquery.jscrollpane.min.js
Zeile: 9, Spalte: 98
Quelltext:
ull;b(document).unbind("mouseup.jsp",aL);aG()};s();b(document).bind("mouseup.jsp",aL);return false}})}}function x(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.

Warnung: reference to undefined property window.ActiveXObject
Quelldatei: http://www.domain.de/webseite/typo3conf/ext/pmkslimbox/res/scripts/mootools-1.2.1.js
Zeile: 27

Was ist noch falsch?

Hier mal ein Link auf die Seite über eine Weiterleitungsdomain:

http://www.betatests.de.vu (Auf Seite Materiallexikon wird die Scrollbar angezeigt!)

Dankeschön!

skydivematy ·

Hi hp.

<title>xxxxxxxxxxx - Startseite</title> 
<meta name="generator" content="TYPO3 4.4 CMS" /> 
 
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_e20a2e19b4.css?1296680436" media="all" /> 
<link rel="stylesheet" type="text/css" href="fileadmin/templates/b1.css?1297121305" media="all" /> 
<link rel="stylesheet" type="text/css" href="typo3conf/ext/powermail/css/sampleCSS.css?1296674275" media="all" title="powermail default CSS" /> 
 
 
 
<script src="fileadmin/templates/javascripts/jquery.min.js?1297406018" type="text/javascript"></script> 
<script src="fileadmin/templates/javascripts/mootools-1.2.1.js?1297291507" type="text/javascript"></script> 
<script src="typo3temp/javascript_a708894199.js?1296680436" type="text/javascript"></script> 
 
 
<meta name="author" content="xxxxxxxxxxx" /> 
<meta name="publisher" content="xxxxxxxxxxx" /> 
<meta name="description" content="xxxxxxxxxxx" /> 
<meta name="keywords" content="Innenausbau, Büroeinrichtungen, Praxiseinrichtungen, Theken, Türen " /> 
<meta name="language" content="de" /> 
<meta name="robots" content="index, follow" /> 
<meta name="revisit-after" content="5 days" /> 
<meta name="copywrite" content="http://www.domain.de" /><script type="text/javascript" src="fileadmin/templates/javascripts/jquery.min.js"></script><script type="text/javascript" src="fileadmin/templates/javascripts/jquery.jscrollpane.min.js"></script><script type="text/javascript" src="fileadmin/templates/javascripts/jquery.mousewheel.js"></script><script type="text/javascript" id="sourcecode"> 
   jQuery(function()
{
  jQuery('.scroll-pane').jScrollPane({showArrows: true});
});
 
    </script> 
<script type="text/javascript"> 
    //<![CDATA[
  function show(element){
           element.className += "hover";
   }
 function hide(element){
           element.className = element.className = "";
     }
    //]]>
</script><script type="text/javascript"> 
 jQuery=jQuery.noConflict();
jQuery(function()
{
  jQuery('.scroll-pane').jScrollPane();
})(jQuery);
</script><link rel="stylesheet" href="typo3conf/ext/pmkslimbox/res/styles/slimboxplus.css" type="text/css" media="screen" /> 
 
<script type="text/javascript" src="typo3conf/ext/pmkslimbox/res/scripts/mootools-1.2.1.js"></script> 
<script type="text/javascript" src="typo3conf/ext/pmkslimbox/res/scripts/slimboxplus.js"></script> 
<script type="text/javascript"> 
/*<![CDATA[*/
<!--
Slimbox.scanPage = function() {var links = $$("a").filter(function(el) {return el.rel && el.rel.test(/^lightbox/i);});$$(links).slimbox({resizeDuration: 400, resizeTransition: Fx.Transitions.Bounce.easeInOut, opacity: 0.9, opacityDuration: 500, loop: 1, initialWidth: 250, initialHeight: 250, animateCaption: 1, showCounter: 1, defaultIframeWidth: 500, defaultIframeHeight: 500, iframeScrolling: 'auto', enablePrintButton: 0, enableSaveButton: 0,counterText: 'Seite  {x} von {y}', psScriptPath: 'http://www.domain.de.dd26804.kasserver.com/webseite/typo3conf/ext/pmkslimbox/savefile.php'}, null, function(el) {return (this == el) || ((this.rel.length > 8-) && (this.rel == el.rel));});};window.addEvent("domready", Slimbox.scanPage);
// -->
/*]]>*/
</script> 
</head> 
<body>

Das Hast Du 2x Eingebunden Sollte nur einmal

<script src="fileadmin/templates/javascripts/jquery.min.js?1297406018" type="text/javascript"></script>
<script type="text/javascript" src="typo3conf/ext/pmkslimbox/res/scripts/mootools-1.2.1.js"></script>

Alles was mootools und zu lightbox gehört in den footer, jQuery in den header

Das

<script type="text/javascript"> 
 jQuery=jQuery.noConflict();
jQuery(function()
{
  jQuery('.scroll-pane').jScrollPane();
})(jQuery);
</script>

und das

<script type="text/javascript" id="sourcecode"> 
   jQuery(function()
{
  jQuery('.scroll-pane').jScrollPane({showArrows: true});
});
 
    </script>

zu ein script zusammen legen und in fileadmin in deinem scriptfolder abspeichern. Habe mal den Namen "scrollbar_control.js"für das js gegeben

jQuery=jQuery.noConflict();
jQuery(function()
{
	jQuery('.scroll-pane').jScrollPane({showArrows: true});
	jQuery('.scroll-pane').jScrollPane();
})(jQuery);

Dann Die Scripts über Dein Setup im Template so aufrufen.

page.includeJSHeader {
	jquery_min = fileadmin/templates/javascripts/jquery.min.js
	jscrollpane =fileadmin/templates/javascripts/jquery.jscrollpane.min.js
	mousewheel = fileadmin/templates/javascripts/jquery.mousewheel.js
	scrollbar_control = fileadmin/templates/javascripts/scrollbar_control.js
	}

page.includeJSFooter {	
	fileadmin/templates/javascripts/mootools-1.2.1.js
	typo3conf/ext/pmkslimbox/res/scripts/slimboxplus.js
	}

Die Default Einbindung von den scripts mootools-1.2.1.js und slimboxplus.js in der Extension deactivieren. Mustt mal schauen wie Die eingebunden werden.

gruss
maty

skydivematy ·
skydivematy schrieb

Hi hp.

<title>xxxxxxxxxxxxxx - Startseite</title> 
<meta name="generator" content="TYPO3 4.4 CMS" /> 
 
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_e20a2e19b4.css?1296680436" media="all" /> 
<link rel="stylesheet" type="text/css" href="fileadmin/templates/b1.css?1297121305" media="all" /> 
<link rel="stylesheet" type="text/css" href="typo3conf/ext/powermail/css/sampleCSS.css?1296674275" media="all" title="powermail default CSS" /> 
 
 
 
<script src="fileadmin/templates/javascripts/jquery.min.js?1297406018" type="text/javascript"></script> 
<script src="fileadmin/templates/javascripts/mootools-1.2.1.js?1297291507" type="text/javascript"></script> 
<script src="typo3temp/javascript_a708894199.js?1296680436" type="text/javascript"></script> 
 
 
<meta name="author" content="xxxxxxxxxxxxxx" /> 
<meta name="publisher" content="xxxxxxxxxxxxxx" /> 
<meta name="description" content="xxxxxxxxxxxxxx" /> 
<meta name="keywords" content="Innenausbau, Büroeinrichtungen, Praxiseinrichtungen, Theken, Türen " /> 
<meta name="language" content="de" /> 
<meta name="robots" content="index, follow" /> 
<meta name="revisit-after" content="5 days" /> 
<meta name="copywrite" content="http://www.domain.de" /><script type="text/javascript" src="fileadmin/templates/javascripts/jquery.min.js"></script><script type="text/javascript" src="fileadmin/templates/javascripts/jquery.jscrollpane.min.js"></script><script type="text/javascript" src="fileadmin/templates/javascripts/jquery.mousewheel.js"></script><script type="text/javascript" id="sourcecode"> 
   jQuery(function()
{
  jQuery('.scroll-pane').jScrollPane({showArrows: true});
});
 
    </script> 
<script type="text/javascript"> 
    //<![CDATA[
  function show(element){
           element.className += "hover";
   }
 function hide(element){
           element.className = element.className = "";
     }
    //]]>
</script><script type="text/javascript"> 
 jQuery=jQuery.noConflict();
jQuery(function()
{
  jQuery('.scroll-pane').jScrollPane();
})(jQuery);
</script><link rel="stylesheet" href="typo3conf/ext/pmkslimbox/res/styles/slimboxplus.css" type="text/css" media="screen" /> 
 
<script type="text/javascript" src="typo3conf/ext/pmkslimbox/res/scripts/mootools-1.2.1.js"></script> 
<script type="text/javascript" src="typo3conf/ext/pmkslimbox/res/scripts/slimboxplus.js"></script> 
<script type="text/javascript"> 
/*<![CDATA[*/
<!--
Slimbox.scanPage = function() {var links = $$("a").filter(function(el) {return el.rel && el.rel.test(/^lightbox/i);});$$(links).slimbox({resizeDuration: 400, resizeTransition: Fx.Transitions.Bounce.easeInOut, opacity: 0.9, opacityDuration: 500, loop: 1, initialWidth: 250, initialHeight: 250, animateCaption: 1, showCounter: 1, defaultIframeWidth: 500, defaultIframeHeight: 500, iframeScrolling: 'auto', enablePrintButton: 0, enableSaveButton: 0,counterText: 'Seite  {x} von {y}', psScriptPath: 'http://www.domain.de.dd26804.kasserver.com/webseite/typo3conf/ext/pmkslimbox/savefile.php'}, null, function(el) {return (this == el) || ((this.rel.length > 8-) && (this.rel == el.rel));});};window.addEvent("domready", Slimbox.scanPage);
// -->
/*]]>*/
</script> 
</head> 
<body>

Das Hast Du 2x Eingebunden Sollte nur einmal

<script src="fileadmin/templates/javascripts/jquery.min.js?1297406018" type="text/javascript"></script>
<script type="text/javascript" src="typo3conf/ext/pmkslimbox/res/scripts/mootools-1.2.1.js"></script>

Alles was mootools und zu lightbox gehört in den footer, jQuery in den header

Das

<script type="text/javascript"> 
 jQuery=jQuery.noConflict();
jQuery(function()
{
  jQuery('.scroll-pane').jScrollPane();
})(jQuery);
</script>

und das

<script type="text/javascript" id="sourcecode"> 
   jQuery(function()
{
  jQuery('.scroll-pane').jScrollPane({showArrows: true});
});
 
    </script>

zu ein script zusammen legen und in fileadmin in deinem scriptfolder abspeichern. Habe mal den Namen "scrollbar_control.js"für das js gegeben

jQuery=jQuery.noConflict();
jQuery(function()
{
	jQuery('.scroll-pane').jScrollPane({showArrows: true});
	jQuery('.scroll-pane').jScrollPane();
})(jQuery);

Dann Die Scripts über Dein Setup im Template so aufrufen.

page.includeJSHeader {
	jquery_min = fileadmin/templates/javascripts/jquery.min.js
	jscrollpane =fileadmin/templates/javascripts/jquery.jscrollpane.min.js
	mousewheel = fileadmin/templates/javascripts/jquery.mousewheel.js
	scrollbar_control = fileadmin/templates/javascripts/scrollbar_control.js
	}

page.includeJSFooter {	
	fileadmin/templates/javascripts/mootools-1.2.1.js
	typo3conf/ext/pmkslimbox/res/scripts/slimboxplus.js
	}

Die Default Einbindung von den scripts mootools-1.2.1.js und slimboxplus.js in der Extension deactivieren. Mustt mal schauen wie Die eingebunden werden.

gruss
maty

Warum Verwendest Du Frames?

typo3_hp ·

Dankeschön für Deine Hilfe,

habe es versucht umzusetzen - habe es aber irgendwie nicht hinbekommen, habe dann nochmal alles deinstalliert, installiert und bisschen was angepasst nun geht powermail, pmkslimbox und das hovermenü!

Vielen Dank!

Was spricht den gegen den iframe? Den verwendet die pmkslimbox im Default!?

Viele Grüße und schönes Wochenende