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.
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();
}
}
this line is wrong:
if ($w('#hoverMenu').show)
instead use:
if (!$w('#hovermenu').hidden)