i am using jquery to prduce a megmenu on my site.
it works fine on all pages except my blogentry pages. where my document.ready function is not being fired. does anyone know why this might be? is there a javascript conflict somewhere?
We've moved the forum!
Please use forum.silverstripe.org for any new questions
(announcement).
The forum archive will stick around, but will be read only.
You can also use our Slack channel
or StackOverflow to ask for help.
Check out our community overview for more options to contribute.
solved this problem.
blog entry pages use prototype. so there was a conflict with jquery library.
you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
I am having this same issue (I think). But I am not as familiar with javascript and pasting your code below as is doesn't work for me. Can you help me make sense of what I need to add? Below is what I have in my header. I don't see a "prototype.js" file.
Blog Entry: http://www.cassiusblueconsulting.com/blog/sample-blog-entry/
Blog: http://www.cassiusblueconsulting.com/blog/
<script type="text/javascript" src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/js/cufon-yui.js"></script>
<script type="text/javascript" src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/js/Neuton_500.font.js"></script>
<script type="text/javascript" src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/js/cufon-replace.js"></script>
<script type="text/javascript" src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/js/jquery.faded.js"></script>
<script type="text/javascript">
$(function(){
$("#faded").faded({
speed: 200,
crossfade: true,
autoplay: 9000,
autorestart: true
});
});
</script>
<!--[if lt IE 7]>
<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
<![endif]-->
<!--[if IE]>
<script type="text/javascript" src="http://www.cassiusblueconsulting.com/themes/cassiusblueco/js/html5.js"></script>
<![endif]-->
Hi Bstarr.
"I don't see a "prototype.js" file."
The Prototype library is included automatically by your comment system.
You can see it when you examine the output code from your website.
This library conflicts with jQuery (so e.g. $('#SomeId') stops working)...
To prevent that you can use zim's (great username btw. :-) ) method like this:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#faded").faded({
speed: 200,
crossfade: true,
autoplay: 9000,
autorestart: true
});
});
</script>But i prever "jquery-no-conflict" like this:
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$("#faded").faded({
speed: 200,
crossfade: true,
autoplay: 9000,
autorestart: true
});
});
})(jQuery);
</script>Hope this helps :-)
More here: http://doc.silverstripe.org/sapphire/en/topics/javascript
Cheers
Christian
That did the trick! Thank you soooooo much! You rock Christian!
