Rectangle 27 2

You have to pass in the context to search in (the parent document)

// Untested
$(window.parent.document, window.parent.document).ready(function () {
    var $scrollingDiv = $("#IframeDir");

    $(window.parent, window.parent.document).scroll(function () {
        $scrollingDiv
        .stop()
        .animate({ "marginTop": ($(window.parent, window.parent.document).scrollTop() + -10) + "px" }, "slow");

    });
});

javascript - Access parent window scroll event from child inside ifram...

javascript jquery asp.net iframe
Rectangle 27 1

I also wanted the floating div within iframe and Rantul this code worked for me!

$(parent.window).scroll(function() {
   //parent document scroll functions go here
});

javascript - Access parent window scroll event from child inside ifram...

javascript jquery asp.net iframe
Rectangle 27 1

You may work around by updating the scroll position from child page (inside iframe) to parent page.

// Child page
    $(window).scroll(function () {
        top.updateScrollPosition($('body').scrollTop(), $('body').scrollLeft());
    });
// Main page
    var topPos;
    var leftPos;

    function updateScrollPosition(top, left) {
        topPos = top;
        leftPos = left;
    }

That implies that you have access to the source of the frame

javascript - How to get the scroll position of content thats inside of...

javascript jquery html iframe scroll
Rectangle 27 13

With jQuery you need to use .contents() to access whatever's inside the iframe. You also need to use either the window load event, or the iframe's document ready event.

I would recommend going back to the div structure you mentioned, since it sounds like what you're trying to do doesn't require an iframe. You'll find that it's a lot less headache to work with a div than an iframe.

$(function ()
{
  var $mydiv = $('#mydiv');
  $mydiv.scrollTop($mydiv.height());
});

how can i launch the scroll function like 3 seconds after the page loads?

setTimeout
$(window).load(function ()
{
    setTimeout(function ()
    {
        var $contents = $('#frame').contents();
        $contents.scrollTop($contents.height());
    }, 3000); // ms = 3 sec
});

Thanks but seems like i need to run the function only after 1-2 seconds cause there is a shout box and it takes like 1-2 seconds before it loads so it basically goes down and then the shoutbox loads and its going up again, any suggestions?

What shoutbox are you using? Ideally you'd be able to pass a callback to the shoutbox which runs after the shoutbox loads.

Hm, I can't find any actual API docs for Yshout. If there's an option for it, the setup code would be something like new YShout({... onLoad: function () {...}, ...});

this shoutbox is pretty unstable so i would better implement the idea with the iframe, so how can i launch the scroll function like 3 seconds after the page loads?

jquery - How to scroll an iframe to the bottom when page loads? - Stac...

jquery iframe
Rectangle 27 12

With jQuery you need to use .contents() to access whatever's inside the iframe. You also need to use either the window load event, or the iframe's document ready event.

I would recommend going back to the div structure you mentioned, since it sounds like what you're trying to do doesn't require an iframe. You'll find that it's a lot less headache to work with a div than an iframe.

$(function ()
{
  var $mydiv = $('#mydiv');
  $mydiv.scrollTop($mydiv.height());
});

how can i launch the scroll function like 3 seconds after the page loads?

setTimeout
$(window).load(function ()
{
    setTimeout(function ()
    {
        var $contents = $('#frame').contents();
        $contents.scrollTop($contents.height());
    }, 3000); // ms = 3 sec
});

Thanks but seems like i need to run the function only after 1-2 seconds cause there is a shout box and it takes like 1-2 seconds before it loads so it basically goes down and then the shoutbox loads and its going up again, any suggestions?

What shoutbox are you using? Ideally you'd be able to pass a callback to the shoutbox which runs after the shoutbox loads.

Hm, I can't find any actual API docs for Yshout. If there's an option for it, the setup code would be something like new YShout({... onLoad: function () {...}, ...});

this shoutbox is pretty unstable so i would better implement the idea with the iframe, so how can i launch the scroll function like 3 seconds after the page loads?

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

jquery - How to scroll an iframe to the bottom when page loads? - Stac...

jquery iframe
Rectangle 27 14

