I'm using bootstrap 5 Scrollspy to navigate into different sections of my home page. It works fine when I click on the navigation link (E.g, projects). The url becomes: https://example.com/#projects and scroll to that section.
HTML:
<body data-bs-spy="scroll" data-bs-target="#navbar-main" data-bs-offset="240">
<ul class="nav navbar-nav ms-md-auto mb-2 mb-lg-0 fixed-top">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
</ul>
<main>
<section id="about"> ...</section>
<section id="services"> ...</section>
<section id="projects"> ...</section>
</main>
</body>
But When I'm refreshing or using the same URL in the address bar and load the page it doesn't scroll to that section. So How can I achieve the behavior of taking the #id from the url and scrolling to that section??
[Note: I'm using body{overflow-y: hidden} and showing a splash screen for say 5 seconds when a user loads the page for the first time then resetting back to overflow: auto]
You are missing the id="navbar-main" on your <ul> that corresponds to data-bs-target="#navbar-main".
Related
In the First line when add last two classes(nav-dark,bg-dark). navbar's items are not showing
<nav class="navbar navbar-expand-lg nav-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
Download
</li>
<li class="nav-item">
Pricing
</li>
<li class="nav-item">
Menu
</li>
</ul>
Using Bootstrap 4.1 and using an example from the docs, just switching "href" for "data-target".
https://getbootstrap.com/docs/4.1/components/navs/#javascript-behavior
http://jsfiddle.net/aq9Laaew/70683/
Example
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">AAA</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">BBB</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">CCC</div>
</div>
Tabs are working fine on all desktop browsers I have tried, including Safari, and all Android browsers I have tried as well.
However, on all iOS devices the tabs are inactive, that is, they are not switching, neither the tab links, nor the displayed content.
Anyone have an idea what I am doing wrong, or if this is a bug in Bootstrap 4.1?
According to HTML docs, a <a> is "interactive content" "if it has a href attribute". iOS implementation of this definition is literal and click events are ignored on anchors without href.
The proper way to enable clicks on iOS native devices is to use the id of the .tab-pane as href.
You could do it manually or you could use this lil' snippet which simply copies them from data-target, only on native iOS devices and only if the anchor does not already have a href attribute.
I haven't tested it on an iOS device but it should work:
$(window).on('load', () => {
let iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (iOS)
$('[role="tablist"] .nav-link').each((i,e) => {
if (!$(e).attr('href'))
$(e).attr('href', $(e).data('target'));
})
})
Note all Bootstrap 4 tabs examples use href attributes. Before asking about or reporting a potential Bootstrap "bug", make sure your markup is valid and not missing anything compared to the Bootstrap docs examples.
Here's a test using your markup:
$(window).on('load', () => {
let iOSdevice = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOSdevice)
$('[role="tablist"] .nav-link').each((i,e) => {
if (!$(e).attr('href'))
$(e).attr('href', $(e).data('target'))
})
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">AAA</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">BBB</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">CCC</div>
</div>
For iOS detection I used this SO answer.
Is there a built-in Bootstrap 4 trick that will align these three to centre, in a line "on a large screen", with a small space between them, then place them over each other when displayed on a small screen?
<h4 class="h4">Follow Social Media</h4>
<div class="row">
<div class="col-6-lg col-4-md col-1-sm center-pills">
<ul class="nav nav-pills">
<li class="nav-tabs">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</row>
I've tried adding custom css but it keeps falling apart and looks messy.
At the moment, the code above output this:
Is there a build in bootstrap 4 trick that will align these three to centre
One of the first tricks is to use Bootstrap classes that actually exist.
col-6-lg col-4-md col-1-sm classes don't exist.
The next best trick is to replace your nav-tabs class with nav-item because the nav-tabs class isn't designed to be used the way you attempted to.
The mx-auto class needs to be added to the column to center it.
Finally, adding nav-justified to the parent element will do the trick of spreading the pills evenly. And for padding, you can use responsive padding classes px-lg-3 p-md-2 p-1.
Click the "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-5 col-6 text-center mx-auto">
<h4 class="h4">Follow Social Media</h4>
<ul class="nav nav-pills nav-justified">
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</div>
</div>
I want to show a view with 2 listview like this:
But when I implement by Kendo UI Mobile with:
<div id="cptTab" data-role="view" data-title="Billing" data-layout="billing-layout">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title">CPT</span>
<a data-align="left" data-role="button" href="#censusmainTab">Census</a>
<a data-align="right" data-role="button" data-click="onNavigateToAddCpt">+</a>
</div>
</header>
<div>
Patient:
<label>
<input readonly="true" class="PatientNameLabel" />
</label>
</div>
<div>NEW CPT's</div>
<ul data-role="listview" id="cptsListView" data-click="onCPTItemClicked" />
<div>PREVIOUS CPT's</div>
<ul data-role="listview" id="cptsPreviousListView" data-click="onPreviousCPTItemClicked" />
</div>
But it display like this, it's missing 2nd listview (Previous listview):
Please let me know if I did something wrong or it's a bug of Kendo UI Mobile.
Thanks
You could use
<ul data-role="listview" data-type="group" id="ListView" data-click="onItemClicked"/>
to create two group, the first for new CPT's and the second for previous CPT's.
The function onItemClicked should change its behaviour according to which group is clicked.
see the documentation for better details
Try this code
<ul data-role="listview" data-style="inset" data-type="group">
<li>NEW CPT's
<ul>
<li>
<a> 1 st item in 1st list view </a>
</li>
</ul>
</li>
<li>PREVIOUS CPT's
<ul>
<li>
<a >1 st item in 2nd list view </a>
</li>
<li>
<a >2nd item in 2nd list view </a>
</li>
</ul>
</li>
</ul>
For live demo click Here
I use a lot of anchor links in my webpage because its only one page that scrolls down by clicking the menu.
Also I made al my pages in sections.
Now I'm busy with making my sitemap.xml for google but i'm not sure if i need to put in all the sections/anchor-links.
my menu is like:
<nav id="nav" role="navigation">
<ul class="clearfix">
<li>
<a class="selected firstnav" href="#home" tabindex="-1">
Home
</a>
</li>
<li>
<a href="#watdoenwij" tabindex="-1">
Wat doen wij
</a>
</li>
<li>
<a href="#portfolio" tabindex="-1">
Portfolio
</a>
</li>
<li>
<a href="#werkwijze" tabindex="-1">
Werkwijze
</a>
</li>
<li>
<a href="#uwwebsite" tabindex="-1">
De Website
</a>
</li>
<li>
<a class="lastnav" href="#contact" tabindex="-1">
Offerte & Contact
</a>
</li>
</ul>
</nav>
as you can see I only use links to #contact/#portfolio etc etc.
Do i have to put all the links in my sitemap?
http://www.domain.com/index.php#contact
http://www.domain.com/index.php#uwwebsite
http://www.domain.com/index.php#portfolio
Doesn't seem right to me?
Maybe google is seeing it as double content...
And if I have to add it to my sitemap what link do i have to use?
http://www.domain.com/index.php#contact
http://www.domain.com/#contact
No, you shouldn't include anchor links. They refer to the same page and the sitemap specifies how often that content changes, but it's all one page.