0

I'm trying to implement parallax in bp-default theme's header, but facing problem ....

  1. The page getting glitches, the adminbar is centre aligned but the rest of the content of the page is getting left aligned , the below image show the example .... http://img822.imageshack.us/img822/1476/bpdparallax.jpg

  2. Cannot change the default header from the default.css file , though I change the background image url under #header to a different file in different location , the page shows the default_header.jpg in every circumstances, even though I hard-refresh the browser ....

the codes I'm using are as follows :

header.php within the <head></head> tag between the wp_head() and the end of the head tag I place ...

<script type="text/javascript" src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/jquery.min.js"></script>
    <script type="text/javascript" src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/jquery.jparallax.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery('#parallax').jparallax();
    }); 
    </script>
    <link rel="stylesheet" type="text/css" href="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/reset-min.css">

and in the beginning of the <body> tag just after the <div id="header"> I place

<div id="parallax">
         <img src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/bubble3.png"/>
            <img src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/bubble2.png"/>
            <img src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/bubble1.png"/>
        </div>

and I use

#parallax {
 width: 960px;
 height: 200px;
 position: relative;
 overflow: hidden;
 margin: 0 auto;
}

this css in default.css file

inspite of these problems the parallax animation is working just fine !

What am I doing wrong ?

Improve this question
3
  • You should link your page as this is related to CSS positioning issues and for those, the whole page needs to be analyzed first to give you some directions. additionally I think it's helpful if you link the jquery parallax plugin.
    – hakre
    Dec 5, 2010 at 13:45
  • actually I'm testing it in my localhost with xampp, so there is no actual website link that I can provide , is there any other way I can provide helpfull information ?
    – Anindya Ray
    Dec 5, 2010 at 15:01
  • 2
    Well, it's like trying to fix a car over the phone - we really gotta see the mechanics if you really want us to able to help you :)
    – TheDeadMedic
    Dec 5, 2010 at 16:46

1 Answer 1

Reset to default
2

First off --

When including Javascript, use a function hooked to the init action in functions.php. See: http://scribu.net/wordpress/optimal-script-loading.html

Secondly -- The CSS for the BP bar is being effected by something in your theme. If fixing how your Javascript is loading first doesn't fix that issue, try selecting that object in Firebug (Or Chrome's developer tools) and seeing whether any files other than style-adminbar.css are effecting it. It's likely you have some reused CSS class names somewhere.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.