jquery spritely plugin not working…

I am using the JQuery Spritely plugin:

http://spritely.net/download/

along with the supersized plugin:

http://www.buildinternet.com/project/supersized/

basically, the guy I’m building this for uses an Apple cinema display…so the background of the site has to be able to get bigger for larger resolutions, and it also needs to shrink down to fit smaller monitors on laptops and such. the supersized plugin seems to be working great. the spritely plugin works great as well until I make the site go live. i’m not sure what could be going on at this point. when i view the page locally on my computer, it works great…the rocks pan to the left like they’re supposed to and all. on my live site, the rocks don’t even show up…

also, i’m using the WordPress “underConstruction” plugin that gives you a blank page then allows you to add any html/code you want to it.

can anyone shed any light on this?

i also tried creating a test .html file to see if it was WordPress…but i don’t believe it is. either way, here is a link to that:

http://www.mreant.com/james/test.html

  • Mason
    • DEV MAN’s Sidekick

    Hiya,

    The test html file does appear to be working. I’ve not used these plugins in combination before (or with WordPress) do you have a development server someplace where we could take a look?

    I’ll ask if anyone on the design team has some thoughts on this. Thanks!

  • Victor Ivanov
    • Site Builder, Child of Zeus

    hi there.

    looking at the test.html i don’t see any movement of rocks or clouds.

    looking at the source however, the javascript part seems to be working, as #clouds & #tinyrock have their position updated all the time.

    would you perhaps be able to send me a local version that I can test & compare on my machine?

    victor@incsub.com

  • gollumxcore
    • Design Lord, Child of Thor

    here is a video of what i’m trying to accomplish pretty much:

    http://youtu.be/hL536-t0-b4

    a few things i want to notate:

    the girl holding the little person…i’d like that image to always view the same, no matter what size monitor/resolution you’re viewing from. i need her head to be at the top of the site, and the bottom to line up clean. i need the background to always fill the screen as well, no matter what size screen. the way i have it set up now, if i don’t set the height to 100%, then higher resolutions will show a gap above her head. i’m not sure of another workaround for this.

  • Victor Ivanov
    • Site Builder, Child of Zeus

    ok, nevermind.

    i think the problem is with how you declared your #clouds & #tinyrock

    i’ve re-factored it to look like this & it worked for me.

    #clouds {
    background: transparent;
    background-image: url(http://mreant.com/james/wp-content/uploads/2012/07/rockfront.png);
    background-repeat:repeat-x;
    height:45%;
    width: 25%;
    z-index:100;
    }

    #tinyrock {
    background: transparent;
    background-image:url(http://mreant.com/james/wp-content/uploads/2012/07/tinyrock.png);
    background-repeat:repeat-x;
    height:45%;
    width: 25%;
    z-index:100;
    }

    what i’m doing is declaring various background properties separately instead of using a short notation as before.

    let me know if this works for you.

  • gollumxcore
    • Design Lord, Child of Thor

    @victor, you did it! Sweeeeeet :slight_smile:

    Thank you so much for that haha.

    Now to my other question, how to I ensure the girl is always positioned on the left side of the screen, and filling up the entire browser window? the image i’m working with is this:

    http://mreant.com/james/wp-content/uploads/2012/07/people.gif

    so i can’t have any of those cut off edges showing…you know what i mean? the image needs to fit flush with the browser window. i know i’m sounding redundant here haha, please forgive.

  • Victor Ivanov
    • Site Builder, Child of Zeus

    do you mean the image needs to be of the same height as the browser window?

    or does it need to be same width as browser window also.

    making it same width would skew the image.

    as for height, in the example you sent me, as i re-size the window, the image is always the height of it.

  • gollumxcore
    • Design Lord, Child of Thor

    yes, i want it to be the same height as the browser window as to really polish off the site design. i feel like the placement of the girl is essential to the design. if i view this on an ipad or iphone…it pretty much looks like doodoo haha. the girl is all skewed and what not. here is a screen shot of what it looks like on the iphone. if i can’t have the girl show up a decent size, without covering the content box on mobile…is there a way to just remove the girl from the page all together if they’re viewing on a mobile device?

    also, can you post a screen shot of what it looks like on your browser window? just curious to see the placement of everything on another computer.

  • Victor Ivanov
    • Site Builder, Child of Zeus

    ok, so from my understanding, you want the girls image to always be 100% height, yet also maintain an aspect ratio & not appear skewed.

    to do that, you can edit the line of code where you’re declaring styles for #girls.

    here’s what you currently have :

    #girls {
    height: 100%;
    width: 39%;
    z-index: 9;
    position: fixed;
    bottom: 0px;
    left: 0px;
    }

    change the value of width to ‘auto’

    #girls {
    height: 100%;
    width: auto;
    z-index: 9;
    position: fixed;
    bottom: 0px;
    left: 0px;
    }

    this should do it.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.