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.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

php url banners,jquery cycle and javascript offsetHeight problems for a template FIXED or close enough.


Reply


3 Posts   2483 Views

Avatar
KS

Community Member, 10 Posts

12 November 2010 at 8:19am

Edited: 17/11/2010 11:37am

Close enough to fixed read the bottom posts to see the answers I came up with.
First post, java dumb, not a programmer and a new user.

I'm in the process of creating a template in SS that is close to our current html website but I've run

into a few problems that maybe I can get help with.

Part 1

I'm trying to use php code that creates the url link dynamically depending on the images in a directory so

I can then rotate with jquery. I've tried separately:

from Aram Balakjian
LINK [url]http://www.ssbits.com/tutorials/2009/working-with-banners/[/url]
php part:

function
RandomBanners(){ return DataObject::get('Image', 'ClassName <>
"Folder" AND ParentID = (SELECT ID FROM File WHERE ClassName = "Folder"
AND Name = "BannerImages")','RAND()','','5'); }

html part:

<% control RandomBanners %>
   <img src="$URL" width="533" height="179" />                        
<% end_control %>

AND UncleCheeses
LINK [url]http://www.silverstripe.org/dataobjectmanager-module-forum/show/13555[/url]
php part:

public function Banners() {
$folder = Folder::findOrMake("image-gallery/Banners");
return DataObject::get("Image", "ParentID = $folder->ID");
}

html part:

<% control Banners %>
   <img src="$URL" width="533" height="179" />                        
<% end_control %>

so the first one seems to not do anything and the second breaks the site. Maybe I'm placing in the

HomePage.php wrong. Like I said I'm new to this:

<?php
/**
* Defines the HomePage page type
*/

class HomePage extends Page {
static $db = array(
);
static $has_one = array(
);
}

function
RandomBanners(){ return DataObject::get('Image', 'ClassName <>
"Folder" AND ParentID = (SELECT ID FROM File WHERE ClassName = "Folder"
AND Name = "BannerImages")','RAND()','','5'); }

class HomePage_Controller extends Page_Controller {

}

.....................................................

Part 2

I'm trying to use the same query cycle image that was posted HERE.
http://www.ssbits.com/tutorials/2009/working-with-banners/

Unfortunately for me he speaks to the knowledgeable at large and not to we stereo instructions folks.
I tried this with good results.

php part:

Requirements::javascript("mysite/javascript/jquery.min.js");
Requirements::javascript("mysite/javascript/jquery.cycle.min.js");
Requirements::customScript("
jQuery(document).ready(function(){
jQuery('#bannerimgs').cycle({ delay: 1000, speed: 2000,timeout: 6000 });
jQuery('#bannerimgs').show();
});"
);

html part:

<div id="banner" >
<div style="display:none" id="bannerimgs">
<% control RandomBanners %>
   <img src="$URL" width="533" height="179" />                        
<% end_control %>
</div>
</div>

also placed in the HomePage.php at the bottom.
It is the jquery.min.js I think that is eating my lunch. It messes up the cms backend. After I drop that

into the HomePage.php I can rotate (static img srcs in the <div style="display:none" id="bannerimgs"> but

the cms gets stuck at (loading...). I've tried /?flush=1 to no avail. I installed firebug as stated in the

forums and get no errors on the front page but the back shows these:

....loading....
Firebug's log limit has been reached. 0 entries not shown.      Preferences   
GET http://192.168.1.80/admin/EditorToolbar/ImageFor...cheKillerDate=1289499679823&cacheKillerRand=9067
GET

http://192.168.1.80/admin/EditorToolbar/ImageForm?action_callfieldmethod=1&fieldName=FolderImages&ajax=1&m

ethodName=getimages&folderID=&searchText=&cacheKillerDate=1289499679823&cacheKillerRand=9067
   
200 OK
      280ms   
jquery...8723000 (line 127)
[cycle] terminating; zero elements found by selector
right.style is undefined
[Break on this error] var rightH = parseInt(right.style.height) + paddingBottomOffset;
LeftAn...5595946 (line 186)
element.className is undefined
[Break on this error] if(!element.className.match(new RegExp('(^| )' + className + '($| )'))) {
protot...8346568 (line 1100)
right.style is undefined
[Break on this error] var rightH = parseInt(right.style.height) + paddingBottomOffset;
LeftAn...5595946 (line 186)
$("Loading").style is undefined
[Break on this error] if($('Loading')) $('Loading').style.display = 'none';
LeftAn...5595946 (line 769)
right.style is undefined
[Break on this error] var rightH = parseInt(right.style.height) + paddingBottomOffset;
LeftAn...5595946 (line 186)
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
5<meta http-equiv="Content-language" content="en_US" />
6<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
7<base href="http://192.168.1.80/" />
8<title>SilverStripe CMS | Pages</title>
168
169 if(typeof fitToParent == 'function') {
170 fitToParent('right', 12);
171 if($('ModelAdminPanel')) {
172 fitToParent('ModelAdminPanel',-60);
173 }
174 if($('contentPanel')) {
175 fitToParent('contentPanel', 12);
176 }
177 }
178
179 if( $('left') && $('separator') && right ) {
180 // #right has padding-bottom to make room for AJAX Action buttons so we need to add that
181 if (navigator.appName == "Microsoft Internet Explorer") {
182 var paddingBottomOffset = 35;
183 } else {
184 var paddingBottomOffset = 20;
185 }
186 var rightH = parseInt(right.style.height) + paddingBottomOffset;
187 $('left').style.height = $('separator').style.height = rightH + 'px';
188 }
189
190 if(typeof fitToParent == 'function') {
191 if($('Form_EditForm')) fitToParent('Form_EditForm', 4);
192 if($('Form_AddForm')) fitToParent('Form_AddForm', 4);
193
194 if($('Form_EditorToolbarImageForm') && $('Form_EditorToolbarImageForm').style.display == "block") {
195 fitToParent('Form_EditorToolbarImageForm', 5);
196 fitToParent($('Form_EditorToolbarImageForm').getElementsByTagName('fieldset')[0]);
197 if(navigator.appName == "Microsoft Internet Explorer") {
198 fitToParent('Image');
199 } else {
200 fitToParent('Image', 250);
201 }
202 }
203 if($('Form_EditorToolbarFlashForm') && $('Form_EditorToolbarFlashForm').style.display == "block") {
204 fitToParent('Form_EditorToolbarFlashForm', 5);
205 fitToParent($('Form_EditorToolbarFlashForm').getElementsByTagName('fieldset')[0]);
206 if(navigator.appName == "Microsoft Internet Explorer") {
207 fitToParent('Flash');
208 } else {
209 fitToParent('Flash', 130);
1097 if (!(element = $(element))) return;
1098
1099 // 13/3/2006: Sam updated these functions because the original ones were over-engineered
1100 if(!element.className.match(new RegExp('(^| )' + className + '($| )'))) {
1101 element.className += ' ' + className;
1102 element.className = element.className.replace(/(^ +)|( +$)/g, '');
1103 }

So when I take out jquery.min.js the cms works and the images of course do not.

.........................................................

Part 3
On my current html site I'm using some javascript that gets the .offsetHeight and does some math so I can

make the 3 <div ids> the same length on the page and have a footer.

<script type="text/javascript">
<!--
function Process(){

var x = document.getElementById("MasterHeight").offsetHeight; /*HEIGHT OF MAIN CONTENT SECTION*/
var y = document.getElementById("MasterHeightChild").offsetHeight; /*HEIGHT OF THE MAIN (LEFT) NAV ON

LEFT*/
var z = document.getElementById("MasterHeightChild2").offsetHeight; /*HEIGHT OF SECOND NAV (RIGHT

BOTTOM)*/

   if (x > y){
      y = x;
      z = x - 132;
      document.getElementById("MasterHeight").style.height= x+"px";
      document.getElementById("MasterHeightChild").style.height = y+"px";
      document.getElementById("MasterHeightChild2").style.height = z+"px";}

   else{
      z = y - 132;
      x = y;
      document.getElementById("MasterHeight").style.height = y+"px";
      document.getElementById("MasterHeightChild").style.height = y+"px";
      document.getElementById("MasterHeightChild2").style.height = z+"px";}
}
//-->
</script>

How would I apply that to just the HomePage.ss and a different one on the Page.ss. I tried it in a

template and made the div id uppercase, but I don not know.

Help with any of the three would be appreciated. Is it that I don't know which part of the php file to put

it in. I've messed with public function init() and parent::init();

Avatar
KS

Community Member, 10 Posts

13 November 2010 at 5:51am

Got part 2 working. Placed the first requirement jquery.min.js in the page.php instead of homepage.php. Left the rest at the end of HomePage.php and the cms started working.

I'm trying to use the same query cycle image that was posted HERE.
http://www.ssbits.com/tutorials/2009/working-with-banners/

Unfortunately for me he speaks to the knowledgeable at large and not to we stereo instructions folks.
I tried this with good results.

php part:

placed this in the Page.php Requirements::javascript("mysite/javascript/jquery.min.js");
Requirements::javascript("mysite/javascript/jquery.cycle.min.js");
Requirements::customScript("
jQuery(document).ready(function(){
jQuery('#bannerimgs').cycle({ delay: 1000, speed: 2000,timeout: 6000 });
jQuery('#bannerimgs').show();
});"
);

Avatar
KS

Community Member, 10 Posts

17 November 2010 at 11:35am

Ignoring part1 because image rotation works with static html entries. Wish I could get it to work but oh well.

Part 3. The auto length with javascript. I got the same results with css html only.

I wrapped a left background div class around the classes that hold $Layout and some other stuff. Then I adjusted the position and size, color and image of the left background to fall in behind the left adjusted menu, even though it gets drawn later, its only background. Then adjusted the classes holding the $Layout in css back to the center and done.

The idea is that the left background div inherits it's length from the center area that holds the $Layout. So no matter the length of the auto adjusted center there will always be a background left menu stripe to the footer.

The last thing I did to be sure the center is never to short for the left menu and background was in css.
min-height:300px;

I'm only writing this here hoping it may help someone else in the future.

KS