Foundation JavaScript Utilities is a collection of tools that can be used to enhance the functionality of your Foundation website. To use Foundation JavaScript Utilities, you first need to include the foundation.js file in your website. Once you have done this, you can use the various utilities by calling the corresponding function. For example, to create a custom animation, you would use the Foundation.Move() function.
Syntax
The syntax for calling a Foundation JavaScript Utility function is as follows:
Foundation.[Utility Name]([Arguments]);Selector Engine
- The Foundation framework uses its own selector engine called “Big S”. It is based on the native browser API querySelectorAll(), but it is optimized for performance. Foundation’s Big S selector engine is about 20% faster than jQuery’s selector engine.
-
To use Foundation’s Big S selector engine, you can use the s() function. For example, the following code would return a list of all the <div> elements with the class container:
let element = s('.container');
Throttle and Debounce
- Throttle and debounce are two techniques used to prevent a function from being called too often.
- Throttle: Throttling is a technique where you control the frequency of function execution. It ensures that the function doesn’t execute more than once every X milliseconds.
- Debounce: Debouncing is a technique where you ensure that a function doesn’t execute until after a certain amount of time has passed since it was called.
-
In the Foundation framework, throttle and debounce are implemented using the Foundation.Throttle() and Foundation.Debounce() functions. The syntax for both functions is the same:
Foundation.[Throttle/Debounce](functionToThrottleOrDebounce, waitTime, [callback]);
Data Options
- Data Options allow you to customize the behavior of certain Foundation components and plugins directly from the HTML markup.
-
To use data options, you add data attributes to the element that you want to configure. The data attributes have the following format:
data-[plugin-name]-[option-name]="[value]"
Media Queries
- Media queries in the Foundation framework are used to change the behavior of Foundation components based on the size of the viewport. They are typically used to change the layout of a component or to add or remove functionality.
-
To use media queries, you add media queries to the CSS rules that you want to apply to a Foundation component. The media queries have the following format:
@media [media query] {
[CSS rules]
}
Example 1:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Foundation JS Utilities Example</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">GeeksForGeeks</li>
<li>
<a href="#">Courses</a>
</li>
<li>
<a href="#">Tutorials</a>
<ul class="menu">
<li><a href="#">
Data Structure and Algorithm
</a></li>
<li><a href="#">System Design</a></li>
<li><a href="#">Web Development</a></li>
</ul>
</li>
<li>
<a href="#">Jobs</a>
<ul class="menu">
<li><a href="#">For Job Seekers</a></li>
<li><a href="#">For Recruiters</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
<script src=
</script>
<script src=
</script>
<script src="script.js"></script>
</body>
</html>
|
CSS
.top-bar, .top-bar ul { background-color: white;
} .menu{ color: green;
} a,ul,li{ color: black;
} a:hover{ color: green;
} ul:hover{ color: green;
} li:hover{ color: green;
} |
Javascript
$(document).foundation(); |
- In this example, we have included the Foundation CSS file using the CDN link provided, and the necessary JavaScript files for jQuery and Foundation. We have also added the required markup for a top bar navigation menu with a dropdown submenu.
- To ensure the Foundation JavaScript utilities work correctly, we have included the jQuery library before the Foundation JavaScript file. Finally, we have initialized the Foundation framework by calling $(document).foundation().
Output:
Example 2:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<p>Best Programming Languages</p>
<ul class="accordion" data-accordion>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Java</a>
<div class="accordion-content" data-tab-content>
Java is a high-level, class-based,
object-oriented programming language
that is designed to have asfew
implementation dependencies as possible.
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Python</a>
<div class="accordion-content" data-tab-content>
Python is a high-level, general-purpose
programming language. Its design philosophy
emphasizes code readability with the use of
significant indentation via the off-side rule.
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">C++</a>
<div class="accordion-content" data-tab-content>
C++ was designed with systems programming
and embedded, resource-constrained software
and large systems in mind, with performance,
efficiency, and flexibility of use as its
design highlights.
</div>
</li>
</ul>
</div>
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script src="script.js"></script>
</body>
</html>
|
CSS
.container { margin: 20px;
} h1 {
color: green;
} |
Javascript
$(document).foundation(); |
- This example demonstrates the basic usage of the Foundation’s accordion component. The example uses the Foundation CSS framework for styling and the Foundation JavaScript files to initialize the accordion functionality.
Output:
Reference: https://get.foundation/sites/docs/javascript-utilities.html.