Joomla Templates Club 406,261 posts

[craigieb Friend craigiebJoin date: July 2008Posts: 69Downloads:0Uploads:20 Thanks: 12]

#132198

Hiya,
I have just installed the VM product scroller onto a JA Rochea template with VirtueMart. The product scroller works nearly perfectly, however when the products begin scrolling, the next product appears beneath the right arrow (see the picture attached for a visual description).

I have tried adjust the width of the elements with the modules configuration panel, to no avail. I can;t seem to find any code to move the right arrow further over so the images do not appear underneath it. Basically I am stumped. Can anyone help?

Also, will this module work with sh404sef?

Regards
Craig

---

Attachments:

1. 

[craigieb Friend craigiebJoin date: July 2008Posts: 69Downloads:0Uploads:20 Thanks: 12]

#265545

Shameless bump

[hanifahmed Friend hanifahmedJoin date: August 2008Posts: 576Downloads:0Uploads:5 Thanks: 67 Thanked: 141 times in 110 posts]

#265595

I had that problem.
I had to reduce the number of products to just two.
You can try turning off the ZIP Javascript function – everything seemed to work after that.

[craigieb Friend craigiebJoin date: July 2008Posts: 69Downloads:0Uploads:20 Thanks: 12]

#265612

Hi mate,
In the end, by using firebug and spending a good four hours I found the css to change. Basically, on a non mesolite install you end up missing links between the product scroller and also missout on some css.
You need to find the refference to the product scroller in the template XML of mesolite and copy that line into your templates XML. You then need to edit the css on your template (ja.vm.css located in root/templates/ja_rochea/css so it contains the following lines at the very bottom.

/*Slidder Module*/

#ja-slider {
position: relative;
margin-top: 15px;
width: 710px;
}

#ja-slider-left {
position: absolute;
left: 0;
top: 0;
width: 30px;
}

#ja-slide-left-img, #ja-slide-right-img {
position: absolute;
top: 70px;
}

#ja-slider-right {
position: absolute;
left: 650px;
top: 0;
width: 30px;
}

#ja-slider-center {
left: 30px;
height: 165px;
}

.jsslide {
width: 610px;
white-space: nowrap;
overflow: hidden;
text-align: center;
}

Explanation to identify CSS to change for you own settings:-

#ja-slider {
position: relative;
margin-top: 15px;
width: XXXpx;
}
The width here is set to the desired length in pixels of the scroller. It has to be wider than the position of the right hand arrow, or you will not see button on the right.

#ja-slider-right {
position: absolute;
left: XXXpx;
top: 0;
width: 30px;
}

This sets the position of the right hand arrow, and forces it past the images that were previously scrolling underneath.

.jsslide {
width: XXXpx;
white-space: nowrap;
overflow: hidden;
text-align: center;
}

This may or may not be the item that dictates how big the viewing area is for the scrolling items…. i think it gets overwritten by setting the width from the control panel.

Hope this helps, I couldn’t have coped with it only showing two images!

[Author]

Posts