Conflict with Backstretch and slider

Permalink
Hi,

I am using the backstretch block to create a different background on every page for a client, but when I activate the revolution slider, the backstretch image disappears once I leave the edit mode and publish the page.

I think there is a JQuery conflict of some kind, but I am unable to locate the problem.

Here's a link to the published content:http://europemissions.org/test

Any suggestions would be appreciated.

Thanks,

Marvin

marvinjr
 
enlil replied on at Permalink Reply
enlil
You would be best to post this in the support area for the backstretch add on.
marvinjr replied on at Permalink Reply
marvinjr
Thanks. I have the backstretch block in all of the other pages on the site and it is only broken on the test page with the test revolution slider. It seems that the slider has initiated a conflict, not the other way around.

Frankly, I know too little about the scripts in question.

Marvin
enlil replied on at Permalink Reply
enlil
Maybe its just the slider. Is it still broken with the slider and no backstretch? I don't use either of the them so code wise I couldn't tell you although those symptoms do tend to be JavaScript related.
JohntheFish replied on at Permalink Reply
JohntheFish
Have a look through the checklist in:

http://www.concrete5.org/documentation/how-tos/editors/the-block-do...

A jQuery conflict will show as an error in the browser developer console.
marvinjr replied on at Permalink Reply
marvinjr
John,

I do have an error on the page and it appears to be in the functions.js:

JQuery(document).ready(function() {

(Uncaught ReferenceError:JQuery is not defined)

A second error in the index.php is located at line 214:

Uncaught TypeError: cannot call 'backstretch' method undefined

As I mentioned in an earlier post, my understanding is more than a little limited.

Thanks
marvinjr replied on at Permalink Reply
marvinjr
Further inspection of the index.php reveals this in line 208:

[code]
</script>

<!-- END REVOLUTION SLIDER -->
<script type="text/javascript">
$.backstretch("http://europemissions.org/files/5813/8479/4618/1Home.jpg", {speed: 150, centeredX: 1, centeredY: 1 });
</script>

[code]

The "</script>" in line 208 seems to be breaking the .js.
JohntheFish replied on at Permalink Reply
JohntheFish
Looking at the page, the first error reported is that JQuery is undefined, not jQuery. It may be a camelCase issue with the name.

As to whether this is a backstretch problem, a slider problem or an issue with your theme, you could post and cross reference a support request for each.

EDIT

in function.js in your theme you have
JQuery(document).ready(function() {
marvinjr replied on at Permalink Reply
marvinjr
John,

Thanks. I have reached out to both. Since the backstretch add-on works without an issue on all of the site's other pages, I think the problem lies with the slider.

Excuse my ignorance, but how can I correct a camelcase issue?
JohntheFish replied on at Permalink Reply
JohntheFish
You would need to edit the respective file to change the text JQuery to jQuery. It looked like this may be in your theme, or in an override of your theme. Its in a file called function.js.
marvinjr replied on at Permalink Reply
marvinjr
Sorry. Changed the JQuery to jQuery, but it had no effect. Waiting to hear from slider developer
JohntheFish replied on at Permalink Reply
JohntheFish
Looking at the dev console again for your home page, you are now getting:

Uncaught TypeError: Property '$' of object [object Object] is not a function functions.js:1

Uncaught TypeError: Cannot call method 'backstretch' of undefined test:291

The error reports suggest that at the time the above calls are made jQuery is either not loaded or already broken.

What happens if you remove backstretch from that page, but leave the slider?

What happens if you remove the slider from that page, but leave backstretch?
marvinjr replied on at Permalink Reply
marvinjr
John,

Thanks for your help with this. I am only seeing the errors on the /test page because that is the only place I have implemented the slider. When I remove the slider, the backstretch add-on functions properly and the page works as expected. It is only when the slider is placed on the page that the page is broken.

I am developing this page to replace the homepage athttp://europemissions.org. The only difference between the two pages is the content block that is removed and I have selected a right sidebar page. With that said, it was broken with the other page type as well.

I am confident the problem is related to the slider somehow overriding the settings for the background image. I have yet to hear from the developer of the slider at this point.
marvinjr replied on at Permalink Reply
marvinjr
I received this message from the revolution slider and placed this code at the beginning of the function.js file:

$ = jQuery;

That's all that was needed. Sitehttp://europemissions.org is working now.

Thanks for your help
savvyeye replied on at Permalink Reply
savvyeye
Hi,

I just got the same slider and I am having the same issues. where is this function.js file?

thanks!
JohntheFish replied on at Permalink Reply
JohntheFish
This problem arises because although Revolution slider is a very nice looking slider, it breaks the coding rules used by concrete5 by globally hijacking the jQuery $() magic function. Revolution slider is not available from the concrete5 marketplace (only from 3rd party marketplaces) and never will be unless the developer of revolution slider resolves this rogue behaviour.

The consequence of the hijacked $() is that any on-page javascript that relies on $() being defined in the global namespace will fail. The $=jQuery workaround will only work if the javascript it is applied to is all within closures, so it could cause a host of secondary errors. It needs to be placed within any javascript loaded by a theme or addon when the page is viewed where $() is used. In the above instance of this issue, the addon file affected by revolution slider was called function.js.

The only guaranteed fix for this problem is to get a refund for revolution slider and use a different slider, one from the c5 marketplace that behaves properly with respect to $().

EDIT:
The google search below will show all the issues posted relating to revolution slider.

https://www.google.co.uk/search?q=site%3Aconcrete5.org+revolution+sl...
marvinjr replied on at Permalink Reply
marvinjr
Good morning,

The function.js is located within the js folder associated with the theme. Once I placed the code at the beginning of the file, the slider has worked consistently athttp://europemissions.org.

Marvin