Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

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

Javascript in SS template not working??? Works in it's own basic page.


Go to End
Reply


9 Posts   1204 Views

Avatar
TF-35Lightning

Community Member, 137 Posts

24 March 2010 at 3:08pm

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>

Avatar
Hamish

Community Member, 712 Posts

24 March 2010 at 3:17pm

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

Avatar
TF-35Lightning

Community Member, 137 Posts

24 March 2010 at 3:42pm

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?

Avatar
edk

Community Member, 39 Posts

26 March 2010 at 9:46am

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

Avatar
TF-35Lightning

Community Member, 137 Posts

26 March 2010 at 1:13pm

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

Avatar
TF-35Lightning

Community Member, 137 Posts

26 March 2010 at 2:04pm

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)

Avatar
TF-35Lightning

Community Member, 137 Posts

26 March 2010 at 2:27pm

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

Avatar
TF-35Lightning

Community Member, 137 Posts

26 March 2010 at 2:48pm

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.

Go to Top