jQuery Backstretch displaying on Multiple Pages in Refinery Rails App

Question

I have a jQuery plugin Backstretch installed and working with my Refinery Rails App.

The plugin loads the 1 image I have listed in

application.js

    //= require 'jquery-backstretch'
$.backstretch("/system/images/W1siZiIsIjIwMTMvMDMvMjcvMjJfNTZfMjRfOTkyX3NsYXRlX2JnLnBuZyJdXQ/slate-bg.png");

I am trying to work from an example I found that stated to "Use if/else statements to load backstretch. i.e. if($("body#about"))....else if($("body#contact")..."; however I don't really know how to write this properly. Here's what I tried:

application.js

    //= require 'jquery-backstretch'
if ($"body#home"($.backstretch("/system/images/W1siZiIsIjIwMTMvMDMvMjcvMjJfNTZfMjRfOTkyX3NsYXRlX2JnLnBuZyJdXQ/slate-bg.png"));
 else if ($"body#our-passion".backstretch("/system/images/W1siZiIsIjIwMTMvMDMvMjUvMDBfMTlfMjlfMzgyX2JnXzFfYmlnLnBuZyJdXQ/bg-1-big.png"));

What is the proper way to write this? Or is there a better way to do this effect?

dorilla · Answer 1 · 2013-03-28T17:45:29.367

1

Firstly, why do you need body before the id's? i.e. body#home

Since #home and #our-passion are both ids, it doesn't seem like you need body there.

As to your question: I think this is what you want, though it's a little vague what you're actually trying to achieve:

if ($("#home").length != 0) {
  $.backstretch("/system/images/W1siZiIsIjIwMTMvMDMvMjcvMjJfNTZfMjRfOTkyX3NsYXRlX2JnLnBuZyJdXQ/slate-bg.png");
} else if ($("#our-passion").length != 0) {
  $.backstretch("/system/images/W1siZiIsIjIwMTMvMDMvMjUvMDBfMTlfMjlfMzgyX2JnXzFfYmlnLnBuZyJdXQ/bg-1-big.png");
}

I could be interpreting this wrong. Maybe you're trying to add a backstretch to #home and #our-passion?

Hope this helps!

EDIT here's what the our-passion page should consist of in HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <div id="our-passion"></div>
  </body>
 </html>

There are other ways of doing this, but this is how to do it according to your question.

edited Mar 28 '13 at 17:45

answered Mar 28 '13 at 17:14

dorilla

193
2
11

Hi @dorilla, I am trying to add separate images to separate pages i.e. home and our-passion. – nil Mar 28 '13 at 17:21
Hi @RussellKompinski ... ok so as long as you don't add both #home and #our-passion on one page, my snippet should work (it would still work if the aforementioned was to happen, but would give you unexpected results) – dorilla Mar 28 '13 at 17:25
It doesn't seem to be working. Maybe I am misunderstanding something. When #home is used, is that using the :title of the page to run the script? – nil Mar 28 '13 at 17:36
no... #home is some unique element with home as its id in your html page i.e.
– dorilla Mar 28 '13 at 17:40
Hey thanks @dorilla. I tried that and played with different ways and nothing seems to be working. – nil Mar 28 '13 at 18:13
I figured it out. and thank you @dorilla for pushing me in the right direction. I'll post my answer – nil Mar 28 '13 at 21:23

nil · Answer 2 · 2013-03-30T02:35:52.603

this worked by putting

$(".show").backstretch("/system/images/W1siZiIsIjIwMTMvMDMvMjcvMjJfNTZfMjRfOTkyX3NsYXRlX2JnLnBuZyJdXQ/slate-bg.png");
$(".home").backstretch("/system/images/W1siZiIsIjIwMTMvMDMvMjUvMDBfMTlfMjlfMzgyX2JnXzFfYmlnLnBuZyJdXQ/bg-1-big.png");

in the application.js file - and containing the body's content with their corresponding divs.

update:

I ended up running the this script in separate views.

jQuery Backstretch displaying on Multiple Pages in Refinery Rails App

application.js

application.js

2 Answers2

update: