Scrollorama parallax not working - superscrollorama

I am working on a Wordpress theme that has a parallax effect. On closer inspection, this theme is using the scrollorama script. (http://johnpolacek.github.io/scrollorama/)
When I initially downloaded the theme, the effect worked fine but since I have had to heavily customize this theme, the effect no longer works. The images that should move from A to B when scrolling are now just stuck at A and don't move. Clearly something I have done has put a spanner in the works but having never used scrollorama before, I am unsure what to look for.
I have looked at the original themes code specifically at the scrollorama parts and everything matches perfectly so has anyone got any ideas off the bat that could be causing the issue?
Could it simply be a compatibility problem? The only thing I am using other than scrollorama is an added image slider http://www.menucool.com/responsive-slider.aspx
This should be all the code that is being used for scrollorama:
HTML
<div class="scroll-block-wrapper">
<div class="scrollblock">
<div class="space-small-planet"></div>
<div class="space-jupiter"></div>
<div class="space-moon"></div>
<div class="space-spaceship"></div>
<div class="sky-sun"></div>
<div class="sky-plane"></div>
<div class="sky-clouds-1"></div>
<div class="sky-clouds-2"></div>
<div class="sky-clouds-3"></div>
<div class="sky-clouds-4"></div>
<div class="sky-clouds-5"></div>
<div class="sky-clouds-6"></div>
<!--waves and ship-->
<div class="wave-1"></div>
<div class="wave-2"></div>
<div class="wave-3"></div>
<div class="wave-4"></div>
<div class="wave-5"></div>
<div class="wave-6"></div>
<div class="wave-7"></div>
<div class="ship"></div>
<div class="wave-8"></div>
<div class="wave-9"></div>
<div class="wave-10"></div>
<div class="wave-11"></div>
<div class="wave-12"></div>
<div class="wave-13"></div>
<div class="wave-14"></div>
<div class="water-jellyfish"></div>
<div class="water-fishes"></div>
<div class="water-shark"></div>
</div>
</div>
CSS
.scroll-block-wrapper {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
left: 0;
}
.scrollblock {
position: absolute;
width: 1900px;
left: 50%;
margin-top: -20px;
margin-left: -950px;
}
.space-small-planet {
position: absolute;
top: 600px;
left: 311px;
width: 109px;
height: 108px;
background: url("/img/space-small-planet.png") 0 0 no-repeat;
}
.space-jupiter {
position: absolute;
top: 292px;
left: 67px;
width: 345px;
height: 238px;
background: url("/img/space-jupiter.png") 0 0 no-repeat;
}
.space-moon {
position: absolute;
top: 580px;
right: 39px;
width: 419px;
height: 416px;
background: url("/img/space-moon.png") 0 0 no-repeat;
}
.space-spaceship {
position: absolute;
top: 228px;
right: 238px;
width: 286px;
height: 167px;
background: url("img/space-spaceship.png") 0 0 no-repeat;
}
.sky-plane {
position: absolute;
top: 1510px;
right: -230px;
width: 224px;
height: 98px;
background: url("img/sky-plane.png") 0 0 no-repeat;
}
.sky-clouds-1 {
position: absolute;
top: 838px;
left: 293px;
width: 327px;
height: 106px;
background: url("img/sky-clouds-1.png") 0 0 no-repeat;
}
.sky-clouds-2 {
position: absolute;
top: 970px;
right: 46px;
width: 677px;
height: 171px;
background: url("img/sky-clouds-2.png") 0 0 no-repeat;
}
.sky-clouds-3 {
position: absolute;
top: 1632px;
left: 129px;
width: 605px;
height: 135px;
background: url("img/sky-clouds-3.png") 0 0 no-repeat;
}
.sky-clouds-4 {
position: absolute;
top: 1950px;
left: 60px;
width: 253px;
height: 81px;
background: url("img/sky-clouds-4.png") 0 0 no-repeat;
}
.sky-clouds-5 {
position: absolute;
top: 2220px;
left: 149px;
width: 346px;
height: 253px;
background: url("img/sky-clouds-5.png") 0 0 no-repeat;
}
.sky-clouds-6 {
position: absolute;
top: 2380px;
right: 192px;
width: 215px;
height: 104px;
background: url("img/sky-clouds-6.png") 0 0 no-repeat;
}
.sky-sun {
position: absolute;
top: 1800px;
right: 80px;
width: 876px;
height: 871px;
background: url("img/sky-sun.png") 0 0 no-repeat;
}
.water-jellyfish {
position: absolute;
top: 5090px;
right: 168px;
width: 235px;
height: 257px;
background: url("img/water-jellyfish.png") 0 0 no-repeat;
}
.water-fishes {
position: absolute;
top: 5114px;
left: 33px;
width: 481px;
height: 679px;
background: url("img/water-fishes.png") 0 0 no-repeat;
}
.water-shark {
position: absolute;
top: 5096px;
left: 50%;
margin-left: -309px;
width: 617px;
height: 932px;
background: url("img/water-shark.png") 0 0 no-repeat;
}
/*waves*/
.wave-1 {
position: absolute;
top: 3084px;
left: -200px;
right: -200px;
height: 32px;
background: url("img/waves/wave1.png") 0 0 repeat-x;
}
.wave-2 {
position: absolute;
top: 3101px;
left: -200px;
right: -200px;
height: 39px;
background: url("img/waves/wave2.png") 0 0 repeat-x;
}
.wave-3 {
position: absolute;
top: 3119px;
left: -200px;
right: -200px;
height: 62px;
background: url("img/waves/wave3.png") 0 0 repeat-x;
}
.wave-4 {
position: absolute;
top: 3156px;
left: -200px;
right: -200px;
height: 67px;
background: url("img/waves/wave4.png") 0 0 repeat-x;
}
.wave-5 {
position: absolute;
top: 3199px;
left: -200px;
right: -200px;
height: 82px;
background: url("img/waves/wave5.png") 0 0 repeat-x;
}
.wave-6 {
position: absolute;
top: 3244px;
left: -200px;
right: -200px;
height: 83px;
background: url("img/waves/wave6.png") 0 0 repeat-x;
}
.wave-7 {
position: absolute;
top: 3302px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave7.png") 0 0 repeat-x;
}
.wave-8 {
position: absolute;
top: 3362px;
left: -200px;
right: -200px;
height: 92px;
background: url("img/waves/wave8.png") 0 0 repeat-x;
}
.wave-9 {
position: absolute;
top: 3424px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave9.png") 0 0 repeat-x;
}
.wave-10 {
position: absolute;
top: 3493px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave10.png") 0 0 repeat-x;
}
.wave-11 {
position: absolute;
top: 3562px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave11.png") 0 0 repeat-x;
}
.wave-12 {
position: absolute;
top: 3643px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave12.png") 0 0 repeat-x;
}
.wave-13 {
position: absolute;
top: 3716px;
left: -200px;
right: -200px;
height: 122px;
background: url("img/waves/wave13.png") 0 0 repeat-x;
}
.wave-14 {
position: absolute;
top: 3795px;
left: -200px;
right: -200px;
height: 190px;
background: url("img/waves/wave-last.png") 0 0 repeat-x;
}
.ship {
position: absolute;
top: 3085px;
right: 100px;
width: 317px;
height: 330px;
background: url("img/ship.png") 0 0 no-repeat;
}

It was some odd issue related to fancybox. I removed the fancybox plugin then re-added and the images are now animated. Strange!

Related

Stellar.js - multiple backgrounds inside one element

I'm trying to use Stellar.js as multiple backgrounds inside of single element such as content. Anything that I've tried not working at all..
Default output look like this:
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.photo span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.summer {
background-image: url(images/1.png);
}
.autumn {
background-image: url(images/2.png);
}
.winter {
background-image: url(images/3.png);
}
.spring {
background-image: url(images/4.png);
}
<div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
<div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
<div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>
<div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
<div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
<div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>
But I want it to be something like that
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.photo span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
background-image: url(images/1.png), url(images/2.png), url(images/3.png), url(images/4.png);
}
<div class="photo" data-stellar-background-ratio="1.0"><div>content</div></div>
I'm quite new to this and need some help. Maybe it just couldn't work as I want?

How to get desired view of the icon using JQuery mobile?

I wark on my Mobile project and I use jquery mobile library version 1.4.5.
I have this png image:
Here is the CSS:
.ui-icon-measure {
background-image: url(img/length_measure.png);
}
#measureControl {
position: absolute;
left: 10px;
top: 3em;
width: 40px;
z-index: 9999;
}
#measureButton .ui-icon {
width: 30px;
height: 30px;
top: 13px;
right: 13px;
background-color: transparent;
background-position: center;
}
Here is HTML code:
<div id="measureControl" data-role="controlgroup" data-type="vertical">
</div>
Here how it looks in the view:
But I want it to be like that:
Any idea what do I have to change in the code above to get desired view?
The code below will produce this:
.ui-icon-measure:after {
background: url(img/length_measure.png) no-repeat !important;
}
#measureControl a {
padding: 20px;
}
#measureControl {
position: absolute;
left: 10px;
top: 3em;
width: 40px;
z-index: 9999;
border-radius: 13px;
}

Footer won't stay at bottom below content despite sticky footer

I can't seem to get the header and footer to span across a mobile device such as iPhone, and the footer won't stick to the bottom. I've tried a meta code such as this:
My CSS mobile:
#charset "utf-8";
#logo {
left: 5%;
}
#navMenu {
position: relative;
left: 5%;
}
#content {
position: relative;
width: 95%;
height: 600px;
left: 2px;
right: 2px;
}
#footer {
position: fixed;
bottom: 0;
z-index: 5;
}
I've added this to the HTML meta:
meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0 maximum-scale=1.0,
Here is my desktop CSS incase something may override my mobile:
#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 45px;
z-index: 1;
box-shadow: 0px 0px 0px 1px rgba(82, 82, 82, 0.2);
background-color: rgba(234,234,234,1);
}
#navMenu {
position: absolute;
left: 55%;
top: 55px;
width: 325px;
height: 39px;
z-index: 3;
}
#logo {
position: absolute;
left: 20%;
top: 95px;
width: 300px;
height: 85px;
z-index: 1;
}
#pageLocation {
position: absolute;
right: 20%;
top: 240px;
width: 69px;
height: 25px;
z-index: 5;
color: rgba(50,153,204,0.1);
}
#content {
position: absolute;
right: 20%;
top: 270px;
height: 600px;
width: 60%;
padding: 10px;
margin-bottom: 50px;
z-index: 2;
border-bottom-color: rgba(50,153,204,0.2);
border-bottom-width: thin;
border-bottom-style: solid;
border-radius: 5px;
background-color: rgba(204,204,204,.1);
border-right-width: thin;
border-right-style: solid;
border-right-color: rgba(204,204,204,0.2);
border-left-width: thin;
border-left-style: solid;
border-left-color: rgba(50,153,204,0.2);
box-shadow: 0px .5px .5px .5px #333;
}
#footer {
position: absolute;
alignment: center;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 1;
text-align: center;
padding: 2px;
font-size: 12px;
line-height: 2px;
box-shadow: 0px 0px 3px 0px #333;
background-color: rgba(204,204,204,.7);
}
I've tried sticky footer techniques with no luck. I've gotten the footer with this method to stick to the bottom, but it just overlaps content when I scroll back up. Please help, this is very frustrating to get a simple iPhone/android capable footer that sits at the bottom of the page.

Error compiling CSS assets

When I load my web page, I am getting above error along with
Started GET "/assets/application.css" for 127.0.0.1 at 2012-03-05 10:07:42 +0530
Error compiling asset application.css:
NoMethodError: undefined method `[]' for nil:NilClass
(in /Users/ritvvijparrikh/Projects/tr/app/assets/stylesheets/tr/sprites.css.scss)
Served asset /application.css - 500 Internal Server Error
My file sprites.css.scss was not changed for long time. But then I recently upgraded to Rails 3.2.2
My sprites.css.scss file is
/* Public Area Sprites */
.public_sprites {
background: asset-url('public_area.jpg', image) no-repeat top left;
}
.sprite-aws{ background-position: 0 0; width: 159px; height: 58px; display: inline-block }
.sprite-gr{ background-position: 0 -108px; width: 111px; height: 91px; display: inline-block }
.sprite-hn{ background-position: 0 -249px; width: 111px; height: 91px; display: inline-block }
.sprite-i1{ background-position: 0 -390px; width: 28px; height: 30px; display: inline-block }
.sprite-i2{ background-position: 0 -470px; width: 28px; height: 30px; display: inline-block }
.sprite-i3{ background-position: 0 -550px; width: 28px; height: 28px; display: inline-block }
.sprite-i4{ background-position: 0 -628px; width: 28px; height: 28px; display: inline-block }
.sprite-kb{ background-position: 0 -706px; width: 112px; height: 92px; display: inline-block }
.sprite-nb{ background-position: 0 -848px; width: 111px; height: 91px; display: inline-block }
.sprite-pk{ background-position: 0 -989px; width: 111px; height: 91px; display: inline-block }
.sprite-postmark{ background-position: 0 -1130px; width: 171px; height: 35px; display: inline-block }
.sprite-rd{ background-position: 0 -1215px; width: 111px; height: 91px; display: inline-block }
.sprite-rp{ background-position: 0 -1356px; width: 111px; height: 91px; display: inline-block }
.sprite-sb{ background-position: 0 -1497px; width: 111px; height: 91px; display: inline-block }
.sprite-seal{ background-position: 0 -1638px; width: 119px; height: 45px; display: inline-block }
.sprite-slider1{ background-position: 0 -1733px; width: 500px; height: 320px; display: inline-block }
.sprite-slider2{ background-position: -550px 0; width: 500px; height: 320px; display: inline-block }
.sprite-slider3{ background-position: -550px -370px; width: 500px; height: 320px; display: inline-block }
.sprite-sr{ background-position: -550px -740px; width: 112px; height: 92px; display: inline-block }
.sprite-track_big{ background-position: -550px -882px; width: 415px; height: 304px; display: inline-block }
.sprite-trustlaw{ background-position: -550px -1236px; width: 216px; height: 72px; display: inline-block }
.sprite-unknown{ background-position: -550px -1358px; width: 74px; height: 74px; display: inline-block }
.sprite-vm{ background-position: -550px -1482px; width: 111px; height: 91px; display: inline-block }
/* Contact Sprites */
.contact_sprites {
background: asset-url('contact.png', image) no-repeat top left;
}
.sprite-email{ background-position: 0 0; width: 17px; height: 17px; display: inline-block }
.sprite-facebook{ background-position: 0 -67px; width: 17px; height: 17px; display: inline-block }
.sprite-linkedin{ background-position: 0 -134px; width: 17px; height: 17px; display: inline-block }
.sprite-mobile{ background-position: 0 -201px; width: 17px; height: 17px; display: inline-block }
.sprite-phone1{ background-position: 0 -268px; width: 17px; height: 17px; display: inline-block }
.sprite-phone2{ background-position: 0 -335px; width: 16px; height: 13px; display: inline-block }
.sprite-skype{ background-position: 0 -398px; width: 17px; height: 17px; display: inline-block }
.sprite-twitter{ background-position: 0 -465px; width: 17px; height: 17px; display: inline-block }
.sprite-website{ background-position: 0 -532px; width: 17px; height: 17px; display: inline-block }
.sprite-youtube{ background-position: 0 -599px; width: 17px; height: 17px; display: inline-block }
/* Login Area Sprites */
.login_sprites {
background: asset-url('login_area.png', image) no-repeat top left;
}
.sprite-calendar_39x39{ background-position: 0 0; width: 39px; height: 39px; display: inline-block }
.sprite-deletex{ background-position: 0 -89px; width: 17px; height: 17px; display: inline-block }
.sprite-off{ background-position: 0 -156px; width: 95px; height: 27px; display: inline-block }
.sprite-on{ background-position: 0 -233px; width: 94px; height: 27px; display: inline-block }
.sprite-status_gray{ background-position: 0 -310px; width: 12px; height: 13px; display: inline-block }
.sprite-status_green{ background-position: 0 -373px; width: 12px; height: 13px; display: inline-block }
.sprite-status_red{ background-position: 0 -436px; width: 12px; height: 12px; display: inline-block }
.sprite-status_yellow{ background-position: 0 -498px; width: 12px; height: 13px; display: inline-block }
I was having the same problem. I solved the problem following the configurations described on this post:
http://blog.55minutes.com/2012/01/getting-compass-to-work-with-rails-31-and-32/
In my case, the problem was I didn't rename application.css to application.scss.

How can I specify CSS #media within a razor file?

I have the following:
#if (Model.PageMeta.Sidebar == PageMetaSidebar.Small) { Html.RenderPartial("_SmallSidebar"); }
and in my include file:
<style "text/css">
#sbr { width: 193px; }
#lft { left: 205px; top: 85px; right: 5px; bottom: 30px; }
#top { left: 215px; top: 85px; right: 15px; }
#btm { left: 215px; right: 15px; bottom: 30px; }
#mdl { left: 215px; top: 85px; right: 15px; bottom: 30px; }
#media print {
div#lft {left:10px; right: 10px; top: 0px;}
div#top {left:20px; right: 20px; top: 0px;}
div#btm {left:20px; right: 20px; }
div#mdl {left:20px; right: 20px; top: 0px;}
}
}
</style>
However this gives me a compile type error:
_SmallSidebar.cshtml(7): error CS0103: The name 'media' does not exist in the current context
Does anyone out there know how I could fix this so it accepts that #media is not something that needs to be evaluated?
You can use ## which razor ignores and prints one #.

Resources