Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Joyride Tour with wordpress

Posted on 2014-07-25
4
Medium Priority
?
711 Views
Last Modified: 2014-08-02
I'm using this plugin:
http://zurb.com/playground/jquery-joyride-feature-tour-plugin

I've added it to other sites before without issue, but wordpress is giving me issues.  I have it all in the footer, could someone take a look and see what's missing/incorrect?

http://www.thecurrint.com/
0
Comment
Question by:Nathan Riley
  • 3
4 Comments
 
LVL 29

Expert Comment

by:chilternPC
ID: 40221046
well,  your joyride code doesn't seem to be set up?
the joyride software asks for the following to be in the header of each page so I would edit the header.php of your theme and put the following :

      <link rel=" stylesheet" type="text/css" href="wp-content/themes/flexform/css/joyride-2.1.css">
        <script src="wp-content/themes/flexform/js/jquery.joyride-2.1.js"></script>

or if you used a wordpress plugin then  it might be not set up. looking at the code  it doesn't seem set up?  
Is there a settings options under 'settings' in the WP admin panel or on the plugin of joyride in the plugin section or appearance?

you code is:
------------------------------------------------------
    <!--Joyride Plugin -->
        <link rel=" stylesheet" type="text/css" href="wp-content/themes/flexform/css/joyride-2.1.css">
        <script src="wp-content/themes/flexform/js/jquery.joyride-2.1.js"></script>
<ol id="#tour" style="display:none;">
  /* data-id needs to be the same as the parent it will attach to */
  <li data-id="menu-item-31">Tip content...</li>

  /* This tip will be display as a modal */
  <li>Tip content...</li>

  /* using 'data-button' lets you have custom button text */
  <li data-class="parent-element-class" data-options="tipLocation:top;tipAnimation:fade" data-button="Second Button">Content...</li>

  /* you can put a class for custom styling */
  <li data-id="parentElementID" class="custom-class">Content...</li>
</ol>
        <script>
jQuery(window).load(function() {
  jQuery("#tour").joyride({
    /* Options will go here */
  });
});
</script>
-----------------------------------
0
 
LVL 12

Author Comment

by:Nathan Riley
ID: 40224161
I had it setup that way originally, but moved around some as it wasn't working.  I've moved it back to the head, but still not working.

No this is not a Wordpress plugin.
0
 
LVL 12

Accepted Solution

by:
Nathan Riley earned 0 total points
ID: 40224925
Resolved on my own.
0
 
LVL 12

Author Closing Comment

by:Nathan Riley
ID: 40235842
Resolved issue on my own.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…
Suggested Courses

578 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