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.
Related
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>
I am new to bootstrap, I am trying out different things and when I add the classes to different elements some work, and others dont show up in dev tools. The class on the ul works, but on the li and 'a' doesnt.
`
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link-active" href="">About Us</a>
</li>
`
I tried to restart the project and reconnect bootstrap but neither solution worked.
It's because you put an extra - between nav-link and active class. The correct way is this one <a class="nav-link active" href="#">About Us</a>
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/.."
In my angular application I have created the Dashboard page ,super user dashboard and admin dashboard pages. Super user and admin dashboard pages having the same data as dashboard page and some extra tables on it.That's why I have created the admin and components page as and some tables data in component.html page
And I have used the same navigation links(about,notifications,profile,logout) bar for all the dashboards which I have placed in basic Dashboard page.
Now I want to show the profile information based on the usertype(user,superuser,admin)when we click on the profile link.
I have created the page for profile link in navbar.something like:
profile.component.html
<h4>Username:</h4>
<h4>EmailId:</h4>
<h4>First name:</h4>
<h4>Last name:</h4>
<h4>Last login:</h4>
And I have called the user profile with GET method,I have got the details as
usertype,firstname,lastname,email-id,last-login details.
Now I want to place the details of user or super user or admin details in profile page when we click on that profile link based on the usertype from the get method API.
Navigation links in dashboard page:
dashboard.component.html
<nav>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a routerLink="/dashboard" class="nav-link" id="col"><i class="fa fa-fw fa-home fa-lg"></i>Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a routerLink="/About" class="nav-link" href="#" id="col"><i class="fa fa-info-circle fa-lg"></i> About</a>
</li>
<li class="nav-item">
<a routerLink="/dashboard" class="nav-link" id="col"><i class="fa fa-fw fa-bell"></i> Notifications <span class='badge badge-primary'>{{ncount}}</span></a>
</ul>
<div class="social-part">
<a href="#" id="col" style="color: black;" >Profile</a>
Logout
</div>
</nav>
I have tried many ways but not working Can anyone help me regarding this.
Create a separate section for each type of user profile, and check conditions.
profile.component.html
<div *ngIf="userType == 'Super User'">
// Super User profile section.
<h4>Username:</h4>
...
//etc
</div>
<div *ngIf="userType == 'Admin'">
// Admin profile section.
<h4>Username:</h4>
...
//etc
</div>
<div *ngIf="userType == 'User'">
// User profile section.
<h4>Username:</h4>
...
//etc
</div>
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.