Posts

Showing posts with the label jQuery

How to make jQuery Cycle2 plugin compatible with old Cycle plugin?

Malsup's Cycle2 plugin does not work with old Cycle plugin if both of them are used on the same page. It's because both these plugins use the same cycle() method name. In order to make both of them work on the same page, one of the plugin's cycle() method must be renamed. I tried this with Cycle 2 version 2.1.2 minified production js file and it seems to work fine. If you are using non-minified file, I think the steps will be pretty similar. Follow the steps below. Open up jquery.cycle2.min.js file and replace all "fn.cycle" with "fn.cycle2" and ".cycle(" with ".cycle2(". You don't need to change the class names, etc. If you are initialising the slideshow by invoking the cycle() method in your view or anywhere else, you will need to change the function call too, such as "$('.myslideshow').cycle2()". If you are using additional plugin files of Cycle2, perform find and replace as shown above on each of the ...

Concrete5: ccm-toolbar issue

Issues with ccm-toolbar (the bar that appears in the edit mode with Edit and Dashboard buttons) is mainly due to jQuery conflict when you are using other jQuery plugins. If you see the ccm-toolbar but if the Edit and Dashboard buttons are not there, you can try moving <?php Loader::element('header_required'); ?> right below the opening of the <head> tag and above all calls to javascript. This usually fixes the issue. You usually do not need to include jQuery as it is included by C5 itself. If this does not fix your problem, check for CSS that may be conflicting with the toolbar. Also check for your jQuery scripts that dynamically add/modify html tags. I once had his issue where my dynamic jQuery script was faulty.

Checkbox toggling with jQuery

<input id="mycheckbox" name="mycheckbox" type="checkbox" value="Y" />My Checkbox - click to toggle <div id="mydiv" style="display:none;">This is a div that's to be shown/hidden.</div> $('#mycheckbox').change(function(){ $("#mydiv").slideToggle('slow'); }); if($('#mycheckbox').is(':checked')){ $("#mydiv").slideToggle('slow'); }; Here "mycheckbox" is the checkbox id and "mydiv" is the id of div that you want shown/hidden when toggling the checkbox. See example below: My Checkbox - click to toggle This is a div that's to be shown/hidden.