jquery in c5 page

Permalink
Hi,

I need to get a jquery 1.4.2 based sliding panel gizmo to work in a c5 page. Can add the html and header content but the result is a page I can no longer edit. Edit and Add button no worky now. Here's what I got so far...http://www.hometek-llc.com/gp/index.php/products/

311Media
 
311Media replied on at Permalink Reply
311Media
Just found easy accordion in the addons so that may work. Still wondering how a jquery widget would work on a c5 page though.
Pritam replied on at Permalink Reply
You need to call the script in your header.php, use the HTML block to add the code snippet, the CSS for the jquery gizmo can be added in the main.CSS
boomgraphics replied on at Permalink Reply
boomgraphics
Hiya, I made an example header.php that has a lot of JS includes.

Compare it with yours and see if you can find your issue:

http://www.concrete5.org/community/forums/themes/header-php-example...

Most of how widgets work is using correct dependencies, correct HTML, and correct folder and file paths. My header example might give you an idea how to make sure your paths and dependencies are lined up properly. The HTML is up to you. :-)

I looked at your site and some of your CSS includes don't have media attributes. I have found that not having those can actually make the browser wonk out and not render the CSS. For regular CSS (ie, your theme main.css file) use media="screen, projection".

Your page is also loading jQuery twice, which will cause conflicts (maybe that's why your widgets aren't working?). C5 loads jQuery already (in the header_required), so you don't need to load it. Just be sure that you are loading your JS that needs jQuery underneath the header_required bit.

Also, I am pretty sure that the HTML block actually adds a div around the HTML you put in there, so to minimize random code, I would edit your theme directly, and put the initialization JS into the header or footer area. JS is usually best loaded right before your </body> tag, so as to decrease the amount of time before content starts appearing to your viewers, but my example header doesn't do this because I wanted to show the code.

I would follow Pritam's advice and try to minimize the number of css includes you have by adding your widget CSS into your main.css file. Make sure to minify as much as possible to save space.

Oops, I think I went off topic...Oh well.
Hope I could help! :-D