Create a Draggable DIV Element Step 1) Add HTML: Example Code: <!– Draggable DIV –> <div id=”mydiv”> <!– Include a header DIV with the same name as the draggable DIV, followed by “header” –> <div id=”mydivheader”>Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> Step 2) Add CSS: The only important style is position: absolute, the rest is… Continue reading How to create a draggable HTML element with JavaScript and CSS
Author: Anoop Vincent
How to create animations using JavaScript
JavaScript animations are done by programming gradual changes in an element’s style. Basic Web Page To demonstrate how to create HTML animations with JavaScript, we can use a simple web page. Example Code: <!DOCTYPE html> <html> <body> <h1>My First JavaScript Animation</h1> <div id =”myContainer”> <div id =”myAnimation”>My animation will go here</div> </div> </body> <html> Styling the Elements To make an… Continue reading How to create animations using JavaScript
How to create a popup chat window with CSS and JavaScript.
A live chat pop-up helps customers connect with your business and can enable co-browsing, an efficient way of working through any issues they’re experiencing. Step 1) Add HTML Use a <form> element to process the input. Example Code: <div class=”chat-popup” id=”myForm”> <form action=”/action_page.php” class=”form-container”> <h1>Chat</h1> <label for=”msg”><b>Message</b></label> <textarea placeholder=”Type message..” name=”msg” required></textarea> <button type=”submit” class=”btn”>Send</button> <button type=”button” class=”btn cancel” onclick=”closeForm()”>Close</button> </form> </div> Step 2) Add CSS Example Code:… Continue reading How to create a popup chat window with CSS and JavaScript.
Creating Progress Bar using JavaScript
A Progress Bar is used to depict the progress of any task which is being carried out. Progress Bars are generally used to show the download and upload status. In other words we can say that, Progress Bars can be used to depict the status of anything that is in progress. To create a basic… Continue reading Creating Progress Bar using JavaScript
How to create a Breadcrumb Navigation with CSS
Breadcrumbs are a secondary navigation aid that helps users easily navigate through a website. Breadcrumbs provide you an orientation and show you exactly where you are within the website’s hierarchy. Steps for creating breadcrumbs using CSS Step 1: Create an HTML list of the navigation links. <ul class=”breadcrumb-navigation”> <li><a href=”home”>Home</a></li> <li><a href=”webdev”>Web Development</a></li> <li><a href=”frontenddev”>Frontend Development</a></li>… Continue reading How to create a Breadcrumb Navigation with CSS
Use of :even and :odd pseudo-classes with list items in CSS
The :nth-child() selector in CSS is used to match the elements based on their position in a group of siblings. It matches every element that is the nth-child. The: even and: odd pseudo-class is used with the list of items such as paragraph, article items which is basically a list content. Odd Pseudo Class The… Continue reading Use of :even and :odd pseudo-classes with list items in CSS
How to get the current screen size/browser window with JavaScript
We can use window.innerWidth and window.innerHeight to get the current screen size of a page. Window.innerWidth The read-only Window property innerWidth returns the interior width of the window in pixels. This includes the width of the vertical scroll bar, if one is present. More precisely, innerWidth returns the width of the window’s layout viewport. Example:var… Continue reading How to get the current screen size/browser window with JavaScript
Unable to run the integration – ERROR: NetSuite web service error: You have not enabled web services feature for your account.
When attempting to run the NetSuite OpenAir Integration, the following error showed up:ERROR: NetSuite web service error: You have not enabled web services feature for your account.It is possible that the webservices feature is not yet enabled on the NetSuite account. Solution Navigate to Setup > Company > Enable Features Under the SuiteCloud tab, check the Web Services box Click Save
Change the background image on scroll using CSS
We can change the background image of the webpage on scroll without changing the foreground contents. 1. Create HTML Create seven <div> tags with the following classes: <div class=”image one”></div> <div class=”image two”></div> <div class=”image three”></div> <div class=”image four”></div> <div class=”image five”></div> <div class=”image six”></div> <div class=”image seven”></div> <div class=”content”>W3DOCS</div> 2. Add CSS Set the height of… Continue reading Change the background image on scroll using CSS
Error: “Your current role has insufficient permission. Select one of the roles in the Change Role list, or contact your account administrator” When Creating a New Token to Fetch Extension in SuiteCommerce InStore (SCIS)
You may be prompted with this error when executing ‘gulp extension:fetch –to’ and creating a new token for fetching the extension. To resolve this error, make sure that the token-based authentication feature is enabled on your account. Solution1. Navigate to Setup > Company > Enable Features 2. Click SuiteCloud tab Manage Authentication: a) Token-Based Authentication:… Continue reading Error: “Your current role has insufficient permission. Select one of the roles in the Change Role list, or contact your account administrator” When Creating a New Token to Fetch Extension in SuiteCommerce InStore (SCIS)