Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Saba Hilal
54 articles
How to make a display in a horizontal row?
Displaying HTML elements in a horizontal row is a common layout requirement in web development. There are several CSS techniques to achieve this, including display: inline, display: inline-block, display: flex, and using HTML table structures. This article demonstrates three different approaches to create horizontal layouts. CSS Display Properties for Horizontal Layout The most common CSS properties for horizontal arrangement are − display: inline − Elements flow horizontally but cannot have width/height set display: inline-block − Elements flow horizontally and can have dimensions display: flex − Modern flexible layout method with powerful alignment options HTML tables − ...
Read MoreHow to make div with left aligned text and right aligned icon using CSS ?
Creating a div with left-aligned text and right-aligned icon is a common layout requirement in web development. The element serves as a container that can hold both text content and icons in a structured format. Using CSS, we can position these elements precisely within the same horizontal line. This article demonstrates three different CSS approaches to achieve this layout: the float property, CSS flexbox, and CSS table display methods. Each technique offers unique advantages for different scenarios. Icon Used in Examples All examples use the Material Icons library to display an "album" icon. The following setup ...
Read MoreHow to link back out of a folder using the a-href tag?
When working with HTML websites that have multiple folders and subfolders, you often need to create links that navigate back to parent directories. The anchor tag with the href attribute allows you to link back out of a folder using relative or absolute paths. This article demonstrates how to create navigation links that move from a subfolder back to its parent folder. Syntax Following is the syntax for linking back to a parent folder using relative paths − Back to Parent Following is the syntax for linking using absolute paths − Back ...
Read MoreHow to load a hyperlink from one iframe to another iframe?
Loading content from one iframe to another iframe is a common web development task that enables dynamic content display without reloading the entire page. This technique uses the target attribute of anchor tags to specify which iframe should display the linked content. Syntax Following is the syntax for targeting an iframe from a hyperlink − Link Text The target attribute in the anchor tag must match the name attribute of the destination iframe. How It Works When a hyperlink with a target attribute is clicked, the browser loads the specified URL ...
Read MoreHow to locate the user\'s position in HTML?
The HTML Geolocation API allows web applications to access the user's current geographic location through JavaScript. This feature enables websites to provide location-based services like displaying coordinates, showing maps, or finding nearby places. The user must grant permission before the browser can access their location data. HTML Geolocation API The Geolocation API is accessed through the navigator.geolocation object, which provides methods to retrieve the user's current position. The API works with GPS, WiFi networks, cellular towers, and IP addresses to determine location coordinates. Syntax Following is the basic syntax for getting the user's current location − ...
Read MoreHow to make an empty div take space?
Making an empty div take up space on a web page is a common requirement in HTML layouts. By default, an empty div has no visible dimensions because it contains no content. However, there are several methods to force an empty div to occupy visual space using CSS properties. Why Empty Divs Don't Take Space An empty div element without content has zero height and only takes up the width of its container by default. To make it visible and occupy space, we need to explicitly define its dimensions using CSS properties like height, width, or add content ...
Read MoreHow to make a word count in textarea using JavaScript?
Creating a word counter for textarea elements is a common requirement in web applications. This functionality helps users track their input length, especially useful for forms with character or word limits. We'll explore two different JavaScript approaches to implement this feature. Method 1: Counting Words by Analyzing Spaces and Newlines This approach manually iterates through each character in the textarea, counting spaces and newline characters to determine word boundaries. Implementation Steps Step 1 − Create an HTML file with a textarea element Step 2 − Add paragraph elements to ...
Read MoreA Game Using Javascript – Fire the bullets
This tutorial demonstrates how to create an action-packed commando game using JavaScript and Code.org's Game Lab. The player controls a commando navigating through a maze-like area filled with enemy tanks, collecting keys, and escaping through a door. Game Story and Rules The player controls a commando using arrow keys (UP, DOWN, LEFT, RIGHT) to navigate through a walled area. The objective is to find the correct key and reach the exit door while avoiding enemy fire. Enemy tanks automatically shoot bullets when the commando enters their range. The commando has a protective shield activated by pressing the 's' ...
Read MoreUsing data in JSON format in Snack
There are many ways to use data with apps made with Snack Expo. Sometimes the data is stored as JSON (JavaScript Object Notation). In this format, data can be easily stored as key-value pairs and can also be converted to CSV files. This article demonstrates how to use JSON data in Snack using JavaScript, including reading JSON data and displaying it as a table, plus converting JSON to CSV format for download. Sample JSON Data Structure For our examples, we'll use a products.json file containing product information: { "products": [ ...
Read MoreHow to load CSS files using JavaScript?
Loading CSS files dynamically using JavaScript allows you to change page themes, implement dark/light mode toggles, or conditionally load styles based on user preferences. This technique is useful when you need to switch between different stylesheets without page refresh. Syntax /* Create link element */ const link = document.createElement("link"); link.href = "path/to/stylesheet.css"; link.rel = "stylesheet"; link.type = "text/css"; /* Append to head */ document.head.appendChild(link); Example 1: Loading CSS on Window Load This example demonstrates loading a CSS file automatically when the page finishes loading − ...
Read More