problem in pages and google plus one button

Question

I have a HTML page that is in rtl with the following code and Google plus one button does not appear good in pages. Until the plusone.js file loaded there is a very big horizontal scroll because of dir="rtl" in html tag. After loading plusone.js the scroll will disappear. how can i avoid appear and disappear of this horizontal scroll.(I don't want to remove dir="rtl" from tag)

<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</head>
<body>
<div id="content">
   <div class="g-plusone" data-size="small" data-annotation="none"></div>
</div>
</body>
</html>

Mike Tishler · Accepted Answer

I just fixed this for my site

my problem was that every article page in my site had a horizontal scroll bar. after a long investigation i found that Google plus one button has a bug this bug is visible only when the page uses Direction=rtl style.

how to fix as long as the bug is relevant (hopefully google will fix it soon) just add this to you'r css file

iframe[id^="oauth2relay"]
{
    right:100px;
}

this will restore the correct position for the page for any iframe that called "oauth2relay" (google plus one script)

i'm using it in my site in every article page - you can check it out - just search "oauth2relay" in any article using firebug

my site is www.mentallica.co.il article for example: example

Ehsan · Answer

The script does not allow you to change elements But there is a simple solution Instead, set the dir = "rtl" to the html or body to do this set for a main div

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
    (function () {
        var po = document.createElement('script'); po.type = 'text/javascript';    po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>
</head>
<body>
<div id="content" style="direction: rtl;">
   <div class="g-plusone" data-size="small" data-annotation="none"></div>
</div>
</body>
</html>

problem in <html dir="rtl"> pages and google plus one button

Tags:

html

right-to-left

google-plus-one

farhad2161

2 Answers

Mike Tishler

Ehsan

Recent Activity

Donate For Us