floatbox vs. ajax in wordpress ->don't work

Page: 1

Author Post
Member
Registered: Jun 2014
Posts: 5
Dear Admin,
I searched for my problem but i didnt find a topic what really match witch my problem:

I am acutaly trying to build up a wordpress homepage with ajax content(to can listento the musicplayer without a break) and also with the good old floatbox to overlay videos and images. http://www.music-in-motion.at/neu
And if I dont acitvate ajax to load the pages , floatbox(galleries and videos) works fine. But if I activate the plugin (Ajaxify Wordpress Site) the content will be load with ajax and also my gallery. This is good, but when I click on an image sometimes it open in a floatbox window and somtimes it open the image seperatly and without floatbox. The controls are also not working on the right way when the ajax plugin is active

I tryed to active the activateOnClick function in the option file but it didnt work.
Tryed to insert the code from your side in the javascript file from the ajax plugin
$.get('someURL.php', function(data) {
$('#myXhrDiv').html(data);
fb.activate();
});

I already build up a homepage with javascript loaded content, but in fact I am a html,java,php noob ...
So please help me and if the problem is fb.activate(); maybe you could say me where I should place it to solve the problem.

nice greedings
Leon
Administrator
Registered: Aug 2008
Posts: 3382
Hi Leon,

I can't make any headway on this because the page you linked to bears almost no resemblance to the one discussed in your problem description.

There is no ajax content being loaded from your music-in-motion.at domain. I see AJAX fetches occurring from api.soundcloud.com and from sndcdn.com. These must be occurring within the confines of the <iframe> elements on the page because AJAX fetches are restricted to same-domain URLs. I assume those iframes are the music players you referenced. Your site content itself is not coming in as an AJAX fetch so I don't know what it means to say that you are building your page with ajax content.

Also, there is no floatbox content on that page. That is, there are no <a> or <area> elements with the 'floatbox' class on them - neither in the original page source nor in the resultant HTML after all the scripts on the page (all 20 of them!) have done their thing.

With finding neither AJAX content being fetched nor Floatbox content to activate, I can't really help my with activating AJAXed Floatbox content on that page.

Note that activateOnClick doesn't exist anymore, and didn't work very well when it did exist. From the version 6.0.3 change log entry:
Quote
"activateOnClick" was causing a few difficult problems, including de-activating various floatbox elements on click. It has been retired and is no longer available.


Wherever your troublesome page is, load it into a browser with the developer debug console (such as Firebug) active. After the page settles in, run fb.activate() from the debug console. If the Floatbox content on the page works just fine but did not before running activate, then you must be having trouble identifying where the AJAX calls are occurring and hence where the fb.activate call or calls need to be made.
Member
Registered: Jun 2014
Posts: 5
Thankyou for your quick response!
I know why you cant see the descriped problem. www.music-in-motion.at is to old side and the side what i am talking about is www-music-in-motion.at/neu <--!! so please don't forget the /neu ;-)

hmm...okay i never did this before ( run it with a debug console ) but i will try it
« Last edit by Unknown on Mon Jun 30, 2014 5:49 pm. »
Administrator
Registered: Aug 2008
Posts: 3382
You originally linked me to http://www.music-in-motion.at/neu and that was the page I was looking at. It did no AJAX fetches for its content and has no floatboxed links on it. The page you are linking to now - www-music-in-motion.at/neu - is just a malformed and invalid variation on that same URL, with a dash where a period should be. This doesn't help.
« Last edit by admin on Mon Jun 30, 2014 5:55 pm. »
Member
Registered: Jun 2014
Posts: 5
okay sorry it was a language issue.
The side use ajax when you use the menu bar on the top of the page . The floatbox links are in "Galerie" and "Videos"
Administrator
Registered: Aug 2008
Posts: 3382
Ok, now we're making a little progress. Selecting galerie from the menu does indeed do an AJAX fetch of some Floatbox content into the page. The Floatbox content does not work when first loaded. If I run fb.activate() manually, the floatboxed links work just fine as expected. So indeed, we can say with 100% certainty that you have not identified the script location where the ajax call is being made and have not hooked fb.activate into the completion of that ajax call. That is your mission and path to success.
Member
Registered: Jun 2014
Posts: 5
This maybe sounds easy to you, but I think I miss the javascript knowledge.
Can't you explain it in a beginner level where I should identify the script location from the ajax call and what you mean with it?!?
And I tryed to insert the code from you instructions into the completion of the ajaxify.js but it still don't work.
this code:
$.get('someURL.php', function(data) {
$('#myXhrDiv').html(data);
fb.activate();
});
i insert it before :
}); // end ajax

Please note that i am a beginner and I would be grateful for a tip for example where i should paste in this code

I keep on trying,..
Administrator
Registered: Aug 2008
Posts: 3382
No sorry, but I really can't identify on your site where the AJAX imports are occurring or what scripts are doing it. I can tell you from a Floatbox support perspective that you need to use fb.activate to light up content that is added dynamically to a page. I can't get in to co-developing your site by sorting out your site's code and extending its scripts.

WordPress is an easy way to get a site that looks good up and running reasonably quickly, without a lot of tech skills. But it's an absolute nightmare to try to dissect and debug. It's asking too much to ask Floatbox support to pick through the tea-leaves of the 20 scripts that are running on that page. The task is fairly simple to describe - fire fb.activate() after the AJAX content imports have completed. It's your job as the site developer to make that happen.
Administrator
Registered: Aug 2008
Posts: 3382
Are you using a pre-packaged template or plugin that does the AJAX fetches? If so, and that templace or plugin has some sort of support channel, you could inquire on that channel about how and where to to set a post-fetch callback action.
Member
Registered: Jun 2014
Posts: 5
Yes I use a plugin ( ajaxify word press side ), and there are also other people with the same problem by using ajax with a lightbox, they got it to work but I not :(

And I found a place for fire up fb.activate , this solved the problem that floatbox only worked if I refreshed the "galerie" or " videos" page when the link wasn't dicrectly to the "galerie" or "video" page (for example I startet on the Home and then clicked on "Galerie" it didn't worked)
I put the fb.activate(); directly after loading the no-ajaxy classes.

But if I use the cursers to see the next image it don't work. Either ajax suddenly load a other page in the ajaxifyd content or the image open up with its image url
I really tried as much places as possible in the ajax Js file but I didn't get it to work completly right ( I think I tried it the hole day )
Meanwhile I think to use ajax wordpress page plugin, the floatbox plus plugin and the standard mediathek from wordpress to insert easly images or galleries on my page will never work, or all of them need to be modified to get them work fine togehter .

I know that you have done your job as floatbox supporter and it is my job to find the problem but maybe this will never happen.

But if I really get it to work i will post it here .

with greedings
Leon
« Last edit by Unknown on Tue Jul 01, 2014 8:25 pm. »
Administrator
Registered: Aug 2008
Posts: 3382
I took a look at the ajaxify script.

I really do sympathize with the WordPress crowd. The sites are a snake's den of unstructured scripts and plugins that must play together without much of a well understood and agreed to framework in which to do so, many written by hackers who provide very dicey support for their creations.

You may have put the fb.activate() call too high in the script. It should go right at the end of the 'success' callback function; after the reinvigorate.ajax_track(url); statement.

It also looks from the code like he is plowing into all the newly added HTML and 'ajaxifying' anything he can lay his hands on there. It's possible he's over-writing or blocking the click actions that get added to the floatboxed links. You may need to protect those links by placing the "no-ajaxy" class name on each of them.

Page: 1