Javascript not enabled
Permalink
Hi,
I know there has been alot of topics about enabling javascript in concrete5, but after much searching and reading, I have yet to come up with a solution for my problem, so I hope somebody inhere will show me how to get this to work...
I have to add a this function to my site:
http://www.building58.com/examples/tabSlideOut.html...
so I've added the relevant CSS elements in the CSS, the HTML in a HTML block on the site and made a 'slide-out-div.j' file containing the follow:
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: 'http://hamletscenen.hs-k.dk/files/2813/4694/8297/britishflag2.png', //path to the image for the tab *required*
imageHeight: '122px', //height of tab image *required*
imageWidth: '40px', //width of tab image *required*
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
I have placed this file in the JS root folder (but also tried in the theme's JS folder).
And finally this code:
<script type="text/javascript" src="<?=$this->getThemePath()?>/js/slide-out-div.js"></script>
have been pasted in the theme's header.php inside
<?php Loader::element('header_required'); ?>
I can't really figure out what I'm doing wrong :S
I know there has been alot of topics about enabling javascript in concrete5, but after much searching and reading, I have yet to come up with a solution for my problem, so I hope somebody inhere will show me how to get this to work...
I have to add a this function to my site:
http://www.building58.com/examples/tabSlideOut.html...
so I've added the relevant CSS elements in the CSS, the HTML in a HTML block on the site and made a 'slide-out-div.j' file containing the follow:
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: 'http://hamletscenen.hs-k.dk/files/2813/4694/8297/britishflag2.png', //path to the image for the tab *required*
imageHeight: '122px', //height of tab image *required*
imageWidth: '40px', //width of tab image *required*
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
I have placed this file in the JS root folder (but also tried in the theme's JS folder).
And finally this code:
<script type="text/javascript" src="<?=$this->getThemePath()?>/js/slide-out-div.js"></script>
have been pasted in the theme's header.php inside
<?php Loader::element('header_required'); ?>
I can't really figure out what I'm doing wrong :S
Still no reply :S I'm really stuck with implementing customized javascript in concrete5, so any help or tips would be very appreciated :)
Is your site live or reachable so we can have a look at the source?
hamletscenen.hs-k.dk
It is still under active development though, but the javascript part is causing problems :/
It is still under active development though, but the javascript part is causing problems :/
to be more specific, the javascript slider is on this site (test side):
http://hamletscenen.hs-k.dk/index.php?cID=227...
http://hamletscenen.hs-k.dk/index.php?cID=227...
I see the error: "TypeError: $(".slide-out-div").tabSlideOut is not a function".
In your slide-out-div.js wrap your jQuery inside a function like:
You also need to link to the plugin in your <head> section.
Test it and let me know.
In your slide-out-div.js wrap your jQuery inside a function like:
$(function(){ $('.slide-out-div').tabSlideOut({ tabHandle: '.handle', //class of the element that will be your tab pathToTabImage: 'http://hamletscenen.hs-k.dk/files/2813/4694/8297/britishflag2.png', //path to the image for the tab *required* imageHeight: '122px', //height of tab image *required* imageWidth: '40px', //width of tab image *required* tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left speed: 300, //speed of animation action: 'click', //options: 'click' or 'hover', action to trigger animation topPos: '200px', //position from the top fixedPosition: false //options: true makes it stick(fixed position) on scroll }); });
You also need to link to the plugin in your <head> section.
Test it and let me know.
Many thanks :D
When I added that the function part I still didn't work, but then I tried adding:
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
to the header, just below:
<script type="text/javascript" src="<?=$this->getThemePath()?>/js/slide-out-div.js"></script>
And now it seems to work perfectly! You are a saving angel on this one, Adajad!
When I added that the function part I still didn't work, but then I tried adding:
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
to the header, just below:
<script type="text/javascript" src="<?=$this->getThemePath()?>/js/slide-out-div.js"></script>
And now it seems to work perfectly! You are a saving angel on this one, Adajad!
