Show part of page when user scrolls - javascript

I have looked at questions like this but did not reach a conclusion. My question is how to show only the part of the web page that works (the monitor covers it) to the user?
And if the user scrolls, display the other component of page .
For example look at Ionic framework home page :
https://ionicframework.com
I am looking for something like this . Any idea ?
Thanks

You can figure out when an element is in the view of the user using the Intersection Observer API, then animate the elements using Javascript when the element is in view. Here is probably a better link for all the methods it has.

Related

When to use a virtual list?

I'm building a feed like Facebook or Twitter using React. I need a list of posts... however, I don't know if it's worth having a virtual list or not.
I don't know the height of each post until it's been rendered as it might contain an image or a video, I also need the whole window to scroll (not just one element), and I need it to be an infinite list (to load more posts when the users reaches the bottom).
What benefits would I get from using a virtual list rather than simply displaying all posts? it seems like a lot of work to maintain and set up what I'm looking for.

Remove appended anchor/#link from url after use

Over the past month I've been working on a new website which is based on a WordPress theme. The site is a pseudo one-page design, where the primary page serves as the main page for information. However, it also has a gallery where you can enter several individual portfolio projects - which effectively takes you to another page (and therefore the use of "pseudo"). So that's the design and layout of the site...
On the main page of the site I added anchor links to the various sections for ease of use, which will scroll/take the user to the desired section of choice, by simply clicking on the navigation menu. The links all work fine, but a problem arises when you've entered and returned from a portfolio project.
The problem:
After having clicked on an anchor link, a hashtag is then added to the URL "www.example.com/#anchor". If the user enters a different page and then returns the hashtag/anchor is then reactivated and scrolls to the linked section. This is a real pain and anything but user-friendly, since it is taking the user away from where it was.
I've been trying as many Javascript/JQuery codes I can find, many from this very site, but none has managed to solve the problem... I need to find a way to effectively remove the hashtag after use so the URL is left with only "www.example.com" again.
EDIT: Forgot to add that I also need to be able to click on the navigation menu whilst in a portfolio project and having the menu call to open the main page and take the user to the section of choice.
Does anyone have a solution? I am all out of ideas here.
Please also tell me where to add the piece of code if you are so kind to help.
Thank you!

Change Tab Link on Click (and Already Active Anchor)

Trying to piece together js knowledge as I go here. But I have a website that will be relying on a tabbed (just 2) concept to flip between the companies two services.
So when navigating to the page, they user will be directed to Company1 and I would like to have a tab of Company 2 on the right. It will be the same domain, just domain.com#company2.
When they navigate to Company 2 directly (via domain.com#company2) I would like the tab on the right to link to Company 1.
So basically, it looks like js is the only way to do this. Something that could read the active id and style the tab accordingly.
The main function would be based on click. So if you click the tab, it switches to the non-active companies tab.
The tab itself will remain the same, all I need to change is the href.
Thanks in advance guys!
I think you could use CSS float :
$("#tab1_id").click(function(){
$(".2tabs_class").css("float","left)
})
$("#tab2_id").click(function(){
$(".2tabs_class").css("float","right)
})
Make sure 2 tabs are inside a div

Check if a element is on the actual page

I'm using a poshytip, it is working fine, until I want to display my tip on the element that is under the current page (I mean that page where I have to scroll down to see it, don't really know how to name it properly). Unfortunately, poshytip has some bugs related to that - if I want to display a tip on the element that is currently lower than the current page position, then tip is showing at the bottom of my page. Havent seen any better tip plugin than this, so I decided to fix it on my own.
The question is - is there a way in jQuery/javascript to check if the element (for example the input with ID) is on the current page that user is viewing? By saying current page I mean the top of the page - my element is placed much lower, so user have to scroll down the page to see it, so is there a way to do something like: if user is scrolling down the page, and the element will be finally visible then send alert to the user?
I know this may be kinda complicated, but couldn't find any better words to describe my problem, I'd answer additional questions, if you have one.
If you want to test for an element's visibility in the viewport, you should reference this post here as it's outlined quite clearly.
On another note, I prefer using the jQuery tools suite for my Tooltip plugin of choice. You can see it here

Selective overlay and expose with tooltips

I want to show my first-time users different functions of my web-app. To do this, I want to make an in-page tutorial that will guide the users through different parts of the page.
I would like to use tooltip modals with instructional content. When the modal is showing, the page element in question will be exposed while the rest of the page is darkened. When the user presses "next" on the instructional modal, another set of instructions will show up and another part of the page will be exposed and the rest of the page will still be dimmed.
What's the best approach to take for this? Please advise. thanks!
jQuery Tools expose should take care of that nicely.

Categories