Make pagination little better Vuejs - javascript

Hello all I created simple vuejs app and deployed to Heroku. Here is url of app:
https://vueappblog.herokuapp.com/. I'm trying to achieve when user clicks any number in pagination (or next button) to back that user to top of the posts list. See image below:
Can anybody help me?

You can scroll the page to the top after every click using
window.scrollTo(0,0); method.

Related

SOLVED: Pass data between pages in mern stack

So i have a mern project. The dashboard page on my website is fetching "project" documents from the db and using the map() function displaying the data and an open project button. When a user presses on one of those "open project" buttons, i want to redirect them to another page. Which will display the tickets that have the same id as the project relative to the button the user pressed. But for that, in the new page. I need to know on which project they pressed the button. How do i do that. I can think of a few possible solutions:
Using react context to make a global variable, on which project they pressed. But that feels super weird and could be a security breach.
making a page for every "project" document in the database. But i dont know how and if it´s possible since i cant sit and manually create all those pages.
All help is very appreciated, thank you!:)
I haven´t tried any solutions yet, cause i feel like .1 just wont do the job smoothly. and i dont know how to do .2

Show part of page when user scrolls

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.

How to Click a follow button on instagram dynamically using javascript from followers list of any other?

I tried this on console. But its not working. I want to click the follow button dynamically by my javascript code. I know that I can use InstPy. But I want develop my code.
Code:
First open the follower list of any account on instagram and then run this code.
var list=document.querySelectorAll(".PZuss li")<br>
list[2].getElementsByTagName('button')[0].click()
Output = undefined
What should I do so that my function start following the account when the program is executed.
So what are you trying to accomplish? Follow the 3rd user of the follower list?
For me document.querySelectorAll(".PZuss li")[2].querySelector('button').click() works just fine.

React Rendering different Children Components on button click

chatbox
profile view
So these are mockups for my social network project.
My question is that when a user logs in he is presented with this view.
There are two parent components THE LEFT PANE and RIGHT PANE.
THE LEFT PANE remains there for the whole session. BUT inside right pane I have to render
Chat box(when someone clicks on a friend from the list).
Pending request Component(When the see pending request button is
clicked)
Search Friends(When make friends button is clicked)
Profile View (When someone clicks on the interactive I button
Priorities:
I do not want to show the change in the address bar when any
component changes. So cannot use Browser Router.
Possible Solution but in doubt
I could use Conditional rendering by attaching some state variable
with each button click and when that button is clicked determining
the state i should render that specific component.
I could use Memory Router in react router in order to keep the code
clean and do not show the change in the address bar.
Help
CAN ANYONE WITH A GOOD EXPERIENCE IN REACT TELL ME IS THERE ANY OTHER WAY OF DOING THIS? AND IF NOT THEN WHICH IS A BETTER OPTION BETWEEN THESE TWO?
Pls refer to the images to get full idea about the situation.
thanks.
P.S. I can only post two links the other two components of pending request and make friends would be loaded the same way inside the right pane.
I think the best way would be to use the memory router Coz it would help to keep your code neat and understandable for reusability

Ionic ui-router side-menu $ionicHistory

I'm working on my first project in Ionic Framework. The app is using ui-router for state management and ion-side-menu for navigation. Even though states and navigation have been really smooth, I'm having trouble understanding transitions between states and the back button.
Scenario 1: The side menu has a list of the main states in the app and the user can navigate by tapping on them. When they do so and the transition ends successfully, I don't want the back button to appear at the top left instead of the side menu toggle. I want to see the toggle and the side menu again.
Scenario 2: When the user submits a post, I want the user to transition into the 'My Posts' state with the newly created post at the top (I already achieved this resolve in the state). So after the post is submitted I have: $state.go('app.myposts.list'); When the 'My Posts' is rendered, I see the back button at the top again, but I want the user to see the menu toggle.
I read the docs on both side-menu and ui-router, and $ionicHistory but I haven't been able to find the answer for what the true logic of this is. Can anyone help me?
Thanks in advance!

Categories