I am encountering an issue with a sliding effect on a div. When it has a class hddn, the overlay will have right: -100% from the viewport. However, when the hddn class is removed, it should return to the viewport with right: 0. How can I animate this movement?
<div class="wrapper">
<div class="overlay">
<div class="content">
</div>
</div>
</div>
You can view a working example here
Are you looking to achieve this?
$(document).on("click", function(){
$(".overlay").toggleClass("hddn");
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before, *::after {
box-sizing: inherit;
}
.wrapper {
width: 320px;
height: 450px;
background: #eee;
overflow: hidden;
}
.wrapper .overlay {
position: relative;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.wrapper .overlay.hddn {
right: -100%;
transition: right 0.4s ease-in-out;
}
.wrapper .overlay.hddn .content {
right: -100%;
}
.wrapper .content {
width: 80%;
height: 100%;
background: #e7e7e7;
position: absolute;
right: 0;
transition: right 0.4s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="overlay hddn">
<div class="content">
I am content
</div>
</div>
</div>Running on Durandal, this mobile app features names and images on an HTML page. The function below helps format the page: define(function (){ function getAutors(myUrl) { $.ajax({ type: "GET", url: myUrl, data: { num ...
Feel free to check out this demo I've created for reference: http://jsfiddle.net/jcb9xm44/ In a nutshell, the scenario involves two inline-block divs nested within a parent div: <div class="outer"> <div class="inner1"> Y & ...
My Wordpress site features some animations that work flawlessly when the site is scrolled. The code looks like this: jQuery(document).ready(function($){ $(window).scroll( function(){ if(!isMobile) { $('.animate_1').each ...
Recently, I developed a custom API using Node.js to retrieve information about blogs from Medium.com. The API currently provides: The author/main picture of the article Title A link to the article on medium.com (redundant) The entire article text in the ...
I'm facing an issue while trying to set the value for an input using jQuery. Essentially, when you click on a link, it redirects you to a different page with a form, and I am attempting to set the value of one of the inputs in that form. Unfortunately ...
Creating a Unique Web Application In the works is a unique web application, similar to Trello, that divides a page into columns where tasks/cards can be added and moved between them. This desktop-focused platform will feature an information column on the ...
Need help with a dynamic HTML div <a data-id="17" onclick="getcustomer();"> <div class="note note-success"> <h4 class="block">A</h4> <p>Email : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...
I have a button that opens a new browser window, so I've added alternate_text and title tags to notify the user that a NEW window will open when hovered over. <img class="mp3PlayBtn" alt="Mp3 player opens in popup window" title="Mp3 player opens i ...
I'm currently working on a project using React, TypeScript, and Material UI. Here is the layout I have: <MuiThemeProvider theme={muiTheme}> <My Component/> </MuiThemeProvider> Within my component, the code looks something ...
Is it possible to check for the existence of the id 'input-name' before assigning a value to the variable name using a line of code similar to this: var name = $('#input-name').attr("value"); In case the id 'input-name' does ...
I have been encountering an issue while trying to add links to different pages of my website. Whenever I click on the link, it displays a "404 Page Not Found" error message. Objective: My main goal is to create links from my home page, index.php, to other ...
I have encountered a challenge while working on a unit test. The website I am testing is dynamic, causing the CSS Selector and xpath to frequently change. As a solution, I came up with the idea of using both CSS and xpath to retrieve the same text. Curren ...
Currently, I am utilizing Dompdf in my PHP project to generate PDF reports. However, I have encountered an issue where the HTML bootstrap code does not render as expected on the PDF document. Specifically, when viewing the grid on a smaller device, it coll ...
I have successfully uploaded multiple featured images to my WordPress website using the multiple post thumbnail plugin. Now, I want to showcase them all below the content along with their descriptions. While I have managed to display the main featured imag ...
I'm attempting to customize the legend in my Chartjs chart, but I'm facing an issue where I can't seem to change the font color. What I want to achieve is having the font color in white while keeping the individual item colors intact in the ...
When I select a category in the input filter, only items with the same category are displayed when clicked. However, when I click on "Others" on the desktop version, only rows with that category are shown, but on mobile after resizing and filtering, nothin ...
As I dynamically add rows to a table, each row can either be a parent row or a child row. My goal is to toggle the visibility of child rows when the parent row is clicked. if (response != null && response != "") { ...
I am looking for a way to toggle the visibility of text that has display: none; in CSS when a button is clicked, as well as clear the input field on the onClick event. Currently, the text remains visible even after it has been displayed. Any assistance wou ...
What is the best way to prevent elements from resizing on a standard website when users zoom in (CTRL +)? ...
I've been attempting to integrate Redux Form into my stepper component. However, I'm facing an issue where adding form fields results in them being displayed in all three sections. To address this, I started reviewing the code for the stepper. I ...