Solved

jQuery code not loading

Posted on 2014-07-27
18
292 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

 
LVL 110

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

617 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