update of cart adds a background??

[samoht]

ok,

why does vm add element styles when the cart is updated?

Code: [Select]

<div class="vmCartModule">before update

Code: [Select]

<div class="vmCartModule" style="color: rgb(255, 255, 255); background-color: rgb(47, 47, 47);">
after update

any idea how to change this? it is covering up my logo??

Thanks

[chaddosan]

I had the same problem, and this is what worked for me.
Take this for what it's worth, I'm not a javascript programmer, I just started hacking away. The file that does this is here: "components\com_virtuemart\themes\default\theme.js" I simply commented out any lines that looked like they messed with the style of the vmcartmodule:

Code: [Select]

/**
* This function searches for all elements with the class name "vmCartModule" and
* updates them with the contents of the page "shop.basket_short" after a cart modification event
*/
function updateMiniCarts() {
var callbackCart = function(responseText) {
carts = $$( '.vmCartModule' );
if( carts ) {
try {
for (var i=0; i<carts.length; i++){
carts[i].innerHTML = responseText;
// color = carts[i].getStyle( 'color' );
// bgcolor = carts[i].getStyle( 'background-color' );
// if( bgcolor == 'transparent' ) {
// If the current element has no background color, it is transparent.
// We can't make a highlight without knowing about the real background color,
// so let's loop up to the next parent that has a BG Color
// parent = carts[i].getParent();
// while( parent && bgcolor == 'transparent' ) {
// bgcolor = parent.getStyle( 'background-color' );
// parent = parent.getParent();
// }
}
// var fxc = new Fx.Style(carts[i], 'color', {duration: 1000});
// var fxbgc = new Fx.Style(carts[i], 'background-color', {duration: 1000});

// fxc.start( '#222', color );
// fxbgc.start( '#fff68f', bgcolor );
if( parent ) {
// setTimeout( "carts[" + i + "].setStyle( 'background-color', 'transparent' )", 1000 );
}
}
} catch(e) {}
}
}
option = { method: 'post', onComplete: callbackCart, data: { only_page:1,page: "shop.basket_short", option: "com_virtuemart" } }
new Ajax( live_site + '/index2.php', option).request();
}
I don't get the fancy "flash" when a product is added, but at least it doesn't re-style my cart module to be unreadable like it did before. I'm using Joomla and a css -hilite style for the module, and the "flash" doesn't seem to play well with it. Hope that works for you!

[chaddosan]

Well...that actually seemed to kill the slimbox function. So now I've hard-coded the current background color into the theme.js file like so:

Code: [Select]

/**
* This function searches for all elements with the class name "vmCartModule" and
* updates them with the contents of the page "shop.basket_short" after a cart modification event
*/
function updateMiniCarts() {
var callbackCart = function(responseText) {
carts = $$( '.vmCartModule' );
if( carts ) {
try {
for (var i=0; i<carts.length; i++){
carts[i].innerHTML = responseText;
color = carts[i].getStyle( 'color' );
bgcolor = carts[i].getStyle( 'background-color' );
if( bgcolor == 'transparent' ) {
// If the current element has no background color, it is transparent.
// We can't make a highlight without knowing about the real background color,
// so let's loop up to the next parent that has a BG Color
parent = carts[i].getParent();
while( parent && bgcolor == 'transparent' ) {
//bgcolor = parent.getStyle( 'background-color' );
bgcolor = parent.getStyle( '8B0200' );
parent = parent.getParent();
}
}
var fxc = new Fx.Style(carts[i], 'color', {duration: 1000});
var fxbgc = new Fx.Style(carts[i], 'background-color', {duration: 1000});

fxc.start( '#222', color );
fxbgc.start( '#8B0200', bgcolor );
if( parent ) {
setTimeout( "carts[" + i + "].setStyle( 'background-color', 'transparent' )", 1000 );
}
}
} catch(e) {}
}
}
option = { method: 'post', onComplete: callbackCart, data: { only_page:1,page: "shop.basket_short", option: "com_virtuemart" } }
new Ajax( live_site + '/index2.php', option).request();
}
/**That seems to allow the slimbox to work properly still.

[plughead]

Well i had the same problem and i made a solution for my web site creating a new div upside of the cart div with same position, same size and changing the effect by "color" to "opacity".
It´s very simple. You´ll create a new div upside of actual and make it disappearing slowly using ACCORDION FX(plug-in used for virtuemart to make this effects).
In my case i change the color by yellow to white. You can use any color.

The function chain() was use to execute more than 1 function. one after another.

this is my code:

Code: [Select]

function updateMiniCarts() {
var callbackCart = function(responseText) {
carts = $$( '.vmCartModule' );
if( carts ) {
try {
for (var i=0; i<carts.length; i++){
carts[i].innerHTML = responseText;

try {
color = carts[i].getStyle( 'color' );
bgcolor = carts[i].getStyle( 'background-color' );
if( bgcolor == 'transparent' ) {
// If the current element has no background color, it is transparent.
// We can't make a highlight without knowing about the real background color,
// so let's loop up to the next parent that has a BG Color
parent = carts[i].getParent();
while( parent && bgcolor == 'transparent' ) {
bgcolor = parent.getStyle( 'background-color' );
parent = parent.getParent();
}
}
/**
* Creating a new DIV to make the effect upside of actual div
*/
var cartsC = document.createElement('DIV');
cartsC.style.position = 'absolute';
cartsC.style.backgroundColor = '#b9298b';
cartsC.style.top = carts[i].offsetTop + 'px';
cartsC.style.left = carts[i].offsetLeft + 'px';
cartsC.style.zIndex = '99999';
cartsC.style.width = carts[i].offsetWidth + 'px';
cartsC.style.height = carts[i].offsetHeight + 'px';
cartsC.style.opacity = 0;
cartsC.style.filter = 'alpha(opacity=0)';
document.body.appendChild(cartsC);

