Hi

 

I have a horizontal scroller working fine:

 

http://www.acknowledgedtest.info/slider/slider.html

 

But when I've tried to get it into the page I have designed the actual 'scroller' itself isn't there.

 

http://www.acknowledgedtest.info/home-slider.html

 

Anyone one see what I've done wrong here? Maybe I've missed something obvious ?

 

Thanks

 

Ash

If I'm asking a silly question please just tell me, I just can't see it (the problem I mean).

 

Thanks

Initially I was using id=slider and class=slider, but the problem still persists.

I didn't dig very deep, but I have worked with that jquery slider before.

I don't entirely understand where you want it, where it should be, either, so troubleshoot is a little difficult.

 

I am guessing: you have altered the folder structure of the slider, names of css-elements or somesuch, and then missed out on one of the sub-files.

 

That's my first idea anyway.

thanks for reply, I thought it might be a folder issue but can't see where. The scroller just goes under the the three boxes with images then text under as with the first of the 2 example on the original post.

 

The following controls the scroller:

 

 

<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>

<script type="text/javascript">

$(function() {

 

//vars

var conveyor = $(".content-conveyor", $("#sliderContent")),

item = $(".item", $("#sliderContent"));

 

//set length of conveyor

conveyor.css("width", item.length * parseInt(item.css("width")));

 

//config

var sliderOpts = {

max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),

slide: function(e, ui) {

conveyor.css("left", "-" + ui.value + "px");

}

};

 

//create slider

$("#slider").slider(sliderOpts);

});

</script>

the div id #slider is suppose to be where you want your slider to go, instead on your site its a full section with content. Try calling it something else and put the slider div on its own.

and you are getting a javascript error

 

$("#slider").slider is not a function

[break on this error] $("#slider").slider(sliderOpts);

There is <div id="slider"></div> on its own directly above the script that controls the scroller. If I make this <div id="#slider"></div> it now doesn't work on either example?

 

Also Boblet, the script is already

 

//create slider

$("#slider").slider(sliderOpts);

 

Not sure what you mean by error? Is that on both examples

http://www.acknowledgedtest.info/slider/slider.html

 

which seems to work fine, aswell as

 

http://www.acknowledgedtest.info/home-slider.html

 

which of course doesn't ?

 

Thank for the replies so far.

and you are getting a javascript error

 

$("#slider").slider is not a function

[break on this error] $("#slider").slider(sliderOpts);

 

Sorry to be a pain could you explain this please, what should this read?

 

thanks in advance

I am sorry, Acknowledged74, I am no javascript expert; but if you use firebug, you will see that the "proper" site gives you the javascript error i pasted above, but the testsite does not. I worked with this spesific jquery slider some time back, you can see the prototype here. I think I simplified the css as far as I could back then.

 

As far as I can see, both your (different) sliders are div id="slider".

You have altered the original slider from a class to an id, and your other slider is having class=slider. I would imagine this would be bothersome.

If I remember correctly, the css for the jquery-slider is divided in several files, and there just might be something that slipped you by when you altered.

 

Not having the total overview of your folders and alterations, I would try troubleshoot by first commenting out html/css for the "other" slider. Then reload original files, and try the class instead of id. I know this is a brute-force type of troubleshoot and not so elegant, but I find it often saves time for me.

 

Let me know how it goes.

Thanks for your time Boblet, much appreciated.

OK trying something different now, but basically having the same issue?

 

Test version work perfect then once I add it to the actual page with the other scrolling it doesn't work? Is there a fundamental issue that I'm missing here?

 

test : http://www.acknowledgedtest.info/01.html

 

main : http://www.acknowledgedtest.info/home-slider.html

 

I am willing to pay for the answer and to get this to work.

 

Ultimately I don't want next previous and want arrows.