Drupal 7 Nivo -- Works only when images are cached in browser.

Hi jfirebau.

Actually, it worked perfectly when I entered your website with both Firefox 4 and Google Chrome on Windows XP.
In Internet Explorer 7, however, it happened like you said.
First time you don't even see the slider. Press refresh and there it is.

Strange, to say the least.

I'm starting now a new project and I'll be using Drupal 7 and Nivo slider.

If I find out anything, I'll let you know.

Cheers-

Hi,
I'm having a similar trouble, especially on google chrome 11 and Safari 5. If my carousel is in a block, then it's not shown correctly. If it's in a page body (i.e. view rendered as page), it works.
Or, if I visit another page with no carousel, then I visit again the page with carousel in a block, it shows correctly.
I tried to play with cache in view, cache for js, cache for css, cache for blocks, but the problem can't be fixed.

Can this problem be related to the way Drupal 7 handles JS and CSS? Any tips?

Thanks.

-ermanno

Hi,
the problem is that JS is run before slides are loaded, so JS doesn't know the size of slides.

I found a solution.
First, give explicit width and height to div.views-nivo-slider in your css.
Then modify views_nivo_slider/views_nivo_slider.js at line 11:
vns.data('hmax', 0).data('wmax', 0);
has to be
vns.data('hmax', vns.height()).data('wmax', vns.width());
So JS now will get the size from CSS.
Please note that if you modify your imagecache preset to output different size for slides, then you'll need to update your css for div.views-nivo-slider.

Then fix line 14 (maybe that is unrelated to this issue, but it seems to me an actual bug):
wmax = (vns.data('wmax') > $(this).width()) ? vns.data('hmax') : $(this).width();
has to be
wmax = (vns.data('wmax') > $(this).width()) ? vns.data('wmax') : $(this).width();

I tried your work around and tested it on another machine afterwards. Same results the slider shows after a reload. check it out here: www.opaque.dk/kib

Hi nihilo,
I can't see anything wrong looking at that website. Nivo Silder loads well.
Slides are a bit streched, if you ask me, but that is not related to this issue.

Did you manage to fix that after posting here?

Greetings.
-ermanno

Actually i just tested it again and now it strangely works. I haven't changed anything since the fix. Hehe and the images were just for testing purposes :P. Thanks for the fix. Now my only probelm is the captions....

This worked for me - just wanted to clarify I had to put !important in my CSS for those styles to work in Webkit browsers.

Thank you very much ermannob!! That worked for me too!!

Hi dragonfighter,
you're welcome!
Anyway I wouldn't flag this issue as "needs review" because what I proposed is a workaround rather than a fix. Having to modify css attributes every time you change imagecache preset is not optimal.
I think this is an issue about how drupal 7 handles javascript code, and maybe the $(document).ready() event. I didn't search for issues about that, maybe there are some.

-ermanno

i do agree, this is only work around, you need to edit to css when you change the imagecache preset or you slide will look stretched.

I change

vns.data('hmax', 0).data('wmax', 0);
to
vns.data('hmax', 400).data('wmax', 900);

400 is my height of imagecache and 900 is width. you have to edit to size that you need.

and also
wmax = (vns.data('wmax') > $(this).width()) ? vns.data('hmax') : $(this).width();
to
wmax = (vns.data('wmax') > $(this).width()) ? vns.data('wmax') : $(this).width();

Flash your cache and view again. This way you don't have to edit the css. This is NOT a fix. you still have to manually edit the size you need. :(

Marked as duplicate of #989410: typo in views_nivo-slider.js

I re-opened this issue because only part of this is a duplicate. #989410: typo in views_nivo-slider.js is the issue about the type, however that patch did not resolve the issue identified in comment #2 above.

I'm currently using the dev version with the typo corrected but am still experiencing the issue in comment #2. I'm about to try the work-around, but as stated earlier, that's just a work-around and not a fix.

2nd issue is duplicate of #1191534: Not working under Webkit (Chrome/Safari) on first load
try out the patch there and report to that thread.

Thanks ckng! I applied the patch provided in that issue and so far haven't had anymore issues with chrome.

Brilliant, thanks ermannob! I came across this issue in Opera and a couple of times it happened in Chrome. The width/height adjustment seemed to fix everything.
- don't forget to add !important next to your CSS in this case.

Change default theme from bartik to other.