Jquiry and CSS conflict

[Bryguth3]

:mad:I am currently trying to incorporate an existing Slideshow into and already pre-built template. I know that I have conflicting style-sheets and have to consolidate them but for some reason or other its been a pretty solid nightmare. I have had success from this forum before so I figured I give it a try once again.

This is what needs to be put in:
http://www.beantownfx.com/websites/ams/slider1/

Here is where I'm at an old west show-down:
http://www.beantownfx.com/websites/ams_revised/

Attached are the style-sheets, the two used on the current site (layout.css & style.css) & the working ones (layout_slide.css & style_slide.css) Had to zip them because its four files.

I feel like I'm pretty close but just can't get over the hump. Any and all help will be greatly appreciated

[jscheuer1]

There could also be other problems. But on the arms_revised/ page there's a typo in the script call:


<script>$(document).ready(function(){
$('#slideshow').cycle({
fx: 'wipe',
timeout: 5000, // milliseconds between slide transitions (0 to disable auto advance)
speed: 1000, // speed of the transition (any valid fx speed value)
pager: '.pagination', // selector for element to use as pager container
activePagerClass: 'active' // class name used for the active pager link});
});
</script>

should be:


<script>$(document).ready(function(){
$('#slideshow').cycle({
fx: 'wipe',
timeout: 5000, // milliseconds between slide transitions (0 to disable auto advance)
speed: 1000, // speed of the transition (any valid fx speed value)
pager: '.pagination', // selector for element to use as pager container
activePagerClass: 'active' // class name used for the active pager link
});
});
</script>

[Bryguth3]

Took care of that change with not much success. Thanks for the quick response.

[traq]

that's a lot of css to go through, but what exactly do you think the conflicts are?

to start with, javascript cannot "conflict" with css. they don't interact. the javascript might be overwriting some of your css rules (it shouldn't be, if it's well-written - i.e., if it generates css rules, they should target #slideshow element .class{}, so they only affect elements inside the #slideshow div).

If you have a more specific question, we could probably offer some further help. If you want someone to do this for you, you might post in the Paid Help forum.

[Bryguth3]

Adrian,
I have been up and down this code and can't seem to figure out why the slideshow isn't even playing within the template. I totally agree with you about the script working properly if is was written correctly but unfortunately I purchased this script off of Monster template. When I asked them for simple support, ie changing the transition they sent me to a place to rebuild. I actually did go in and reorganize the code. I would have no problem paying someone to do it but I'm going to build something I like to know the bells and whistles. I do appreciate the feedback. What do you suggest?

[traq]

is js/jquery.cycle.all.latest.js the script that runs the slideshow? I don't see that call in the markup on your non-working page.

beyond that, since the slider works on its own, start building the page around it (e.g., add stylesheets, other scripts, and html markup one at a time). When it stops working, you know where to start looking for the problem.

if you still have problems, you'll need to describe, more specifically, what isn't working. You've shared lots of code, but haven't really given us many details to go on.

1) What is wrong (specifically - what javascript is giving errors, what css is not having the desired effect, etc.)?

2) What have you tried to do (anything that helped, and anything that didn't, including what effect it had)?

[jscheuer1]

Took care of that change with not much success. Thanks for the quick response.

I did say there could be other problems. There is at least one and there could be more. That (from my previous post) had to be fixed before it became easy to spot the next one which is, like Adrian said, that the cycle script isn't associated with the page.

On the page that works there's:


<script src="js/jquery.cycle.all.latest.js" type="text/javascript"></script>

On the page (arms_revised/) that doesn't, there's not.

Just make sure that when you put it on arms_revised/ that the path is correct, looks like arms_revised/ is in a different folder than the working page.

[Bryguth3]

:mad: Those are two great catches John, but no dice. Do you think that it would help if I make the paths to the scripts absolute rather than relative? It really helps having a second set of eyes checking the script.

[jscheuer1]

The path to the cycle script is correct. However, when you added the tag for it, somehow the other problem reverted so that it is once again:


<script>$(document).ready(function(){
$('#slideshow').cycle({
fx: 'wipe',
timeout: 5000, // milliseconds between slide transitions (0 to disable auto advance)
speed: 1000, // speed of the transition (any valid fx speed value)
pager: '.pagination', // selector for element to use as pager container
activePagerClass: 'active' // class name used for the active pager link});
});
</script>

That still needs to be:


<script>$(document).ready(function(){
$('#slideshow').cycle({
fx: 'wipe',
timeout: 5000, // milliseconds between slide transitions (0 to disable auto advance)
speed: 1000, // speed of the transition (any valid fx speed value)
pager: '.pagination', // selector for element to use as pager container
activePagerClass: 'active' // class name used for the active pager link
});
});
</script>

[Bryguth3]

John, again with the excellent set of peeps. I think its because I'm bouncing between work and home that that happen. The script is now running and I definitely think the conflict sits with the css specifically the .p & col tags. I think I'm really close. Thanks again for your help

[jscheuer1]

The col-1 and col-2 widths are too narrow. And something(s) else is off.

Why not just use the css from the working example?

You could add a link to its stylesheet below the other stylesheet links for the page. It's rules should then override the incorrect ones.