Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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 ?

share|improve this question
    
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 '10 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 '10 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 '10 at 16:46

1 Answer 1

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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