Bootstrap 5 Scrollspy getOrCreateInstance() method is used to obtain the instance of a particular tab of the list group. This method can work even when the instance is not pre-initialized and this method creates an instance.
Syntax:
var scrollspy-element = document.getElementById("scrollspy-id"); var scrollspy-instance = bootstrap.Tooltip.getOrCreateInstance(scrollspy-element);
Parameter: This method accepts as an argument either an HTML element or its selector.
Return Value: This method returns the current Scrollspy instance to the caller. If no instance is yet created, it creates one.
Example 1: The code demonstrates how we can implement the getOrCreateInstance() method on a Scrollspy using JavaScript on a Scrollspy with a navbar.
<!DOCTYPE html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
< script src =
</ script >
< style >
#demoScrollspy {
position: relative;
}
</ style >
</ head >
< body >
< h1 class="m-4
text-success">
GeeksforGeeks
</ h1 >
< h4 class = "ms-4" >
Bootstrap 5 Scrollspy getOrCreateInstance() Method
</ h4 >
< div >
< nav id = "demoNavbar" class="navbar
navbar-light
bg-light
px-3 m-4">
< a class = "navbar-brand" href = "#" >
Navbar
</ a >
< ul class = "nav" >
< li class = "nav-item" >
< a class = "nav-link" href = "#scrollspyHeading1" >
DS
</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#scrollspyHeading2" >
Algorithms
</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#scrollspyHeading3" >
C++
</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#scrollspyHeading4" >
BootStrap 5
</ a >
</ li >
</ ul >
</ nav >
< div id = "demoScrollspy" class = "container" data-bs-spy = "scroll" data-bs-target = "#demoNavbar" data-bs-offset = "0"
class = "scrollspy-example" tabindex = "0" >
< h4 id = "scrollspyHeading1" >
Data Structures
</ h4 >
< p >
A data structure is a group of data
elements that provides the easiest
way to store and perform different
actions on the data of the computer.
A data structure is a particular way
of organizing data in a computer so
that it can be used effectively.
The idea is to reduce the space and
time complexities of different tasks.
The choice of a good data structure
makes it possible to perform a variety
of critical operations effectively.
An efficient data structure also uses
minimum memory space and execution
time to process the structure.
</ p >
< h4 id = "scrollspyHeading2" >
Algorithms
</ h4 >
< p >
The word Algorithm means ” A set of
finite rules or instructions to be followed
in calculations or other problem-solving
operations” Or ” A procedure for solving
a mathematical problem in a finite number
of steps that frequently involves recursive
operations”.It can be understood by taking
the example of cooking a new recipe.
To cook a new recipe, one reads the
instructions and steps and executes them one
by one, in the given sequence. The result
thus obtained is the new dish is cooked
perfectly. Every time you use your
phone, computer, laptop, or calculator
you are using Algorithms.
</ p >
< h4 id = "scrollspyHeading3" >
C++
</ h4 >
< p >
C++ is a general-purpose programming language and
is widely used nowadays for competitive
programming. It has imperative, object-oriented
and generic programming features. C++ runs on
lots of platforms like Windows, Linux, Unix,
Mac etc.C++ is a general-purpose programming
language that was developed as an enhancement
of the C language to include object-oriented
paradigm. It is an imperative and a
compiled language.C++ is a middle-level language
rendering it the advantage of programming low-level
(drivers, kernels) and even higher-level applications
(games, GUI, desktop apps etc.). The basic syntax and
code structure of both C and C++ are the same.
</ p >
< h4 id = "scrollspyHeading4" >
BootStrap 5
</ h4 >
< p >
Bootstrap is a free and open-source collection
of CSS and JavaScript/jQuery code used for
creating dynamic websites layout and web
applications. Bootstrap is one of the most
popular front-end frameworks which has really
a nice set of predefined CSS codes. Bootstrap
uses different types of classes to make
responsive websites. Bootstrap 5 was
officially released on 16 June 2020
after several months of redefining its
features.Bootstrap is a framework that is
suitable for mobile-friendly web development.
It means the code and the template available
on bootstrap are applicable to various
screen sizes. It is responsive for every screen size.
</ p >
</ div >
< div class = "container text-center" >
< button type = "button" class = "btn btn-success btn-lg m-4" id = "demoBtn" >
Get Or Create Scrollspy Instance
</ button >
</ div >
</ div >
< script >
document.addEventListener("DOMContentLoaded", function () {
var btn =
document.getElementById("demoBtn");
var element =
document.getElementById("demoScrollspy");
btn.addEventListener("click", function () {
var scrollspyInstance =
bootstrap.ScrollSpy.getOrCreateInstance(element);
console.log(scrollspyInstance);
});
});
</ script >
</ body >
</ html >
|
Output:
Example 2: The code demonstrates how to implement the usage of the getOrCreateInstance() method using JavaScript on a scroll spy in a Nested Side Navbar.
<!DOCTYPE html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
< script src =
</ script >
< style >
#demoScrollspy {
position: relative;
}
</ style >
</ head >
< body >
< h1 class = "m-4 text-success" >
GeeksforGeeks
</ h1 >
< h4 class = "ms-4" >
Bootstrap 5 Scrollspy Via data attributes
</ h4 >
< div >
< nav class="navbar navbar-light
bg-light px-3 m-4"
id = "demoNavbar" >
< a class = "nav-link active" href = "#dataStructs" >
Data Structures
</ a >
< a class = "nav-link" href = "#algo" >
Algorithms
</ a >
< nav class = "navbar" id = "demoNavbar" >
< div class = "dropdown" >
< button class="btn btn-primary
dropdown-toggle
ms-4 my-1"
type = "button" id = "dropdownMenuButton1" data-bs-toggle = "dropdown" aria-expanded = "false" href = "#other" >
Other Navbar
</ button >
< ul class = "dropdown-menu bg-dark" aria-labelledby = "dropdownMenuButton1" >
< nav class="navbar navbar-expand-sm
navbar-dark bg-dark"
id = "demoNavbar" >
< a class = "nav-link ms-3 my-1" href = "#bootstrap" >
Bootstrap
</ a >
< a class = "nav-link ms-3 my-1" href = "#cpp" >
C++
</ a >
</ nav >
</ ul >
</ div >
</ nav >
</ nav >
< div id = "demoScrollspy" class = "container" data-bs-spy = "scroll" data-bs-target = "#demoNavbar" data-bs-offset = "0" class = "scrollspy-example" tabindex = "0" >
< div class = "" >
< div id = "dataStructs" >
< h2 >Data Structures</ h2 >
< p >
A data structure is a group of data
elements that provides the easiest way
to store and perform different actions
on the data of the computer. A data structure
is a particular way of organizing data in a
computer so that it can be used effectively.
</ p >
</ div >
< div id = "algo" >
< h2 >Algorithms</ h2 >
< p >
The word Algorithm means ” A set of finite
rules or instructions to be followed in
calculations or other problem-solving
operations ” Or ” A procedure for solving
a mathematical problem in a finite number of
steps that frequently involves recursive
operations”..
</ p >
</ div >
< div id = "other" >
< h1 >Others</ h1 >
</ div >
< div id = "bootstrap" >
< h2 >Bootstrap</ h2 >
< p >
Bootstrap is a free and open-source
collection of CSS and JavaScript/jQuery code
used for creating dynamic websites layout and
web applications. </ p >
</ div >
< div id = "cpp" >
< h2 >C++</ h2 >
< p >
C++ is a general-purpose programming language
and is widely used nowadays for competitive
programming. It has imperative, object-
oriented and generic programming features.
</ p >
</ div >
</ div >
</ div >
< div class = "container text-center" >
< button type = "button" class = "btn btn-success btn-lg m-4" id = "demoBtn" >
Get Scrollspy Instance
</ button >
</ div >
</ div >
< script >
document.addEventListener("DOMContentLoaded", function () {
var btn =
document.getElementById("demoBtn");
var element =
document.getElementById("demoScrollspy");
btn.addEventListener("click", function () {
var demoScrollspy =
bootstrap.ScrollSpy.getOrCreateInstance(element);
console.log(demoScrollspy);
});
});
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/#getorcreateinstance