Troubleshooting the sidebar pin-unpin problem using Jquery and CSS

I have created a single side panel that allows me to toggle between opening and closing the sidebar by hovering on it. I can also pin and unpin the sidebar by clicking on the pin image. Now, I want to open the sidebar onClick instead of onHover and remove the onHover functionality. Additionally, I wish to add a feature where clicking on the box to open the sidebar automatically pins it, eliminating the need for manual pinning. Once the sidebar is opened with a click, it should remain open until clicked again. To close the sidebar, I must click on the same box used to open it.

Code Sample

HTML

<ul id="dock">
            <li id="files">
                <ul class="free">
                    <li class="header"><a href="javascript:void(0);" class="dock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/snipicons/500/pin-128.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Dock"  style = "padding-top: 12px;"></a><a href="#" class="undock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/note2.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT=""  style = "padding-top: 12px;"></a><H5 ID="colorgreen">DISCOVER </h4></li>
                    <div id="accordion">
                      <h3>Section 1</h3>
                      <div class = "accordionheight">
                        <p>
                        accordion 1 content
                        </p>
                      </div>
                      <h3>Section 2</h3>
                      <div class = "accordionheight">
                        <p>
                        accordion 2 content
                        </p>
                      </div>
                      <h3>Section 3</h3>
                      <div class = "accordionheight">
                        <p>
                        accordion 3 content
                        </p>
                      </div>
                    </div>
                </ul>
            </li>

            <li id="tools">
                <ul class="free">
                    <li class="header"><a href="#" class="dock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/snipicons/500/pin-128.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Dock"></a><a href="#" class="undock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/note2.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Undock"></a><H5 ID="colorgreen">FACT FILE</H5></li>
                    <li><a href="#">This is one item</a></li>
                    <li><a href="#">This is one item</a></li>
                    <li><a href="#">This is one item</a></li>
                    <li><a href="#">This is one item</a></li>
                    <li><a href="#">This is one item</a></li>
               </ul>
            </li>
        </ul>

JS

            $(document).ready(function(){
            var docked = 0;

            $("#dock li ul").height($(window).height());

            $("#dock .dock").click(function(){
                $(this).parent().parent().addClass("docked").removeClass("free");

                docked += 1;
                var dockH = ($(window).height()) / docked
                var dockT = 0;               

                $("#dock li ul.docked").each(function(){
                $(this).height(dockH).css("top", dockT + "px");
                dockT += dockH;
                });
                $(this).parent().find(".undock").show();
                $(this).hide();

                if (docked > 0)
                $("#content").css("margin-left","250px");
                else
                $("#content").css("margin-left", "60px");
            });

            $("#dock .undock").click(function(){
                $(this).parent().parent().addClass("free").removeClass("docked")
                .animate({right:"-80px"}, 200).height($(window).height()).css("top", "0px");

                docked = docked - 1;
                var dockH = ($(window).height()) / docked
                var dockT = 0;               

                $("#dock li ul.docked").each(function(){
                $(this).height(dockH).css("top", dockT + "px");
                dockT += dockH;
                });
                $(this).parent().find(".dock").show();
                $(this).hide();

                if (docked > 0)
                $("#content").css("margin-left", "40px");
                else
                $("#content").css("margin-left", "80px");
            });

            $("#dock li").hover(function(){
                $(this).find("ul").animate({right:"40px"}, 200);
                }, function(){
                    $(this).find("ul.free").animate({right:"-80px"}, 200);
                });
            });

