The Like button plugin doesn't appear, if one of its containers is display:none when the page loads, and made visible later with display:block.
Problem detected in Firefox (my version 15.0.1) only.
What can I do?
when you make the element visible, you should add your fb like plugin to dom
IE
<div id="showfb">mouseoverme</div>
<div style="display:none" id="facebutton"></div>
<script>
var fbbutton = document.getElementById("facebutton");
document.getElementById("showfb").onmouseover = function(){
// first visible
fbbutton.style.display='block';
// then add fb html5
fbbutton.innerHTML = '<div class="fb-like" ......... ></div>';
};
</script>
in alternative, try
width:0;height:0;overflow:hidden
instead of
display:none
and
width:auto;height:auto;overflow:visible
instead of
display:block
I don't know what is the reason of this bug (FB or FF), but I've solve that problem by show my element by default in FF only:
#-moz-document url-prefix() {#exe-article-social-tools { display: block; }}
https://developers.facebook.com/docs/reference/javascript/
The fb-root tag
The JavaScript SDK requires the fb-root element to be present in the page.
The fb-root element must not be hidden using display: none or visibility: hidden, or some parts of the SDK will not work properly in Internet Explorer.
It took me an entire day to figure it out, but being logged in on Facebook with a "test user" renders the like button invisible. In my case, I was always logged in with my test user on Firefox, while logged out / logged in with my regular Facebook user in Chrome (and I initially thought this was a browser issue).
However, the solution was as easy as loggin off the test user.
It is specified in the FB docs that not all features are enabled for test users (and the like button is one of those features), but I'd thought that it would at least get rendered.
Anyway, I hope this helps someone.
I had a number of different invisible divs on my page where fb-like buttons was hidden. When one of div shown, no fb-like button appears in it. Solution worked for me is to relaunch FB.init manually each time when invisible div reveals.
FB is a global function being added into your window object since you call for remote facebook api by url like http://connect.facebook.net/en_US/all.js. So since this remote script attached to your DOM you can run something like
FB.init({
appId : '346094915460000', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
You can dynamically add like button html5 code to the DOM and then run the FB parser again to generate the like button:
fbbutton.innerHTML = '<div class="fb-like" ... ></div>';
FB.XFBML.parse();
Related
I am using UberGallery for my site:
http://www.ubergallery.net/
Here is a sample of the page with Uber Gallery called directly in the HTML
http://www.goloyal.com/clients/dealers-mlm.php
If you click on a thumbnail it opens the popup div.
Some pages have a lot of thumbs, so they load slowly, so I tried to call the Uber Gallery through an Ajax so the page would load, then the thumbs could take their time:
/old-dealers-mlm.php
The loader works exactly as I hoped, however when you click on the thumbnails it opens in a new page (not the pop up div)
I am calling THIS div in my ajax
/div-dealers-mlm.php
Which also has the popups showing correctly.
I do understand that the pages are loaded separately, and I know it requires a special conversation to tell one page to do something in the other. However, I am not sure what I need to relay to the parent/original page, or how to do it to start testing. Any ideas?
THANKS!
The problem is that you're setting up the colorbox on links that don't exist yet. You need to replace your current colorbox code with this:
$(document).ready(function(){
$(document).on("click", "a[rel='colorbox']", function(e){
e.preventDefault();
var url = this.href;
$.colorbox({href: url, maxWidth: "99%", maxHeight: "99%", opacity: ".5"});
});
});
This uses jQuery .on() to bind the click event to all current and future a elements with a rel attribute that equals colorbox.
I have a working progress bar inside a Django app. Except in Safari the bar shows up only under weird circumstances.
First, I have the progress bar appended via jquery/ajax combination:
var $progress = $('<div id="upload-progress" class="upload-progress"></div>')
.appendTo($('#webfileuploadform'))
.append('
<div class="progress-container">
<div class="progress-info">uploading 0%</div>
<div class="progress-bar"></div>
</div>');
//This is all one string, I've just broken it up like this so it's readable.
//Called on form submit
$.ajax({
...yada yada...
success: function(data){
$progress.show(); <-- shows the div(s)
...more yada...
In Firefox and Chrome, this all works fine. In Safari, this is actually working as well, just not displaying. When I open up Safari developer tools and drill down to the <form> I can see that the DOM elements are being appended to the form as they should. The width of the progress bar and the text of the progress-info div are updating correctly as well (in developer tools). The problem is the #upload-progress div is not showing in the browser even though I see it exists in the developer tools!
What blows my mind is that if I click the grey 'x' in Safari to force stop the page, the progress bar then shows up!
Another weird thing is that once I click the form submit, if I highlight any dom element in my developer tools the entire page is blanked out with the same color I have on a wrapper div around the entire page! Also, if I highlight an element in the developer tools before I click the submit button, then click, the page just jumps straight to blanking out again. I don't even have to move around in the developer tools.
Very strange behavior. I have no idea what's going on...
I've read some things saying safari doesn't redraw the DOM when css is applied with jquery? I don't think that's true, but does this have something to do with it?
UPDATE
So this problem persists even outside the ajax function, but works outside the submit handler. That is:
problem persists when I click the submit button (no ajax code here)
$('#webfileuploadform').submit(function(){
$('#webfileuploadform').append('<div id="upload-progress" class="upload-progress">asdf</div>');
$('#upload-progress').append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');
...
});
same code outside of the submit handler works
$('#webfileuploadform').append('<div id="upload-progress" class="upload-progress">asdf</div>');
$('#upload-progress').append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');
$('#webfileuploadform').submit(function(){
...
});
This is a problem with webkit. The bug report is here. Webkit cannot handle XMLHttpRequests after a form submit. A workaround that I used was to submit the form to a target iframe. Turns out the bug only happens when the target is the same document that the form is in...
Changed target:
<form action="my_django_view" method="post" enctype="multipart/form-data" id="formID" target="theIframeName">
...
</form>
Hidden iframe on page:
<iframe name="theIFrameName" id="style-me-with-display-none"></iframe>
Although it should be noted I'm working with legacy code here, which is why I'm handling file objects with forms. If you are starting from scratch, there are better ways to handle file objects nowadays and this method should be avoided.
I am having an issue closing a fancybox popup when jquery is included within the popup page (i'm using AJAX and including an external php page within the popup). The fancybox is setup as follows:
$(".various3").fancybox({
'type' : 'ajax',
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none',
'ajax' : {
type : 'GET'
}
});
The popup has a 'Cancel' button to allow users to close the popup (using jQuery.fancybox.close();). I have to include jquery within the popup page to allow some other functionality to work and this prevents the jQuery.fancybox.close(); from working. If i remove jquery from the popup page then it works fine, however I cannot work out how to reference the instance of jquery on the main page (i have tried parent in case, although i wouldn't have thought this should work as it's a div and indeed it didn't). I have tried using:
var localjquery = jQuery.noConflict(true);
within the popup page and this allows me to use jQuery.fancybox.close(); to close the popup successfully however this prevents the use of $ to reference jquery which is needed for other plugins on this page that i can't edit. If I add
var mainjquery = jQuery.noConflict();
after the first instance of jquery on the main page then this obviously works fine and i can refer to it as mainjquery on the parent, but if then try
mainjquery.fancybox.close();
on the popup it says mainjquery is undefined.
I suspect it's a problem due to a combination of multiple jquery instances and loading a completely separate page via ajax into a div (rather than using an iframe etc whereby i could then use parent. or similar). If anyone could shed any light on how I could reference the mainjquery reference from the child popup, or a better way I can close the fancybox then that would be greatly appreciated.
Thanks so much!
Dave
The best thing to do is test to see if it is an ajax request, and if so don't include the jquery (or any other scripts you already have for that matter).
Here's a sample of code I use on my php pages for doing both ajax and regular page requests.
define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
....
if(!IS_AJAX)
{
//echo your header with scripts
echo $header;
}
//else just echo the contents of the page body
edit:
If you need to add things to the head tag, you should be using an iframe instead of an ajax type for the fancybox.
I am currently loading several forms into a webpage with:
$(document).ready(function () {
$('#content').load('php_script.php', function() {
$(this).find('#someForm').ajaxForm(function() {
alert('Success!');
});
$(this).find('.someOtherForm').ajaxForm(function() {
alert('Success!');
});
});
});
This works in Chrome, Chromium and IE who loads the forms and everything works as it should (Clicking submit sends a request to the php-script defined in the form's action, which adds stuff to a db, and shows the alert dialog). In Firefox (v10.0.2) this code loads the forms into the DOM and displays them, but when clicking submit on any of the forms nothing happens.
At first I suspected ajaxForm, but changing the above code to:
$(document).ready(function () {
$('#content').load('php_script.php');
});
yields almost the same result, the difference being that the user is sent to the script defined as the action (Except for Firefox, where nothing happens).
How do I make Firefox not kill the submit button?
I solved it, bad HTML from my side:
<table><form ...>
<tr>...</tr>
</form></table>
Instead it should look like:
<form ...><table>
<tr>...</tr>
</table></form>
The validator did not catch this since it was loaded via jQuery (and I forgot to validate the page serving the forms), and Firefox buggered out.
The code above looks ok to me...
Have you had a look in firebug if there are any errors? Maybe there is a conflicting Id or something.
Maybe the form isnt completely loaded into the dom yet, might be worth giving live binding a try
Found this in the docs:
...jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as , , or elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser...
If you inspect the form is it the same as in other browsers?
I'm using S5 Accordion Menu on my Joomla site.
http://jalousie.al-soft.ru/o-programme
What I need is to make it not slide down, when I reload page. It needs to work like accordion only when you click on it items, but not when the page reloads.
However it will be great, if it will be possible to save its open state for current page, but without accordion effect when page loads, just load it opened.
Sorry for my english. Let me know if you have any ideas.
Here is the source
http://jalousie.al-soft.ru/modules/mod_s5_accordion_menu/js/s5_accordion_menu.js
if you use the Accordion class that ships with mootols/more/FX just use the initialDisplayFx option to disable the initial animation. Something like the following code should work.
var s5_accordion_menu = new Accordion($('s5_accordion_menu'),
'h3.s5_am_toggler',
'div.s5_accordion_menu_element', {
opacity: true,
allowMultipleOpen: true,
display: s5_am_openElement,
alwaysHide: true,
initialDisplayFx: false
});
The signature of the class you use does not match the "official" one but maybe it is just a wrapper otherwise the answer is not, you can't disable the effect