CODEWITHSUNDEEP
javascriptjqueryhtmliframescroll
user3183671
user3183671

Reputation:

Scroll Down iFrame - jQuery/JS

I am trying to scroll my iFrame by clicking on a button that is not inside the iFrame and I don't know Javascript/jQuery very well yet, I am learning, so maybe someone could help me here? I will be more specific, clicking on the image (imgcast1 to imgcast4 as you can see in the code) the iFrame will be scrolled to a certain point, if you open the iFrame src you can see the iFrame content, if you want to see the whole website but with a lot of bugs open it here:
http://www.flamingpanda.xpg.com.br/ (many adsenses because of XPG and not opening in Chrome, at least no here in my PC)

HERE IS THE COMPLETE CODE: http://jsfiddle.net/9pfzX/2/ 

<table height="424px" width="288px">
<tr><td><img onclick="AutocastRoll()" name="imgcast1" id="imgcast1" src="Img/cast1img.png" /></td></tr>
<tr><td><img name="imgcast2" id="imgcast2" src="Img/cast2img.png" /></td></tr>
<tr><td><img name="imgcast3" id="imgcast3" src="Img/cast3img.png" /></td></tr>
<tr><td><img name="imgcast4" id="imgcast4" src="Img/cast4img.png" /></td></tr>


// IFRAME WHICH WOULD BE SCROLLED TO 440PX THEN 880PX (ALWAYS +440PX)...
<div id="iFrameAutocast"><iframe name="iframepopup" id="iframepopup" scrolling="no"   frameborder="0" width="376px" height="439px"   src="http://www.flamingpanda.xpg.com.br/iFrameAutocast1.html"></iframe></div>

-

<script>
$(document).ready(function (){
    alert("Testing jQuery: Loaded and Executed");
    $('#imgcast1').click(function() {
        //SCROLL FOWN FUNC
    });
// ---------------------------------------------
    $('#imgcast2').click(function() {
        //SCROLL FOWN FUNC
    });
// ---------------------------------------------
    $('#imgcast3').click(function() {
        //SCROLL FOWN FUNC
    });
// ---------------------------------------------     
    $('#imgcast4').click(function() {
        //SCROLL FOWN FUNC
    });

});
</script>

Upvotes: 2

Views: 18612

Answers (2)

Mark S
Mark S

Reputation: 3799

You can scroll by the div '#iFrameAutocast' instead of the <iframe>. Due to the cross domain policy it's much harder to manipulate the <iframe>, basically you can access the whatever's inside it with .contents(). But that doesn't work all the time I had some problems with it before and I tried it in your problem it somehow did not work.

var iframe = $('#iFrameAutocast frame').contents();
iframe.scrollTop(880);

Another solution is to scroll with the <iframe>'s parent '#iFrameAutocast':

$(document).ready(function () {

var by = 440;//scroll increment
/* base on your markup structure and what you are trying to achieve 
   you can trim it down using .each() and scrolling by an increment
*/
$('tr td img').each(function (index) {
    $(this).click(function () {
        $('#iFrameAutocast').scrollTop(by * index)
        //or with some animation:
        //$('#iFrameAutocast').animate({scrollTop:by * index},'slow');
    });
});

});

See this jsfiddle update: jsfiddle.net/9pfzX/3/

Upvotes: 6

Liam Flanagan
Liam Flanagan

Reputation: 418

Check out this answer to a different post.

FYI: his jsbin code doesn't actually work due to an uncaught security error, I have fixed it just so you can see the code working here.

TL;DR

var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
    myIframe.contentWindow.scrollTo(xcoord,ycoord);
}

Upvotes: 0

Related Questions