I am using addthis thirdparty tool for facebook and twitter like button , The twitter like button rendering parallely with the page but facebbok button renders a bit late, after the whole page, I am using it like that :
a class="addthis_button_facebook_like" fb:like:href="#"
Is there a way for rendering it same time with the whole page ?
Unfortunately, it isn't possible to guarantee when the buttons will be rendered. All the buttons will load at different times depending on how fast the resources (JS/CSS) are loaded and how quickly the code executes to render the buttons. This is done to make sure your page always load and doesn't get blocked by the buttons loading. The reverse could happen where Twitter loads slowly and Facebook loads quickly. Is there a functional reason for wanting them to load at the same time? If so, you could "hide" the div containing all the buttons and then have them all appears after a certain amount of time to increase the likelihood that all buttons have been rendered. I hope that makes sense.
Related
I am using Wordpress, with a plugin called "Visual Portfolio" It has a feature that allows some of the content to load, then when you scroll down, it loads more portfolio thumbnail content, like an infinite scroll feature for pagination.
The problem is, this makes it so if content is loaded dynamically, when they go to a portfolio item, then press back, the content is not loaded in the same way, and they can't easily go to another portfolio item, without scrolling down again.
Is there any way to solve this, so when they press back, it loads the page the way it was when they were their before?
Thank you for your attention on this
I've just started on a new project of my own.
What I would like to do is, on large screens, having a button activating a modal window BUT, on smaller screen (mobiles), I would like that modal window to become an off canvas section and when the button is clicked, the off canvas slides in from the side. Within that modal/off canvas part, there will be a form to fill out. (there will actually be multiple buttons that will need to activate the feature. Think something like multiple thumbnails with each a button to let viewers add comments)
I'm using Bootstrap 3 as my base framework. I would like to minimise the javascript (jQuery) functionalities but I understand I can't completely.
Questions I have,
do I have to create two HTML sections, one for the modal and one for the off canvas and then programatically hide/show according screen size?
Would it be best to create the form and then thru javascript, add the proper HTML around it according screen size? (though I think this option would be a tough to implement as my javascript skills are "advance beginner" at best)
How would I make the same button switch activation of the modal window or the off canvas form?
It seems to me that I need to detect screen size, no matter how I do the above, what would be the best way to detect the screen size, the safest and surest way?
Thanks for any insights you guys might have on this.
You will have to show code in your questions here, so i also vote to close your question.
I'm using Bootstrap 3 as my base framework. I would like to minimise
the javascript (jQuery) functionalities but I understand I can't
completely.
Angular JS decouples Twitter's Bootstrap from javascript. See: http://angular-ui.github.io/bootstrap/
Questions I have, do I have to create two HTML sections, one for the
modal and one for the off canvas and then programatically hide/show
according screen size?
Take a look to the Responsive Utilities: http://getbootstrap.com/css/#responsive-utilities
The screen detection of Twitter's Bootstrap is based on CSS media queries.
How would I make the same button switch activation of the modal window or the off canvas >form?
To give the same button different function based on sceensize you will need javascript / jQuery. See: Get the size of the screen, current web page and browser window you also could consider to use something like enquire.js, see also http://bassjobsen.weblogs.fm/responsive-banner-ads-2/
Or create two buttons and hide / show them with the the Responsive Utilities.
I am building an application using Zend Framework and i need insert one iframe in footer this application but, when i press F5 or click link or button, all page refresh even iframe.
The layout zend is called everytime when i dispatcher an event to server, ready, the iframe too. (My iframe is in the foorter.phtml, ready, it called together layout).
Someone have an some idea how to resolve this question?
tks
You cannot refresh the whole page except for an iframe on the page. When you ask a browser to refresh a page, it will refresh the whole page, there's no way to do it any differently.
To do what you seem to want to do, without using Javascript/AJAX, you'd have to use two frames. One for the top part of your website, and one for your footer. Here is an introduction to frames and how they work (iframes are similar, they are just "internal frames"): http://www.w3.org/TR/html4/present/frames.html
Please, however, note that using frames/iframes is not a practice I personally encourage. You should ask yourself why you are trying to do this. If it's to reload only a certain part of the page, then you should probably check into Javascript/AJAX alternatives.
If you want to disable the layout for some action you can use $this->_helper->layout ()->disableLayout ();. Put it in the iframe action, which will disable the layout and will show only the view of the action.
I'm basically creating a 520px wide welcome page for Facebook which I will upload onto the server and then Iframe it into a Facebook fan page. I'm doing this using HTML, CSS and JQuery rather than the old FBML method.
I've seen a lot of companies using an overlayed image to tease the user to 'like' the page. Once the user have liked the page, the content underneath is visible.
Examples:
https://www.facebook.com/redbull
https://www.facebook.com/smirnoffus
Red Bull - when the like button is triggered the transparent image is hidden to show content underneath
Smirnoff uses an image to give the illusion that the image is overlayed on top of the content. Somehow when the like button is triggered, the image is swapped for content.
Can anyone shed any light on how this can be acheived? I don't mind which one - Smirnoffus looks easier but might be a pain as everytime I update the content, I'll need to update image too.
When a user likes your Facebook fan page, Facebook will reload the whole page. You can then use server code to inspect the signed_request post parameter that they will send over. This question has an example code of how to detect if they liked the page in server side code.
I've got an iPhone web-app which I'd like to look as native as possible. I've used the scrolling trick to get rid of Safari's navigation, and taken away scrolling to prevent it from coming back; however, every time my app pulls an XHR, it shows the navigation again. Because users will need to use external links to get into the app, I cannot use a standalone bookmark. Is there any way to do the AJAX calls on the sneak?
Edit: I found that it was actually the fact that I'm using the hash method for AJAX history. It makes sense that the nav slides out temporarily, since I'm updating the URL. Thanks for your responses.
Yes, would be the short answer.
Since my webapps don't show the navigation bar, I have to assume that you are doing something other than just the XHR call which causes the scroll. Share some code and maybe we can see it.
For example, Night Sky and Border Gas both do XHR calls.
Yes.
I've tried two methods: one using plain XHR and one using jQuery.
XHR example you can see here: AnyExample.com
and here's the shorter jQuery version:
window.scrollTo(0, 1);
$.get("http://www.stackoverflow.com");
Same as GeoNomad, the navbar didn't come to view, and all I saw was the loading icon on the top bar.