Jump to:

1016 Posts in 567 Topics by 309 members

Forum Module

SilverStripe Forums » Forum Module » jParallax as header, forum problems

Discuss the Forum Module.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1 2
Go to End
Author Topic: 3772 Views
  • Knoxy
    Avatar
    Community Member
    7 Posts

    jParallax as header, forum problems Link to this post

    Hi all

    I'm very new to SilverStripe so bear with me.... I have been playing around with the balance theme and I am currently trying to intergrate a jParallax header into the theme. I am currently just using the default images direct from the designers site until I know that I can get it to work... then I will replace with my own.

    jParallax info and demo can be found here - http://webdev.stephband.info/parallax.html

    This version of jParallax runs on jQuery so I though I wouldn't have any issues. Currently it all works until I visit the forum on my site then my jParallax header just becomes static. I will upload the site to my server tomorrow when I get home but just wondered if anyone would be in a position to help?

    Thanks in advance,

    Paul

  • Fuzz10
    Avatar
    Community Member
    786 Posts

    Re: jParallax as header, forum problems Link to this post

    What javascript includes are in the broken page ?

  • Knoxy
    Avatar
    Community Member
    7 Posts

    Re: jParallax as header, forum problems Link to this post

    I have basically addedd a css import from the existing css (from the jParallax) and then added the js

    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="js/jquery.jparallax.js"></script>

    <script type="text/javascript">
    <!--

    // jQuery.noConflict();

    // VAR

    // RUN

    jQuery(document).ready(function(){

       jQuery('#parallax').jparallax({});
       

       
    });

    //-->
    </script>

    then added the actual parallax images like;

    <div id="parallax" class="clear">

    <div style="width:860px; height:273px;"><img src="images/parallax_sketch/0_sun.png" alt="" style="position:absolute;left:300px;top:-12px;"/></div>
    <div style="width:920px; height:274px;"><img src="images/parallax_sketch/1_mountains.png" alt="" /></div>
    <div style="width:1100px; height:284px;"><img src="images/parallax_sketch/2_hill.png" alt="" style="position:absolute; top:40px; left:0;" /></div>
    <div style="width:1360px; height:320px;"><img src="images/parallax_sketch/3_wood.png" alt="" style="position:absolute; top:96px; left:0;"/></div>

    </div>

    It works fine until I open the forum page?! I don't know what version of jQuery the forum uses but maybe thats the problem?

    Thanks

    Paul

  • Fuzz10
    Avatar
    Community Member
    786 Posts

    Re: jParallax as header, forum problems Link to this post

    Can you list all javascript includes that are in the actual HTML source ? (when looking at the forum page ) ?

    There is probably a double jQuery include or something along those lines....

  • Knoxy
    Avatar
    Community Member
    7 Posts

    Re: jParallax as header, forum problems Link to this post

    HTML on forum page is;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" >

    <head>
          <base href="http://localhost:8888/SilverStripe/" />
          <title>Forums &raquo; Ron Hamilton</title>
          
          
          
          <meta name="generator" http-equiv="generator" content="SilverStripe 2.3.0-rc4 - http://www.silverstripe.com" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en"/>

          <link rel="shortcut icon" href="/favicon.ico" />
          
          
          
          
          
          
          
          <!--[if IE 6]>
             <style type="text/css">
              @import url(themes/balance/css/ie6.css);
             </style>
          <![endif]-->
          
          <!--[if IE 7]>
             <style type="text/css">
              @import url(themes/balance/css/ie7.css);
             </style>
          <![endif]-->
    <style type="text/css" media="screen, projection">

    @import "header/css/reset.css";
    @import "header/css/style_light.css";
    @import "header/css/typography.css";

    #parallax
    {position:relative; overflow:hidden; width:60em; height:20em;}

    </style>

    <script type="text/javascript" src="header/js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="header/js/jquery.jparallax.js"></script>
    <script type="text/javascript">
    <!--

    // jQuery.noConflict();

    // VAR

    // RUN

    var corners = ''

    jQuery(document).ready(function(){

       jQuery('#parallax').jparallax({}).append(corners);
       

    });
       

    //-->
    </script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8888/SilverStripe/forum/css/Forum.css?m=1236862907" />
    <link rel="stylesheet" type="text/css" href="http://localhost:8888/SilverStripe/themes/balance/css/layout.css?m=1236865900" />
    <link rel="stylesheet" type="text/css" href="http://localhost:8888/SilverStripe/themes/balance/css/typography.css?m=1236861789" />
    <link rel="stylesheet" type="text/css" href="http://localhost:8888/SilverStripe/themes/balance/css/form.css?m=1236872413" />
    <link rel="alternate" type="application/rss+xml" title="Posts to all forums" href="/SilverStripe/forums/rss" />
    </head>
    <body>

       
       <div id="header">

    </div>

    <div id="content">

    <div id="parallax" class="clear">
       <div style="width:860px; height:273px;">
          <img src="header/images/parallax_sketch/0_sun.png" alt="" style="position:absolute;left:300px;top:-12px;"/>
       </div>
       <div style="width:920px; height:274px;">
          <img src="header/images/parallax_sketch/1_mountains.png" alt="" />
       </div>
       <div style="width:1100px; height:284px;">
          <img src="header/images/parallax_sketch/2_hill.png" alt="" style="position:absolute; top:40px; left:0;" />
       </div>
       <div style="width:1360px; height:320px;">
          <img src="header/images/parallax_sketch/3_wood.png" alt="" style="position:absolute; top:96px; left:0;"/>
       </div>
    </div>

       
       
       <!-- The CSS for navigation in this theme has been optimsed for the number of items on demo.silverstripe.com. Chances are you'll need to adapt it to best suit your site -->

    <div id="NavWrapper">

       <div id="Navigation">
          
          <div id="PrimaryWrapper">
             <ul id="Primary">
                    
                    <li class="link "><a href="/SilverStripe/" title="Go to the Home page" class="link"><span>Home</span></a></li>
                    
                    <li class="link "><a href="/SilverStripe/about-us/" title="Go to the About Us page" class="link"><span>About Us</span></a></li>
                    
                    <li class="link "><a href="/SilverStripe/how-to-contact-us/" title="Go to the How To Contact Us page" class="link"><span>How To Contact Us</span></a></li>
                    
                    <li class="current "><a href="/SilverStripe/forums/" title="Go to the Forums page" class="current"><span>Forums</span></a></li>
                    
                    <li class="link "><a href="/SilverStripe/blog/" title="Go to the Blog page" class="link"><span>Blog</span></a></li>
                 
             </ul>
          </div>

          <!-- Prevent the secondary nav appearing in the blog, forum and ecommerce modules -->               
          
          
          
          
          
          
             
       </div>
    </div>   
       
       <div id="BgContainer">
          <div id="Container">

                <div id="Layout">
                   <div id="ForumContent" class="typography">
       <div id="RegisterLogin">
       
          <p>
             <a href="/SilverStripe/forums/login" title="Click here to login">Login</a> |
             <a href="Security/lostpassword" title="Click here to retrieve your password">Forgot password</a> |
             <a href="ForumMemberProfile/register" title="Click here to register">Register</a>
             
          </p>
          <div id="OpenIDDescription">
              <span><a href="/SilverStripe/forums/#" id="HideOpenIDdesc">X</a></span>
             <h1>What is OpenID?</h1>
             <p>OpenID is an Internet-wide identity system that allows you to sign in to many websites with a single account.</p>
             <p>With OpenID, your ID becomes a URL (e.g. http://<strong>username</strong>.myopenid.com/). You can get a free OpenID for example from <a href="http://www.myopenid.com">myopenid.com</a>.</p>
             <p>For more information visit the <a href="http://openid.net">official OpenID site.</a></p>
          </div>
       
    </div>

       <div class="clear"><!-- --></div>
       <div class="forumFeatures">
          <div class="featureRight">
             <p class="forumStats">1 <strong>Posts</strong> in 1 <strong>Topics</strong> by 1 <strong>members</strong></p>
             <span class="jumpTo">Jump to:</span>
             <select onchange="if(this.value) location.href = this.value">
                <option value="">Select</option>
                
                   
                      
                   
                
             </select>
             <div id="ForumSearch">
                <form action="forums/search/" method="get">
                   <fieldset>
                      <!-- span>Search:</span -->
                      <input class="text" type="text" name="Search" />
                      <input class="submit" type="submit" value="Search"/>
                   </fieldset>
                </form>
             </div>
          </div>
          <div class="featureLeft">
             <h2>Welcome to our forum!</h2>
             <p>If this is your first visit, you will need to <a class="broken" title="Click here to register" href="ForumMemberProfile/register">register</a> before you can post. However, you can browse all messages below.</p>
             <p></p>
             
          </div>   
    <div class="clear"><!-- --></div>
    </div>

       <div class="forumHolderFeatures">
          <table id="TopicOverview" class="topicList">
             
                <tr>
                   <th class="odd">Forum</th>
                   <th class="even">Threads</th>
                   <th class="odd">Posts</th>
                   <th class="even">Last Post</th>
                </tr>
                
                   
                
             
          </table>
       </div>
       <div id="CurrentlyOnline">
          <p>
             <strong>Currently Online:</strong>
          
             
                <span>There is nobody online.</span>
             

          </p>
          <p>
             <strong>Welcome to our latest member:</strong>         
             
                <a href="ForumMemberProfile/show/2" title="Anonymous user ">Anonymous user</a>
             
          </p>
       </div>
    </div>
                </div>
          
          </div>
       </div>

       <div id="Footer" class="typography">
       <p>Copyright Ron Hamilton &copy; 2007-2009 | Powered by the <a href="http://www.silverstripe.com" title="This site runs on the SilverStripe CMS">SilverStripe Open Source CMS</a> | Designed by <a href="http://www.macboydesigns.com" title="MACBOYdesigns">MACBOYdesigns</a></p>
    </div>   

       
       <div id="bottom">
          
       </div>
       
       <script type="text/javascript" src="http://localhost:8888/SilverStripe/jsparty/jquery/jquery.js?m=1227675043"></script><script type="text/javascript" src="http://localhost:8888/SilverStripe/forum/javascript/jquery.MultiFile.js?m=1221804302"></script><script type="text/javascript" src="http://localhost:8888/SilverStripe/forum/javascript/forum.js?m=1222153058"></script><script type="text/javascript" src="http://localhost:8888/SilverStripe/jsparty/prototype.js?m=1226464321"></script><script type="text/javascript" src="http://localhost:8888/SilverStripe/sapphire/javascript/i18n.js?m=1225286438"></script><script type="text/javascript" src="http://localhost:8888/SilverStripe/sapphire/javascript/lang/en_US.js?m=1229303948"></script></body>
       
    </html>

    I can see the jquery.js call at the bottom (having now looked at the obvious... ) but any ideas what to do now?

    Paul

  • Knoxy
    Avatar
    Community Member
    7 Posts

    Re: jParallax as header, forum problems Link to this post

    Removed existing jquery.js from Forum.php and ForumHolder.php and seems to work fine! Thanks for all your help.

    Paul

  • Fuzz10
    Avatar
    Community Member
    786 Posts

    Re: jParallax as header, forum problems Link to this post

    no problem.. good luck !

    Very cool jQuery trick by the way , I did not know that one. ;)

  • Knoxy
    Avatar
    Community Member
    7 Posts

    Re: jParallax as header, forum problems Link to this post

    Thanks... I have just uploaded to my host www.siteground.com and have ran into an install problem!

    On the install page it comes up with the following error

    Your version of PHP has defined some classes that conflict with SilverStripe's. The following classes are at fault: HTTPResponse

    I have been through and changed all HTTPResponse to SHTTPResponse and done the same HTTPRequest but still coming up with the error. I have contacted there support to see if they can disable the two for testing, fingers crossed!

    Paul

    3772 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.