Jump to:

21300 Posts in 5735 Topics by 2603 members

General Questions

SilverStripe Forums » General Questions » php url banners,jquery cycle and javascript offsetHeight problems for a template FIXED or close enough.

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

Moderators: martimiz, Howard, Sean, Ryan M., biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1758 Views
  • KS
    Avatar
    Community Member
    10 Posts

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

    12 November 2010 at 8:19am Last edited: 17 November 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 http://www.ssbits.com/tutorials/2009/working-with-banners/
    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 http://www.silverstripe.org/dataobjectmanager-module-forum/show/13555
    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();

  • KS
    Avatar
    Community Member
    10 Posts

    Re: php url banners,jquery cycle and javascript offsetHeight problems for a template FIXED or close enough. Link to this post

    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();
    });"
    );

  • KS
    Avatar
    Community Member
    10 Posts

    Re: php url banners,jquery cycle and javascript offsetHeight problems for a template FIXED or close enough. Link to this post

    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

    1758 Views
Page: 1
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.