0

There's a <iframe> element from external site, containing a textarea, in one of my blogger posts. I already added couple more posts after that. But when I open the site, the blog scrolls down to the <iframe> becuase it posseses the focus. How to prevent this so that when the blog is opened, the latest post can be seen?

This is how I added the iframe in the blog post.

<iframe border="no" allowtransparency="true" height="500" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="some external site reference" width="100%">
</iframe>

FYI, the blogger has dynamic views template.

I tried using scrollTo(), focus() to the latest post header. But it didn't work. I found that even if I print the count of article headers inside $(document).ready(), it returns 0. After the page fully loads, if I go to the console and re-print the length, only then it gives 10. Quite confused about how the blogger handles its posts.

<script>
    $(document).ready(function(){ 

        console.log( $('div.article-header').length ); // returns 0

    });
</script>

Update

It looks like Blogger Dynamic Views loads the blog posts using AJAX. As a consequence, the document ready() gets called before the actual blog contents are fully loaded. 'Jeffery To' has given a good explanation about this below:

prettyPrint() doesn't get called on page load

Thanks.

Community
  • 1
  • 1
Manoj Shrestha
  • 4,246
  • 5
  • 47
  • 67
  • @meep: I'm not sure what code are you expecting. But I udpated the question showing how I included the – Manoj Shrestha Jun 10 '14 at 08:59

2 Answers2

0

Would a tabindex=1 in your blog title suffice?

Or add?

$(function() {
    $("h1").first().focus()
});

H1 being your page title

[edit]

It's not blogger that is setting the focus on this textarea but it's the code within this iframe. It appears to be a big pain to prevent this behaviour due to cross domain scripting.

My advise? Alter your post by replacing the iframe with a simple hyperlink.

Tiele Declercq
  • 2,070
  • 2
  • 28
  • 39
0
$('body').scrollTo('#foobar');
Litestone
  • 529
  • 7
  • 22
  • Can you give us a link to see what does it look like? – Litestone Jun 10 '14 at 10:39
  • Yes, definitely, that's a good point. I'll just update the question and put the link over there. Thanks Man! – Manoj Shrestha Jun 10 '14 at 10:54
  • `$(document).ready(function(){$('html').scrollTop('a:first')})` This should work. – Litestone Jun 10 '14 at 11:16
  • still didn't work... These solutions would have worked for other cases. In my case, the dynamic views template is playing some role here. It first calls the document ready() and then only fills out the article contents. So, all the suggested straighforward solutions are not working on this case. – Manoj Shrestha Jun 10 '14 at 11:38
  • I see this in your page:`$('body').scrollTo('a:first');` I wrote something different above. – Litestone Jun 10 '14 at 11:46
  • $(windwo).scrollTop('a:first') works instead, but I have to run it in console after the page is fully loaded :( – Manoj Shrestha Jun 10 '14 at 12:06
  • hmm try `$('.textarea_unicode').ready(function(){$('html').scrollTop('a:first')})`. I have no other idea. – Litestone Jun 10 '14 at 12:07
  • Then: `$(document).ajaxStop(function () {...})` – Litestone Jun 10 '14 at 15:29