Linking to jquery script
Permalink
Hi, I have a custom jquery slider that I want to introduce on my home page but i'm not sure how to get it working. I have added the html code to the html block and then in the elements>header.php file added this code...
I have tried the paths to the jquery set to both relative and absolute but the sliding effect won't work. Could somebody please point me in the right direction!!
NOTE: ABOVE CODE IS ALL MESSED UP FOR SOME REASON!! It is fine when I copy and paste it into the post/edit box but adds some messy code when I publish the post.
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <!-- Site Header Content //--> <style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('main.css')?>";</style> <style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style> <style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('slider.css')?>";</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="http://www.abovecreative.co.uk/js/jquery.easing.1.2.js"></script> <script type="text/javascript" src="http://www.abovecreative.co.uk/js/jquery.anythingslider.js" charset="utf-8"></script> <script type="text/javascript" src="http://www.abovecreative.co.uk/js/slidercontrol.js"></script> <?php Loader::element('header_required');
Viewing 15 lines of 18 lines. View entire code block.
I have tried the paths to the jquery set to both relative and absolute but the sliding effect won't work. Could somebody please point me in the right direction!!
NOTE: ABOVE CODE IS ALL MESSED UP FOR SOME REASON!! It is fine when I copy and paste it into the post/edit box but adds some messy code when I publish the post.
Why are we @importing everything to do with css, seems uneeded imo ? Also your syntax for importing the scripts is either really horribly mangled or it's a method I have never seen before. You need to get rid of all those a links. like below, and make sure it is in between the <head></head> tags.
Hi, I am just using the standard concrete5 header.php that gets called from the themes element folder. Not touched the css import, that is how it appears (apart from the one I added to the slider.css).
Not sure whats happened to the pasted code, thats not how it appears in the file (it does look all mangled!!) I have attached a screen grab of the actual file and will try and copy and paste the correct code.
Not sure whats happened to the pasted code, thats not how it appears in the file (it does look all mangled!!) I have attached a screen grab of the actual file and will try and copy and paste the correct code.
<head>
<!-- Site Header Content //-->
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('main.css')?>";</style>
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style>
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('slider.css')?>";</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.abovecreative.co.uk/js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="http://www.abovecreative.co.uk/js/jquery.anythingslider.js" charset="utf-8"></script>
<script type="text/javascript" src="http://www.abovecreative.co.uk/js/slidercontrol.js"></script>
<?php
Loader::element('header_required');
?>
</head>
<!-- Site Header Content //-->
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('main.css')?>";</style>
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style>
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('slider.css')?>";</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.abovecreative.co.uk/js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="http://www.abovecreative.co.uk/js/jquery.anythingslider.js" charset="utf-8"></script>
<script type="text/javascript" src="http://www.abovecreative.co.uk/js/slidercontrol.js"></script>
<?php
Loader::element('header_required');
?>
</head>
Try checking your paths again, I get a 404 when I try to directly pull the js files down. Make sure the case is right on everything if you are on a linux/unix host. Never mind you just have the wrong paths on the forum.
and I see what you are talking about, the code block mangled my version of the code to, sorry I didn't see that when I posted it this morning.
This might give you a clue though, If you look at the your page source you will notice that Jquery is already being sourced and used by concrete. Maybe you can try dumping your jquery.min source
I also see that this is in the demo code for the slider. It is part of the header.
<script type="text/javascript">
function formatText(index, panel) {
return index + "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Go", // Start text
stopText: "Stop", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});
$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6);
});
});
</script>
and I see what you are talking about, the code block mangled my version of the code to, sorry I didn't see that when I posted it this morning.
This might give you a clue though, If you look at the your page source you will notice that Jquery is already being sourced and used by concrete. Maybe you can try dumping your jquery.min source
I also see that this is in the demo code for the slider. It is part of the header.
<script type="text/javascript">
function formatText(index, panel) {
return index + "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Go", // Start text
stopText: "Stop", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});
$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6);
});
});
</script>
Sorry that was me fiddling around moving the files, I have actually fixed it now. I simply removed <?php
Loader::element('header_required');
?> from the header.php file. Phew, pleased it was that simple.
Cheers for replying though.
Loader::element('header_required');
?> from the header.php file. Phew, pleased it was that simple.
Cheers for replying though.
I suspect, it was caused by the fact that concrete loads in jquery, as it uses jquery itself, though I might be wrong.
Looks great by the way.
Looks great by the way.
scrap what I said, shouldn't remove that line as it disables the editing band at the top of the page. Should have guessed that it was there for a reason!!
Your right, there must be a clash with the jquery as I have now buggered up my home page! I thought i'd try adding the head section with the links to the jquery in the html block that I have on the home page. Unfortunately when I now go in to edit the home page its all locked up so now can't remove the offending html block.
Luckily I hadn't really added any content to the site (apart from structure) so if I can't sort it its not the end of the world to reinstall:-(
Your right, there must be a clash with the jquery as I have now buggered up my home page! I thought i'd try adding the head section with the links to the jquery in the html block that I have on the home page. Unfortunately when I now go in to edit the home page its all locked up so now can't remove the offending html block.
Luckily I hadn't really added any content to the site (apart from structure) so if I can't sort it its not the end of the world to reinstall:-(