var fxC = new Fx.Style(cartsC, 'opacity');
fxC.start(0, 1).chain(function(){fxC.start(1, 0)});

// var fxc = new Fx.Style(carts[i], 'color', {duration: 1000});
// var fxbgc = new Fx.Style(carts[i], 'background-color', {duration: 1000});
// fxc.start( '#222', color );
// fxbgc.start( '#fff68f', bgcolor);//(bgcolor == 'transparent' ? '#0000ff' : bgcolor) );
// if( parent ) {
// //setTimeout( "carts[" + i + "].setStyle( 'background-color', 'transparent' )", 1004 );
// }
} catch(e) {}
}
} catch(e) {}
}
}
var option = { method: 'post', onComplete: callbackCart, data: { only_page:1,page: "shop.basket_short", option: "com_virtuemart" } }
new Ajax( live_site + '/index2.php', option).request();
}



[diastasi]

@ plughead you are THE one !!
Your script works fine.
Big Thanks!!!

[grodiz]

Hi all!
I just wanted to add if some one still has problem with this that I tryed Diastasi:s code and it all most worked for me, but I still got an area with color when I added some things in the cart so I modifyed the code by changing:

fxbgc.start( '#8B0200', bgcolor );
to
//fxbgc.start( '#8B0200', bgcolor );
That worked for me so now I can finally launch my site.
Thank you Diastasi.

Best regard!
Anni

Code: [Select]

/**
* This function searches for all elements with the class name "vmCartModule" and
* updates them with the contents of the page "shop.basket_short" after a cart modification event
*/
function updateMiniCarts() {
var callbackCart = function(responseText) {
carts = $$( '.vmCartModule' );
if( carts ) {
try {
for (var i=0; i<carts.length; i++){
carts[i].innerHTML = responseText;
color = carts[i].getStyle( 'color' );
bgcolor = carts[i].getStyle( 'background-color' );
if( bgcolor == 'transparent' ) {
// If the current element has no background color, it is transparent.
// We can't make a highlight without knowing about the real background color,
// so let's loop up to the next parent that has a BG Color
parent = carts[i].getParent();
while( parent && bgcolor == 'transparent' ) {
//bgcolor = parent.getStyle( 'background-color' );
bgcolor = parent.getStyle( '8B0200' );
parent = parent.getParent();
}
}
var fxc = new Fx.Style(carts[i], 'color', {duration: 1000});
var fxbgc = new Fx.Style(carts[i], 'background-color', {duration: 1000});

fxc.start( '#222', color );
//fxbgc.start( '#8B0200', bgcolor );
if( parent ) {
setTimeout( "carts[" + i + "].setStyle( 'background-color', 'transparent' )", 1000 );
}
}
} catch(e) {}
}
}
option = { method: 'post', onComplete: callbackCart, data: { only_page:1,page: "shop.basket_short", option: "com_virtuemart" } }
new Ajax( live_site + '/index2.php', option).request();
}
/**

[tousand]

plughead, your code works fine.
Thanks!