Item12726: Tooltip from attachments search box shows at top of page

Hopefully this is the right extension to log this under. Not sure if it should be logged as a JQueryPlugin issue instead - or if it's a problem with JQuery itself, or NatSkin.

When viewing pages with attachments using NatSkin + TopicInteractionPlugin, I found that the tooltip for the attachments search box with text "Enter a search pattern to filter the list of attachments" displays at the top of the page and stays there - even though I haven't even displayed the attachment options or clicked or hovered over that box. I found an easy fix/workaround though - as long as you are using a newer browser. All I had to do was to change the JQuery version in the JQueryPlugin settings in configure to 1.9.1 or higher.

Unfortunately, this workaround/fix didn't work when I used IE8 as a browser, but seems to work fine for IE10. I don't have IE9 installed anywhere and using a Browser Mode setting of IE8 from inside IE10 doesn't seem to allow me to reproduce the problem - so I guess you need a real IE8 and not an emulated one to reproduce it there. I'm already declaring IE8 as deprecated under the NatSkin configure settings, so I'm okay with the error if it only happens in IE8.

Since the default JQuery version is 1.8.3 it seems other users may run into this too.

By the way, do you recommend a particular JQuery version? Should I use the highest version that seems to work - assuming I'm okay to require users to use newer browsers?

-- LeilaPearson - 21 Jan 2014

I found a VM with IE9 installed, and verified that the problem doesn't happen there (as long as the JQuery version is 1.9.1 or higher).

-- LeilaPearson - 21 Jan 2014

There is another problem with IE9 though, displaying what looks like html comments on every page:

<!--[if IE]><![endif]-->

Otherwise at a glance it looks okay.

-- LeilaPearson - 21 Jan 2014

Yes, I've seen that as well and dedicated it to the fact that the list of attachments is loaded async'ly. Somehow the tooltip library or merely the positioning part of it (which is down in jquery.ui) isn't able to place the tooltip correctly.

I'd like to deprecate IE8 as well, though some organizations are still stuck with it as other critical web systems don't properly work on modern browsers.

The hightest possible jQuery version is the best.

Not seen the if IE html comment for a while. However I might have fixed it accidentally already on the upcoming NatSkin.

Can you repro it on http://demo.michaeldaumconsulting.com?

-- MichaelDaum - 22 Jan 2014

I can reproduce the tooltip issue at http://demo.michaeldaumconsulting.com/Knowledge/AnalyzingMultiDimensionalNetworksWithinMediaWikis in IE8, but I don't see either issue (tooltip or if IE) in IE9, so it does look like you've fixed that one. Is there a patch I can apply, or will the new NatSkin be coming soon?

-- LeilaPearson - 23 Jan 2014

While testing, I did notice that page resizing doesn't work properly in IE8 or IE9. When you shrink your browser window, the content area doesn't resize and you can't see content to the right (including the right bar). This is reproducible both on your site and on mine.

It does work better in IE10 but it still isn't perfect there. At some window sizes, part of the right bar is covered up. I could only reproduce this on my site though. I do have quite a lot of tabs in my top menu bar though that extend over the right bar at many window sizes, so that may be a contributing factor. If you can test with standard jazzynote and a lot of top menu items then you may be able to reproduce it too, or it may be fixed.

-- LeilaPearson - 23 Jan 2014

The sidebar is hidden below a certain breakpoint and there is a toggle displayed at the top right to slide in the hidden sidebar on small screens. Is that what you are refering to?

This is done using media queries ... which isn't supported by IE8. It should simply ignore resizing the content then...

Btw. how about a screenshot showing the problem

-- MichaelDaum - 23 Jan 2014

Actually, no. Though I was going to mention that I like this new feature. It was on my list to take a look at optimizing the layout for small screen sizes. Will this be included as part of the next NatSkin release?

Now that I retest, you're right. This is only happening in IE8. IE9 seems fine. I was remotely connected to my main machine, and remotely connected from that machine to the machine with IE9 and must have grabbed the wrong window border when resizing. IE9 looks good, and I can't reproduce the IE10 problem I mentioned either. That one may have been related to slower screen updates when remotely connected over the WAN. I'm connected over a LAN now. So it looks like both IE9 and IE10 are fine, as you expected.

-- LeilaPearson - 23 Jan 2014

Great. Yes, the feature will be part of the next NatSkin release.

-- MichaelDaum - 23 Jan 2014

By the way, I tried to register on your demo site, but never received my account confirmation code. The email address I supplied looks correct. Is this expected?

