• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] jQuery iframe scrollTo

dbarthel schrieb:
aber mit jquery alleine, geht .contentWindow nicht, welches ich aber für das iframe brauche.
Zum Vergrößern anklicken....
warum?

was mir noch aufgefallen ist,
var target = paneTarget.find(str);
ich sehe kein paneTarget, wo kommt das her?

- - - Aktualisiert - - -

Code: 
<input type="button"  id="" onclick="scroll('jqueryobject','li:eq(14)',400,0,0);" value="jquery-object" /><br/>
'li:eq(14)' ist ein string
Code: 
var str = "'" + x + "'";
       var target = str;
target ist der string:"'li:eq(14)'"

- - - Aktualisiert - - -

das target = "{ top:" + argX + ",left:" + argY + "}" ist ein string

aber du schaust schon ab und an in die fehlerkonsole?
 
hesst schrieb:
was mir noch aufgefallen ist,
var target = paneTarget.find(str);
ich sehe kein paneTarget, wo kommt das her?
Zum Vergrößern anklicken....

das kommt aus der Demo von Plugin.

---------------------------

Aber Danke Dir, hesst, du hast mich auf eine wunderbare Idee gebracht.

Ich habe mir einfach nochmal das Orginial-Script hergenommen und dann mit contents(), wie von dir vorgeschlagen, gearbeitet.

Resultat:

Code: 
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.scrollTo.js"></script>
	<script type="text/javascript">
		jQuery(function( $ ){
						
			// This one is important, many browsers don't reset scroll on refreshes
			// Reset all scrollable panes to (0,0)
			$('div.pane').scrollTo( 0 );
			// Reset the screen to (0,0)
			$.scrollTo( 0 );
			
			// TOC, shows how to scroll the whole window
			$('#toc a').click(function(){//$.scrollTo works EXACTLY the same way, but scrolls the whole screen
				$.scrollTo( this.hash, 1500, { easing:'elasout' });
				$(this.hash).find('span.message').text( this.title );
				return false;
			});
			
			// Target examples bindings
			var $paneTarget = $('#ifr').contents();
                        			
			$('#relative-selector').click(function(){
				$paneTarget.stop().scrollTo( 'li:eq(14)', 800 );
			});
			$('#jquery-object').click(function(){
				var $target = $paneTarget.find('li:eq(14)');
				$paneTarget.stop().scrollTo( $target , 800 );
			});
			$('#dom-element').click(function(){
				var target = $paneTarget.find('ul').get(0).childNodes[20];
				$paneTarget.stop().scrollTo( target, 800 );
			});
			$('#absolute-number').click(function(){
				$paneTarget.stop().scrollTo( 150, 800 );
			});
			$('#absolute-number-hash').click(function(){
				$paneTarget.stop().scrollTo( { top:800,left:700} , 800 );
			});
			$('#absolute-position').click(function(){
				$paneTarget.stop().scrollTo( '520px', 800 );
			});
			$('#absolute-position-hash').click(function(){
				$paneTarget.stop().scrollTo( {top:'110px',left:'290px'}, 800 );
			});
			$('#relative-position').click(function(){
				$paneTarget.stop().scrollTo( '+=100', 500 );
			});
			$('#relative-position-hash').click(function(){				
				$paneTarget.stop().scrollTo( {top:'-=100px',left:'+=100'}, 500 );
			});
			
			$('#percentage-position').click(function(){				
				$paneTarget.stop().scrollTo( '50%', 800 );
			});
			
			// Options examples bindings, they will all scroll to the same place, with different options
			function reset_o(){//before each animation, reset to (0,0), skip this.
				$paneOptions.stop().stop();
				$paneOptions[0].scrollLeft = $paneOptions[0].scrollTop = 0;
			};
			var $paneOptions = $('#pane-options');
			
			$('#options-no').click(function(){
				reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000 );
			});
			$('#options-axis').click(function(){// only scroll horizontally
				reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { axis:'x' } );
			});
			$('#options-duration').click(function(){// it's the same as specifying it in the 2nd argument
				reset_o(); $paneOptions.scrollTo( 'li:eq(15)', { duration: 3000 } );
			});
			$('#options-easing').click(function(){
				reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 2500, { easing:'elasout' } );
			});
			$('#options-margin').click(function(){//scroll to the "outer" position of the element
				reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { margin:true } );
			});
			$('#options-offset').click(function(){//same as { top:-50, left:-50 }
				reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { offset:-50 } );
			});
			$('#options-offset-hash').click(function(){
				reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { offset:{ top:-5,left:-30 } });
			});
			$('#options-offset-function').click(function(){
				reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, {offset: function() { return {top:-30, left:-5}; }});
			});
			$('#options-over').click(function(){//same as { top:-50, left:-50 }
				reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { over:0.5 });
			});
			$('#options-over-hash').click(function(){
				reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1000, { over:{ top:0.2, left:-0.5 } });
			});
			$('#options-queue').click(function(){//in this case, having 'axis' as 'xy' or 'yx' matters.
				reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 2000, { queue:true });
			});
			$('#options-onAfter').click(function(){
				reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 2000, { 
					onAfter:function(){
						$('#options-message').text('Got there!');
					}
				});
			});
			$('#options-onAfterFirst').click(function(){//onAfterFirst exists only when queuing
				reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1600, { 
					queue:true,
					onAfterFirst:function(){
						$('#options-message').text('Got there horizontally!');
					},
					onAfter:function(){
						$('#options-message').text('Got there vertically!');
					}
				});
			});
		});
	</script>

