Upon clicking the icon on this page, a mysterious div appears with information. I'm completely baffled by how they achieved this cool effect using css/jQuery tools. Can anyone shed some light on the mechanism behind this?
Upon clicking the icon on this page, a mysterious div appears with information. I'm completely baffled by how they achieved this cool effect using css/jQuery tools. Can anyone shed some light on the mechanism behind this?
The process referred to as animation involves displaying and concealing the div while intermittently altering the position of the popup.
For more information, visit this link
I have created a simple demonstration that can be viewed here
HTML:
<div class='container'>
<button id="btnShow">Show</button>
<div class='menu' style='display: none'>
<button id="btnHide">Close</button><br/>
Ernst-Heinkel-Strasse 7,<br/>
DE-71394 Kernen i.R. Germany<br/>
Contact <br/>
Telefon: 07151 / 994 64 -0<br/>
Fax: 07151 / 994 64 -22<br/>
www.herceg.com <br/>
email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa93949c95ba929f88999f9dd4999597">[email protected]</a> <br/>
</div>
</div>
JS:
$(document).ready(function(){
$('#btnShow').click(function(){
$('.menu').show().css("top", "400px").animate({top: 50}, 200);
});
$('#btnHide').click(function(){
$('.menu').hide();
});
});
CSS:
.container {
with: 400px;
height: 300px;
border: 1px solid black;
}
.menu {
position: absolute;
border: 1px solid black;
background: #fff;
left: 180px
}
The method used here is simple yet effective - a div is toggled to show or hide, positioned absolutely on top of the page. If you examine the div with the unique identifier infobox, you will find all the necessary CSS code required for this functionality. The content within infobox contains text for various countries, each enclosed in a hidden div element with the style property set to display:none. When you click on a specific country, it triggers a change in display property to block for that particular div and sets display:none for all others.
Within my Angular 4 application, I have defined styles as shown below: [ngStyle]="{'border': getInterleaveColor(i)}" The following function is also included: getInterleaveColor(auditNumber) { var borderProperties = '2px solid'; ...
I am attempting to add animation to a modal using a transition effect. My goal is to open it slowly, either from the center of the screen or from the bottom. However, I am struggling to understand how this can be achieved... While searching on Google, I c ...
I have come across a problem that I can't seem to solve. How can I display social icons in one line within a collapsed menu? I added the following code to my CSS file but nothing seems to have changed. Any suggestions or ideas would be greatly appreci ...
I've searched through the CSS and I'm unable to identify what is causing the width between the top level links on my navbar. I need them to be slightly smaller so that when it adjusts for a screen below 900px, it doesn't convert into a 2-row ...
My node.js portfolio page features a simple contact form that sends emails using the Sendgrid API. The details for the API request are stored in sendgridObj, which is then sent to my server at server.js via a POST request when the contact form is submitted ...
I am currently implementing Notify JS from the following source : Below is the HTML code I am using: <div> <p><span class="elem-demo">aaaa</span></p> <script> $(".elem-demo").notify( "Hello Box" ...
I am working with an HTML form that looks like the following: <div class="form-group"> <label for="first_name">1st Name</label> <input type="text" id="first_name" placeholder="First Name" class="form-control"/> </div> ...
In my quest to extract nutritional data from a website through web scraping, everything was going smoothly until I encountered pages with slightly different formatting. When using selenium and a specific line of code, I noticed that it returned an empty l ...
This question pertains to the outcome of a mongoose find() operation. After running the code console.log('apparently this is an ' + typeof campaign.advertGroups, campaign.advertGroups); The resulting output is as follows: apparently this is an ...
Currently, I am tackling a date comparison task for our application. The main objective is to compare the Start Date inputted by the user with the Operator/Region Effective Date, which signifies when a new list of product prices becomes valid. Our aim is t ...
My table has columns labeled NoBill and Bill, with checkboxes as the values. Here is the default view of the table: https://i.stack.imgur.com/ZUvb2.png When the checkbox in the NoBill column is clicked, the total value (this.total) is calculated. The t ...
As I explore the jquery lightbox plugin, I find it to be quite straightforward. However, I am curious if there is a way to make the "previous" and "next" buttons of the plugin function without the images needing to be named sequentially (e.g., "image1.jpg, ...
I am working on a dropdown list and my goal is to have the default option selected when the page loads <b>Filter Within Months:</b> <select class="btn green" ng-model="myOptions" ng-options="i.label for i in items track by i.id" ng-change= ...
While developing a dynamic page using PHP and Laravel, I encountered a situation where I needed to add an additional radio button option to each card. Below is the code snippet for the card in question: <div class="card" style="margin:10p ...
Whenever the button is clicked, a different partial view is returned based on the selected value from the drop-down list. Controller: [HttpPost] public ActionResult Foo(SomeViewModel VM) { var model = VM; if (Request.IsAjaxRequest()) { ...
Whenever my bootstrap modal for login fails, it redirects to auth/login and closes the modal. How can I prevent the modal from closing when authentication fails and avoid the redirect back to auth/login? This is my login form: <form action="{{ URL::to ...
After setting up a node server on my Raspberry Pi to control an Adafruit Dotstar light strip, I encountered a problem. The sequence of colors on the light strip is triggered by an HTTP request to localhost:8000/fade, causing the server to run fade.js endle ...
Having trouble coming up with a name for this question, but here's the issue I'm facing: I currently have an array in PHP containing several entries. Array ( [0] => stdClass Object ( [sender_id] => 0 [me ...
var container = document.querySelector(".container") var light2 = document.getElementById("light"); var dark2 = document.getElementById("dark"); light2.addEventListener('click', lightMode); function lightMode(){ contai ...
I am facing an issue while trying to fetch multiple data from $http inside _.each function and display the combined data in $scope.tasksData. The problem I encountered is that _.each is being executed later, causing it to return null first. Can someone pl ...