Images and text of slider are not being processed properly in Mozilla Firefox.
Only the part of image and text are displayed so only 2/3 can be seen.
All other browsers like IE, Opera and Chrome display web site fine.
Please review.
Thanks in advance.

Comments

damiandab’s picture

I had the same issue with firefox under Mac OS, but not always , sometimes is working correctly, other times I see only 2/3 of content, but after refreshing the page it appearing correctly again.

Do you have the same problem after activating the compression for css and javascript under performance settings?

A.L.Denver’s picture

I have the same problem, any fixes? The slideshow does work after I refresh the page.

I have firefox for windows.

Deyan’s picture

I have the same issue. It is very annoying. Any fix to this?

tsikos’s picture

Yep! Just the same also for me!
Works correctly only after a refresh, or just when another page is loaded...

4aron’s picture

I use this theme with all major browsers including FF but I do not get this error.

Can you guys give some more information?

Do you have text on the slider? Can you paste a link of your website showing or a screenshot of your localhost?

tsikos’s picture

The problems exists only if you don't have a text, or the text area is shorter that the height of the image..
In other words, it seems that only the text can "push down" the slideshow area...
In fact, I cheated FF and used more words in order to have it displayed correctly.

4aron’s picture

Yea that's why I asked if they have text and to paste us a link.

I noticed it at first but as my slides have text it didn't cause a problem for me.

Also why would you want there to be no text anyway?

Perhaps a quick fix could be to fill the space up?

If you fill with a long image it shows full like on slide 4 of the demo site.

narus-1’s picture

This theme has lost a lot of value and interest since the slide does not work anymore with Firefox :( .
I'll follow this issue.

gtsopour’s picture

Hello

I've also noticed that sometimes jquery cycle plugin does not calculate correctly the slide's height. Especially, if the slide contains only an image object or only an image object with little text. A simple workaround for this issue and also is implemented to the Corporate Clean demo http://demo.drupalizing.com/?theme=corporateclean is to set to the image objects Only local images are allowed. height Attribute.

<img height="250px" src="/corporateclean/sites/all/themes/corporateclean/mockup/slide-2.jpg" class="masked"> (See height="250px")

You can see the Corporate Clean demo slideshow implementation here http://wiki.morethanthemes.com/index.php?title=Corporate_Clean:Demonstra... (at the bottom of the wiki page).

In cases where Corporate Clean slideshow is generated dynamically (for example from views), you could override the corresponding view template and add the height Attribute to the image object dynamically through php.

Try to see if Only local images are allowed. height Attribute works for you and update this issue with your answers. Futhermore, I will also look into this issue more carefully.

All of the above apply to the concept of "Slide show height is automatically adjusted by each slider’s content". This is the concept that is implemented in the CorporateClean theme now (see template.php file).

drupal_add_js('jQuery(document).ready(function($) {  

$("#slideshow").cycle({
	fx:    "'.$effect.'",
	speed:  "slow",
	timeout: "'.$effect_time.'",
	pager:  "#slider-navigation",
	pagerAnchorBuilder: function(idx, slide) {
		return "#slider-navigation li:eq(" + (idx) + ") a";
	},
	after: onAfter
});

function onAfter(curr, next, opts, fwd){
	var $ht = $(this).height();
	$(this).parent().animate({height: $ht});
}

});',
array('type' => 'inline', 'scope' => 'header', 'weight' => 5)
);

So you can also remove the "after: onAfter" of the cycle method in order to remove the auto height adjustion and set a specific height to the slideshow #slideshow through your style.css.

Thanks
/George

A.L.Denver’s picture

I switched my theme, and hopefully when I have some time I can help debug the theme.

Marc Bijl’s picture

Hmm, same issue here, every now and then...

I'm running Mac Firefox 9.0.1 and have 4 images in a slideshow, without any text. Sometimes the slideshow area 'collapses' at certain slides. After refreshing the page, the 'collapsing' disappears.

In my page.tpl.php I did define the image height:

<img height="300px" class="masked" src="/sites/default/files/diashow/portret-fotografie-simpelveld-nederland-marc-bijl-0802171240-panorama-960x300.jpg"/>

In other browsers (Safari, Chrome) everything seems to be fine.

tecnobox-1’s picture

Priority: Critical » Normal
Issue tags: +text, +slideshow, +banner

Hello i am using corporateclean to build our website and in the banner the text dont appear with accentuation i already try to see the CSS and page.tpl.php since i have to put the content in that file as identify in manual.

Any help resolving this issue?

JV

UPDATE: Dont mind with this issues guys the answer is here http://drupal.org/node/1346512

tecnobox-1’s picture

Priority: Normal » Critical

I think i change the Priority by mistake so i post this to fix it
Sorry .. wrong click :D

ishara’s picture

My site slideshow only have images and there is problem with Firefox, I have fixed it. see code bellow template.php modify onAfter function. see working demo boattuwa.com

function onAfter(curr, next, opts, fwd){
	var $ht = $(this).height();
	if($ht < 100)
	{
	  $ht = 328;
	}
	$(this).parent().animate({height: $ht});
}

Aonoa’s picture

Version: 7.x-1.1 » 7.x-1.4

Hello,

The code from #14 fixed my issues with the slideshow not displaying properly when only using images, even with 7.x-1.4 of the theme.

EDIT: I spoke too soon, I think. It's still not perfect and with Google's Chrome browser it's permanently cutting the images off to match the amount of space the text takes.

Best regards,
Ao

Cyberbohemia’s picture

Hi,
the solution #14 works for me, thank you. You just need to adjust the $ht=328 to fit your needs. Anyway, this bug still needs a solution, as #14 works only correct, if your slides are of the same height.

Greetings from Cyberbohemia

ML’s picture

This bug is very annoying, il tried the workaround but still no luck (Firefox 16.0.1). I hope it will be fixed in the upcoming Corporate Clean 7.x-2.0

gtsopour’s picture

Version: 7.x-1.4 » 7.x-1.5
Component: User interface » Code
Issue tags: -text +Corporate Clean Slideshow
gtsopour’s picture

Title: Images and text of slider are not being processed properly in Mozilla Firefox » Images and text of slider are not being processed properly
Status: Active » Fixed

Hello,
it seems that this issue has been resolved. I have also checked this with latest Chrome, latest Firefox and IE 7-8-9 browsers. The solution was based on the following issues/changes. All these changes will be included in the next Corporate Clean release 7.x-1.6 (will be released at the end of this week) and in the next Corporate Clean release 7.x-2.0 with responsive layout (will be released at the end of the next week) - http://drupal.org/node/1655120.

Corporate Clean issues/changes

Custom implementation

In any case, if you want to implement these changes to your existing Drupal installations, just make the following changes.

1. Edit your style.css (sites/all/themes/corporateclean/style.css)

Change from
#slideshow { display:block; position:relative; overflow: hidden; width: 100% !important; background:transparent; }

To

#slideshow { display:none; position:relative; overflow: hidden; width: 100% !important; background:transparent; }

#slideshow img { display:none; }

Also change from
#slider-controls-wrapper { width:960px; margin:0 auto; padding:20px 0; display:block; }

To
#slider-controls-wrapper { width:960px; margin:0 auto; padding:20px 0; display:none; }

2. Edit your template.php (sites/all/themes/corporateclean/template.php)

Change from

drupal_add_js('jQuery(document).ready(function($) {  

$("#slideshow").cycle({
fx:    "'.$effect.'",
speed:  "slow",
timeout: "'.$effect_time.'",
pager:  "#slider-navigation",
pagerAnchorBuilder: function(idx, slide) {
return "#slider-navigation li:eq(" + (idx) + ") a";
},
height: 300,
after: onAfter
});

function onAfter(curr, next, opts, fwd){
var $ht = $(this).height();
$(this).parent().animate({height: $ht});
}

});',
array('type' => 'inline', 'scope' => 'header', 'weight' => 5)
);

To

drupal_add_js('jQuery(document).ready(function($) { 

$(window).load(function() {

$("#slideshow img").show();
$("#slideshow").fadeIn("slow");
$("#slider-controls-wrapper").fadeIn("slow");

$("#slideshow").cycle({
fx:    "'.$effect.'",
speed:  "slow",
timeout: "'.$effect_time.'",
pager:  "#slider-navigation",
pagerAnchorBuilder: function(idx, slide) {
return "#slider-navigation li:eq(" + (idx) + ") a";
},
after: onAfter
});
});

function onAfter(curr, next, opts, fwd){
var $ht = $(this).height();
$(this).parent().animate({height: $ht});
}

});',
array('type' => 'inline', 'scope' => 'header', 'weight' => 5)
);

In addition, now it is safe to remove any custom height from images inside your slideshow (page.tpl.php). Please report back any strange behavior.

Thank you for supporting Corporate Clean theme
/George

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

dunderjeep’s picture

Hi,
CorporateClean is great - just this minor issue with Firefox.
I tried the steps listed above and #14's solution, yet images without text on the slideshow are still rendered humongous.
http://medib.cs.queensu.ca/
I would like to avoid resizing the original images if possible.
Using corporateclean 7-x-2.2, on Ubuntu.