reference jquery file in /concrete/js/ directory

Permalink 1 user found helpful
What's the path info to reference an existing jquery file? I'm trying to use a jquery.min needed file, but it conflicts, so I wanted to try and use the existing jquery file.

Tags:

, jquery, Javascript, OpenID, libraries
Deladroid
View Replies: View Best Answer
Deladroid replied on at Permalink Reply
Deladroid
Here's my header. As it is here, clicking on "Edit Page" does nothing, and it seems like the jquery.js file isn't loading. Help?

Note: the cycle script works for my image slider...

<?php   defined('C5_EXECUTE') or die("Access Denied."); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('menu.css')?>" />
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<!-- NEED TO FIND THE PATH TO THE CONCRETE5 JS JQUERY //-->
<script type="text/javascript" src="<?=$this->getThemePath()?>/jquery.js"></script>
<script type="text/javascript" src="<?=$this->getThemePath()?>/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="<?=$this->getThemePath()?>/menu.js"></script>
<?php  Loader::element('header_required'); ?>
</head>
riotaj replied on at Permalink Reply
riotaj
jQuery is already loaded on every page by default. You don't need to reference it specifically. Just put whatever plugins or scripts you write that use jQuery after header_required and you should be good.

Just as a reference, jQuery is called in the (root)/concrete/elements/header_required.php file. You may override jquery by placing a new version in (root)/js file and calling it jquery.js if you need to. You can also do the same thing for header_required.php.

Hope that helps.

Edit: looking at the code from your head, you should place header_required above any CSS or JS you have created/added.
Deladroid replied on at Permalink Reply
Deladroid
Thank you for your help riotaj. I will try your suggestions.
Deladroid replied on at Permalink Reply
Deladroid
I'm still all confused. I have the code below, with trying to use a scroller carousell, and I don't think this piece of jquery is part of the core? If it is, how do I call the existing jquery so I can use this?

It works like the hundreds of other posts I've searched through, but doesn't load the edit tool bar. I've tried many different ways.

<style type="text/css">td img {display: block;}</style>
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main_new.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography_new.css')?>" /> 
<?php  Loader::element('header_required'); ?>
<script src="<?=$this->getThemePath()?>/jquery-latest.pack.js" type="text/javascript"></script>
<script src="<?=$this->getThemePath()?>/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $(".vert-carousell").jCarouselLite({
      vertical: true,
      hoverPause:true,
      visible: 1,
      auto:500,
      speed:2000
   });
Viewing 15 lines of 18 lines. View entire code block.
riotaj replied on at Permalink Best Answer Reply
riotaj
In that code it looks like you would be loading jQuery twice.

In Concrete5, you have to specifically (with an override in /elements) tell concrete *not* to load jQuery by default. This means that jQuery is loaded on every single page of Concrete5 unless you make the system do otherwise.

Try the following code:

<style type="text/css">td img {display: block;}</style>
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main_new.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography_new.css')?>" /> 
<?php  Loader::element('header_required'); ?>
<script src="<?=$this->getThemePath()?>/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $(".vert-carousell").jCarouselLite({
      vertical: true,
      hoverPause:true,
      visible: 1,
      auto:500,
      speed:2000
   });
   if (o.hoverPause) li.mouseover(function () { ul.stop(); }).mouseout(function () { running = false; go(curr); });
Viewing 15 lines of 17 lines. View entire code block.


As a note, jcarousellite_1.0.1c4.js should be in your theme's root directory (where your main_new.css is, et all).
Deladroid replied on at Permalink Reply
Deladroid
Thanks again! I was able to get this working by just removing the duplicate core jquery reference, and leaving the carousell jquery reference in.
elilu replied on at Permalink Reply
elilu
Hi!
I would like to thank You! I had the same problem as Deladroid and thanks to You it is now fixed. Uff...