Solved

jQuery code not loading

Posted on 2014-07-27
18
276 Views
Last Modified: 2014-08-03
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
Comment
Question by:gwh2
  • 7
  • 6
  • 3
  • +2
18 Comments
 
LVL 7

Expert Comment

by:Raghu Mutalikdesai
ID: 40223570
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
 
LVL 13

Expert Comment

by:duncanb7
ID: 40223571
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
 
LVL 13

Expert Comment

by:duncanb7
ID: 40223582
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
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40223843
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 40224351
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
 
LVL 1

Author Comment

by:gwh2
ID: 40225110
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
 
LVL 58

Expert Comment

by:Gary
ID: 40225227
Can you add the data-orbit back in so I can see if there is another issue.

<ul data-orbit>
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40225236
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
 
LVL 1

Author Comment

by:gwh2
ID: 40225852
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 1

Author Comment

by:gwh2
ID: 40225859
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
 
LVL 58

Expert Comment

by:Gary
ID: 40237425
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
 
LVL 1

Author Comment

by:gwh2
ID: 40238133
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
 
LVL 58

Expert Comment

by:Gary
ID: 40238136
As a test use this instead - it's valid HTML5 so it shouldn't be removed.

data-orbit=""
0
 
LVL 1

Author Comment

by:gwh2
ID: 40238146
Ok, I added your suggested code and checked the source code in the browser but it was still being stripped out
0
 
LVL 58

Expert Comment

by:Gary
ID: 40238149
What CMS and version?
0
 
LVL 1

Author Comment

by:gwh2
ID: 40238150
Adobe Business Catalyst
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40238156
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
 
LVL 1

Author Comment

by:gwh2
ID: 40238183
Thanks so much. I added your code and it's working perfectly now. I really appreciate it.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now