Forums
View unanswered posts | View active topics It is currently Sun Oct 26, 2014 12:57 am



Reply to topic  [ 5 posts ] 
 Google Translate + CSS3PIE 
Author Message

Joined: Fri Apr 19, 2013 9:31 am
Posts: 6
Post Google Translate + CSS3PIE
I'm trying to use CSS3PIE with the Google translate code provided by Google but it is causing all my page elements to be shifted out of place on IE8 till the page is scrolled and CSS3PIE can readjust itself. I assume it is because CSS3PIE can't see that the elements have been loaded into the div till some event is called like scrolling. Does anyone have any experience getting these two to play nice with each other? I tried using both V1 and V2 of CSS3PIE htc file with no luck. I think I need to call CSS3PIE after the google bits have loaded but I can't work out how.

Google Translate Code - http://translate.google.com/manager/website/?hl=en
Code:
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


Markup it loads into the div google_translate_element
Code:
<div class="skiptranslate goog-te-gadget" dir="ltr" style="">
<div id=":0.targetLanguage" style="display: inline;">
<select class="goog-te-combo">
<option value="">Select Language</option>
<option value="af">Afrikaans</option>
etc
<option value="yi">Yiddish</option>
</select>
</div>&nbsp;&nbsp;Powered by <span style="white-space:nowrap"><a target="_blank" href="http://translate.google.com" class="goog-logo-link"><img width="37px" height="13px" style="padding-right: 3px" src="https://www.google.com/images/logos/google_logo_41.png">Translate</a></span>
</div>


Fri Apr 19, 2013 9:46 am
Profile

Joined: Fri Apr 19, 2013 9:31 am
Posts: 6
Post Re: Google Translate + CSS3PIE
Code:
<script type="text/javascript">
    setTimeout(function test() {
        if (document.getElementById("google_translate_element").hasChildNodes() && window.PIE) {
            window.scrollBy(0, 1);
        } else if (document.all && !document.addEventListener) {
            setTimeout(test, 50);
        }
    }, 50);   
</script>


This corrects it after google translate loads but it's not ideal as you see the page jump about as it re-adjusts itself.


Mon Apr 22, 2013 9:17 am
Profile

Joined: Fri Apr 19, 2013 9:31 am
Posts: 6
Post Re: Google Translate + CSS3PIE
Worked out another possible solution which loads the stylesheet after the google translate module has loaded. Side effect of seeing non CSS3 elements while it loads but at least it doesn't jump around and sometimes it doesn't load PIE till you click anywhere on the page.

Edit: changed to check for pie before changing window.status which seems to address the need to click on page before pie will render.

window.status = "Done"; is used because of IE's infinite loading if you add HTC behavior after page is already loaded. http://support.microsoft.com/kb/320731

Code:
<script type="text/javascript">
setTimeout(function loadpie() {
    if (document.all && !document.addEventListener) { // check if ie8 or less
        if (document.getElementById("google_translate_element")) { // check for google translate container
            if (document.getElementById("google_translate_element").hasChildNodes()) { // check till translate loaded
                if (document.all && document.querySelector && !document.addEventListener) { // if ie8
                    document.createStyleSheet("CSS/IE8StyleSheet.css");
                    if (window.PIE) {
                        window.status = "Done";
                    } else {
                        setTimeout(loadpie, 10);
                    }
                }
                if (document.all && !document.querySelector) { // if ie7 or lower
                    document.createStyleSheet("CSS/IE7StyleSheet.css");
                    if (window.PIE) {
                        window.status = "Done";
                    } else {
                        setTimeout(loadpie, 10);
                    }
                }                       
            } else {
                setTimeout(loadpie, 10);
            }
        } else {
            setTimeout(loadpie, 10);
        }
    }
}, 20);
</script>


Still would prefer it to have CSS3 when page loads but i'm running out of ideas as to how to get that working.


Last edited by Dreador on Wed May 01, 2013 4:08 am, edited 3 times in total.



Tue Apr 23, 2013 2:40 am
Profile

Joined: Sun Apr 21, 2013 10:30 pm
Posts: 1
Post Re: Google Translate + CSS3PIE
Hi,


I am having the same issue. It tried following the instructions here but with no luck.
Changing versions won't do. I hope someone can help me out here.


Sat Apr 27, 2013 9:02 pm
Profile

Joined: Fri Apr 19, 2013 9:31 am
Posts: 6
Post Re: Google Translate + CSS3PIE
The first bit of javascript should work just copy and pasting although it is a very hacky and buggy solution (you see the page jumping about), providing you google translate element is the default one.

The second one requires you to have separate style sheets for IE8 and browsers less than IE7 with a main style sheet that loads normally where your normal css3 styles are set. Then in the IE8 stylesheet you only load the behavior part e.g.
Code:
.box{behavior: url('CSS/PIE.htc');}


They are both workarounds and not great ones at that. I still can't figure out how to integrate them properly together without compromising one thing or another. Contemplating just ditching CSS3PIE as deadline for the site is due soon and just let the site fall back on non css3 for ie8 and below or load images instead.


Wed May 01, 2013 1:57 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 5 posts ] 

Who is online

Users browsing this forum: Bing [Bot], Google [Bot], Yahoo [Bot] and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.