Launch the sidebar window using jQuery

I've been attempting to create something similar to this.

However, I'm having trouble replicating it exactly.

What I've attempted

I've managed to create a replica, but the issue is that the buttons are fixed.

Could setting the left property in CSS make it possible?

If anyone can provide guidance on this, it would be greatly appreciated.

Thanks.

(function($) {

var map = new google.maps.Map(document.getElementById('new_map_canvas'), {
zoom: 4,
center: new google.maps.LatLng(57.658339,-102.918287),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
  
$("#store_").click(function(){
//$(".side_window_content").show("slide", { direction: "left" }, 1000 );
$(".side_window_content").slideToggle();
});
})(jQuery);
#new_map_canvas{
border:5px solid;
}
#store_, #direction_{
position:absolute;
z-index:5;
-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.side_window, .side_window_content{
position:absolute;
z-index:6;
}
.side_window_content{
width:300px;
height:660px;
background:white;
display:none;
}
.side_window{

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="side_window_content">
<input type="text" id="searchStore" placeholder="Search address" />
</div>
<div class="side_window">
<input type="button" id="store_" value="Store" />
<input type="button" id="direction_" value="Direction" />
</div>
<div id="new_map_canvas" style="height:660px; width:auto;"></div>

Answer №1

Check out the code I used on my personal blog. If you like it, you can use something similar:

$('#icox').on('click', function() {
    $(this).children().toggleClass('active');
    $('#menux').toggleClass('active');
});

To customize the layout, you can adjust the margin-left: -300px; in the CSS or experiment with css3 transform: translate.

Post Modifications:

Take a look at the Live Demo

Answer №2

One way to toggle the width is by using animate width. Try this:

$('.side_window_content').animate({width: 'toggle'});

Answer №3

making some changes to the example provided by @Vikrant :

#icox {
    float: right;
    width: 50px;
    height: 50px;
    background-color: rgb(218, 218, 218);
}

http://jsfiddle.net/6H8xr/9/

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

Wait for a for loop to finish before triggering a function in Node.js

Hey there! I'm a newbie when it comes to node.js and I feel like I'm stuck in callback hell at the moment. I've gone through various similar questions but still struggling to make my code work properly. Basically, what I'm trying to do ...

Modifying the jquery cookie's value

As soon as a user lands on my site, a persistent cookie (x1st) is set with a unique value (such as 'hdflashfafafxx233ddd'). This particular cookie is utilized for tracking purposes. However, if the user chooses to opt out of tracking cookies, I ...

Exploring Vue Routing with Regular Expressions

Recently, I integrated a route with a parameter in my Vue project. const routes = [ { path: "/:lang(^$|^es$|^pt$|^cn$)", name: "Home", component: Page, }, { path: "/privacy", name: "Privacy", component: Privacy, }, { ...

Best practices for organizing an array of objects in JavaScript

I have an array of objects with nested arrays inside, and I need to restructure it according to my API requirements. [{ containerId: 'c12', containerNumber: '4321dkjkfdj', goods: [{ w ...

I am unable to retrieve values from the req.body object in Node.js

Can anyone assist with node.js? I am having trouble accessing the values in my req.body object. Here is how it is populated: { '{ "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670a060e0b270f0814130906 ...

Encountered an issue while attempting to include multiple JavaScript sources. Please review your configuration settings for the javascripts.join

While setting up a basic app using phoenix-elixir and brunch, encountering the following error: 23 Mar 10:18:10 - warn: node_modules/phoenix/priv/static/phoenix.js compiled, but not written. Check your javascripts.joinTo config 23 Mar 10:18:10 - war ...

What is the best way to store HTML in a variable as a string?

Imagine if I have a variable: let display_text = "Cats are pawsome!" I aim to show it as such: <div> <b>Cats</b> are pawsome! </div> To be clear, dynamically enclose the word "cats" whenever it shows up. ...

html2canvas bottom margin

I coded this in react function download(element) { html2canvas(element).then((canvas) => { window.open(canvas.toDataURL('image/png')); }); } return ( <div className='box' onClick={( ...

What is the best way to toggle the visibility of a background image within a carousel?

As a beginner in j-query, I am struggling with creating a slider image carousel using a full background image. Most of the solutions I found online require a fixed width for all pictures to slide smoothly. However, I believe there might be a way to use an ...

How can I retrieve text that is enclosed within 2 specific tags and then format the output according to my preference?

Is it possible to extract text between specific tags and format the output as desired? Are there any tools or scripts available for this task? For instance: [b]1.[/b] [artist]Norman Bass[/artist] – How U Like Bass? (Warp Brothers Club Mix) [i](3:26 ...

Attempting to generate a dynamic animation of a bouncing sphere confined within a boundary using components, but encountering

I'm new to JavaScript and currently working on a project involving a bouncing ball inside a canvas. I was able to achieve this before, but now I'm attempting to recreate it using objects. However, despite not encountering any errors, the animatio ...

Tips for retrieving the value of a table cell when the checkbox in the corresponding row is selected

Within my project, I am utilizing a table. The html code I am using is as follows: <table id="assTB" border="1px" cellspacing="0"> <colgroup> <col style="width:15%"> <col style="width:15%"> <col sty ...

Leveraging JQuery for Inserting Data Into mySQL Database

As I delve into JQuery for the first time while working on a project, I realize that this endeavor serves as more of a learning experience rather than a functional one. Currently, I have three PHP files in play: 'connection.php', which establishe ...

Do you know of a solution to fix the Stylelint error regarding semicolons when using CSS variables?

React.js Css in JS(Emotion) The components above are part of this setup. Here is the configuration for Stylelint: module.exports = { extends: [ "stylelint-config-standard", "./node_modules/prettier-stylelint/config.js", ], ...

Creating Docker images in a lerna monorepo without the need for publishing

In the context of Lerna monorepos, the primary goal is to facilitate branch building and deployments. The challenge arises from the fact that Lerna monorepos either consolidate dependencies in NPM or utilize yarn workspaces to achieve the same outcome, re ...

Iterating over a column in a table to construct a text string

I'm currently working on a script to iterate through a table column and concatenate the values into a string. Here is what I have written so far: $(".ConvertSQL").click(function () { var values $(".TableQuery tr").each(function () ...

Retrieving the date from the final item in a JSON object using AngularJS

In my web application built with AngularJS, I am dynamically creating objects. The goal is to allow users to load new events by clicking a button. To achieve this functionality, I need to determine the date of the last event loaded so that I can fetch the ...

Utilize JavaScript when sharing on social media to avoid the possibility of embedding the entire

This javascript code snippet is extracted from www.twitter.com (simply click to view the source code). I have reformatted it for better readability: if (window.top !== window.self) { document.write = ""; window.top.location = window.self.location; s ...

Retrieve checkbox selected value using pug and node.js

How can I retrieve the value of a checked checkbox in order to redirect to (href="/player/edit/:id") or (href="/player/delete/: id"), and obtain the player id for editing or deleting? I have omitted other code details such as app.js which includes the ser ...

Guide to aligning Material UI card in the center (React)

I've been struggling to find a solution for centering a Material UI card in React. Any assistance would be greatly appreciated! Thank you :) link to image on website <Grid container justify="center"> <Card s ...