I want to create a form in angular, I have one problem. I would like this form to have a tab menu that does not move to subpages, so as not to lose data. I used to have a similar form not in Angular and used this method. But I don't know what's best in angular, not to make subpages, just everything on one page, so that the data when switching to tabs don't disappear. Please help.
<li>
<a data-toggle="tab" href="#User-details">User details</a>
</li>
<li>
<a data-toggle="tab" href="#Account-details">Account details</a>
</li>
<li>
<a data-toggle="tab" href="#validateSubmit">ValidateSubmit</a>
</li>
<li>
<a data-toggle="tab" href="#submitFlag">submitFlag</a>
</li>
<li>
Related
I have a website with two different services, a venue and an office space. Two pages are previews for the venue and the office space, and a specific page is for the packages/rental information. The page with packages has two tabs for the services. I want to be able to click a button on the office page and be directed to the office tab on the service page, and vice-versa on the venue page.
This is the code for the tabs on the packages page:
<!--Tab List For Services-->
<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
<!--Tab List Items-->
<li class="nav-item" role="presentation">
<button class="nav-link active" id="event-tab" data-bs-toggle="tab" data-bs-target="#event" type="button" role="tab" aria-controls="event" aria-selected="true">Events</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="office-tab" data-bs-toggle="tab" data-bs-target="#office" type="button" role="tab" aria-controls="office" aria-selected="false">Office</button>
</li>
</ul>
This is the code for the buttons on the office page:
<a asp-page="/Gallery" class="custom-button custom-button-blue my-3 mx-3" style="font-size: x-large">See More of the Space</a>
<a asp-page="/Services" class="custom-button custom-button-blue my-3 mx-3" style="font-size: x-large">Plan Your Next Event</a>
I originally thought I could do something like this:
<a asp-page="/Gallery" asp-route="office-tab"> </a>
but found the tabs don't show up in the url, they're all contained in the page. I went into inspect mode and noticed when I click a tab, the active status switches from one tab to the other. I think the solution will be along the lines of changing aria-selected to true, but not sure how to do that from a different page.
I am a novice front-end developer trying to build a website using HTML, CSS, and bootstrap. I would like to ask you a couple of questions regarding the uploading process. I am about the purchase a domain for the website I have been building so far. However, I have encountered some problems. Currently, I can link my HTML files to provide the transition between different pages within the website(As my code shown below). My question is, how can I set the correct directory to provide the transition between the HTML pages. As far as I know, after the uploading process to Cpanel, href directory has to be modified. How can I provide the right href directory to carry out transitions within the website before uploading my website to public_html? Thank you in advance.
<li class="nav-item active">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\index.html">Mainpage<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\aboutme.html">About me<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\services.html">Our Services<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\contact.html">Contact<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\blog.html">Blog<span class="sr-only">(current)</span></a>
</li>
No need to link like
href="C:\Users\enver\Desktop\practice\contact.html"
use
href="contact.html"
you can do this you create a website folder at the desktop, in this folder add a pages folder where you will put your other service pages and others. You keep the index file.html at the root.
Mainpage(current)
About me(current)
Our Services(current)
Contact(current)
Blog(current)
when you're going to send herberger just the pages and index folder.html your css and don't forget to reach your css again in the pages services and other href=".. /css/.."
When I change the path to the correct routes in the url bar I get where I need to go and everything displays correctly. The actual router links are not taking me anywhere.
I have NgModule, Routes and RouterModule all imported properly in my only module. I have my components imported properly. router-outlet is properly placed. I have base href="/" in the head of my index.html.
Here is part of my html:
<section class="vertical-sidebar collapse navbar-collapse justify-content-end" id="navbarSidebarContent-main"
[ngClass]="{'show':displaySideNav}">
<nav class="nav">
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
<li>
<a routerLink="/manage-sessions">Manage Sessions</a>
</li>
<li>
<a routerLink="/export-scancodes">Export ScanCodes</a>
</li>
<li>
<a routerLink="/imu-data">IMU Data</a>
</li>
<li>
<a routerLink="/global-order-days">Global Order Days</a>
</li>
<li>
<a routerLink="/order-exception-report">Order Exception Report</a>
</li>
</ul>
</nav>
</section>
I expect to be directed to the correct path when I click on the link. Nothing happens when I do so.
Try as mentioned in docs
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
....
</ul>
After a lot of trail and error yesterday I realized the issue came because a lot of the code had been given to me as boilerplate code that had been manually upgraded from Angular6 to 8. I created a new project in the cli from scratch and copied over my components and had no issues.
I created a site using Boostrap and WAMP Server and now I am trying to move it to a virtual server, so more people could use it.
The site looks fine, but when clicking a drop-down toggle for example, it doesn't display anything, it just goes to href="#"
My element looks like this:
<li class="dropdown" style="border-radius: 5px;">
<a target="_blank" href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white;font-size: medium; background-color: #8A2BE2;border-radius: 5px;">Search <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a target="_blank" href="search_1" style="color:#601e9e;font-size: medium;border-radius: 5px;">Option 1</a>
</li>
<li><a target="_blank" href="search" style="color:#601e9e;font-size: medium;border-radius: 5px;">Other Options</a>
</li>
</ul>
</li>
Is there anything I need to change? I moved all the files and folders.
You probably missed the bootstrap JavaScript file. Make sure you add after your footer and it should be fine. Your code should have something like this:
<script src="/js/bootstrap.min.js"></script>
Make sure ti put your script after jQuery script. Additionally, you may have this script, but it can't find the file in the specified location. Check if the file exist on your server.
can somebody of you have a look at this example:
http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle
I want to keep the toggle function, but the brand should be another link (homepage).
I tried like this:
<ul id="sidebar_menu" class="sidebar-nav">
<li class="sidebar-brand">
Menu<a id="menu-toggle" href="#">
<span id="main_icon" class="glyphicon glyphicon-align-justify"></span>
</a>
</li>
</ul>
But this will cause that there is a clickable brand, but the toggle button is not right from the brand. Instead it is in a new "navigation point".
Can somebody help me how I need to modify the given code to make this possible?
Thanks for any help! :)
This is your solution :
<li class="sidebar-brand">
<a style="width:50%;" href="index.php">Home</a>
<a id="menu-toggle" style="width:50%;height:95%" href="#"><span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a>
</li>
You can also change "Home" to whatever you want.
also i should notice you have to put the styles in your style folder , but i added it inside tag for ease of describing.