I am attempting to create an animation using a side panel that will slide into view when a button is clicked.
Here is how it appears when the page loads:
https://i.sstatic.net/JPQ2W.jpg
When the user clicks on one of the buttons, the notes panel will become visible like this:
https://i.sstatic.net/zI0wy.jpg
This is my progress so far:
[3]: https://codepen.io/terenceting/pen/ZqaOJo
Can anyone assist me with this? And what is this feature called?
Thank you in advance.
Do you need help with creating a slide-in panel? You can achieve this effect using CSS and manipulating classes on the container element. Here is an example for you to try out:
https://codepen.io/anon/pen/xyPEZx
I am simply toggling the 'active' class on the note-wrapper element. With modern CSS and transitions, there is no longer a need for jQuery slide animations.
Take a look at this! Tell me if it meets your expectations.
https://codepen.io/aflyzer/pen/JmORyG
All you need is to utilize toggleClass along with some CSS.
First off, here are some helpful suggestions regarding this code:
The HTML layout: Ensure that the "slideDivs" contains all the necessary components; I've added borders and colors for better visualization.
Using Jquery: It uses the state "onoffBtn" to determine if the block is open or closed. As mentioned in the code, a function would streamline this process with fewer lines of code, but unfortunately, Code Snippet doesn't support functions involving jquery xD.
Key sections of CSS:
#slideDivs{
right: 0;
top: 10px;/*Adjust as needed*/
position: absolute;
}
.comp{
display:inline-block;
}
.tabs{
width: 440px;
float: right;
height: 11em;
}
.tabs{/*Set all tabs div's visibility to "display: none"*/
display: none;
}
#btnTabs{
width:40px;
height:180px;
}
.btnTab{
transform: rotate(-90deg); /* Rotates button text, additional rules for different browsers (firefox, IE..)*/
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
float:left;
height: 40px;
width: 40px;
}
.btnTab:nth-child(2){
margin-top:2px;
}
I hope these pointers are useful! You can view the code on CodePen with some enhancements for reference (https://codepen.io/Alvargon/pen/QZaNmL). Good luck!
/*Ideally, using a function is more efficient, but Code Snippet doesn't allow it XD;*/
var onOffBtn1 = "off";
var onOffBtn2 = "off";
var exnum = 0;
var num = 0;
$("#btn1").click(function(){
num = 1;
switch(onOffBtn1){
case "off": {
$("#tab"+exnum).hide("fast");
$("#tab"+num).show("fast");
onOffBtn2="off"; onOffBtn1="on";
exnum = 1;
break;
}
case "on": {
$("#tab"+num).hide("fast");
$("#tab"+exnum).hide("fast");
onOffBtn2="off"; onOffBtn1="off"; break;
}
}
});
$("#btn2").click(function(){
num = 2;
switch(onOffBtn2){
case "off": {
$("#tab"+exnum).hide("fast");
$("#tab"+num).show("fast");
onOffBtn1="off";onOffBtn2="on";
exnum = 2;
break;
}
case "on": {
$("#tab"+num).hide("fast");
$("#tab"+exnum).hide("fast");
onOffBtn2="off";onOffBtn1="off"; break;
}
}
});#mainDiv{
border: 1px solid red;
padding: 10px;
}
#slideDivs{
background-color:#add8e680;
border: 4px dotted blue;
/*width: 500px;*/
right: 0;
top: 10px;
position: absolute;
}
.comp{
display:inline-block;
}
.tabs{
border: 3px double orange;
width: 440px;
float: right;
height: 11em;
}
.tabs{
display: none;
}
#btnTabs{
width:40px;
height:180px;
border: 3px solid darkgreen;
}
.btnTab{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
float:left;
height: 40px;
width: 40px;
}
.btnTab:nth-child(2){
margin-top:2px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainDiv">
Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu
<div id="slideDivs">
<div id="btnTabs" class="comp">
<button id="btn1" class="btnTab">BTN 1</button>
<button id="btn2" class="btnTab">BTN 2</button> </div>
<div id="tab1" class="tabs comp"><strong>TAB 1</strong><p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p></div>
<div id="tab2" class="tabs comp"><strong>TAB 2</strong><p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p></div>
</div>
</div>I utilized a Fuse template to construct my angular project. However, upon reloading the page, I encountered broken website elements. The error message displayed is as follows: Server Error 404 - File or directory not found. The resource you are looking fo ...
I've been grappling with a project for some time now, and I'm stuck on this particular issue. In my database, I have a table structured like this: ProjectName UserName SpentDays FirstProject User1 10 SecondProject User1 5 SecondProjec ...
Looking for a way to create a simple website with HTML buttons on my Raspberry Pi that can execute sudo commands. I attempted the following method: <?php if (isset($_POST['button'])) { exec('sudo reboot'); } ?> ...
Having an issue with my form renderer JS script. When making an AJAX request to retrieve it, it applies functions and properties to jQuery for rendering a form. However, due to the use of webpack with another framework, there are two jQuery contexts causin ...
I am attempting to assess an expression that is originating from one component and being passed into another component. Here is the code snippet: Parent.component.ts parentData: any= { name: 'xyz', url: '/test?testid={{element["Te ...
Getting Started Managing two domains can be a challenge, especially when trying to make them appear as one seamless website. In this case, I have ownership of and . Goal My goal is to merge the content of https://mauricevandorst.com/personal-page/index ...
I am looking to adjust the height of the Google custom search bar, and while there are various styling options available through the Google custom search editor, none specifically cater to changing the height. Currently, the search bar includes top and bo ...
Currently working on setting up a WordPress website integrated with WooCommerce, while also developing an HTML5 app for my small online store. I am looking to utilize Ajax to call WordPress functions like search directly from my HTML5 app and receive the r ...
Looking for a videoplayer setup where there are two playlists, but only one can play at a time. When choosing a video from the first list initially, nothing happens. However, after selecting a video from the second list, the first list starts working. HTM ...
Hello, I've written the code below to verify if a user is eligible to log in to a database. I've utilized SSL to secure the connection, but I'm unsure if this is still an effective method. Could anyone provide some advice? Thank you for your ...
I am currently utilizing the contentEditable attribute in Angular 6 to allow for editing the content of elements within an ngFor loop. Is there a way to focus on a tag element when its contentEditable attribute is set to true? <div class="tag" *ngFor= ...
My select input element has multiple attributes and a fixed width set. Unfortunately, due to the fixed width, the overflowing content in the x-direction is not visible. To address this issue, I have created a JavaScript function that uses the title attribu ...
My webpage is styled with Bootstrap v2 and looks great in Firefox. However, I'm struggling to apply the same CSS color style in IE8: .navbar-inverse .navbar-inner { background-color: #1b1b1b; background-image: -moz-linear-gradient(top, #fab ...
When dealing with a component function that fetches data from an URL and attempts to set that data to a property, there seems to be an issue where this is not accessible from the AJAX closure scope. var MyComp = Vue.extend({ props: { html_pro ...
Is there a similarity between Svelte slots and vanilla-js/dom functionality (I'm having trouble with it). In html/js, I can achieve the following: <style> body {color: red;} /* style exposed part from outside */ my-element::par ...
I'm attempting to create a slideshow using icons all within one class. The "active" style class will have an ID and represent the current picture. By clicking either the left or right button, I aim to change the style of the active class. const l ...
When using Safari 8.0.5, the controls attribute for the video element will change the value of window.name to "webkitendfullscreen". This is significant because I rely on using window.name to store client-side data in Safari's private mode, where loca ...
Currently working on a hybrid app using jQuery Mobile, I have 2 separate files which contain a total of 3 pages. In File 1: Page A In File 2: Pages B and C When I navigate from page A to page B by clicking on the link, the page loads successfully. Howe ...
I am experiencing an issue with two images on my website. One is set as the background and the other is displayed above it, appearing properly when viewed on larger screens but distorting when the browser window is minimized. You can view the site at the f ...
Trying to figure out how to set a div in HTML and then have a second div take up the remaining space. It seems like it should be simple, but I'm struggling with it. I'd like to have a div with a fixed height and then have another div take up the ...