Is there a way to use FB.XFBML.parse without rendering the a Facebook plugin again which cause it to "flicker" (disappear et reappear).
Will be using the Facebook Like button or Facebook Recommandations Bar.
Live example: http://www.gablabelle.com/eve-d
Slide to view the flickering in the lower right corner.
$.address.state(ajax_object.path).crawlable(true).value(whereiam);
$(".fb-recommendations-bar").data("href",whereiamurl);
//$(".fb-like").data("href",whereiamurl);
fburl = $(".fb-recommendations-bar").data("href");
//fburl = $(".fb-like").data("href");
console.log(fburl);
FB.XFBML.parse();
Many thanks for your help.
You can limit the scope of the re-parse by passing in the parent DOM element to FB.XFBML.parse.
Add an opacticy layer over the top of the facebook plugin div when a "page change" is needed. Animate it to fully opaque. Call the FB.XFBML.parse() and give it a few moments to re-render. Animate the layer to non-opaque, then remove the opacity layer from over the top of the facebook plugin div (or leave it there for the next time you need to do a "page change" without actually reloading the page.
This technique will give you a gracefully disappearing/reappearing plugin, rather than a jarringly harsh "flicker".
Cache the Facebook likes of the previous slide + current slide + next slide on a slide change event. So that when you go to the next or previous one and its Facebook like should already be ready/loaded, the user should not see a flickering. Unless he/she goes to fast with the slides.
I've had this recently.
I got around it by wrapping the XFMBL in a variable... don't know why but without it it seemed to flicker... a total hack of a way to stop the flickering but worked for me!!
if(call == 0){
FB.XFBML.parse();
call = 1;
}
DMCS provided what seems to be the only half-proper answer, but it's butt ugly. You don't know how long it'll take on each persons web browser to render the stuff. The callback which supposedly says it's rendered doesn't work either. Also the flicker isn't seen in firefox but only in google chrome.
Related
Has anyone successfully implemented screen orientation plugin in Sitecatalyst to capture mobile device orientation?. When we use the below code in the s_code, in the web page i am seeing some unusual behavior(ie: when we scroll the page to the bottom and then if i click anywhere on the content section, page goes to the top by default). I understand, that's happening because of this line "window.scroll(0,0)". Any help or thoughts?
Plugin Code below:
function screenOrientation(){switch(window.orientation){case 0:case 180:return("Portrait");break;case 90:case -90:return("Landscape");}window.scroll(0,0)}
Reference: [http://webanalyticsland.com/sitecatalyst-implementation/capture-mobile-device-screen-orientation-in-sitecatalyst]
Thanks in Advance.
This is clearly a code bug (or more a typo I think) and the line window.scroll(0,0) can be safely removed from the 'plugin' (its not really a plugin, just a js function that returns the orientation).
The reason this fires every time a user clicks on anywhere on the page is because you have ClickMap functionality enabled in your s_code.js configuration. This will fire an s.tl() everytime a click event occurs. the s.tl() will call the screenOrientation() function to populate your required prop/eVar.
So if you were to turn off clickMap (s.trackInlineStats=false;) this random scrolling to the top would stop even if you didn't remove the offending line. That said, remove the scrolling code, its not right or required!
We are developing some ads using google web designer tool
so far its good but one main issue with it is, slow loading.
its taking almost 3 seconds to load and we feel very bad about that.
can anyone know how to optimize it?
thanks.
In developing html5 banners, by default the 'polite load' is checked.
Which means you banner will not be visible and will not load until the page is loaded.
And when testing your banner, there is some moments before showing the banner to simulate the webpage load.
Why?
Because no publisher(Website) allows you to make their website slow. That is the rule. There is no way for you to force yourself to show first on a publisher website.
If you want this option. You should directly talk to the publisher/ when you get approval from them, you can uncheck 'Polite Load' when you are publishing your ad. Then your banner will show faster without any delay.
#cnu - I have experienced the same issue. The only workaround I have at the moment is to set an initial loading image - while the Ad is loading
Try adding a div with an ID of 'loading' immediately after your opening body tag.
<div id="loading" class="loading-image">
<img src="default.png"/>
</div>
Then find the following function, and set the div to block display
function handleDomContentLoaded(event) {
// This is a good place to show a loading or branding image while
// the ad loads.
document.getElementById('loading').style.display = 'block';
}
Then find the following function, and set the div to none - to hide the image after loading
function handleAdInitialized(event) {
// This marks the end of the polite load phase of the Ad. If a
// loading image was shown to the user, this is a good place to
// remove it.
document.getElementById('loading').style.display = 'none';
}
The official GWD instructions don’t match the functions actually generated in the source, which initially made this setup confusing. The code comments in the source indicate these are the correct functions to use. You can use the first frame of the Ad as the loading image, rather than a loading gif - so the user experience isn't affected too much.
Hope this helps.
Ok, weird issue:
1) Go here on an iPhone (Safari browser): http://powellcreative.com/our-team/
2) Click any of the team images to get to the team member page
3) Click the back button on the browser
4) The image is disappeared on the Team page now
I know this question is kind of old, but I was looking for a solution to a similar problem and after searching, I found a solution. Hopefully this helps other people with the same problem. The problem is when you give iOS a javascript event like onmouseover or onmouseout it doesn't like it, mainly because when your finger is "mousing over" an element in iOS, you are actually clicking on it, so this is the solution I came up with that seems to reload images after hitting the back button in iOS.
Here it is:
Make sure all images are in their own separate div with a distinctive name.
Example:
<div name="div1"><img src="yourimage" onmouseover="javascript:this.src='yourimage2';" onmouseout="javascript:this.src='yourimage';"></div>
In the javascript head part of your page you want to insert this:
window.onpageshow =
function(event){
if (event.persisted){
//for every div and image you want changed back you can add a loop here to change all at once or just one div by name//
document.getElementById('div1').innerHTML = '<img src="yourimage" onmouseover="this.src="yourimage2";" onmouseout="this.src="yourimage";">';
}
}
This will check for page back since Mobile Safari uses bfcache and reload your image into the div. Hopefully this helps OP or someone else.
On my page, overlays are loaded by inserting their content with jQuery and then fading in.
What I want to do is this:
When you click to open an overlay, an URI is loaded (e.g. news/12, where news is the category and 12 is the id of the item to load).
Except, instead of loading it in body, it should be loaded in the overlay.
In other words, I want to achieve something like on facebook, where you open an overlay, the url changes, but the main page stays the same.
I'm guessing you need ajax for this, but I have no idea whatsoever how to do it.
Thanks
It sounds like you want to use the new history.pushState(...) and history.popState(...) browser API.
This SO post might help you out: Change the URL in the browser without loading the new page using JavaScript
Use Boxy. See http://onehackoranother.com/projects/jquery/boxy/tests.html#
AJAX example:
<a href='#' onclick='Boxy.load("test-1.html");'>Test 1</a>
See this question: Ajax - How to change URL by content
I solved it thanks to Lethargy's answer.
.pushState() is exactly what I need to have the URL reflect the contents of the overlay that is dynamically created with jQuery.
With some tweaking around and debugging I managed to get it all working.
Now my overlays (or popups, dialogs, whatever) are search engine ready, and the url is copy-pastable for users :)
I'm looking for a tutorial without any javascript - pure CSS3.
I've created two pages (page1.html, page2.html) for the iPhone and I'm using CSS3 and the -webkit-properties.
To connect those sites I created a next- and a backbutton.
When tapping on the nextbutton page2.html is loaded, when tapping on the backbutton page1.html is loaded.
This is working so far.
I'd like to try using some more -webkit-properties to get the flip-effect like in this demo.
So, when clicking on my next-button page2.html should be flipped in. When clicking/tapping on the backbutton page1.html should be flipped in.
I'm new to this and hope to get some help here. Do you know a tutorial dealing with my problem?
Another question coming up to my mind was whether it is possible to load page2.html seperatly or whether I have to build only one page with the content of page1.html and page2.html?
You have to build only one page with two sections/divs with the flip-contents in it. Then you can use the transform: rotateY … or, maybe load the second page in with AXAJ or something else, but because it's CSS on my understanding you have to put everything in one page with two sections/divs
There are lots of pageflip demos on the interwebs. This is one we did It was inspired by Roman Cortes one - there are others that use more of a squeeze than a flip.