I don't know how to explain this clearly, the following code notification shows on clicking the link/an href element.
I would like to load it on page load itself, without click, how ?
<a href="" data-toast="snackbar-7">
<i class="fa font-14 fa-check color-green-dark"></i>
<span>Confirmation Snackbar</span>
<i class="fa fa-angle-right"></i>
</a>
<div id="snackbar-7" class="snackbar-toast color-white bg-green-dark mb-4" data-bs-delay="3000" data-bs-autohide="true">
<h1 class="color-white font-20 pt-3 pb-3 mb-n4">Success</h1>
<p class="color-white mb-0 pb-1">Changes applied succesfully.</p>
</div>
The intention is to show notification on database data submission using PHP.
Related
I have this website: https://www.luxit.com.au/. I want to flip the phone icons from the top bar.
I inspected the page and use the class but that is not working. Then I notice that this is a sub-class, that is mentioned with i and then class and then on the last again i.
Can someone help me to find or how to write this type of class correctly in custom CSS. Thank you
Change
fa-phone
to
fa-phone-alt
in the i tag for the icons you want to flip.
e.g. instead of
<i class="fa fa-phone"></i>
change it to
<i class="fa fa-phone-alt"></i>
These are Font Awesome icons, see here https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=phone
You have looked at the relevant code, one good trick is to copy it (Edit HTML and copy it in your devtools) and lay it out properly so you can see what is nested in what.
This is the code in the area you are interested in:
<span class="topbar-content">
<i class="fa fa-phone"></i>
<span>
1300 724 555 </span>
<span> | </span>
<i class="fa fa-phone"></i>
<span>
0452 611 880
</span>
<span class="mobile-clr">
<span> | </span>
</span>
<i class="fa fa-bell"></i>
<span>7am - 10pm, 7 days </span>
<span class="mobile-clr">
<span> </span>
</span>
</span>
I am not clear whether you want to get rid of the lot, in which case:
.topbar-content { visibility: hidden; }
(do this instead of display: none in case some other spacing/positioning is relying on it)
or whether you want to get rid of just one phone number in which case you could start to use nth-of-type but it depends which one you want to get rid of. Let me know if that's the case.
I published a website (a project of my online course) which have social media button at footer area. I linked these with href but when I publish it on github, instead of directing me to "www.twitter.com", it directs me to "...github.io/www.twitter.com". What is the best way to fix this?
My code looks like below;
<footer id="footer">
<i class="fab fa-twitter footer-social"> </i>
<i class="fab fa-facebook-f footer-social"> </i>
<i class="fab fa-instagram footer-social"> </i>
<i class="fas fa-envelope footer-social"> </i>
<p class="p-footer">© Copyright 2018 TinDog</p>
</footer>
Also you can check published version from here: https://tayfunilbakan.github.io/tindog/
Your href values are missing an extra forward slash. Make sure they start with https:// as opposed to https:/.
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'm trying to get these dumb image links in my mobile app to work, I have 3 different ones.. Email, Phone and Website. All fed dynamically. I got them at least able to do something, but it seems to like try to find it within the application itself.. can anyone help me figure out what I'm doing wrong? I'm really new to mobile applications, this is my first shot so it's rather different than everything else i've done.
<div class="row text-center" style="margin-bottom:20px;">
<div class="col">
<a style="display:block;text-decoration:none;" ng-href="tel:{{data.company.phoneNumber}}">
<div class="well bluegrad-Box">
<i class="fa fa-phone white-Icon"></i>
</div>
</a>
</div>
<div class="col">
<a style="display:block;text-decoration:none;" ng-href="mailto:{{data.company.emailAddress}}">
<div class="well orangegrad-Box">
<i class="ion-email white-Icon2"></i>
</div>
</a>
Thank you!!!!
I have made this website: http://manojpandey.tk/ implementing Bootstrap v.3
In the Contact section, I have added some social buttons.
<ul class="list-inline banner-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span>
</li>
</ul>
They are showing some abnormal behaviour that I don't get. When someone clicks on the button directly, a blank webpage with same url opens. Opening in new tab does good.
But, why does the former does not work. Any help will be appreciated.
<a class="btn btn-default btn-lg" href="http://twitter.com/manojpandey96" target="_top"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
Works for me. So just add:
target="_top"
to the a-Tags.
Is there a reason why you are using frames?
Edit:
The Frames are causing the problem. Without adding target, the link usually will open within the frame. But if you add target="_top", then it will be loaded in the full window, ignoring the frames.
More detailed explanation here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a