Hidden Element showing when it shouldn't (Dynamic Page)

Ask the community
,
1

Hi all, I have set up a dynamic page for my clients site to display their products. There is a fair amount of code I’ve written on the page to hide/show/expand different items and sections dependent on the database.

I managed to work out the code needed to change the colour of a box so I could have a floating menu as the user scrolls down the page. The code I used for this floating (pinned) menu is below:

export function headerStrip_viewportLeave(event) {
 if ($w('#hoverMenu').hidden) {
        $w('#hoverMenu').show("fade", fadeOptions);
    }

}

export function headerStrip_viewportEnter(event) {
 if ($w('#hoverMenu').show) {
        $w('#hoverMenu').hide();
    }  

}

The code is linked to the strip at the top of the page and triggers the floating menu to appear as the user scrolls down the page. When testing the site the menu works perfectly, changing to the right colour for the item and appearing as you scroll down. However the problem occurs when you go to another products dynamic page, the menu appears as soon as the page loads. I have tried moving the ViewPort triggers to items further down the page but nothing works.

1350×505 687 KB

1243×498 231 KB

This seems to be a problem with the dynamic page but for the life of me I can’t find a logical reason for this to happen. Below is the pages entire code, if someone smarter than me can see the error of my ways it would really help me out. Thanks!

$w.onReady(function () {
$w("#taglineStrip").expand();
$w("#servicesMenu").collapse();
$w("#promotorMenu").collapse();
$w('#hoverMenu').hide();
});

$w.onReady(function () {
$w("#dynamicDataset").onReady(()=>{
if($w("#dynamicDataset").getCurrentItem().feature6){
$w("#featureStrip2").expand();
}
if($w("#dynamicDataset").getCurrentItem().videoUrl){
$w("#videoButton").show();
}
if($w("#dynamicDataset").getCurrentItem().videoUrl){
$w("#videoTitleStrip").expand();
}
if($w("#dynamicDataset").getCurrentItem().videoUrl){
$w("#videoStrip").expand();
}
if($w("#dynamicDataset").getCurrentItem().videoUrl){
$w("#videoButton2").show();
}
if($w("#dynamicDataset").getCurrentItem().videoUrl){
$w("#videoButton3").show();
}
if($w("#dynamicDataset").getCurrentItem().assemblyInstructionTitle){
$w("#assemblyIcon").show();
}
if($w("#dynamicDataset").getCurrentItem().assemblyInstructionTitle){
$w("#assemblyButton").show();
}
if($w("#dynamicDataset").getCurrentItem().otherDlTitle){
$w("#pdfIcon1").show();
}
if($w("#dynamicDataset").getCurrentItem().otherDlTitle){
$w("#pdfDLbutton1").show();
}
if($w("#dynamicDataset").getCurrentItem().otherDl2Title){
$w("#pdfIcon2").show();
}
if($w("#dynamicDataset").getCurrentItem().otherDl2Title){
$w("#pdfDLbutton2").show();
}
if($w("#dynamicDataset").getCurrentItem().otherDl3Title){
$w("#pdfIcon3").show();
}
if($w("#dynamicDataset").getCurrentItem().otherDl3Title){
$w("#pdfDLbutton3").show();
}
if($w("#dynamicDataset").getCurrentItem().otherDl4Title){
$w("#pdfIcon4").show();
}
if($w("#dynamicDataset").getCurrentItem().otherDl4Title){
$w("#pdfDLbutton4").show();
}
if($w("#dynamicDataset").getCurrentItem().otherDl5Title){
$w("#pdfIcon5").show();
}
if($w("#dynamicDataset").getCurrentItem().otherDl5Title){
$w("#pdfDLbutton5").show();
}
if($w("#dynamicDataset").getCurrentItem().smallDisplay){
$w("#smallTag").show();
}
if($w("#dynamicDataset").getCurrentItem().mediumDisplay){
$w("#mediumTag").show();
}
if($w("#dynamicDataset").getCurrentItem().largeDisplay){
$w("#largeTag").show();
}
if($w("#dynamicDataset").getCurrentItem().freestanding){
$w("#fsTag").show();
}
$w('#hoverMenu').style.backgroundColor = $w('#dynamicDataset').getCurrentItem().vectorColour;
$w('#hoverMenu').hide();
});
});

let fadeOptions = {
"duration":  600,
"delay": 0
};

export function viewSwitch_change(event) {
if ($w('#hoverImage').hidden) {
$w('#hoverImage').show();
}
else  
$w('#hoverImage').hide(); 
}
export function videoButton_click(event) {
$w('#videoTitleStrip').scrollTo(); 
}
export function sizeImage_click(event) {
$w('#sellertoolsHeader').scrollTo(); 
}
export function videoButton3_click(event) {
$w('#videoTitleStrip').scrollTo();  
}
export function headerStrip_viewportLeave(event) {
if ($w('#hoverMenu').hidden) {
$w('#hoverMenu').show("fade", fadeOptions);
}
}
export function headerStrip_viewportEnter(event) {
if ($w('#hoverMenu').show) {
$w('#hoverMenu').hide();
}  
}
2

this line is wrong:

if ($w('#hoverMenu').show)

instead use:

if (!$w('#hovermenu').hidden)
3

Thank you for the advice, I replaced the code as you mentioned but the issue remains.

Excuse my ignorance but what does the addition of the ‘!’ do exactly? Thanks.

4

@joe6450 ! means NOT.
There’re other places in your code with the same mistake. Make sure you replace all of them.

  • I didn’t go over your full code (it’s too long), so there might be other errors as well.
5

@jonatandor35 How strange, I’ve always used “if ($w(‘#hoverMenu’).show)” without issue. I have gone through my code and replaced with “!” where need be but still the issue happens. I’m beginning to think this a bug related to dynamic pages.

6

@joe6450 show() is a function, it doesn’t return a boolian value (true/false).
Yo have a lot of repeated unnecessary code, and that brings to bugs and mistakes.
You should make it more general and much more shorter.

7

@jonatandor35 Not sure why I didn’t notice my repetitive code, thanks for looking through it! I’ve been through and simplified a lot of the code checking the database and some other bits, unfortunately it still hasn’t solved the issue. Really strange that the issue only presents itself once viewed on the published site, in preview the issue doesn’t occur. Thanks for all your help J. D.

8

@joe6450 if you post a short version of the code, we may be able to review it.