Jump to:

23375 Posts in 18175 Topics by 2866 members

General Questions

SilverStripe Forums » General Questions » Javascript in SS template not working??? Works in it's own basic page.

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

Page: 1 2
Go to End
Author Topic: 1031 Views
  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    Javascript in SS template not working??? Works in it's own basic page. Link to this post

    Hi all,

    I'm still working on my first template for SS, and I have a rollover/mouseover menu that was created in Dreamweaver.
    When I have copied the code into the page.ss it no longer functions.

    Is there something I should know about SS with regards to bringing in Javascript like this etc???

    Any help would be great

    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_nbGroup(event, grpName) { //v6.0
    var i,img,nbArr,args=MM_nbGroup.arguments;
    if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
    img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
    if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
    nbArr[nbArr.length] = img;
    for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) {
    if (!img.MM_up) img.MM_up = img.src;
    img.src = img.MM_dn = args;
    nbArr[nbArr.length] = img;
    } }
    } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args)) != null) {
    if (!img.MM_up) img.MM_up = img.src;
    img.src = (img.MM_dn && args) ? args : ((args)? args : img.MM_up);
    nbArr[nbArr.length] = img;
    }
    } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
    img = document.MM_nbOver; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
    } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
    for (i=0; i < nbArr.length; i++) { img=nbArr; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) {
    if (!img.MM_up) img.MM_up = img.src;
    img.src = img.MM_dn = (args)? args : img.MM_up;
    nbArr[nbArr.length] = img;
    } }
    }
    //-->
    </script>

    <body onload="MM_preloadImages('../images/UI/nav/n_01home1_on.gif')">

    <a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','home','../images/UI/nav/n_01home1_on.gif', 1)" onmouseover="MM_nbGroup('over','home','../images/UI/nav/n_01home1_on.gif','imag es/UI/nav/n_01home1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_01home1.gif" alt="Home" name="home" width="52" height="70" border="0" id="home" onload="" /></a>

  • Hamish
    Avatar
    Community Member
    712 Posts

    Re: Javascript in SS template not working??? Works in it's own basic page. Link to this post

    Probably the image file paths are incorrect... ('../images/UI/nav/n_01home1_on.gif') etc.

  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    Re: Javascript in SS template not working??? Works in it's own basic page. Link to this post

    Hi Hamish
    That code was taken from a non page.ss file.

    I have tried proper paths for ss like

    {$ThemeDir}/images/UI/nav/n_11contacts1_on.gif

    The image loads like it should, it's just the functioning (rollover etc) nothing is happening.

    Theres nothing in the SS page.ss that would be preventing it from running?

  • edk
    Avatar
    Community Member
    39 Posts

    Re: Javascript in SS template not working??? Works in it's own basic page. Link to this post

    Hi tf22raptor,

    I saw your code here and I would strongly recommend you try a completely different approach to creating your rollovers. The method produced via Dreamweaver is quite old and no longer a standard or a best practice....

    I would recommend you create a you navigation as a list

    <ul id="nav">
    <li class="item1"><a href="#">Item 1</a></li>
    <li class="item2"><a href="#">Item 2</a></li>
    <li class="item3"><a href="#">Item 3</a></li>
    </ul>

    Now you have all the hooks you need to style (use Image Replacement method for your images). In your css file then just start adding what you need...

    /* CSS Styles */
    #nav {
       font-size: 1.2em;
       list-style: none;
       margin: 0;
       padding: 0 0 40px 0;
       overflow: hidden;
    }

    #nav li {
       display: block;
       float: left;
       text-align: center;
    }

    #nav li a {
       display: block;
       text-indent:-9999px; /* Important will shift your text of the page and that is where the image replaces */
       width: 52px; /* Size of your images */
       height: 70px;
    }

    .item1 a, .item1 a:link{
       background: url(../images/UI/nav/n_01home1.gif) 0 0 no-repeat;
    }

    .item1 a:hover { /* the hover state image */
       background: url(../images/UI/nav/n_01home1_on.gif) 0 0 no-repeat;
    }

    There are plenty of tutorials out there covering "CSS Image Replacement" as well as creating Nav Menus using Lists and CSS (throw JavaScript in there for some enhancements later if you like)

    I realize this may take you off you path here, but trust me it is path you will enjoy taking. It is liberating and rids your page of ugly, non-semantic code.

    -Ed

  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    Re: Javascript in SS template not working??? Works in it's own basic page. Link to this post

    Hi chingo yeah thanks for that. This is my first CSS layout site and I wasn't aware of CSS being able to do rollovers until recently, I will definatley ditch the horror that is the dreamweaver code and try a CSS solution.

    Thanks for the post and the examples.

    Cheers

  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    Re: Javascript in SS template not working??? Works in it's own basic page. Link to this post

    that is an amazing peice of css. As I said I've only just learned about, CSS and what float, clear and all this css jargon means as I was quite happy just using table based design for the past 10 years.

    A few questions about it.
    What spec is this css from? css1,css2 or css3?

    Do I need to be using a link name (item 1) in the link?
    <li class="item1"><a href="#">Item 1</a></li>

    can I just use
    <li class="item1"><a href="#"></a></li>

    ???

    How did you learn this peice of code, do you have any top notch css sites you recommend to check out for examples etc.
    I'vefound it hard to find high quality css tutorials.

    Finally what is the go with font sizes in css, I see a lot of people using 1.2em and eve %, what the!?!?!?. I'm a pt and px guy what is em and why the heck would they use %? (I'm a pixel to pixel perfect type of designer that when I do my concepts in photoshop aim to get them exactly like what I see but in html)

  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    Re: Javascript in SS template not working??? Works in it's own basic page. Link to this post

    Also I have image sizes that are varying in width that make up the navigation, with that code you just have the one peice of css specifying the width of the first button.

    #nav li a {
    display: block;
    text-indent:-9999px; /* Important will shift your text of the page and that is where the image replaces */
    width: 52px; /* Size of your images */
    height: 70px;
    }

    How would I go about it in css to specify individual sizes of images for each button.
    At the because all of my images are using that value, I'm getting some of my nav images cut in half etc

    Any help would be great

  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    Re: Javascript in SS template not working??? Works in it's own basic page. Link to this post

    I worked out how to do the width for each individual image,

    moved the
    width: 52px; /* Size of your images */

    to each individually named
    .item1 a, .item1 a:link{

    did need to apply it to the hover element for what ever reason.

    Stil unsure of my other queries.

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