Code works in preview but not in live site

Ask the community
,
1

Hi, My code is supposed to change the color of the header from transparent to black/brown, the moment a line shape exists the view of the screen. It is also supposed to change the color of the text in the buttons depending on what the color of the header is. The code works in preview but in live mode nothing happens. All of the code is written under the HOME page where it is supposed to have an affect. I have seen a lot of posts saying that I should ensure the sand box and live site is synced. But I am not using a sandbox as far as I am aware.

Live site:
https://dirk7449.wixsite.com/my-site

Here is the code:

var headerTransparent = false ;

$w . onReady ( function () {
// Write your JavaScript here

// To select an element by ID use: $w('#elementID') 

// Click 'Preview' to run your code

});

$w ( “#headerStrip” ). onViewportLeave ( ( event ) => {
$w ( “#mainHeader” ). style.backgroundColor = “rgba(26, 26, 26, 1)” ;
headerTransparent = false ;
$w ( ‘#btnOurBrands’ ). style.color = “rgba(209,209,209,1)” ;
});

$w ( “#headerStrip” ). onViewportEnter ( ( event ) => {
$w ( “#mainHeader” ). style.backgroundColor = “rgba(26, 26, 26, 0)” ;
headerTransparent = true ;
$w ( ‘#btnOurBrands’ ). style.color = “rgba(209,209,209,1)” ;
});

export function btnOurBrands_mouseOut ( event ) {
$w ( ‘#btnOurBrands’ ). style.color = “rgba(209,209,209,1)” ;

}

export function btnOurBrands_mouseIn ( event ) {
if ( headerTransparent == false ){
$w ( ‘#btnOurBrands’ ). style.color = “rgba(209,209,209,1)” ;
}
else {
$w ( ‘#btnOurBrands’ ). style.color = “rgba(26,26,26,1)” ;
}
}

export function btnOurProducts_mouseIn ( event ) {
if ( headerTransparent == false ){
$w ( ‘#btnOurProducts’ ). style.color = “rgba(209,209,209,1)” ;
}
else {
$w ( ‘#btnOurProducts’ ). style.color = “rgba(26,26,26,1)” ;
}
}

export function btnOurProducts_mouseOut ( event ) {
$w ( ‘#btnOurProducts’ ). style.color = “rgba(209,209,209,1)” ;
}

export function btnHome_mouseIn ( event ) {
if ( headerTransparent == false ){
$w ( ‘#btnHome’ ). style.color = “rgba(209,209,209,1)” ;
}
else {
$w ( ‘#btnHome’ ). style.color = “rgba(26,26,26,1)” ;
}
}

export function btnHome_mouseOut ( event ) {
$w ( ‘#btnHome’ ). style.color = “rgba(209,209,209,1)” ;
}

export function btnOurShowroom_mouseIn ( event ) {
if ( headerTransparent == false ){
$w ( ‘#btnOurShowroom’ ). style.color = “rgba(209,209,209,1)” ;
}
else {
$w ( ‘#btnOurShowroom’ ). style.color = “rgba(26,26,26,1)” ;
}
}

export function btnOurShowroom_mouseOut ( event ) {
$w ( ‘#btnOurShowroom’ ). style.color = “rgba(209,209,209,1)” ;
}

export function btnContactUs_mouseIn ( event ) {
if ( headerTransparent == false ){
$w ( ‘#btnContactUs’ ). style.color = “rgba(209,209,209,1)” ;
}
else {
$w ( ‘#btnContactUs’ ). style.color = “rgba(26,26,26,1)” ;
}
}

export function btnContactUs_mouseOut ( event ) {
$w ( ‘#btnContactUs’ ). style.color = “rgba(209,209,209,1)” ;
}

export function btnAboutUs_mouseIn ( event ) {
if ( headerTransparent == false ){
$w ( ‘#btnAboutUs’ ). style.color = “rgba(209,209,209,1)” ;
}
else {
$w ( ‘#btnAboutUs’ ). style.color = “rgba(26,26,26,1)” ;
}
}

export function btnAboutUs_mouseOut ( event ) {
$w ( ‘#btnAboutUs’ ). style.color = “rgba(209,209,209,1)” ;
}

2

Just to add to this. If I go to the site, the code does not work. Then when I switch to the producst page, and switch back to the HOME page, then the code works.

3

Same issue here. Seems to be the bug for wix itself.