Difference between revisions of "Talk:Web Frameworks - Workbook"

From mi-linux
Jump to navigationJump to search
(New page: Main Page >> Web Frameworks >> Web Frameworks - Workbook >> Working with Zend and CSS This article assumes you have a basic to intermediate understanding of CSS. The way that...)
 
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
−
[[Main Page]] >> [[Web Frameworks]] >> [[Web Frameworks - Workbook]] >> Working with Zend and CSS
+
== ajax  you tube table - use ajax via googles API to grab you tube videos ==
  
−
This article assumes you have a basic to intermediate understanding of CSS.
+
// this goes in your layout.phtml file
 +
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw"
 +
    type="text/javascript"></script>
 +
  <style type="text/css">
 +
    @import url("http://www.google.com/uds/css/gsearch.css");
 +
  </style>
 +
 
 +
 
 +
  <!-- Video Bar Code and Stylesheet -->
 +
  <script type="text/javascript">
 +
    window._uds_vbw_donotrepair = true;
 +
  </script>
 +
  <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new"
 +
    type="text/javascript"></script>
 +
  <style type="text/css">
 +
    @import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
 +
  </style>
  
−
The way that Zend works is by automatically generating a lot of HTML for us. This means ID and Class tags too. So to successfully work with Zend and CSS, we need to know what these tags are being called in order to be able to assign CSS to them.
+
  <style type="text/css">
 +
    .playerInnerBox_gsvb .player_gsvb {
 +
      width : 320px;
 +
      height : 260px;
 +
    }
 +
  </style>
 +
  <script type="text/javascript">
 +
    function LoadVideoBar() {
  
−
It has been noticed, that generally, Zend generates classes/ID's relative to the instance of which it is being used. For example, let's say you add a new text field to your form called 'Name' - Zend, will automatically give it an ID of 'name' (automatically lowercased). However, to be double sure before implementing any CSS just view your source code and check.
+
    var videoBar;
 +
    var options = {
 +
        largeResultSet : !false,
 +
        horizontal : false,
 +
        autoExecuteList : {
 +
          cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
 +
          cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
 +
          executeList : ["ytfeed:most_viewed.this_week","audio equipment"]
 +
        }
 +
      }
  
−
So now we know what this text field is called, you can go away to your global.css file (located in public/css) and begin to asign style to it. Below is a quick example of some valid CSS to assign to your textarea.
+
    videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
 +
                              GSvideoBar.PLAYER_ROOT_FLOATING,
 +
                              options);
 +
    }
 +
    // arrange for this function to be called during body.onload
 +
    // event processing
 +
    GSearch.setOnLoadCallback(LoadVideoBar);
 +
  </script>
  
−
<source lang="css">
+
//then to position it by using external CSS (remember to insert chevrons at the start and end of the div tags)
−
/* Form Name Textarea ID */
+
  div id="videoBar-bar"
−
#name{
+
    div
−
border: 1px solid #000;
+
// then in your external sheet position it using something like this..
−
width: 200px;
+
videoBar-bar
−
margin-bottom: 10px;
+
{
−
padding: 3px;
+
  position:absolute;
 +
  left:10px;
 +
  top:200px;
 
}
 
}
−
</source>
 
−
 
−
'''REMEMBER''': In the CSS files you always refer to the IDs with a '#' and the classes with a '.', here is another example.
 
−
 
−
See what you can do and don't forget that these aren't the only fields you can add style to; Buttons, DD's, DT's, UL's, LI's are all styleable too and it's just as easy.
 
−
 
−
Again, if you're unsure what the class or ID is, just view your source.
 
−
 
−
To see a working example of a completely styled page, you're welcome to view my own at 06020341/QuickStart/Public. I have formatted everything down to the error messages and it took the best part of five minutes. For my CSS code for INSPRIRATION (not copying, please) you can alternativly go to 06020341/QuickStart/public/css/global.css.
 
−
 
−
Thanks for reading!
 

Latest revision as of 19:41, 2 April 2009

ajax you tube table - use ajax via googles API to grab you tube videos

// this goes in your layout.phtml file
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw"
   type="text/javascript"></script>
 <style type="text/css">
   @import url("http://www.google.com/uds/css/gsearch.css");
 </style>
 
 
 <script type="text/javascript">
   window._uds_vbw_donotrepair = true;
 </script>
 <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new"
   type="text/javascript"></script>
 <style type="text/css">
   @import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
 </style>

 <style type="text/css">
   .playerInnerBox_gsvb .player_gsvb {
     width : 320px;
     height : 260px;
   }
 </style>
 <script type="text/javascript">
   function LoadVideoBar() {

   var videoBar;
   var options = {
       largeResultSet : !false,
       horizontal : false,
       autoExecuteList : {
         cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
         cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
         executeList : ["ytfeed:most_viewed.this_week","audio equipment"]
       }
     }

   videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
                             GSvideoBar.PLAYER_ROOT_FLOATING,
                             options);
   }
   // arrange for this function to be called during body.onload
   // event processing
   GSearch.setOnLoadCallback(LoadVideoBar);
 </script>

//then to position it by using external CSS (remember to insert chevrons at the start and end of the div tags)
  div id="videoBar-bar"
   div

// then in your external sheet position it using something like this.. videoBar-bar { 

 position:absolute;
 left:10px;
 top:200px;

}

Retrieved from "https://mi-linux.wlv.ac.uk/wiki/index.php?title=Talk:Web_Frameworks_-_Workbook&oldid=4007"