Member Avatar for Ramji_1

I have Placed a jquery drag and drop example in joomla article. It's working properly with firefox browser but not working in chrome browser. In chrome, actually drag and drop is working but problem is that buttons are not visible on dragging.

Here's link to my example -

Here's My fiddle - http://jsfiddle.net/dB3B6/

Here's the screenshot of my problem for chrome - http://screencast.com/t/eFqhUUoYY
for firefox - http://screencast.com/t/vZPvto3x

please Help.

Regards.

  • 2 Contributors
  • 2 Replies
  • 521 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by sachin_2

Dani AI

Generated

correctly identified this as a regression in jQuery UI 1.10.3 (the draggable offset/scroll problem). The underlying bug was tracked in the jQuery UI tracker and is tied to how scroll offsets were cached in 1.10.3; the project marked it for the 1.11.x line. (bugs.jqueryui.com) (jQuery UI ticket #9315).

If changing the jQuery UI version site-wide is not convenient, try a local workaround first: make the draggable use a cloned helper appended to the page body so it is not clipped or mispositioned by scrolling/overflow. This often fixes “invisible buttons while dragging” without touching core libraries. Example:

jQuery('.your-draggable').draggable({
  helper: 'clone',
  appendTo: 'body',
  scroll: false
});

This pattern (helper + appendTo) is a common fix for overflow/clipping issues. (stackoverflow.com)

If you do want to downgrade to 1.10.2 (as did), two safe approaches in Joomla are:

  • Use an extension that manages jQuery/jQuery UI versions (recommended). Install a plugin such as “jQuery Easy” and select jQuery UI 1.10.2 (or provide a custom path). It removes duplicates and injects the chosen library in the right order. (extensions.joomla.org)

  • Manually replace the script in your template (advanced). Remove the bundled jQuery UI entry from the document head and add the 1.10.2 files from a CDN or your template. Example (put in your template PHP or a system plugin):

<?php
$doc = JFactory::getDocument();
$head = $doc->getHeadData();
unset($head['scripts'][JURI::root(true) . '/media/jui/js/jquery-ui.min.js']);
$doc->setHeadData($head);
$doc->addScript('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js');
?>

Use Joomla’s head API when editing head entries. (itoctopus.com)

Download or CDN links for 1.10.2 are available from the hosted libraries (Google/Microsoft CDNs). Test thoroughly after any change (clear Joomla and browser caches, check for duplicate jQuery/jQuery-UI loads, and verify other extensions still work). If possible, plan to upgrade to a fixed jQuery UI release (1.11.x or later) once compatibility is confirmed. (learn.microsoft.com)

Member Avatar for sachin_2

how to do this downgrade jQuery-ui to 1.10.2

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.