-- LeilaPearson - 23 Jan 2014

Registration has been emailed to your gmail.com mail account ... checked the spam folder?

-- MichaelDaum - 24 Jan 2014

Oops. Yes, it was in the spam folder. Thanks.

-- LeilaPearson - 24 Jan 2014

Can we close this task or is there anything we can do to mitigate old IEs?

-- MichaelDaum - 24 Jan 2014

The only thing I'd suggest is an update to the documentation to describe which JQuery versions are recommended:

• The latest 2.x JQuery for newer browsers.
• The latest 1.x JQuery for older browsers.

Not sure where the best place is to put this documentation - perhaps as part of the installation instructions for NatSkin and TopicInteraction plugin?

The tooltip issue occurs in all browsers and is pretty annoying if you don't make this change, and it isn't obvious how to fix it.

The default JQuery version doesn't work in this case. Another option would be to upgrade the default JQuery version I guess. Not sure why 1.8.3 is the current default.

-- LeilaPearson - 24 Jan 2014

Okay, I'll check the different versions. For now I've started working on Item12734 to add the latest jquery&jquery-ui ... and default to the latest jquery instead of some outdated ... and probably incompatible/buggy jquery release ... which should be removed once shipping foswiki-1.2.0, imho.

-- MichaelDaum - 25 Jan 2014

I had exactly the same problem. Changing "Jquery version" in configure did solve the problem. However, the imageGalleryPlugin does not work properly anymore:

- with Jqueryversion 1.83 I get:

foreground: an Image with a description(name + image 1 of 20) and a close button

background: a layer with opacity 0.8

Tooltip at the top of the page

- with Jqueryversion > 1.83 (i tried all I have from up to 2.0.2):

FOREGROUND: a layer with opacity 0.8

background: an Image with a description(name + image 1 of 20) WITHOUT a close button

No tooltip at the top of the page

I am using foswiki 1.1.9, ImageGalleryPlugin 6.11, jQueryPlugin 4.91. ImageGalleryPlugin is configured to use Image::Magick.

No error/warning messages in /foswikipath/working/logs or in the server. All dependencies are ok.

Any ideas?

-- SergioNogales - 13 Mar 2014

Confirmed. This is a bug in slimbox being shipped with JQueryPlugin. This is already fixed in trunk and will be released soon. In the meantime you may install JQPrettyPhotoContrib as an alternative lightbox client that ImageGalleryPlugin and TopicInteractionPlugin will pick up if installed.

-- MichaelDaum - 14 Mar 2014

This doesn't work for me. I installed JQPrettyPhotoContrib manually but ImageGalleryPlugin does not use it.

Altough I did not change anything in configure. JQPrettyPhotoContrib is in installedPlugins under Skins. Additionally I can see {JQueryPlugin}{Plugins}{PrettyPhoto}{Enabled} in configure, and yes, it is on.

output of perl working/configure/pkgdata/JQPrettyPhotoContrib_installer dependencies is ok . Same for ImageGallery_installer

perl working/configure/pkgdata/TopicInteractionPlugin_installer dependencies:

syntax error at lib/Foswiki/Contrib/JQPrettyPhotoContrib.pm line 42, near "require Foswiki::Plugins::JQueryPlugin (" Compilation failed in require at (eval 189) line 3.

lines 41-44 from lib/Foswiki/Contrib/JQPrettyPhotoContrib.pm:

sub init {

require Foswiki::Plugins::JQueryPlugin ();

Foswiki::Plugins::JQueryPlugin::registerPlugin("PrettyPhoto", "Foswiki::Contrib::JQPrettyPhotoContrib::Core");

}

-- SergioNogales - 14 Mar 2014

After installation of FastCGI, ImageGallery works.

The frame around the pictures changed, and now it looks exactly like in http://demo.michaeldaumconsulting.com. There are more buttons and there is not a "close" but a "x"

The syntax error is still there

-- SergioNogales - 14 Mar 2014

The compilation error happens due to a syntax glitch also found in other contribs and being fixed as part of Item12784

-- MichaelDaum - 15 Mar 2014

TopicInteractionPlugin automatically grabs the focus when loading the list of attachments async'ly. That's not desirable, not only as it triggers the tooltip to show up, not even when the tooltip was in the right position.

-- MichaelDaum - 28 May 2014

For anyone looking for a quick fix: update TopicInteractionPlugin to 3.52 or higher.

-- OlivierCroquette - 30 Jun 2014

Commenting is disabled while not logged in