Search code examples
jquerypluginstoggleeasing

iToggle for jQuery : Not working Properly

i am trying to use jQuery iToggle Plugin for one of my projects. But it does not seem to work correctly. Let's get to the code first, then i'd explain the problems.

The HTML <head> section ::

<link rel="stylesheet" href="http://localhost/projects/mythadmin/wp-admin/load-styles.php?c=1&amp;dir=ltr&amp;load=admin-bar,wp-admin&amp;ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="thickbox-css" href="http://localhost/projects/mythadmin/wp-includes/js/thickbox/thickbox.css?ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="myth_admin_stylesheet-css" href="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/css/mythadmin.css?ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="myth_itoggle_stylesheet-css" href="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/css/engage.itoggle.css?ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="myth_admin_colorpicker_stylesheet-css" href="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/colorpicker/css/colorpicker.css?ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="colors-css" href="http://localhost/projects/mythadmin/wp-admin/css/colors-fresh.css?ver=3.4.2" type="text/css" media="all">
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-admin/load-scripts.php?c=1&amp;load=jquery,utils&amp;ver=3.4.2"></script>
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/js/jquery.easing.js?ver=3.4.2"></script>
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/colorpicker/js/colorpicker.js?ver=3.4.2"></script>
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/js/engage.itoggle.js?ver=3.4.2"></script>
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/js/mythadmin.js?ver=3.4.2"></script>

Here All the Files are being loaded properly without any 404s.

The HTML body::

<div class="myth_option_container toggle">
    <label for="test_cb">Test Checkbox</label>
    <input type="checkbox" id="test_cb" name="test_cb">
</div>

Calling the iToggle function

$(document).ready(function(){
   // Initialize iToggle Checkboxes
   $('input#test_cb').iToggle({
        easing: 'easeOutExpo',
        speed: 300
    });
});

The above code is being called from the mythadmin.js file which is included in the end in the head section.

This does not seem to work at all, i have no errors in the console, all files are being loaded properly but i am not able to see the toggle button.

Though if i target the input's parent container, i am able to see the toggle box and switch it on and off but without the easing effect (for some reason).

So say if i change $('input#test_cb') to $('div.toggle') it works (with no easing effect at all).

Questions:

  1. Why does this not work when i bind it directly to a checkbox input.
  2. Why is the easing effect not working even when easing.js is being loaded properly.

Thanks in advance for your time and help !

Solution

  • Having the same problem here. Try older version of jQuery (1.4.2-min) and it works fine... doesn't seem to work well with 1.8.2 though...

    EDITED: iToogle < this version of iToggle should work with newer versions of jQuery.