Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

jParallax as header, forum problems » Forum Module

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Forum Module /

Discuss the Forum Module.

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

jParallax as header, forum problems

Go to End


10 Posts   6778 Views

Avatar
Knoxy

Community Member, 7 Posts

17 March 2009 at 8:22am

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

Avatar
Fuzz10

Community Member, 791 Posts

17 March 2009 at 10:29am

What javascript includes are in the broken page ?

Avatar
Knoxy

Community Member, 7 Posts

17 March 2009 at 12:16pm

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

Avatar
Fuzz10

Community Member, 791 Posts

17 March 2009 at 8:55pm

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....

Avatar
Knoxy

Community Member, 7 Posts

17 March 2009 at 11:02pm

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" xml: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="//www.silverstripe.org/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="//www.silverstripe.org/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="//www.silverstripe.org/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

Avatar
Knoxy

Community Member, 7 Posts

17 March 2009 at 11:20pm

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

Paul

Avatar
Fuzz10

Community Member, 791 Posts

17 March 2009 at 11:42pm

no problem.. good luck !

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

Avatar
Knoxy

Community Member, 7 Posts

18 March 2009 at 1:24am

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

Go to Top
Go to TopReturn to top