- This topic has 4 replies, 2 voices, and was last updated 11 years, 9 months ago by
.
-
Posts
-
I am trying to use the jQuery UI Accordion script (and others if I can).
Not sufficient: http://www.studiopress.community/topic/is-jquery-includedloaded-with-the-genesis-framework/
Perhaps I am missing the css calls? I put the call to the accordion script in the script entry field at the bottom of the post where I used it. No response. The text just rendered as plain text.I also use the backstretch widget, but otherwise a plain vanilla install.
This (html below) works fine outside WordPress, in plain html so my struggle is to use widgets in WordPress/StudioPress/Minimum Pro. I put the enqueueing scripts in the head and the links to the css files....
I really want to learn to work directly with jQuery widgets inside WordPress because outside it, it is so useful. Any help would be appreciated.
Example From:
----------------------------------------<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>accordion demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> </head> <body> <div id="accordion"> <h3>Section 1</h3> <div> Mauris mauris ante, blandit et, ultrices a, suscipit eget. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. </div> <h3>Section 2</h3> <div> Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit, faucibus interdum tellus libero ac justo. </div> <h3>Section 3</h3> <div> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.Phasellus pellentesque purus in massa. <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> <script> $( "#accordion" ).accordion(); </script> </body> </html>Hi,
That's not exactly a Genesis question, but I happen to use that stuff regularly. I saw one thing right away that looked odd, but apparently will still run - not identifying your script as Javascript. So that's something I learned today. 🙂 You are loading jQuery, so that's cool.BUT... I think you'll get better results by doing this instead. Just a bit more code than you have:
<script type="text/javascript"> jQuery(document).ready(function($) { $( "#accordion" ).accordion(); }); </script>btw, I think this is a nice way to package up all that stuff. I use it regularly:
Then you don't have to hack templates, and can use plain HTML to make the interface things happen with a few judiciously placed ID's/classes.Cheers, Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
Hi David,
Thank you for your quick response 🙂 I don't have jQuery working for me.
That example I posted is just a plain stand-alone html page. It works outside WordPress just fine. My goal is to get this to work when I put this in a page. (Now I am using my own accordion script. Not as pretty.)
I tried that "jQuery UI Widgets" plugin but was not able to get it to work. Just as your code. So it's got to be me. I know that jquery involves including css files and I have done nothing there. I think that's where my missing piece is.
I tried putting in the script field. Nothing. No error. The backstretch plugin works, so maybe I should see how.
I'm probably in over my head, but those jQuery UI widgets are worth stretching for.
- Sheryl
There are a lot of moving parts to these things. The plugin I mentioned pulls in its own CSS for you, so the problem does likely lie somewhere else. And it's worth keeping in mind that many things that jQuery does involve interacting with your site's HTML and CSS, but some of its features may not require any of its own CSS to be imported.
Good luck! Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
- The forum ‘General Discussion’ is closed to new topics and replies.