Solved

jQuery code not loading

Posted on 2014-07-27
18
286 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 109

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
 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Using jQuery to set a DIV attribute on page load 9 33
JavaScript let vs var 5 27
Jquery 2 13
Customizing jQuery UI Accordion CSS 3 17
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
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…

832 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