Jump to:

1842 Posts in 1600 Topics by 558 members

Blog Module

SilverStripe Forums » Blog Module » jquery and blog entry page problem

Discuss the Blog Module.

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

Page: 1
Go to End
Author Topic: 981 Views
  • zim
    Avatar
    Community Member
    135 Posts

    jquery and blog entry page problem Link to this post

    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?

  • zim
    Avatar
    Community Member
    135 Posts

    Re: jquery and blog entry page problem Link to this post

    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>

  • Bstarr
    Avatar
    Community Member
    25 Posts

    Re: jquery and blog entry page problem Link to this post

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

  • Invader_Zim
    Avatar
    Community Member
    141 Posts

    Re: jquery and blog entry page problem Link to this post

    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

  • Bstarr
    Avatar
    Community Member
    25 Posts

    Re: jquery and blog entry page problem Link to this post

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

    981 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.