Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

Ross Gosling | 09/06/11 at 1:29pm Edit

(5) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

• 
  Last edited:
  09/06/11
  1:57pm
  Fahd Murtaza says:

  OK
  
  Here is the solution to the left button. I simply subtracted and added the width of the 'button' to the respective lines 15 and 24
  
  
  
  

    $(document).ready(function() {
  
    $('#slidebottom button').click(function() {
  
      $(this).next().slideToggle();
  
    });
  
  
  
    $('#slidewidth button').click(function() {
  
      $(this).next().animate({width: 'toggle'});
  
    });
  
  
  
  
  
    $('#slideleft button').click(function() {
  
      var $lefty = $(this).next();
  
      $lefty.animate({
  
        left: parseInt($lefty.css('left'),10) == 0 ?
  
        -$lefty.outerWidth()-19 :
  
        0
  
      });
  
    });
  
  
  
    $('#slidemarginleft button').click(function() {
  
      var $marginLefty = $(this).next();
  
      $marginLefty.animate({
  
        marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
  
        $marginLefty.outerWidth()+19 :
  
        0
  
      });
  
    });  
  
  
  
    $('#slidewidthsome button').click(function() {
  
      var $some = $(this).next(),
  
      someWidth = $some.outerWidth(),
  
      parentWidth = $some.parent().width();
  
      $some.animate({
  
        width: someWidth === parentWidth ? 
  
        someWidth/2 : 
  
        parentWidth - (parseInt($some.css('paddingLeft'),10) + parseInt($some.css('paddingRight'),10))});
  
    });
  
  
  
  });  

  Previous versions of this answer: 09/06/11 at 1:48pm | 09/06/11 at 1:48pm | 09/06/11 at 1:57pm

  • 09/06/11 1:38pm
    
    Fahd Murtaza says:

    Got it http://www.foxstonecarr.co.uk/wp-content/themes/foxstone/js/javascript.js

  • 09/06/11 2:00pm
    
    Fahd Murtaza says:

    Also after fixing the animation, you will still need the Zindex to be fixed for both <button> (s) to be on top of the sliding layers.
    
    Jurre Hanema suggested the right solution for z-index, make it high enough like 100.
    
    

  • 09/06/11 2:20pm
    
    Fahd Murtaza says:

    Also one more thing I noticed
    
    The code below
    
    

    
    
    .slide .inner {
    
    background: url('images/sidebar.jpg') top right no-repeat;
    
    position: absolute;
    
    left: 0;
    
    bottom: 0;
    
    width: 180px;
    
    height: 530px;
    
    color: #333;
    
    padding:0 0 0 10px;
    
    margin:0 19px 0 0;
    
    }
    
    
    
    .slide1 .inner {
    
    background: url('images/sidebar1.jpg') top left no-repeat;
    
    position: absolute;
    
    left: 0;
    
    bottom: 0;
    
    width: 180px;
    
    height: 530px;
    
    color: #333;
    
    padding:0 0 0 10px;
    
    margin:0 0 0 19px;
    
    }
    
    

    
    
    is used for putting sidebar.jpg and sidebar1.jpg into both .slide and .slide1 which is not correct as it also has the blue bar on left and right respectively.
    
    On the sidebar.jpg i.e
    
    http://www.foxstonecarr.co.uk/wp-content/themes/foxstone/images/sidebar.jpg
    
    you have to remove the right blue bar and vice versa for sidebar1.jpg.
    
    Then you can add these bars to the newstab.jpg (right side) and essentials.jpg (left side)
    
    Then these blue bars will be part of the button images and not the sliding layers. Hope that helps :)

• 
  Last edited:
  09/06/11
  1:40pm
  Jurre Hanema says:

  
  
  .slide button,
  
  .slide1 button {
  
      position: relative;
  
      z-index: 100;
  
  }
  
  
• 
  Last edited:
  09/06/11
  1:41pm
  Jeff Rose says:

  I was going to say something similar. The Z-index needs to be adjusted on the button relative to the content.
• 
  Last edited:
  09/06/11
  2:16pm
  Grégory Viguier says:

  It's not a css problem, your div.inner doesn't animate enough.
  when you use outerWidth() in jQuery, if you want to include the margin (it's your case), use outerWidth(true).
  That's all :)
  
  (see at the jQuery website : http://api.jquery.com/outerWidth )
  
  Answer to myself :
  In second though, I missed one thing, your buttons have a background and can hide your div.inner. So, yes, you can do quite the same thing with css.
  

  button {
  
      position: relative;
  
      z-index: 50;
  
  }
  
  .inner {
  
      z-index: 30;
  
  }

  Previous versions of this answer: 09/06/11 at 1:52pm | 09/06/11 at 2:16pm
• 
  Last edited:
  09/06/11
  8:37pm
  ej_emman says:

  I think Jurre Hanema has given the right answer.

This question has expired.

Ross Gosling voted on this question.

Current status of this question: Completed

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.