Announcement

Collapse
No announcement yet.

Javascript in Header Template

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [Forum] Javascript in Header Template

    I'm trying to incorporate a jQuery image rotator into the header of my forum so the logo rotates after a set amount of time. I think I'm on the right track but am bumping into a wall. I posted this over at vbulletin.org a week ago but no one has offered a response, so I figured I'd try here.

    I created a new template called banner_rotatorwith the jQuery code:

    Code:
    <link rel="stylesheet" href="clientscript/nivo-slider.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="clientscript/jquery.nivo.slider.pack.js" type="text/javascript"></script>
    
    <div id="slider">
        <img width="500px" src="images/titleimage/BLUESKIES.jpg" alt="" />
        <img width="500px" src="images/titleimage/CBB_WD12.jpg" alt="" />
        <img width="500px" src="images/titleimage/DK_RMBJ.jpg" alt="" />
        <img width="500px" src="images/titleimage/Q2_T4.jpg" alt="" />
    </div>
    
    <vb:literal>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
            effect:'random',
            slices:15,
            animSpeed:500,
            pauseTime:3000,
            startSlide:0,
            directionNav:false,
            directionNavHide:true,
            controlNav:false,
            controlNavThumbs:false,
                    controlNavThumbsFromRel:false,
            controlNavThumbsSearch: '.jpg',
            controlNavThumbsReplace: '_thumb.jpg',
            keyboardNav:true,
            pauseOnHover:true,
            manualAdvance:false,
            captionOpacity:0.8,
            beforeChange: function(){},
            afterChange: function(){},
            slideshowEnd: function(){}
        });
    });
    </script>
    </vb:literal>
    I then go to the header template and change the line:

    Code:
    <div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>
    with:

    Code:
    <div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:raw banner_rotator}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>
    Needless to say this doesn't work. Is what I'm trying to do feasible and I'm coding something wrong, or is this not doable?

  • #2
    You'll need a plugin to preregister the variable $banner_rotator for use in the template. Did you write one?

    Cellarius wrote a really good article that you may be interested in that covers preregistering variables - [vB4] Rendering templates and registering variables - a short guide

    Please don't PM or VM me for support - I only help out in the threads.
    vBulletin Manual & vBulletin 4.0 Code Documentation (API)
    Want help modifying your vbulletin forum? Head on over to vbulletin.org
    If I post CSS and you don't know where it goes, throw it into the additional.css template.

    W3Schools &lt;- awesome site for html/css help

    Comment


    • #3
      I have not created a plugin. I will look through the guide and see if I can figure it out. Thanks for pointing it out to me.

      Comment


      • #4
        I've been going through the article and responses the last several hours, and everything I try breaks my forum. I'm not a programmer so this stuff is a little over my head. Anyway, here is what my new plugin looks like:

        Product: vBulletin
        Hook Location: template_register_var
        Title: Banner Rotator
        Execution Order: 5

        Plugin PHP Code:
        Code:
        $templater = vB_Template::create('banner_rotator');
            $templater->register('banner_rotator', $banner_rotator);
        $templatevalues['banner_rotator'] = $templater->render();
        vB_Template::preRegister('FORUMHOME', $templatevalues);
        This breaks the system so it's obviously wrong. I removed registering an array because, as far as I can tell, I don't have one. All I want to do is register the template name so it can be called within my header template.

        Comment


        • #5
          I thought you wanted to use this in the header template? If so, you don't want to preregister it for use in FORUMHOME, but in header. I think you want something more like this:
          PHP Code:
          $templater vB_Template::create('banner_rotator');
          $templatevalues['banner_rotator'] = $templater->render();
          vB_Template::preRegister('header'$templatevalues); 
          And try a different hook location. Maybe you picked a bad one. Try parse_templates.

          You really should be posting about this over on vbulletin.org though if you need more help.

          Please don't PM or VM me for support - I only help out in the threads.
          vBulletin Manual & vBulletin 4.0 Code Documentation (API)
          Want help modifying your vbulletin forum? Head on over to vbulletin.org
          If I post CSS and you don't know where it goes, throw it into the additional.css template.

          W3Schools &lt;- awesome site for html/css help

          Comment


          • #6
            I'll give this a shot and see what happens. I appreciate the help. As for vb.org, as I mentioned in my first post, I tried posting there a week ago (even bumped it once) and no one responded there.

            Comment


            • #7
              That looks like it did the trick. Thanks Lynne!

              Comment


              • #8
                Glad it worked.

                Please don't PM or VM me for support - I only help out in the threads.
                vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                Want help modifying your vbulletin forum? Head on over to vbulletin.org
                If I post CSS and you don't know where it goes, throw it into the additional.css template.

                W3Schools &lt;- awesome site for html/css help

                Comment


                • #9
                  I have a quick question that is similar to this... I added a few lines of js to the headinclue and have the all HTML in the template but the script is not firing. Am I missing something?

                  Comment


                  • #10
                    without seeing *exactly* what you did, there is no way to know what is wrong. You would probably be better off asking for help with modifying your templates over on vbulletin.org, the modification site.

                    Please don't PM or VM me for support - I only help out in the threads.
                    vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                    Want help modifying your vbulletin forum? Head on over to vbulletin.org
                    If I post CSS and you don't know where it goes, throw it into the additional.css template.

                    W3Schools &lt;- awesome site for html/css help

                    Comment


                    • #11
                      Originally posted by Lynne View Post
                      without seeing *exactly* what you did, there is no way to know what is wrong. You would probably be better off asking for help with modifying your templates over on vbulletin.org, the modification site.
                      Here is what I did:
                      1. Created a new HTML template widget (I put just and opening and close div) and defined a custom template
                      2. Set widget to display via the Layouts section on the home page
                      3. Added the calls to the js files in the headinclude (jquery.js, the script itself and a few lines of js to fire the script)
                      4. Added a modified vbcms_widget_static_page_featured template with the HTML that outputs the script
                      5. Added the CSS to the "Additional.css" file
                      That's it. The script is not firing though. I also tried adding EVERYTHING to the widget but that did not work either... plus trying to work in the rather small modal widget is a pain.

                      Comment


                      • #12
                        Hard to know what is wrong without seeing it also and all the parts to it (the exact code in all templates, plugins, etc.). As I stated before, you really should be posting about this on vbulletin.org

                        Please don't PM or VM me for support - I only help out in the threads.
                        vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                        Want help modifying your vbulletin forum? Head on over to vbulletin.org
                        If I post CSS and you don't know where it goes, throw it into the additional.css template.

                        W3Schools &lt;- awesome site for html/css help

                        Comment


                        • #13
                          Ok, nevermind the custom script... if I put all the js in the headinclude template and the straight HTML in a custom template, should the js be triggered?

                          Comment


                          • #14
                            Yes, it should. It should have been triggered the other way, if done correctly. But again, nobody can help without specifics. And, as I've said, this isn't the place to post the specifics, vb.org is.

                            Please don't PM or VM me for support - I only help out in the threads.
                            vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                            Want help modifying your vbulletin forum? Head on over to vbulletin.org
                            If I post CSS and you don't know where it goes, throw it into the additional.css template.

                            W3Schools &lt;- awesome site for html/css help

                            Comment


                            • #15
                              No one responds there...

                              This is what I have. You don't have to comment on script specifics but rather just tell me what should go where. I can get it to display but the js does not trigger.

                              PHP Code:

                              <!-- Top Story -->
                              <
                              script language="javascript" type="text/javascript" src="http://www.xxxxx.com/assets/helpers/lofslidernews/js/jquery.js"></script>
                              <
                              script language="javascript" type="text/javascript" src="http://www.xxxxx.com/assets/helpers/lofslidernews/js/jquery.easing.js"></script>
                              <
                              script language="javascript" type="text/javascript" src="http://www.xxxxx.com/assets/helpers/lofslidernews/js/script.js"></script>
                              <
                              script type="text/javascript">
                               $(
                              document).ready( function(){    
                                      $(
                              '#lofslidecontent45').lofJSidernews( {interval:4000,
                                                                             
                              direction:'opacity',
                                                                             
                              duration:1000,
                                                                             
                              easing:'easeInOutSine'} );                        
                                  });

                              </
                              script>
                              <!-- /
                              Top Story -->

                              <
                              style>
                              /* Slideshow */
                              .lof-slidecontent{
                                  
                              position:relative;
                                  
                              overflow:hidden;
                                  
                              border:#F4F4F4 solid 1px;
                                  
                              width:892px;
                                  
                              height:300px;
                              }
                              .
                              lof-slidecontent .preload{
                                  
                              height:100%;
                                  
                              width:100%;
                                  
                              background:#FFF;
                                  
                              position:absolute;
                                  
                              top:0;
                                  
                              left:0;
                                  
                              z-index:100000;
                                  
                              color:#FFF;
                                  
                              text-align:center
                              }
                              .
                              lof-slidecontent .preload div{
                                  
                              height:100%;
                                  
                              width:100%;
                                  
                              background:transparent url(http://www.xxxxx.com/assets/helpers/lofslidernews/images/load-indicator.gif) no-repeat scroll 50% 50%;
                              }
                              .
                              lof-main-outer{
                                  
                              position:relative;
                                  
                              height:100%;
                                  
                              width:600px;
                                  
                              z-index:3;
                                  
                              overflow:hidden;
                              }


                              /*******************************************************/
                              .lof-main-item-desc{
                                  
                              z-index:100px;
                                  
                              position:absolute;
                                  
                              top:150px;
                                  
                              left:50px;
                                  
                              width:400px;
                                  
                              background:url(http://www.xxxxx.com/assets/helpers/lofslidernews/images/transparent_bg.png);

                                  /* filter:0.7(opacity:60) */
                              }
                              .
                              lof-main-item-desc p{
                                  
                              color:#FFF;
                                  
                              margin:0 8px;
                                  
                              padding:8px 0
                              }
                              .
                              lof-main-item-desc h3 a{
                                  
                              color:#FFF;    
                                  
                              margin:0;
                                  
                              font-size:140%;
                                  
                              padding:20px 8px 2px;
                                  
                              font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
                              }
                              .
                              lof-main-item-desc h3 a:hover{
                                  
                              color:#FF6;
                                  
                              text-decoration:underline;
                              }


                              /* main flash */
                              ul.lof-main-wapper{
                                  
                              /* margin-right:auto; */
                                  
                              overflow:hidden;
                                  
                              background:transparent url(http://www.xxxxx.com/assets/helpers/lofslidernews/images/load-indicator.gif) no-repeat scroll 50% 50%;
                                  
                              padding:0px;
                                  
                              margin:0;
                                  
                              height:300px;
                                  
                              width:600px;
                                  
                              position:absolute;
                                  
                              overflow:hidden;
                              }

                              ul.lof-main-wapper li{
                                  
                              overflow:hidden;
                                  
                              padding:0px;
                                  
                              margin:0px;
                                  
                              height:100%;
                                  
                              width:600px;
                                  
                              float:left;
                              }
                              .
                              lof-opacity  li{
                                  
                              position:absolute;
                                  
                              top:0;
                                  
                              left:0;
                                  
                              float:inherit;
                              }
                              ul.lof-main-wapper li img{
                                  
                              padding:0px;    
                                  
                              width:600px;
                              }

                              li-desc{
                                  
                              z-index:100;
                                  
                              position:absolute;
                                  
                              top:150px;
                                  
                              left:50px;
                                  
                              width:400px;
                                  
                              background:url(http://www.xxxxx.com/assets/helpers/lofslidernews/images/transparent_bg.png);

                                  /* filter:0.7(opacity:60) */
                              }
                              li-desc p{
                                  
                              color:#FFF;
                                  
                              margin:0 8px;
                                  
                              padding:8px 0
                              }
                              li-desc h3 a{
                                  
                              color:#FFF;    
                                  
                              margin:0;
                                  
                              font-size:140%;
                                  
                              padding:20px 8px 2px;
                                  
                              font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
                              }
                              li-desc h3 a:hover{
                                  
                              color:#FF6;
                                  
                              text-decoration:underline;
                              }

                              /* item navigator */
                              ul.lof-navigator{
                                  
                              top:0;
                                  
                              padding:0;
                                  
                              margin:0;
                                  
                              position:absolute;
                                  
                              width:100%;
                              }
                              ul.lof-navigator li{
                                  
                              cursor:hand
                                  
                              cursor:pointer;
                                  list-
                              style:none;
                                  
                              width:100%;
                                  
                              padding:0;
                                  
                              margin:0;
                                  
                              overflow:hidden;
                              }
                              .
                              lof-navigator-outer{
                                  
                              position:absolute;
                                  
                              right:0;
                                  
                              top:00px;
                                  
                              z-index:100;
                                  
                              height:300px;
                                  
                              width:310px;
                                  
                              overflow:hidden;
                                  
                              color:#FFF
                              }
                              .
                              lof-navigator li.active{
                                  
                              background:url(http://www.xxxxx.com/assets/helpers/lofslidernews/images/arrow-bg.png) no-repeat scroll left center; 
                                  
                              color:#FFF
                              }
                              .
                              lof-navigator li:hover{
                                  
                              }


                              .
                              lof-navigator li h3{
                                  
                              color:#FFF;
                                  
                              font-size:100%;
                                  
                              padding:15px 0 0 !important;
                                  
                              margin:0;

                              }
                              .
                              lof-navigator li div{
                                  
                              background:url(http://www.xxxxx.com/assets/helpers/lofslidernews/images/transparent_bg.png);
                                  
                              color:#FFF;
                                  
                              height:100%;
                                  
                              position:relative;
                                  
                              margin-left:15px;
                                  
                              padding-left:15px;
                                  
                              border-top:1px solid #E1E1E1;
                              }

                              .
                              lof-navigator li.active div{
                                  
                              background:url(http://www.xxxxx.com/assets/helpers/lofslidernews/images/grad-bg.gif);
                                  
                              color:#FFF;
                              }
                              .
                              lof-navigator li img{
                                  
                              height:60px;
                                  
                              width:60px;
                                  
                              margin:15px 15px 10px 0px;
                                  
                              float:left;
                                  
                              padding:3px;
                                  
                              border:#C5C5C5 solid 1px;
                              }
                              .
                              lof-navigator li.active img{
                                  
                              border:#6C8E5C  solid 1px;
                              }
                              .
                              lof-navigator li.active h3{
                                  
                              color:#FFF;
                              }
                              </
                              style>

                              <
                              div class="cms_widget">
                                 <
                              div class="block">

                              <!------------------------------------- 
                              THE CONTENT ------------------------------------------------->
                              <
                              div id="lofslidecontent45" class="lof-slidecontent">
                              <
                              div class="preload"><div></div></div>
                               <!-- 
                              MAIN CONTENT --> 
                                <
                              div class="lof-main-outer">
                                    <
                              ul class="lof-main-wapper">
                                        <
                              li>
                                              <
                              img src="http://www.xxxxx.com/assets/helpers/lofslidernews/images/791902news3.jpg" title="Newsflash 2" height="300" width="900">           
                                               <
                              div class="lof-main-item-desc">
                                              <
                              h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>

                                              <
                              p>The one thing about a Web siteit always changesJoomlamakes it easy to add Articlescontent,...</p>
                                           </
                              div>
                                      </
                              li
                                     <
                              li>
                                          <
                              img src="http://www.xxxxx.com/assets/helpers/lofslidernews/images/435576news10.jpg" title="Newsflash 1" height="300" width="900">            <div class="lof-main-item-desc">
                                              <
                              h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3>
                                              <
                              p>Joomlamakes it easy to launch a Web site of any kindWhether you want a brochure site or you are...</p>

                                           </
                              div>
                                      </
                              li
                                     <
                              li>
                                          <
                              img src="http://www.xxxxx.com/assets/helpers/lofslidernews/images/641906img1.jpg" title="Newsflash 3" height="300" width="900">            <div class="lof-main-item-desc">
                                              <
                              h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3>
                                              <
                              p>With a library of thousands of free Extensionsyou can add what you need as your site growsDon't...</p>
                                           </div>
                                      </li> 
                                      <li>

                                          <img src="http://www.xxxxx.com/assets/helpers/lofslidernews/images/416719news7.jpg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                                              <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                                              <p>Joomla! 1.5 - '
                              Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
                                           </div>
                                      </li> 
                                      
                                      <li>

                                          <img src="http://www.xxxxx.com/assets/helpers/lofslidernews/images/416719news7.jpg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                                              <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                                              <p>Joomla! 1.5 - '
                              Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
                                           </div>
                                      </li> 
                                      <li>

                                          <img src="http://www.xxxxx.com/assets/helpers/lofslidernews/images/416719news7.jpg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                                              <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                                              <p>Joomla! 1.5 - '
                              Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
                                           </div>
                                      </li> 
                                    </ul>      
                                </div>
                                <!-- END MAIN CONTENT --> 
                                  <!-- NAVIGATOR -->

                                <div class="lof-navigator-outer">
                                        <ul class="lof-navigator">
                                          <li>
                                              <div>
                                                  <img src="http://www.xxxxx.com/assets/helpers/lofslidernews/images/lofthumbs/791902news3.jpg" />
                                                  <h3> NewsFlash 1 </h3>
                                                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...
                                              </div>    
                                          </li>
                                           <li>
                                               <div>
                                                  <img src="http://www.xxxxx.com/assets/helpers/lofslidernews/images/lofthumbs/435576news10.jpg" />
                                                   <h3> NewsFlash 2 </h3>
                                                    <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                              </div>    
                                          </li>

                                          <li>
                                              <div>
                                                  <img src="http://www.xxxxx.com/assets/helpers/lofslidernews/images/lofthumbs/641906img1.jpg" />
                                                  <h3> NewsFlash 3 </h3>
                                                  <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                              </div>     
                                          </li>
                                          
                                         <li>
                                                 <div>
                                                  <img src="http://www.xxxxx.com/assets/helpers/lofslidernews/images/lofthumbs/416719news7.jpg" />
                                                  <h3> NewsFlash 4</h3>
                                                  <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                              </div>
                                          </li>    
                                          <li>
                                                  <div>
                                                   <img src="http://www.xxxxx.com/assets/helpers/lofslidernews/images/lofthumbs/641906img1.jpg" />
                                                   <h3> NewsFlash 5</h3>
                                                   <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                               </div>   
                                          </li>
                                         <li>
                                                 <div>
                                                  <img src="http://www.xxxxx.com/assets/helpers/lofslidernews/images/lofthumbs/416719news7.jpg" />
                                                  <h3> NewsFlash 6</h3>
                                                     <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                              </div>
                                          </li>             
                                      </ul>
                                </div>
                               </div> 

                              <!------------------------------------- END OF THE CONTENT ------------------------------------------------->      


                                 </div>
                              </div> 

                              Comment

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...
                              X