Categories > TinyButStrong general >

loading javascript from sub template

The forum is closed. Please use Stack Overflow for submitting new questions. Use tags: tinybutstrong , opentbs
By: handoko
Date: 2010-06-15
Time: 05:16

loading javascript from sub template

dear team,

I have a main html, and a sub templete, this is the code
<div>[onload;script='[var..cst.MODULES_DIR]header.php';subtpl;getbody]</div>

where header.php code is:
if (isset($this)) {
    $TBS =& $this;
} else {
    include_once('lib/tbs_class.php');
    $TBS = new clsTinyButStrong;
}

global $THEMES_DIR; 
$TBS->LoadTemplate(THEMES_DIR.'header.html');
$TBS->Show() ; 

and header.html is like this:
<head> 
<script type="text/javascript" src="/js/fadeslideshow.js">
</script>

<script type="text/javascript">
var fadeimages=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
[blk;block=begin]
idx = [blk.#] - 1;
fadeimages[idx]=["[var.sys.imgProdDir][blk.imagename;].thumb.jpg", "/product/[blk.productid]_[blk.friendlyname].html", ""];
[blk;block=end]

var fadebgcolor="white"
</script>

<script type="text/javascript">
var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [85, 110], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: fadeimages,
    displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
})
</script>

</head> 

<div style="width:100%; border:0; height:auto;  cellpadding:0; cellspacing:0; bgcolor:=white">
   
 
    <div style="float:left">
    <img src="[var.sys.imgDir][var.config.logofilename].jpg" border="0" alt="logo erozashop.com" /><br />[var.motto;htmlconv=no]
    </div>
   
        <div style="float:right">
            <div id="fadeshow1"></div> 
        </div>
        </div>

</div>

my question is, why the javascript doesn't run?

How can i run the javascript code under subtemplate?


By: TomH
Date: 2010-06-15
Time: 16:14

Re: loading javascript from sub template

Try looking at the browser source to see if the js is there

If it is not there then try removing the 'getbody' param as your js is not inside the 'body' tags

Otherwise look at the TBS Fields params. There's a "htmlconv=js" setting that might help you

By: Skrol29
Date: 2010-06-15
Time: 16:59

Re: loading javascript from sub template

Hi,

I agree with TomH, parameter "getbody" with its default value is probably taking off your javascript tags.
By: handoko
Date: 2010-06-15
Time: 18:40

Re: loading javascript from sub template

Dear team,

i tried to modify the "onload; script ..." with
<div>[onload;script='[var..cst.MODULES_DIR]header.php';subtpl;getbody=(head)+(script)+body]</div>

but the output is the same as previous, or js script loaded only
<script type="text/javascript">
var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [85, 110], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: fadeimages,
    displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
})
</script>

or it is the last js script code, i have two other script code but they didn't carried on into the output.

need your kind help. thanks

By: TomH
Date: 2010-06-15
Time: 22:47

Re: loading javascript from sub template

Try putting the 'header' tag in the main html page and just the js in the header script.

Also, consider making the header as just a subtemplate, only an html page with ONLY the JS, no header.php -- get the vars you need for the header.html from php code in the main.php

By: Skrol29
Date: 2010-06-15
Time: 22:50

Re: loading javascript from sub template

Hi,

Can you also give the full "header.html" content and snippet of the output you have that is relative to the sub-template ?
I'll try to reproduce your problem.
By: handoko
Date: 2010-06-16
Time: 03:08

Re: loading javascript from sub template

hi skrol,

this is my full of header.html
<script type="text/javascript" src="/js/fadeslideshow.js">
</script>

<script type="text/javascript">

var fadeimages=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
[blk;block=begin]
idx = [blk.#] - 1;
fadeimages[idx]=["[var.sys.imgProdDir][blk.imagename;].thumb.jpg", "/product/[blk.productid]_[blk.friendlyname].html", ""];
[blk;block=end]

var fadebgcolor="white"
</script>


<script type="text/javascript">
var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [85, 110], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: fadeimages,
    displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
})

</script>

<body>
<div style="width:100%; border:0; height:auto;  cellpadding:0; cellspacing:0; bgcolor:=white">
    <div style="float:left">
    <img src="[var.sys.imgDir][var.config.logofilename].jpg" border="0" alt="logo erozashop.com" /><br />[var.motto;htmlconv=no]
    </div>
            <div style="float:right">
            <div id="fadeshow1"></div>      
        </div>
