After hours of searching, I can't seem to figure out how to create a contact form that functions like the one on this website: . When you click on the contact button, a black background fades in and the form smoothly drops down using an ease function. I've been analyzing the code but I'm at a standstill. Most other javascript pop-ups I've found only use PHP for the form, whereas this one involves an HTML call.
Any recommendations or suggestions on how to achieve a similar effect?
Check out a similar example form here: http://jsfiddle.net/ep39v/3/. Here is the code:
HTML
<div class="form"></div>
<button id="showFormBtn">Show Form</button>
JavaScript
var form = $('.form');
$('#showFormBtn').click(function () {
fadeBackground(showForm);
});
(function () {
form.css({
top: -form.height(),
left: ($(document.body).width() - form.width()) / 2
});
}());
function fadeBackground(callback) {
var background = $('<div class="background"></div>');
$(document.body).append(background);
background.fadeTo(300, 0.5, function () {
if (typeof callback === 'function') {
callback();
}
});
}
function showForm() {
var form = $('.form');
form.animate({ top: 10 }, 1500, 'easeOutElastic');
}
CSS
.form {
width: 30%;
height: 40%;
background: black;
position: absolute;
}
body {
height: 100%;
}
.background {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background: black;
opacity: 0;
}
You can try different easing options to customize the animation.
I'm having trouble synchronizing code to upload an image using a vue composable, wait for the upload to finish, and then store the Firebase storage URL into a database. Despite getting the URL, the success code fires before the upload is complete. My ...
Is it possible to prevent specific dates from being selected based on the current date? For example, if today is 8/1/16, I would like to disable the next 4 days (any number of days could be chosen), excluding weekends. So, if today is 8/1/16, I would want ...
Seeking a Nicer alternative. I am exploring if there is a way to format code like this without moving the first attribute to a new line: <div class="test-class" [test-binding]="true" (test-binging)="test()" ...
In my AngularJS math operations, I am encountering an issue where the percentage/VAT price is displaying as 0.35000000000000003 instead of just 0.35. How can I trim the decimals after 2 digits? 0.35000000000000003 - Is there a way to limit this number to ...
I have a dropdown menu and I want to perform different actions depending on the selected option. I am using a separate vue.html and TypeScript file. Here is my code snippet: <select name="LeaveType" @change="onChange()" class="f ...
function combine(){ //console.log(arguments) let result; let errors=[]; let newError; iterations: for( let i = 0 ; i < arguments.length; i++){ if(typeof arguments[i]!=='function'){ throw new Error(' ...
Is there a way to show div2 only after div1 has been given the '.selected' class for a set duration, and then hide it again when div1 loses the '.selected' class? What would be the most efficient approach to achieve this? ...
I am currently working on a project where I need to generate a personalized visiting card based on input data. The idea is to iterate over an object and retrieve the relevant information upon button click, displaying it on a canvas element. Initially, my p ...
I am a beginner in using jquery and ajax, and I need some assistance. How can I incorporate this jquery code into my logic: $('.btn-likes').on('click', function() { $(this).toggleClass('liked'); }); Can so ...
Upon creating a small test case to evaluate the ThankYouPage component, it is structured as follows: import ToggleDisplay from 'react-toggle-display'; import styles from '../styles.css'; function ThankYouPage(props) { return ( & ...
I'm currently working on launching a webpage in the Firefox browser using Python-Selenium web driver and injecting JavaScript code onto that loaded page. from selenium import webdriver from selenium.webdriver.common.keys import Keys driver= webdriver ...
Incorporating the chip input feature from material-ui-chip-input into my project has been great for entering emails. However, I am faced with a challenge - I need to disable the ability to delete specific values. Specifically, when populating the input f ...
I have a website page where I display some important information. However, I want to make this text hidden initially and only visible when a user clicks on a specific link or button. I attempted to achieve this functionality using the following code snippe ...
Having a directive structured as follows: return { scope:{ divid: '@' }, template: '<div id="{{divid}}"></div>' } Here is an example instance: <direct divid="some-id"></direct> The goal is to execut ...
Attempting to integrate my CSS and JavaScript codes into 11ty has been a bit challenging for me. I recently discovered that 11ty utilizes something called .11ty.js, so I decided to utilize the addPassthroughCopy() function. Below is the script I tried: mo ...
Looking to customize my datepicker code so that maxDate is only applied when selector === '#Birth'. Any suggestions on how to accomplish this? function customdatepicker(selector) { $(selector).datepicker({ inline: true, showO ...
I made changes to a public npm repository's source code and now I want to utilize the modified version using the GitHub URL in my package.json. I updated the dependencies in package.json as follows: "translation.js": "git+ssh://<a hr ...
I have a div using *ngFor which loads values from a JSON file. I want to load values from different JSON files randomly each time the div is loaded. Is there a way to achieve this using Math.random() or any other methods? html file <div class= ...
Is there a way to create a Start button that hides when clicked and shows a Stop button instead? When the Stop button is clicked, the Start button should reappear. I've attempted this but it doesn't seem to work. Any suggestions or ideas? &a ...
I have a Vue.js dropdown and I would like to show or hide my div based on the selected value in the dropdown. The current code is only working for one ID, but I want it to work for all IDs. I want to toggle the visibility of my div based on the option&apos ...