Categories
28°C, New York
Home Javascript Example 1

Example 1

Media Queries

Output:

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=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css">
    <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">w3wiki</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=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/foundation.min.js">
    </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().
    • 


													
													
												

												
											

											
											

												
Foundation CSS JavaScript Utilities

												
												

													
													
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.

													
													
												

												
											

										


										
										

											
Similar Reads

											
											

												
													

														Syntax

													

														The syntax for calling a Foundation JavaScript Utility function is as follows:...
													

												
											

											
											

												
													

														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 

											
											

												
													

														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







                                    

                                    
                                    

                                    

                                    
                                    
                                    
                                










 
 
  
 
     
     
    Foundation JS Utilities Example 
     
     
 
  
 
  
    
 
        
 
             
        
 
    
 
  
     
     
     
 
  
 










                        



                        




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();...
													

												
											

											
											

												
													

														Output:

													

														...
													

												
											

											
											

												
													

														Example 2:

													

														...
													

												
											

											
											

												
													

														Output:

													

														...
													

												
											

											
										


									

									

										
Tags:

										
										#Foundation
										
										#Foundation-Setup
										
										#CSS
										
										#Web Technologies
										

									

									

										

											
											
												
												Media Queries
											
											
										

										

											
											
												Output: