Forums

Jquery UI

Permalink
hi i have a problem...
I can't use jQuery UI functions as advanced easing, etc...
my header looks like this:
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('style.css')?>";</style>
   <style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style>
   <?php Loader::element('header_required'); ?>
   <script src="<?=$this->getThemePath()?>/js/menu.js" type="text/javascript"></script> 
</head>


and menu.js like this:

$(document).ready(function() {
   var normalHeight = 68;
   $("nav>ul>li").mouseover(function(event) { 
            var lengthChild = $(this).children('ul').children('li').length;
             var dropHeight = (lengthChild*43)+normalHeight;     
             if (lengthChild>0)
             {
               $(this).stop().animate({height:dropHeight+"px"},{queue:false, duration:300});
            }
   });
   $("nav>ul>li").mouseout(
      function(event) { 
         $(this).stop().delay(1000).animate({height:normalHeight+"px"},{queue:false, duration:1000, easing:easeOutQuad});
   });
});


i have tried different things....
i have also tried to manually add the jQuery UI library with
<script src="<?=$this->getThemePath()?>/js/jquery.ui.js" type="text/javascript"></script>


Maybe i should say that my Firebug Console gives me this:
Uncaught ReferenceError: easeOutQuad is not defined

Please Help
madon
 
madon replied on at Permalink Reply
madon
Maybe i should say that my Firebug Console gives me this
Uncaught ReferenceError: easeOutQuad is not defined
2BitMarv replied on at Permalink Reply
2BitMarv
Hi,

If you try to use your own while being logged in it will fail because it interferes with the internal jquery.ui that is used by C5. The simple way is to embrace it with a

<?php if(!User::isLoggedIn()){ ?>
   <script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/jquery-ui.whatever.js"></script>
<?php } ?>


but after that you will have to do your checkups/development without being logged in.

or you gonna start your own scripts with JQuery in nonconflict() mode, wich recommends a different prefix different from $(...

the most easiest way would be using the JQuery/UI that is given by C5! The only one thing to do is to make it available while being NOT logged in, because when you're logged in it IS available. So use the codesnippet as shown above but with the src path pointing to /concrete/js/jquery.ui.js. But be aware: if you're doing an update to C5 always check out the upcoming ui version. what may now work may result in disfunctions because of version incompatible features in your code!