• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 295
  • Last Modified:

jQuery code not loading

Hi everyone,

I'm trying to get a jquery based image slider working on the home page of a website I'm working on but the code doesn't seem to be loading for some reason. My page is located at the following url:

http://bc-interiordesign-au21.businesscatalyst.com/

I have the following code positioned at the end of the page:

 <script src="/_assets/js/jquery-1.9.1.min.js"></script>
<script src="/_assets/js/foundation.min.js"></script>
<script src="/_assets/js/scripts.js"></script>
<script>
    $(function(){
        $(document).foundation('orbit', {
		  animation: 'fade',
		  slide_number: false,
		  bullets: false
		});
    });
</script>

Open in new window


I wondered if someone could take a look to see what the problem might be?

Really appreciate any help.
0
gwh2
Asked:
gwh2
  • 7
  • 6
  • 3
  • +2
2 Solutions
 
Raghu MutalikdesaiSenior Manager in a leading IT Services companyCommented:
I suspect your path for JS is incorrect or you are missing some files. Through Chrome debugger (Developer Tools), I see that _assets/js/jquery.min.map is missing or path is incorrect. Similarly, I got warning for widgets.js.
0
 
duncanb7Commented:
On chrome browser click options->tools->developer tools->Console,
YOu can do this similar to other browser but you find where is developer tools tab

On Console screen, check whether all javascript code is no error at all first, it may be just
javascript sytnax issue

Duncan
0
 
duncanb7Commented:
Please take a look tutorial for foundation orbit and its script file including at
http://foundation.zurb.com/docs/components/orbit.html


it seems jquery code should be something like this
$(document).foundation({
  orbit: {
      animation: 'slide', // 
// other variable here.........................
}
});

Open in new window



Duncan
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Ray PaseurCommented:
The latest jQuery is available here:
http://code.jquery.com/jquery-latest.min.js

Orbit is circling the drain. "Deprecation Notice: Orbit has been deprecated, meaning that it is no longer supported."  Alternative jQuery-based image sliders are listed here:
http://foundation.zurb.com/forum/posts/14504-moving-on-from-developing-orbit
0
 
GaryCommented:
Your div container for the slideshow needs the class orbit-container added
Your slideshow UL needs data-orbit added to it e.g.

So you end up with

<div class="slideshow-wrapper touch orbit-container" id="hero">
<div class="preloader"></div>
<ul data-orbit>

Open in new window

0
 
gwh2Author Commented:
Thanks for all the comments,

Gary, I tried your suggestion but I'm still having no luck. You said to also put data-orbit on the ul tag but for some reason the browser is stripping this out. I tried adding it in as an id and then a class also but neither worked.

Do you have any other suggestions to get this working? I know it's deprecated and not supported but it's still included in Foundation so I'd rather use this.

Appreciate your help.
0
 
GaryCommented:
Can you add the data-orbit back in so I can see if there is another issue.

<ul data-orbit>
0
 
duncanb7Commented:
Dear Author,
And I see your javascript include file at <script> tag  is different from the site I posted in previous post. Please take a look at it  if you keep using orbit.

Duncan
0
 
gwh2Author Commented:
Hi,

I added the data-orbit back into the ul tag. Also, I realised that the js include file was different but I hesitate to remove it at this point as it may be related to something else on the page. Someone else put this together so I'm trying to work out what they've done.

Appreciate any further help.
0
 
gwh2Author Commented:
I re-inserted the ul tag but when I checked the source code in the browser it wasn't there so it seems the browser is stripping it out for some reason.

I don't how to get it to work.
0
 
GaryCommented:
Just did a quick check and the browser does not strip it out.

Are you using a CMS - not clear from your code. It is probably that stripping it out.
0
 
gwh2Author Commented:
Hi, yeah it must the cms that's stripping it out. I'm looking into it and will post back once I know. Thanks
0
 
GaryCommented:
As a test use this instead - it's valid HTML5 so it shouldn't be removed.

data-orbit=""
0
 
gwh2Author Commented:
Ok, I added your suggested code and checked the source code in the browser but it was still being stripped out
0
 
GaryCommented:
What CMS and version?
0
 
gwh2Author Commented:
Adobe Business Catalyst
0
 
GaryCommented:
Doesn't seem very HTML5 friendly

We can cheat though, just before your foundation jquery code add the bolded line

$(".slideshow-wrapper > ul").attr("data-orbit","")
        $(document).foundation('orbit', {
              animation: 'fade',
              slide_number: false,
              bullets: false
            });
0
 
gwh2Author Commented:
Thanks so much. I added your code and it's working perfectly now. I really appreciate it.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 7
  • 6
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now