dbarthel
Lounge-Member
Hallo,
ich habe folgenden Code:
der folgendes machen soll:
das iframe (lädt zu testzwecken hier mal das forum) soll an eine bestimmte Stelle gescrollt werden.
Zur Stuerung diehnen die Schlater unter dem iframe.
Das Problem, egal, welchen Schalter ich anklicke, das iframe wird NICHT gescrollt.
-----------------------------------
Habe dann den Teil
wie folgt geändert:
bzw.
bzw.
jedoch jeweils ohne Erfolg!
Das Problem, ist weiterhin; egal, welchen Schalter ich anklicke, das iframe wird NICHT gescrollt.
Was mache ich falsch und wie müsste ich den Code wo abändern, damit das iframe gescrollt wird?
PS: das scrollTo-Script ist dieses hier: jQuery.ScrollTo
ich habe folgenden Code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TESt</title>
<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 bindings
var $paneTarget = $('#testframe');
$('#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>
</head>
<body>
<iframe src="http://forum.jswelt.de/" style="border:0px none;" name="testframe" id="testframe" scrolling="no" frameborder="0" align="middle" marginheight="0px" marginwidth="0px" height="300" width="400"></iframe>
<div id="target-examples" class="section part">
<h3>Ways to specify the target <span id="target-message" class="">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>
</body>
</html>das iframe (lädt zu testzwecken hier mal das forum) soll an eine bestimmte Stelle gescrollt werden.
Zur Stuerung diehnen die Schlater unter dem iframe.
Das Problem, egal, welchen Schalter ich anklicke, das iframe wird NICHT gescrollt.
-----------------------------------
Habe dann den Teil
Code:
// Target bindings
var $paneTarget = $('#testframe');wie folgt geändert:
Code:
// Target bindings
var $paneTarget = document.getElementById('testframe');bzw.
Code:
// Target bindings
var $paneTarget = document.getElementById('testframe').contentWindow;bzw.
Code:
// Target bindings
var $paneTarget = $('testframe').contentWindow;jedoch jeweils ohne Erfolg!
Das Problem, ist weiterhin; egal, welchen Schalter ich anklicke, das iframe wird NICHT gescrollt.
Was mache ich falsch und wie müsste ich den Code wo abändern, damit das iframe gescrollt wird?
PS: das scrollTo-Script ist dieses hier: jQuery.ScrollTo
Zuletzt bearbeitet:
