[SOLVED] jQuery EasySlider works ok in IE and Opera problem with div on FF,

[TJ2010]

Hi I have been using CMS for a short time and I love it. I have implemented jquery scripts in it before without issue....until now!

I am trying to insert EasySlider and as the title suggests all is not well in FF, Chrome and Safari PC & Mac (although iPhone ok!)

In FF if I ctrl F5 sometimes it is ok but not for long....if that is any clue for someone?

If someone could please point me in the right direction that would be great as I have tried various jquery sliders and they all come up with the same problems.

I assume, somewhere, I'm either missing something in the CSS or it is to do with it being within the CMS (they work fine outside of CMS so I'm assuming this) but I'm at a loss to see what!


I would be so grateful if someone could help.

BTW I have bought the CMS Made Simple book and it has helped immensely so can recommend it.

Thank you

Trevor

[mpww]

What is your version of CMSMS ?
I have a problem with the jquery overlay script.
It was working fine in CMSMS 1.6.6
with the 1.7 version,  I have a mess with the css in Firefox...!!!

[Dr.CSS]

First thing I notice is that you have at least 3 calls for jQuery which will stop any and all from working...

[TJ2010]

Hi sorry I should have said which version!

I am using 1.7 had no other problems so far and everything has gone fine but then again I have just started out with CMSMS!

Dr CSS could you please enlighten me as to what calls I have that will not work? As well as being new to CMSMS I am even newer to the world of jquery 

Any pointers would be appreciated.

Many thanks

Trevor

[TJ2010]

Actually I really want to use coda-slider so if anyone can point me in the right direction of how to integrate that into CMSMS I would be grateful. I have tried many sliders and all I have a problem with....so know I am doing something fundamentally wrong!

Thanks in advance

Trevor

[Dr.CSS]

Starting at the top...





Pick one, most times it would be the newest version and put it at the top above any scripts that may use it...

[TJ2010]

Thanks DR CSS

If you could please look at the page you will see that I have the coda-slider implemented but in IE it is fine but in FF, Safari it is not. Can you please tell me what I am doing wrong so that the scrollbar appears even though the containing div has:

overflow: hidden;

I have managed to work out the '#' part for the url's but this is just confusing me now

Thanks again.

Trevor

[TJ2010]

I think the jquery calls are correct now so now I just need some advice on why the slider is fine in IE but in all other browsers it has a scrollbar and does not navigate correctly - I assume because the width is wrong. This is strange as the containing div has overflow: hidden; and the coda-slider 2.0 script and CSS are default except for the following:

ul.append('' + $(this).find(settings.panelTitleSelector).text() + '');

changed in jquery.coda-slider-2.0.js to allow navigation....I think correct?

Any ideas guys?

Many thanks

Trevor

[Dr.CSS]

I'm surprised it works at all since you still have 4 calls for jQuery...

.coda-slider-wrapper  overflow:hidden

[TJ2010]

Hi Dr CSS

Thanks for your help with this. I have changed the css but still I get this problem. I am sorry I don't really follow what you mean about me still having 4 calls to jquery. I have a the following:


 
var addthis_config = {ui_header_color: "#4c4c4c",ui_header_background: "#ff6600"}
var addthis_config = {ui_cobrand: "brand"}





animatedcollapse.addDiv('contact', 'fade=0,speed=400,group=links')
animatedcollapse.addDiv('support', 'fade=0,speed=400,group=links,persist=1,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()





$(document).ready(function(){
$('ul.tabNav a').click(function() {
var curChildIndex = $(this).parent().prevAll().length + 1;
$(this).parent().parent().children('.current').removeClass('current');
$(this).parent().addClass('current');
$(this).parent().parent().next('.tabContainer').children('.current').slideUp('fast',function() {
$(this).removeClass('current');
$(this).parent().children('div:nth-child('+curChildIndex+')').slideDown('normal',function() {
$(this).addClass('current');
});
});
return false;
});
});






$().ready(function() {
$('#coda-slider-1').codaSlider();
});



I thought I needed them all. Could you please explain how they should be called as jquery is new to me and I haven't encountered a problem before - perhaps more luck than judgement!

Are you saying that I can delete the 1.3.2 as it is an earlier version of 1.4.2? Sorry if that sounds like a dumb question but I need some clarification on that.

Thanks once again for your help with this, it is appreciated.

Trevor

[TJ2010]

Hi Dr CSS

After your kind suggestions I am still having an issue BUT I have, I think, done what you suggested and cleared out the extra jquery functions calls!

Now I have it working correctly in IE and Opera but in FF, Safari & Chrome it sometimes works and sometimes not.

The issue seems to be that sometimes the navigation starts with what appears to be zero margin and not enough height and other times it is correctly positioned with the 'margin: auto' in CSS.

With no margin it doesn't navigate correctly but with a refresh it seems to 'wake up' and act correctly via CSS and then navigation works.

Could you please take a look at the page designprocess and suggest what may still be the issue?

I thank you so much for your help with this problem.

Trevor

[TJ2010]

Interestingly Opera ignores the 'margin: auto;' but it does work....if that is any clue.

[ironblaze94]

Dr CSS means you are including the jQuery file 4 times on your page when you only need to include it once. Including it 4 times is probably what is giving you issues.

No you do not need them all. The numbers in the file name denote what version it is so keep the highest and chuck the rest.

Yes you can delete 1.3.2.

[TJ2010]

Thanks ironblaze94

I think I have that bit sorted now. Just have one version (1.4.2) of the call now.

The problem now seems to be that it just doesn't work correctly in FF etc but seems ok in IE and Opera...although perhaps this doesn't actually mean it is working correctly! I have this now:




{literal}


$().ready(function() {
$('#coda-slider-1').codaSlider();
});


Do you think that it could still be a jquery call problem or do you think it is CSS related as it seems to be a problem with it not starting in the correct position until a refresh may work and then it will be fine until navigating away and returning.

It's very strange but it's really driving me crazy as I just have no idea what the issue could be.

Any thoughts would be very welcome.

Many thanks

Trevor

[Dr.CSS]

You might want to check validation...

http://validator.w3.org/check?verbose=1 ... process%2F

One thing for sure is you have 2 tags...




And you may want to think about use transitional doc type like what is found in the default templates and move your {metadata} tag above all your JS...