Databases
StackOverflow2013
Postsdbo
POfixed positioned left menu with jquery effects problems?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POfixed positioned left menu with jquery effects problems?
    text
    copied!<p>I am building a left side button with fixed position, when clicked it slides to the right and also another div to its left slide to the right and show some options.</p> <p>I managed to do the effect in Jquery and css. <em>However</em> there is one <strong>bug</strong>, <strong>when I scroll down one page or more and press the button at that position, it goes back to top and do the effect!</strong></p> <p>it just works fine at the top of the website!</p> <p>Here is my script:</p> <pre><code>$(document).ready(function(){ $(".events, .messages").click(function() { $(".side-menu").toggleClass("sideMenu-expand"); $(".side-buttons").toggleClass("sideButtons-expand"); }); </code></pre> <p>here is my html:</p> <pre><code> &lt;div class="side-menu"&gt; &lt;div class="side-buttons"&gt; &lt;ul&gt; &lt;li &gt;&lt;a class="events" href="#"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a class="messages" href="#"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>here is my Css:</p> <pre><code>.side-menu{ height:300px; background:#fff; width:150px; position:fixed; margin-left:-158px; margin-top:100px; border:7px solid #232323; border-radius: 8px; -moz-border-radius: 0 8px 8px 0px; /* vendor specific for mozilla */ -webkit-border-radius: 0 8px 8px 0px; /* vendor specific for webkit browsers */ float:left; } .sideMenu-expand{ position:fixed; margin-left:-7px; } .side-buttons{ width:40px; height:100px; margin-top:100px; background:url(images/side-button.png) no-repeat; position:fixed; margin-left:152px; float:left; z-index:100000; } .side-buttons ul{ list-style-type:none; } .side-buttons ul li a.events{ display:block; width:30px; height:18px; margin-top:12px; margin-left:-1px; background:url(images/icons/events.png) no-repeat; } .side-buttons ul li a.events:hover{ background:url(images/icons/events-ho.png) no-repeat; } .side-buttons ul li a.messages{ display:block; width:30px; height:18px; margin-left:10px; margin-top:10px; background:url(images/icons/messages.png) no-repeat; } .side-buttons ul li a.messages:hover{ background:url(images/icons/messages-ho.png) no-repeat; } .sideButtons-expand{ position:fixed; margin-left:155px; z-index:100000; } </code></pre> <p>my code basically add margin-left to side-menu and to the side-buttons when a button is clicked.</p> <p>your help will be appreciated. thanks.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload