Mysterious jQuery feature: Transform your top slider to slide in from the right side

My expertise lies in web design using Photoshop, while other programmers bring my designs to life. However, I've been considering taking on the coding part myself for a change with jQuery being outside of my comfort zone. This is my first project in which I require some assistance from you all. Please lend me your support :D

The code snippet below showcases jQuery color animations:

/*
 * jQuery Color Animations
 * Copyright 2007 John Resig
 * Released under the MIT and GPL licenses.
 */

(function(jQuery){
    // Code goes here...
})(jQuery);

Next, here's the HTML structure for the project:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- Head content -->
</head>
<body>
    <div id="main">
        <div id="panel">
            <!-- Content here -->
        </div>
        <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
    </div>
</body>
</html>

Lastly, here's the CSS styling used in the project:

body {
    margin: 0 auto;
    padding: 0;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
/* CSS properties continue... */

Answer №1

Link to jsFiddle

Here is the HTML code snippet:

 <div class="container">
  <div rel="1" class="box">1</div>
  <div rel="2" class="box">2</div>
  <div rel="3" class="box">3</div>
  <div rel="4" class="box">4</div>
  <div rel="5" class="box">5</div>
  <div rel="6" class="box">6</div>
 </div>
 <div class="slidepanel">
  <div class="closebtn">X</div>
  <div class="content"></div>
 </div>​

The CSS styling applied is as follows:

.container{
    width:400px;
    float:right;
    margin-right:100px;
}
.box{
    width:70px;
    height:45px;
    background:orange;
    float:right;
    margin:20px;
    border-radius:7px;
    text-align:center;
    padding-top:25px;
}
.slidepanel{
    position:absolute;
    right:0;
    background:brown;
    width:0px;
    height:300px;
}
.closebtn{

    color:white;
    width:20px;
    height:20px;
    background:red;
    right:0;
    text-align:center;
}
.content{
    font-size:60px;
    color:white;
    text-align:center;
    padding-top:50px;
}
​

And finally, the jQuery script utilized in this scenario:

$('.box').click(function(){
  $('.slidepanel').animate({"width":"500px"},1000);
  var i=$(this).attr('rel');
  $(".content").html(i);
});
$('.closebtn').click(function(){
  $('.slidepanel').animate({"width":"0px"},1000);
});

That's all for now!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

npm ERROR! 404 Content removed by unidentified source on August 8, 2022 at 09:20:35.527 UTC

Upon running the command <npm view e-biz-znnf versions --json> in the terminal, npm throws an error message: npm ERR! code E404 npm ERR! 404 Unpublished by undefined on 2022-08-08T09:20:35.527Z npm ERR! 404 npm ERR! 404 'e-biz-znnf' is no ...

What is the best way to position a static element next to a Vue draggable list?

I'm currently working on implementing a feature to display a list of draggable elements using vue-draggable. These elements are occasionally separated by a fixed element at specified position(s). My approach so far has involved creating a separate el ...

Images are not appearing correctly on Chrome browsers when using Windows operating system

img tags seem to have unusual margins in Chrome, Edge, and Opera browsers, while Firefox displays them correctly. Queries What is causing these margins specifically in Chrome? The Devtool does not detect any margin properties. Is there a straightforward s ...

Counting the elements on a page using Selenium and Node.js: A step-by-step guide

I've been experimenting with Selenium in Javascript using NodeJS and I'm trying to tally up some elements based on CSS selectors. So far, I've attempted a few methods: client.findElements(By.css(".some-class")).size(); However, I encounte ...

Exporting a table filled with data from a MySQL database to an Excel spreadsheet

Querying a MySQL database to display data in a table has been successful. Currently, it is set up to show results within a specific date range. Now, the goal is to add a button to the table that allows users to export the data to an Excel file. Previously ...

Send user input to a Controller method using Ajax

I am working on a MVC3 page that includes a link (Ajax.ActionLink). When the user clicks this link, it triggers a controller action and the result is displayed in a div, replacing the existing content. Here is the code snippet: @Ajax.ImageActionLink("/Im ...

issue with jquery $this

Take a look at this code snippet: $(function() { $('.do').deleteTable({ parent: $(".do").parentsUntil("#did") }); }); It works perfectly fine, but when I modify it to: $(function() { $('.do').deleteTable({ ...

Unable to utilize ng-Bootstrap datepicker

I recently cloned the quickstart project from the tour of heroes guide on Angular's official website, and I wanted to incorporate the ng-Bootstrap datepicker. However, I encountered some issues with its functionality. Below are the key components of m ...

"Running experiments with Google Ads and Google Analytics scripts results in a blank page being displayed

Currently, I am working on a plain HTML file and conducting tests to ensure that the Google Ads and Analytics scripts are functioning correctly before implementing them on other pages. A colleague who has an AdSense account provided me with the script code ...

The AngularJS uib-typeahead feature seems to be disrupting the interpolation process for the entire page

Encountering an issue with AngularJS 1.50 where interpolation stops working after a specific line of code. <input type="text" class="form-control" id="search" name="search" placeholder="{{ shouldInterpolateButDoesnt }}" typeahead-on-sel ...

Personalize the jquery autocomplete outcome

I'm currently utilizing jQuery autocomplete along with a remote data source. $( "input#searchbar" ).autocomplete({ source: function( request, response ) { $.ajax({type: "post", mode: "abort", dataType: ...

What are the steps to modify the text color in WKWebView?

I've customized my ViewController to include a WKWebView, where I load my content from both .html and .css files. The result resembles a controller for reading books within the Apple Books app. do { guard let filePath = Bundle.main.path(fo ...

Challenges arise when mapping, splicing, and creating trivia question options in React

Having some trouble randomizing questions options and also my app seems to render themself 4 times. Any suggestions on how to solve this issue? This is my debut question on Stack Overflow. const [startPage,setStartPage]=React.useState(false) const [quest ...

Leveraging route configuration's scope in HTML

As a beginner in AngularJs, I am currently exploring the creation of a single page application. However, I am encountering difficulties in converting my initial code into more professional and efficient code. During this conversion process, I have separate ...

Using PHP to identify the origin of a JavaScript file on a webpage

I have been attempting to locate an embedded stream link from a certain webpage. After inspecting the source code of the page, I found the following snippet: <script type='text/javascript'> swidth='640', sheight='460';& ...

The issue arises when trying to retrieve values through AJAX to populate input fields using jQuery, but for some reason

When sending data to check whether an item exists or not, I return 1 if it does, and 0 otherwise. I am using the CodeIgniter framework for a jQuery Ajax request, but after the values are returned in Ajax, I am unable to retrieve them directly upon completi ...

What is the best way to extract words from a string within a textarea using javascript?

Currently, I am focused on improving my skills in JavaScript and HTML. In one of my projects, there is a text area where the user inputs a CSV format like this: 17845 hello bye 789 After input, I get 17845,hello,bye,789. Now, the challenge is t ...

JavaScript animation not functioning properly when height is set to "auto"

Can someone help me figure out why setting the height to "auto" in the code snippet below isn't working as expected? I want the DIV to adjust its size based on the content, but it's not happening. Any ideas on how to fix this issue would be great ...

"Error encountered: Array is undefined when using the map and subscribe functions in Ionic

I have developed a service that is supposed to retrieve data from a JSON file and assign it to an array called 'countries', which will be used throughout the application on multiple pages. However, when I call the method getCountries, the countri ...

If the browser is Internet Explorer, then load file [A]; otherwise, load file [B]

One of my webpages requires unique content to be loaded for different web browsers. For example: If the browser is Internet Explorer {include file="/content1.tpl"} Else if it's any other browser {include file="/content2.tpl"} {/if} Content1. ...