After this thread didn't work out for me for my specific need (scrolling inside a particular element, in my case a textarea) I found this out in the great beyond, which could prove helpful to someone else reading this discussion:

Since I already had a cached version of my jQuery object (the myPanel in the code below is the jQuery object), the code I added to my event handler was simply this:

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

This worked with me.

var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());

jQuery Scroll to bottom of page/iframe - Stack Overflow

jquery scroll scrollto
Rectangle 27 14

After this thread didn't work out for me for my specific need (scrolling inside a particular element, in my case a textarea) I found this out in the great beyond, which could prove helpful to someone else reading this discussion:

Since I already had a cached version of my jQuery object (the myPanel in the code below is the jQuery object), the code I added to my event handler was simply this:

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

This worked with me.

var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());

jQuery Scroll to bottom of page/iframe - Stack Overflow

jquery scroll scrollto
Rectangle 27 0

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');
    });
});

});

Worked! Thanks! But would you mind telling me how I hide the scroll bar now? OH, nevermind! I put overflow-y:hidden; instead of auto and worked!

no problem, for both horizontal and vertical scrolls just overflow:hidden;. Please accept my answer, thanks. :)

javascript - Scroll Down iFrame - jQuery/JS - Stack Overflow

javascript jquery html iframe scroll
Rectangle 27 0

2 things must happen before you can traverse the dom of a nested browsing context.

You need to know that the iframe exists, taken care of with the document ready event.

And you need to make sure that the iframe has loaded.

$(document).ready(function(){

        // #page is the id of the iframe
        $('#page').load(function(){
            // $(this)[0].contentWindow is the window of your nested browsing context/ iframe
            $($(this)[0].contentWindow).scroll(function(){
                console.log($(this).scrollTop());
            });
        });
     });

One thing to note is that this will definitely not work cross browser in Firefox.

javascript - jQuery iframe scroll event (IE) - Stack Overflow

javascript jquery internet-explorer iframe
Rectangle 27 0

Put this on the parent:

var childScrollHandler = function () {
   alert('Scrolling going on');
}

And then put this on the iframe content:

$(document).bind('scroll', function(ev){
    parent.childScrollHandler(ev);
});
$(document)

javascript - jQuery iframe scroll event (IE) - Stack Overflow

javascript jquery internet-explorer iframe
Rectangle 27 0

I was loading a YouTube video on my site using an iframe loaded by JavaScript slider. This caused a problem with Android which did not allow scrolling and zooming of the page. It had nothing to do with setting CSS "html, body" heights or overflow hiddens. Once I got rid of my YouTube video inside the jQuery slider plugin, website scrolling and zooming started working just fine on the Android phone.

css - Mobile site - doesn't scroll at all - Stack Overflow

css mobile scroll viewport
Rectangle 27 0

I doubt this is doable. If your page is on your domain and the iframe is at facebook.com, you won't be able to access things outside the frame (including the root element of the actual page) due to browser security.

If it's enough to get the page to move to a certain point, you might get lucky with element.scrollIntoView(), but I can't remember how well that's supported across browsers.

jquery animate scroll not working inside iframe! :S - Stack Overflow

jquery iframe scroll
Rectangle 27 0

Sometimes jQuery has problems firing the event if top level parent elements have their css overflow property set to anything other than auto.

jquery - IE6 scroll event not working inside Iframe - Stack Overflow

jquery iframe internet-explorer-6 scroll
Rectangle 27 0

From what I hear, I am assuming that the link the user is clicking is an anchor link, or a # link, correct? That would result in the page jumping to the top. What you can do, is return false inside of your click function / event:

$("a.someLink").bind("click", function(e){
   // Your logic here...
   // The below prevents the native behavior of the link occurring...
   e.preventDefault();
   e.returnValue = false;
   return false;
})

Try remove the inline javascript function from your button (link) and rather implement it with jQuery, adding the return false etc in. So your button code now looks like this:

<a href="#" class="viewmore" id="lnkbtnViewMore">View More</a>
$("#lnkbtnViewMore").bind("click", function(e){
   __doPostBack('lnkbtnViewMore','');
   e.preventDefault();
   e.returnValue = false;
   return false;
})

Why the down vote?? It states clearly in the OP's question "...clicks on link..."

