Question

84

Scroll Down iFrame - jQuery/JS

rated 0 times [ 85] [ 1] / answers: 1 / hits: 18538 / 11 Years ago, wed, january 15, 2014, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gageherberth

Add To Favorites

Follow

Total Points: 249

Total Questions: 115

Total Answers: 119

Location: Liechtenstein

Member since Sun, Sep 12, 2021

3 Years ago

answered 11 Years ago cartersinceren · Accepted Answer

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/