Framework7 Hybrid Application with Multi-view Layout

I am working with 2 different layouts, one for before login and another for after login.

Even after reading the instructions provided here, I am still struggling to understand why my app is displaying like this:

https://i.sstatic.net/UU0ZJ.png

It seems to be showing two views at once and allow scrolling through both. Here is the JavaScript code involved:

var mainView = myApp.addView('.view-main');
var anotherView = myApp.addView('.another-view');

//to call anotherView after login
mainView.router.load(anotherView);

Answer â„–1

Every view contains its own unique content and browsing history. Utilize them as separate div elements:

var mainView = myApp.addView('.view-main');
var anotherView = myApp.addView('.another-view');
//initialize your application somewhere here
$$('.another-view').hide(); //hide the view after logging in
//perform actions and log in
$$('.view-main').hide(); //hide the view before logging in
$$('.another-view').show(); //display the view after logging in

It may seem unconventional to handle views this way, so please make sure you are familiar with what you are doing. Refer back to the documentation if needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for me to divide the data in a JSON file and display user tags in place of their IDs?

Looking to create a list admins command for a bot, I'm facing challenges in converting user ids to tags within the command. Take a look at what I have accomplished so far: const { MessageEmbed } = require('discord.js'); const { readFileSync, ...

Create a focal point by placing an image in the center of a frame

How can an image be placed and styled within a div of arbitrary aspect ratio to ensure it is inscribed and centered, while maintaining its position when the frame is scaled? Ensure the image is both inscribed and centered Set dimensions and position usin ...

Angular.js:10671 Uncaught TypeError: Cannot read property of undefined

I am currently in the process of learning Angular through a course, despite having limited experience with JavaScript. I have been struggling to make ng-class function properly and cannot figure out why I keep encountering the error mentioned in the title. ...

Create a layout with two rows of two buttons in HTML aligned to the right side while maintaining the left side's

I am currently working on designing a menu for my webpage that includes four buttons. My goal is to have two buttons displayed at the top of the page and two buttons displayed at the bottom. To achieve this, I have written the following CSS code: .navButt ...

What is the best way to prevent clicking and scrolling on a webpage?

I have added a "more" button to the bottom left of my website to reveal a menu. Upon clicking the button, the plus sign changes to an x. I would like the page to disable click and scroll actions when the plus sign is clicked. <div class="dropup"> ...

What is the best method for conducting comprehensive testing of all projects and libraries within NestJS (nx)?

Our NestJS project has been established with multiple libraries through Nx. We have successfully run tests on individual projects/libraries using the following command: npx nx test lib1 --coverage While this method works well, we are faced with numerous l ...

Are elements loaded and hidden by ng-hide and ng-show, or does loading only occur with ng-show?

Is this method of programming effective for handling large elements such as 10 mb images? Are there alternative solutions that would work better? ...

Semicolon unexpectedly found in function in the Chrome Developer Tools

When I use Chrome developer tools, it tells me that there is an unexpected semicolon after the 3rd closing curly brace in this function. Shouldn't the semicolon be there to end the var form declaration? But if I remove it, Chrome says that the 4th cur ...

Tips for customizing marker icon on vue-google-maps

I'm new to using vuejs and I am currently experimenting with vue-google-maps in order to display markers. I am interested in learning how to customize the marker icon. I attempted to add an icon to the marker tag, but it did not have the desired effec ...

Access a component from the @ViewChild without resorting to nativeElement

Is there a way to access the underlying div element using a @ViewChild? I have attempted the following approaches without success: ElementRef.prototype.nativeElement -- returns ElementRef HTMLDivElement -- returns undefined ElementRef -- returns ElementRe ...

When I type text into the form field, JavaScript causes a disruption in the form

I'm attempting to implement a dual-stage user onboarding procedure. Initially, users will input the industry they belong to and then provide a description. Upon clicking submit, my intention is to conceal that portion of the form and reveal the "Creat ...

Building a collapsible toggle feature with an SVG icon using HTML and CSS

I am trying to swap a FontAwesome Icon with a Google Materials SVG Icon when a collapsible table button toggle is pressed (changing from a down arrow to an up arrow). I have been struggling to get the Google Material Icons code to work. How can I resolve t ...

Is it possible to execute JavaScript code (using Node.js) through AppleScript on MAC OS?

After downloading Node.js for MAC OS from this link: http://nodejs.org/download/ (http://nodejs.org/dist/v0.10.29/node-v0.10.29.pkg), I needed to execute a JavaScript on Google Chrome. To do this, I utilized the following AppleScript code: do shell script ...

Using globs to specify files for gulp.src

I'm facing a challenge in setting up a glob array for my JavaScript concatenation build task within the Gulp workflow. The file structure I am working with looks like this: ├── about │ └── about.js ├── assets ├── contact â ...

A guide on extracting data from an uploaded JSON file in a React and Next.js application

Users have the ability to upload a JSON file by clicking on the button provided (shown below). https://i.sstatic.net/jndOd.png Once the JSON file is uploaded, the content is stored into a variable or a state. let fileRef = useRef(); const uploadHandle ...

Do not use the .map method! Caution: Every child component in a list must be assigned a unique "key" prop

I have recently started working with NEXT JS and I am encountering a peculiar issue for which I haven't been able to find a solution online. The warning message I'm getting is: "Each child in a list should have a unique key prop." Warning: Each c ...

Having issues with the fade-in effect of a div in Javascript while using setInterval

I need help with a fading effect for a div containing multiple images. Despite my efforts, the fade-in animation is not working as expected and I'm unsure what's causing the issue. It seems like the interval function may not be getting called at ...

Utilizing JavaScript variables to generate a custom pie chart on Google

Greetings! I must admit that I am a novice, especially when it comes to JavaScript. My background is mainly in PHP. Recently, I came across a fantastic pie chart created by Google https://developers.google.com/chart/interactive/docs/gallery/piechart I a ...

Issue with Enter key not working on an individual textbox within Javascript/PHP chat functionality

Recently, I created a chat feature with text boxes that send messages when the ENTER key is pressed. However, I encountered an issue with it not working for the "Warning" functionality. Whenever I press Enter in this context, nothing happens. Can anyone pr ...

What is the best way to populate MongoDB with information retrieved from an external API?

Recently, I've been diving into the world of NodeJS with mongoose & mLab. As someone new to these technologies, I'm slowly piecing together my model. Here's what it looks like for now, with plans to expand the schema down the road. cons ...