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.

Template Questions

Javascript 404 issue!


Go to End
Reply

10 Posts   1138 Views

Avatar
arthurdent

4 September 2013 at 6:14pm (Last edited: 4 September 2013 6:15pm), Community Member, 165 Posts

OK, hopefully someone can help me with today's problem.

I've been working on a responsive website design with a SilverStripe 3.0 backend (for those who haven't tried it, responsive design allows a single site to be optimised for a wide range of screen sizes, form smartphones to desktop and beyond). Anyhoo, one of the trickier elements of Responsive Design is site navigation. Thin of it this way. When working on a smartphone you don't want the whole screen taken up with multi-level navigation. So the trick is to 'hide' the navigation until you need it. Often this involves a bit of Javascript wizardry.

So I found a script called 'flaunt.js' and played with it, ending up with a static prototype that worked just as I wanted it to. The next part was to port this to a Silverstripe theme. And this is where I've hit the wall.

In my Page.ss file head I added the following:

<% require javascript(mysite/javacript/flaunt.js) %>

And I put the Javascript file in the appropriate location.

Ran the page up and Firebug tells me something different:

localhost/site/index.php/js/flaunt.js (and then a 404 error)

I've tried other locations (themes/mytheme/javacript/) and changed the path appropriately. I've removed flaunt.js and the path completely, done a ?flush=1 and ?flush=all for good measure, dev/build/ etc, but the error remains. Silverstripe is now looking for flaunt.js -- somewhere...

Can anybody offer any advice? Thanks!

Avatar
Willr

7 September 2013 at 2:15pm Forum Moderator, 5511 Posts

Have you got a <% base_tag %> in your Page.ss template?

Avatar
arthurdent

7 September 2013 at 4:13pm Community Member, 165 Posts

Hi Willr! Yes, I do have a base tag. Head of Page.ss is currently as follows:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <% base_tag %>
      <title>$Title | Site Header</title>
      $MetaTags(false)
      <link rel="shortcut icon" href="/favicon.ico" />
      
      <% require themedCSS(layout) %>
      <% require themedCSS(typography) %>
      <% require themedCSS(form) %>
      <% require themedCSS(navstyles) %>
      <% require themedCSS(prettyPhotoCustom) %>
      
      <!--[if IE 6]>
          <style type="text/css">
          @import url(themes/mysite/css/ie6.css);
          </style>
      <![endif]-->
      
      <!--[if IE 7]>
         <style type="text/css">
          @import url(themes/mysite/css/ie7.css);
         </style>
      <![endif]-->

      <% require css(cms/css/lightbox.css) %>
<% require javascript(mysite/javacript/flaunt.js) %>
</head>

Any tips?

Avatar
Willr

7 September 2013 at 4:19pm Forum Moderator, 5511 Posts

You should only have an index.php file in your url if you haven't got mod_rewrite turned on, try enabling that, if your host cannot support it then you may need to write your things like <% require javascript(../mysite/javacript/flaunt.js) %>

Avatar
arthurdent

7 September 2013 at 7:38pm Community Member, 165 Posts

Testing locally and still having issues with mod_rewrite -- haven't been able to get it to run on for some reason though it shouldn't be a problem in a live environment...

There are actually TWO instances of flaunt.js (one is a modification) so I've set them both up as you suggest. Unfortunately it's still looking for the following:

localhost/mysite/index.php/js/flaunt.js

localhost/mysite/index.php/js/flaunt.min.js

Pulled all the code out again but this error persists...

why? ?????

Avatar
Willr

8 September 2013 at 11:44am Forum Moderator, 5511 Posts

Take a look at the mod_rewrite issue, might be the easiest fix short term, the other suggestion would be to use an absolute url for the javascript file (e.g http://localhost/mysite/javsacript/fluent.js) while in dev environments. Likely a bug with the Requirements engine that non rewrite environments include the index.php flag.

Avatar
arthurdent

9 September 2013 at 4:58pm Community Member, 165 Posts

Well, that's an improvement... at least it's loading now!!

It's thrown me another curve ball -- apparently I have the following:

ReferenceError: jQuery is not defined
})(jQuery);

In my code I have:

/*
Flaunt.js v1.0.0
by Todd Motto: http://www.toddmotto.com
Latest version: https://github.com/toddmotto/flaunt-js
Copyright 2013 Todd Motto
Licensed under the MIT license
http://www.opensource.org/licenses/mit-license.php
Flaunt JS, stylish responsive navigations with nested click to reveal.
*/
;(function($) {
// DOM ready
$(function() {
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
// Click to reveal the nav
$('.nav-mobile').click(function(){
$('.nav-list').toggle();
});
// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){
// Toggle the nested nav
$(this).siblings('.nav-submenu').toggle();
// Toggle the arrow using CSS3 transforms
$(this).children('.nav-arrow').toggleClass('nav-rotate');
});
});
})(jQuery);

Can you please tell me where I would define jQuery (or what this even means? I know jQuery is part of SilverStripe but how do I 'define' it?)

Thanks again!

Avatar
arthurdent

9 September 2013 at 5:02pm Community Member, 165 Posts

OK, jQuery I have as part of this script is

http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

Is this what SilverStripe is having an issue with?

Go to Top