CSS

                 #dock{margin:0px; padding:0px; list-style:none; position:fixed; top:0px; height:100%; 
          z-index:9999; background-color:#f0f0f0; right:0px;}
    #dock > li {width:40px; height:8.3%; margin: 0 0 1px 0; background-color:#dcdcdc;
                 background-repeat:no-repeat; background-position:left center;}

    #dock #files {background-image:url(../images/menu.png);}
    #dock #tools {background-image:url(../images/menu.png);}

    /*#dock > li:hover {background-position:-40px 0px;}*/

    /* panels */
    #dock ul li {padding:5px; border: solid 1px #F1F1F1;}


    #dock > li:hover ul {display:block;}
    #dock > li ul {position:absolute; top:0px; right: 40px;  z-index:-1;width:180px; display:none;
                   background-color:#F1F1F1; border:solid 1px #969696; padding:0px; margin:0px; list-style:none;}
    #dock > li ul.docked { display:block;z-index:-2;}

    .dock,.undock{float:left;}
   .undock {display:none;}
    #sidepanelcontent {margin: 10px 0 0 60px;}

    #colorgreen {color:green;}

View JsFiddle Example

javascriptjqueryhtmlcsssidebar

Answer №1

Would you like something similar to this example http://jsfiddle.net/W7sNp/1/

I have incorporated a click event and made some adjustments by transferring code from hover. Additionally, I made slight modifications to the CSS

The tabs are hidden until you click on the boxes

Update:

I've included a quick demo http://jsfiddle.net/W7sNp/3/ which completely disregards hover effects

HTML remains unchanged

CSS

  1. Removed :hover selector
  2. Modified 
    #dock > li ul {position:absolute; top:0px; right: -40px; z-index:-1;width:0px; display:block;
    It is now visible but shifted out of view with a width of 0px

Script

All functions are now triggered by $("#dock li").click(), determining whether to open or close a tab based on its width

$(document).ready(function(){
var docked = 0;

$("#dock li ul").height($(window).height());

$("#dock li").click(function(){
var test = $(this).find("ul").css('width');
if (test=="0px"){
$(this).find("ul").addClass("docked").removeClass("free").animate({right:"40px",width:'180px'}, 200);
docked += 1;
}else{
$(this).find("ul").addClass("free").removeClass("docked").animate({right:"-40px",width:'0px'}, 200);
docked = docked - 1;
}
console.log(docked);

var dockH = ($(window).height()) / docked;
var dockT = 0;

$("#dock li ul.docked").each(function(){
$(this).height(dockH).css("top", dockT + "px");
dockT += dockH;
});

if (docked > 0)
$("#content").css("margin-left","250px");
else
$("#content").css("margin-left", "60px");
});
});

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

How to utilize View as a substitute for the div tag in your Web Project

Undoubtedly, when working on a web project, it is common practice to use the div element like this: <div> sample text </div> However, using div in React Native can lead to errors: <View> sample text </View> Is there a way to ...

javascriptreactjsreact-native

How can I use jQuery to specifically target children with a certain class, instead

Is there a way to display different images when hovering over specific images? I've attempted the following so far: $('.image').hover(function() { $('.icon').stop().animate({"opacity": 1}); },function() { $('.icon&a ...

jquery

What methods can be employed to maintain a consistent width for a multi-line span that aligns with the content?

Inside a div, I have 2 spans. When the content of the first span is short enough to fit on one line, the span's width matches the text content and positions the second span next to it. If the content of the first span is long and causes it to wrap, t ...

javascripthtmlcssflexbox

Issue encountered: Unable to locate 'moduleName' within the React JS module

