how to hide a element in an anchor page?

Ask the community
,
1

I am making a single page website with the help of anchor page. I have added a static element which is common on all the anchor pages but I want to remove that element in few anchors pages. I tried using corvid but it removes that static element from all the pages.
I tried using a single line code " $w(“#myElement”).hide(); ", but it removes the static element from all the pages.
Please provide me with a solution as soon as possible so that I can continue designing my website.
I have attached the screenshot. I want to remove the phone image from the 3rd anchor page.

1913×894 117 KB

2

You also have to trigger your item to show using $w(‘#myElement’).show() when you need it to be visible.

3

Thank you for the response. But I want to hide the image element. When I am trying to hide the image element, the image element is going from all the anchor pages.
I want to add the image element in few anchor pages not all the anchor pages.

4

@kumarkaushik1580 Yes, so the idea is you hide it for certain anchors, and show it for others. Or you can set it to show when other elements enter and leave the viewport, not necessarily just anchors.

5

@skmedia thank you so much. Just for reference can you send me a basic code. I am not a experienced developer. Please

6

@kumarkaushik1580 Let’s say you have three strips stacked vertically labeled 1, 2, and 3. You want to show the image for 1 and 3, but hide it for 2. (There are many possibilities for doing this, and you’ll have to play with it to meet your needs, but here’s one way):

export function strip1_viewportEnter(event) {
    $w('#myImage').show();  
}

export function strip2_viewportEnter(event) {
    $w('#myImage').hide();
}

export function strip3_viewportEnter(event) {
    $w('#myImage').show();
}

I can foresee some issues ocurring with this depending on the height of your strips or on the resolution of the viewer’s screen, which increases the size of the viewport so it might be more reliable to use the scroll position instead. That would look more like this:

import wixWindow from 'wix-window';

$w.onReady(function() {
    setInterval(function() {
        wixWindow.getBoundingRect().then((sizeInfo)=>{
            let yPosition = sizeInfo.scroll.y;
            (600 < yPosition < 1800) ? $w('#myImage').hide() : $w('#myImage').show();
        } );
    }, 300);
} );

This assumes that your first strip is 600 pixels tall and your third strip starts at 1800 pixels down the page, so you can change those two numbers accordingly.

7

@skmedia thank you so much.

8

I am making a single page website using anchor page. I want an image element to be faded out while scrolling down and again I want the image on the screen while I scroll up with fade In animation.
Please help me regarding this problem.
Thank you.

9
10

Thank you.

11

Hi David,
I a having one small issue removing the vertical menu on hoverbox 3. I have pinned the vertical menu on all anchor pages(hover box). But when I am trying to remove the vertical menu then from strip 3(hover box) then a notification is coming that hide or show is not exist for vertical Menu.
Is it possible to remove the vertical menu from strip 3(hover box).
Please provide code.

Thanks
Kaushik

1920×1080 284 KB

12

I would test it anyway and see if it works…sometimes the code editor returns false errors.

But if it doesn’t work, you could use collapse/expand instead . Only downside is you won’t be able to animate it then.

13

Hi David,
I have a small query , is it possible to have hover effect for just for one time. Basically, the whenever I scroll the mouse pointer on the page the hover effect will work. But I want to do that just for one time i.e. whenever the user visit the same page(no reloading of the page should be there) the hover effect should not work.