</div>
</body>

i think this is because there is a local var created inside header.html and cannot be accessed into main.html
By: handoko
Date: 2010-06-16
Time: 03:20

Re: loading javascript from sub template

Hi

i have revise the code by put this
<script type="text/javascript" src="/js/fadeslideshow.js">
[onload;script='[var..cst.THEMES_DIR]headerjs.html';subtpl;getbody]
</script>

in the head tag of main.html
while headerjs.html contain

var fadeimages=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
[blk;block=begin]
idx = [blk.#] - 1;
fadeimages[idx]=["[var.sys.imgProdDir][blk.imagename;].thumb.jpg", "/product/[blk.productid]_[blk.friendlyname].html", ""];
[blk;block=end]

var fadebgcolor="white"

var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [85, 110], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: fadeimages,
    displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
})


without script tag,

and the output is that the var idx didn't produce the calculation, for example for
[blk;block=begin]
idx = [blk.#] - 1;
fadeimages[idx]=["[var.sys.imgProdDir][blk.imagename;].thumb.jpg", "/product/[blk.productid]_[blk.friendlyname].html", ""];
[blk;block=end]

will produce:
idx = 1 - 1;
47fadeimages[idx]=["/images/product/PCH-006_1.thumb.jpg", "/product/PCH-006_Piyama-Bear.html", ""];
48

instead of:
idx = 0;
47fadeimages[0]=["/images/product/PCH-006_1.thumb.jpg", "/product/PCH-006_Piyama-Bear.html", ""];
48

why...?
By: handoko
Date: 2010-06-16
Time: 08:51

Re: loading javascript from sub template

Hi team,

It solved by putting the code:
[onload;file='[var..cst.THEMES_DIR]headerjs.html';getbody]

in the main.html, while the entire javascript code put under, headerjs.html.

however i have another question why, the code here
<title>[var.sys.siteTitle]</title>
<link rel="stylesheet" type="text/css" href="/styles/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="/styles/ddsmoothmenu-v.css" />
<link href="[var.sys.themesPath]style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/scripts.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>                                         
<script type="text/javascript" src="/js/ddsmoothmenu.js"></script>  
[onload;file='[var..cst.THEMES_DIR]headerjs.html';getbody]
<link rel="stylesheet" type ="text/css" href="/js/treeview/jquery.treeview.css" />
<link rel="stylesheet" type ="text/css" href="/js/treeview/screen.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>                                        
<script src="/js/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
<script src="/js/treeview/jquery.treeview.js" type="text/javascript"></script>

run well in main.html, instead of this code
<title>[var.sys.siteTitle]</title>
<link rel="stylesheet" type="text/css" href="/styles/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="/styles/ddsmoothmenu-v.css" />
<link href="[var.sys.themesPath]style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/scripts.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>                                         
<script type="text/javascript" src="/js/ddsmoothmenu.js"></script>  

<link rel="stylesheet" type ="text/css" href="/js/treeview/jquery.treeview.css" />
<link rel="stylesheet" type ="text/css" href="/js/treeview/screen.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>                                        
<script src="/js/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
<script src="/js/treeview/jquery.treeview.js" type="text/javascript"></script>
[onload;file='[var..cst.THEMES_DIR]headerjs.html';getbody]

the output for the last code is only up to this code;
<title>[var.sys.siteTitle]</title>
<link rel="stylesheet" type="text/css" href="/styles/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="/styles/ddsmoothmenu-v.css" />
<link href="[var.sys.themesPath]style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/scripts.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>                                         
<script type="text/javascript" src="/js/ddsmoothmenu.js"></script>  

??
By: handoko
Date: 2010-06-17
Time: 01:47

Re: loading javascript from sub template

dear all,

sometimes html comment tag, disturbing your code.
my previous code contain this (but i simplify here for easy to read), and this is one of the root cause, pls be carefull with this
By: TomH
Date: 2010-06-17
Time: 12:22

Re: loading javascript from sub template

There's a lesson there...
By: handoko
Date: 2010-06-19
Time: 02:04

Re: loading javascript from sub template

Dear all,

i have make an investigation and the result is that  the next jquery script didn't want to start after fadeslideshow jquery script is due to there is a code inside fadeslideshow contain
jQuery.noConflict()
which prevent the next jquery to start.

after i delete this code, the subtemplete work fine, even if put it under header.html a subtemplete.