und

HTML: 
	<div id="target-examples" class="section part">
		<h3>Ways to specify the target <span id="target-message" class="message">Click an option, to see it in action</span></h3>
		<ul class="links">
			<li><a title="$(...).scrollTo( 'li:eq(14)', 800 );" id="relative-selector" href="#">Relative selector</a></li>
			<li><a title="$(...).scrollTo( $('div li:eq(14)'), 800 );" id="jquery-object" href="#">jQuery object</a></li>
			<li><a title="$(...).scrollTo( $('ul').get(2).childNodes[20], 800 );" id="dom-element" href="#">DOM Element</a></li>
			<li><a title="$(...).scrollTo( 150, 800 );" id="absolute-number" href="#">Absolute number</a></li>
			<li><a title="$(...).scrollTo( { top:800, left:700}, 800 );" id="absolute-number-hash" href="#">Absolute number(hash)</a></li>
		</ul>
		<ul class="links">
			<li><a title="$(...).scrollTo( '520px', 800 );" id="absolute-position" href="#">Absolute position</a></li>
			<li><a title="$(...).scrollTo( {top:'110px', left:'290px'}, 800 );" id="absolute-position-hash" href="#">Absolute position(hash)</a></li>
			<li><a title="$(...).scrollTo( '+=100px', 800 );" id="relative-position" href="#">Relative position</a></li>
			<li><a title="$(...).scrollTo( {top:'-=100px', left:'+=100'}, 800 );" id="relative-position-hash" href="#">Relative position(hash)</a></li>
			<li><a title="$(...).scrollTo( '50%', 800 );" id="percentage-position" href="#">Percentage</a></li>
		</ul>
		<div  class="pane">
<iframe id="ifr" src="test.html" style="border:0px  none;" scrolling="no" frameborder="0" align="middle" marginheight="0px" marginwidth="0px" width="400" height="300"></iframe>
		</div>
	</div>

und siehe da, jetzt klappt das Scrollen!




Allerdings,

hesst schrieb:
aber du schaust schon ab und an in die fehlerkonsole?
Zum Vergrößern anklicken....

meldet mir eben besagte Fehlerkonsole folgendes:

"getPreventDefault() sollte nicht mehr verwendet werden. Verwenden Sie stattdessen defaultPrevented."​

was ich nicht wirklich verstehe, weil ich finde in dem Code überhaupt kein "getPreventDefault()".
 
dbarthel schrieb:
das kommt aus der Demo von Plugin.
Zum Vergrößern anklicken....
bei dir war es aber nicht vorhanden


dbarthel schrieb:
Aber Danke Dir, hesst, du hast mich auf eine wunderbare Idee gebracht.

Ich habe mir einfach nochmal das Orginial-Script hergenommen und dann mit contents(), wie von dir vorgeschlagen, gearbeitet.
Zum Vergrößern anklicken....
was genau die fehler nicht enthält, auf die ich dich hingewiesen hatte

dbarthel schrieb:
und siehe da, jetzt klappt das Scrollen!
Zum Vergrößern anklicken....
außer bei relative-selector, weil bei frames der context nicht gesetzt wird

dbarthel schrieb:
"getPreventDefault() sollte nicht mehr verwendet werden. Verwenden Sie stattdessen defaultPrevented."​

was ich nicht wirklich verstehe, weil ich finde in dem Code überhaupt kein "getPreventDefault()".
Zum Vergrößern anklicken....
wo das her kommt steht auch in der fehlerkonsole, wenn es nicht von dir ist, kannst du sowieso nichts dran ändern
 
hesst schrieb:
außer bei relative-selector, weil bei frames der context nicht gesetzt wird
Zum Vergrößern anklicken....

könnte man das Script (von PlugIn) so abändern, das der context auch bei frames gesetzt wird?

Wenn ja, wie müsste diese Änderung aussehen?

-------

hesst schrieb:
wo das her kommt steht auch in der fehlerkonsole, wenn es nicht von dir ist, kannst du sowieso nichts dran ändern
Zum Vergrößern anklicken....

Nö, in der Fehlerkonsole steht einfach nur der Hinweis, ohne eine Zeilenangabe, etc.
 
dbarthel schrieb:
Also sollte es doch gehen? Oder darf ich noch dem Entwickler einen entsprechenden Tip geben?
Zum Vergrößern anklicken....
natürlich, ich verstehe auch den sinn nicht, maximal, wenn man ausgehend vom body den body absolut suchen möchte, das ergibt aber selbst kaum sinn, da das ganze nunmal relativ läuft.
ausgehend vom document würde sogar das gehen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben