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:
When the user clicks on one of the buttons, the notes panel will become visible like this:
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>Here is the given code snippet: function updateMsg() { $.post("AjaxChatServer.jsp",{ time: timestamp }, function(xml) { alert("1"); $("#loading").remove(); addMessages(xml); }); setTimeout('updateMsg()', 4000) ...
Is there a way to eliminate all global CSS within a VueJS component and only allow scoped CSS? If so, how can this be achieved? Below is the issue I am trying to address: * { /* Global styles */ } /* Component-specific styles */ .items ul { } .i ...
Is there a way to prevent clicking on the <a> tag within a list item in a UI list so that the associated <div> is not displayed when clicked (excluding the last list item)? I have attempted using ng-disabled directly on the list item attribute ...
I'm working on creating a Bingo game and I want to include a dropdown list that displays my previous records. How can I retrieve data from a database to populate this select dropdown list? Below is the relevant code snippet in PHP: <html> < ...
What is the best method to securely pass data from an Express backend to a client-side JavaScript in order to render it in the DOM using client-side rendering, while also allowing sanitized whitelist HTML and preventing XSS attacks? For example, if the No ...
I'm attempting to create a gradual fading gray line by using a div that is sized at 1x100px with a CSS gradient applied for the fade effect. The only issue I am encountering is in Internet Explorer where the div is displaying a blue border which I am ...
I've been attempting to preserve the toggled class of multiple elements using local storage or cookies in order to maintain the toggled class after a page refresh. Despite trying various solutions such as js cookie and other tutorials, I've had n ...
How can I split a progress bar into more steps to achieve a design like this? https://i.stack.imgur.com/lRMj6.png I attempted using this code but couldn't find an option for splitting: <LinearProgress variant="determinate" classes={{ ...
I'm struggling with mouse coordinates while working on canvas in HTML5. My approach involves using JavaScript for drawing on the canvas. Below is my current code to track the mouse pointer within the canvas: $('#canvasID').mousedown(functi ...
I am trying to create a grid-like layout where each column in a row has the same height and contains an image while maintaining its proportions. Currently, I am using the flex-grow property to adjust the ratio of the images. Although this works, it often ...
Help! I keep getting an error message: DataTable Uncaught TypeError: Cannot read property 'style' of undefined Does anyone have any ideas on how to fix this? I keep seeing the following error message: Uncaught Typ ...
I am attempting to implement a "hover" effect using jQuery. Everything seems to be working fine, except for a strange delay that occurs only the first time the complete callback is triggered - oddly enough, this is the only instance where it reaches the pr ...
While Blazorise supports the .figure-is-16x16 class, I have noticed that when using it in Material, it does not work by default. I am curious if the Material version of Blazorise supports this class or if there is another related class available. Current ...
Looking to simplify my page by reducing the number of divs, wondering if this "tile" could be achieved without using one. Here's the example I have in mind: <a href="mks.html" class="big-tile big-tile-1"> <h1>town<br> libra ...
Looking to extract information from this specific webpage using Scrapy: My goal is to retrieve the summaries from the GeneCard, which are structured in HTML as follows: <td> <a name="summaries"></a> <br > <b>Entr ...
After applying the CSS rule pointer-events: none to the text area, I noticed that the scrollbar was disabled. I need the scrollbar to remain enabled so that users can scroll and view the entire content, while still preventing editing within the textarea u ...
Within the project, I am utilizing this theme: export const theme = createMuiTheme({ ...defaultThemeConfig, overrides: { ...defaultThemeConfig.overrides, MuiListItem: { root: { '&:nth-child(odd)': { backgro ...
Is there a way to create an HTML text box that can only fit 3 characters exactly? I came across this code online: <input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/> This code creates a text box with a width of 10px ...
I am currently working on a project using Angular 2 that incorporates the fullpage.js port from https://github.com/meiblorn/ngx-fullpage. I am facing an issue with implementing scrolloverflow on a specific section and could use some guidance. I have alread ...
Here is an example snippet of my code: <div class="container"> <div class="item n1">Proe Schugaienz</div> <div class="item n2">Proe Schugaienz</div> </div> and I am using the following jQuery code: $(&apos ...