Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Blog Module /

Discuss the Blog Module.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

jquery and blog entry page problem


Reply


5 Posts   1033 Views

Avatar
zim

Community Member, 135 Posts

10 May 2011 at 9:28am

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?

Avatar
zim

Community Member, 135 Posts

10 May 2011 at 9:40am

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>

Avatar
Bstarr

Community Member, 25 Posts

27 May 2011 at 6:50am

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]-->

Avatar
Invader_Zim

Community Member, 141 Posts

27 May 2011 at 7:22am

Edited: 27/05/2011 7:26am

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: [url]http://doc.silverstripe.org/sapphire/en/topics/javascript[/url]

Cheers
Christian

Avatar
Bstarr

Community Member, 25 Posts

27 May 2011 at 7:40am

That did the trick! Thank you soooooo much! You rock Christian!