Gallery | Positioning | BG color Probs with IE 6-8

  • atlite
  • Topic Author
  • Visitor
  • Visitor
13 years 5 months ago - 13 years 5 months ago #9793 by atlite
Have found that a site (atlite.com.au) using Hot_Mobility in IE (6 and 8) has some problems that are not present when viewing the same pages with Firefox....

1. Does not display the gallery component as configured (images with titles), just a grey strip with left and right arrows that do nothing. With no text data defined for in the gallery, the images display OK. If there is data to display we get no image, no data and a couple of nav buttons. Check teh site home page in FF and IE 8 for the difference.

2. The right column displays below the main content panel. This only occurs when the right column contains an image that is too big for the column width. In FF the image just runs over the right-hand column edge. In IE6 it forces the entire column content down below the main body panel. In IE 8 it is OK. NFA.

3. Background is bright blue. Should be transparent.

I have tracked this to an inconsistency in Mobility's parameters is that the Background Image >> Background Colour value cannot include a "#" , it is automatically placed by Mobility. This is inconsistent with all other colour parameter fields with require "#xxxxxx".

This explains problem No 3 as IE interprets "#transparent" as "#0000e0" (blue). FF has no problems with #transparent. This needs template attention.

We'll ignore IE 6 problems as no-one should be using it and fixes for it are a waste of time.

Really just need guidance on getting Gallery to work with IE 8 and data please.
Last edit: 13 years 5 months ago by atlite. Reason: Update info

Please Log in to join the conversation.

More
13 years 5 months ago #9796 by ivan.milic
Hi,

for slight blue background of main content you can use template parameter "Main Area BG" to change it.

for other problems try updating jQuery. See below text:

Good practice is to disable JQuery in all modules and then in index.php of template in head section add manually reference to .


Latest version of jQuery you can download from jquery.com , link is jqueryui.com/download .
You can copy files from package to <template folder>/js/

There are 2 script and one css reference:

<link href="<???path???>/jquery-ui-1.x.xx.custom.css" rel="stylesheet" type="text/css" />

<script src="<???path???>/jquery-1.x.x.min.js" type="text/javascript" />
<script src="<???path???>/jquery-ui-1.x.xx.min.js" type="text/javascript"/>

Go to Module manager open module by bodule and whereerver you see "Load JQuery" (this name can differ form case to case ) property disable it.
Then also go to plugin manager and do that also.

Then open index.php of template and check if there is already reference there. If yes you can just modify it to reference new files you downloaded or delete it and put above 3 reference lines in that order as much close to begining of <head> section as it can be.


To chack you have one and only exactly one reference use "View source" option of your browser when you go to your site. js. References can sometimes be in place where module is rendered so you need to check all source. Easiest way is to text-serach "jquery" in page's source.

Please Log in to join the conversation.

  • atlite
  • Topic Author
  • Visitor
  • Visitor
13 years 5 months ago #9855 by atlite
Thanks for the tips.

I got the latest jQuery and installed as per your instructions. Still not improvement.

Next I uninstalled Hot Joomla Gallery module that came with the template, downloaded the gallery extension specifically from this site and installed again. Success. Everythnng is working in FF and IE. Thanks you.

Curiously the old and new Gallery modules have the same version number (1.0) but a different set of parameters when configuring in Joomla.

The new jQuery js files are now a monstrous load however as they include all the jQuery components. I will need to trim this down. I guess for Gallery module I will need:
* Core
* Position
* Effect - Slide
* Effect - Fade

Anything else required for Gallery?

***

To help others checking this tread...

The positioning problem in Mobility right colour applied only to IE6 and I decided not to bother pursuing it any further. IE8 handles incorrectly sized images more graciously.

Background color in Mobility is still flawed. The Background Image > Background color field in Parameters adds a '#' to any value placed in it, unlike the other Parameter color fields. This is OK when you know and wish to use a RGB colour value. However is you wish to use the value 'transparent' is ends up in HTML as '#transparent' which may not be interpreted as you intend by all browsers. I can't find where this can be fixed in the code.

Please Log in to join the conversation.

  • atlite
  • Topic Author
  • Visitor
  • Visitor
13 years 4 months ago #10252 by atlite
Further to the background color issue. The point is I want the colour to be the value that I key into the template parameter. For page background, the template is includes an additional "#" character.

In the 1.5 template version I simply entered the background color value without the "#" and it is accepted OK.

In the 1.6/7 template version, it is not possible to leave out the "#". It is added to the field entry dynamically and saved.

The effect of a double "#" in the background color value depends on the browser. Usually looks good on mine and wrong on my client's browser.

I found that a "#" is hardcoded into the background color value on teh template index page. The fix is to edit /templates/hot_mobility/index.php, line 226

Change
Code:
bgcolor="#<?php echo $backgroundColor; ?>
to
Code:
bgcolor="<?php echo $backgroundColor; ?>

Hope this helps someone else.

Developers - Worth fixing in the distribution template.

Please Log in to join the conversation.

Time to create page: 0.150 seconds
Powered by Kunena Forum