As I was delving into the intricacies of React JS through the official documentation, everything seemed to be progressing smoothly. However, when attempting to export a method from one page to another as shown below (with file names provided at the beginni ...

javascriptreactjs

Converting Epoch timestamp to AM/PM format in a React render function

I am currently working on a personal project using React.js. I have successfully fetched an API, and one of the values returned is an Epoch timestamp. My goal is to display this timestamp in a human-readable format such as am/pm. The Epoch timestamp is dis ...

javascriptreactjstimestampepoch

Determine the duration/length of an audio file that has been uploaded to a React application

I am working on a React web application built with create-react-app that allows users to upload songs using react-hook-forms. The uploaded songs are then sent to my Node/Express server via axios. I want to implement a feature that calculates the length of ...

javascriptreactjsaudiofile-uploadmp3

Leveraging the Power of jsPDF in Your Google Apps Scripts

Is it feasible to integrate jsPDF into a Google Apps Script project? I am attempting to create documents using templated HTML, but certain CSS styles like background-color do not translate to PDF when using the getAs() function. Given the limitations of ...

javascriptcssgoogle-apps-scriptpdf-generationjspdf

Using AngularJS to bind models to a multidimensional array

As I am new to angular js, please bear with me. In my view, I have a grid of text input boxes that I would like to map to a 2D array in my controller or something similar in java script. The code in my view is as follows: <div ng-repeat="row in [1,2,3, ...

javascriptarraysangularjs

"Utilizing FabricJs with Multiple Canvases to Display the Same Image Repeatedly

Within a loop ranging from 1 to 2, I have created two canvases on the screen and stored them in an object. However, when I load the same two images onto each canvas, only the last canvas displays the images. Why is it not loading on both canvases? Interest ...

javascriptfabricjs

"Encountered a Http502 error while running the Node component (code provided for reference purposes

Encountering the Http502 error while developing a node component for chatbot. The first code snippet works flawlessly, but the second one triggers an Http502 error. Both snippets share the same host and proxy settings, with only the endpoint being differen ...

javascriptnode.jsnpmnode-moduleschatbot

Alter the reply prior to being dispatched to the customer

Node 16.14.2, Express 4.18.1 There have been several instances where individuals have altered res.send in order to execute actions before the response is sent to the client. app.use(function (req, res, next) { originalSend = res.send; res.send = f ...

javascriptnode.jsapiexpress

Is it possible to utilize a single Promise multiple times?

// App.js sites[site_name].search(value).then(function(results) { console.log(results); }); // SearchClass.js Search.prototype.search = function(search) { var self = this; this.params['wa'] = search; return new Promise(function ...

javascriptnode.js

Set a dynamic pixel height for a div to enhance the smoothness of slideToggle animation

I'm struggling with creating a slideToggle menu bar for my responsive layout that uses percent width instead of pixels. The issue I'm facing is that the slideToggle function appears to be jumpy due to this setup. Are there any better alternatives ...

jqueryslidetoggle

Bootstrap: Organize Columns Simultaneously with Push and Pull for Customized Column Ordering

I am experiencing an issue with the concurrent use of "Push" and "Pull" column ordering classes. I would like my columns to be ordered like this: However, the result on medium and larger screen sizes is <section style="direction:rtl;"> <div cla ...

csstwitter-bootstrap

"Implementing a seamless auto-refresh feature using jQuery without any

I am working with two PHP files where I fetch data from a database in one file and then retrieve all that JSON encoded data in another PHP file using the .getJSON() method. My goal is to refresh the entire page without any blinking or flickering. Any sug ...

jqueryjsonajax

data.map` does not work as a function

I've encountered a persistent error that has me stumped. Here's the code snippet: JSON {"inventory": [ { "item_id" : "123", "item_data" : { "image_id" : "1234", "description" : "foo", "lin ...

jqueryjson

Preventing Users from Inserting White Spaces in Input Fields Using the jQuery Validate Plugin

Is there a way to prevent users from inserting white-spaces in my input field? (I am using the jquery.validate.js plugin) For example: User cannot input white-spaces: John Pitt My User can input without white-spaces:JohnPittMy Edit: Using regex in ...

jqueryjquery-validate

Display several modal pop ups using AngularJS

I'm currently using AngularJS and I have a requirement where I need to check if a student ID exists in the database when a user clicks a button. If the student ID is found in the database, I want to display #modal1, otherwise show #modal2. Is it achie ...

javascriptangularjs

Incorporating HTML with ng-binds through transclusion

I have been developing an angular directive to enhance the functionality of ng-table by adding filtering and exporting features. The main goal is to make this directive reusable for multiple tables, which requires the <td> elements to be dynamic. To ...

javascripthtmlangularjsngtableangular-directive

Displaying specific data points

I am encountering an issue where I want to select multiple values and have each selected value displayed. However, when I make a selection, I only see one value from a single box. I do not wish to use append because it keeps adding onto the existing valu ...

javascripthtmljquery