inline javascript
LinkButton
code behind ClickEvent
<a>
<a href="javascript:__doPostBack('lnkbtnViewMore','')"...

Did you try my suggestion above? If I look at your code in the fiddle, I see no reason for it not to work. The default behavior of a link without an external URL and without preventing the default behavior IS to send the page (window) back to the top. Thus, moving the function into a jQuery bound event function and returning false should do the trick.

html - Scroll Issue after setting height to iframe using jQuery - Stac...

jquery html css asp.net iframe
Rectangle 27 0

After this thread didn't work out for me for my specific need (scrolling inside a particular element, in my case a textarea) I found this out in the great beyond, which could prove helpful to someone else reading this discussion:

Since I already had a cached version of my jQuery object, the code I added to my event handler was simply this:

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

This worked with me.

jQuery Scroll to bottom of page/iframe - Stack Overflow

jquery scroll scrollto
Rectangle 27 0

It tries to set the iframe height to the same height as the content it's content in order to make it scrollable. But it seems as if it dowsn't work correctly and the page inside of the iframe has still got it's all scrollbar. Setting scrolling to no will probably fix the issue.

That does the trick. But in fact, I've got a little sub problem now: there's a +/- 250px whitespace at the bottom of the iframe. In fact, theiframe get a height on it's element style: 1375px. This appears only when opening the fancybox. After you clicked the forum logo, it's gone... Very strange, but thanks for the solution!

Double scroll bar in iframe with jQuery Fancybox (2.0.5.) - Stack Over...

jquery fancybox phpbb3
Rectangle 27 0

then try to detect onload event and do it that way:

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

I just tried that too but not working.

updated answer, try another way, see above

if your iframes content is from a different domain than the domain that is hosting the main pages content, you will not be able to do this due to cross domain scripting regulations.

You are right but at least I should be able to make it work locally right?

if by locally you mean both the page src and iframe src are localhost, then yes.

jquery - Scroll to top inside an iframe when clicked - Stack Overflow

jquery iframe
Rectangle 27 0

As much as I love jQuery. I can't get this to work. However, I tried this in plain old javascript and it worked just fine in IE, FF,Safari and Chrome.

<script type="text/javascript">
    window.onload = function() {
      var frm = document.getElementById("myIframe").contentWindow;
      frm.onscroll = function(){
        alert("EUREKA");
      }
    }
</script>

EDIT: The following works in FF, Safari and Chrome when using window.load(). When using document.ready it only works in FF. For whatever reason it doesn't work in IE8 in either event.

$(window).load(function(){
    $($('#myIframe').contents()).scroll(function(){
       alert('frame scrolled in jquery');
    }); 
});

this is not working in any browser.

make sure you set the src of the iframe to http://+window.location.hostname to prevent failure due to violation of same origin policy (security).

javascript - jQuery iframe scroll event (IE) - Stack Overflow

javascript jquery internet-explorer iframe
Rectangle 27 0

I've used flesler's library before for the same purpose(scrolling an iFrame inside a facebook application, same deal more or less) and it's honestly beautiful. The linked article explains several detailed situations in how you'd use scrollTo, and it works nicely.

I checked it quickly.Thank you. Do i have to download a plygin?

I would also appreciate it if you could give me an example... i didnt see anything in the link you sent me! Thanks in advance

It would be useful if you provide your code for scrolling the iframe since the example page doesn't includes an example to scroll an iframe and it seems not to work the standard way with it.

javascript - jquery iframe scroll - Stack Overflow

javascript jquery
Rectangle 27 0

It seems that the library you have chosen doesn't work in a cross-frame case. So what you can do is following:

  • implement the same flow inside an iframe
  • add a button on the top level which basically clicks button inside an iframe
<html>
<body>
<button id="btn" style="display:none">Scroll</button>
<div id="scrlDiv" style="height:100px">
<div style="height:600px">Scroll me</div>
</div>
<script type='text/javascript' src='vectordiv.js'></script>
<script type='text/javascript'>      
   vectorDiv( 'btn', 'scrlDiv', "down" );      
</script>
</body>
</html>

javascript - Access div element inside iframe src - Stack Overflow

javascript jquery html iframe scroll