Link to home
Start Free TrialLog in
Avatar of Fezi
FeziFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Jquery Sliding Panel CSS fix

Hi Experts,

I'm  using the sliding jquery login panel on my website, I have this issue when you resize the browser from the right, the black pull down panel follows the browser. I want that black pull down login panel fixed, my website is all in the centre of the browser just like experts-exchange website, I want the pull down panel towards the right of the browser fixed, so it does not move with the browser resizing.

http://web-kreation.com/demos/Sliding_login_panel_jquery/#

how can this be done? simple css fix?
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Give it a fixed width so it does not re-size, or use position:absolute to keep it where you want it; or you might need a combination of both.

Cd&
Avatar of Fezi

ASKER

I tried it but that does not work
What I see is that .tab is position:relative

if youare not trying fix that but instead want #toppanel, which is position absolute to freeze, then width:100% will definitely not do it, that just causes it to re-size, and the tab will move.

The CSS does not look like you want to do what I understand you are asking for.  What exactly is the expected behavior?

Cd&
Avatar of Fezi

ASKER

Hi,

If you have a look at the attached image, you will see I want the tab in that position, even if you resize the browser, I want the tab fixed there, but when you click on the tab, it should work like it does now, click on it and it pulls down.

is this possible?
ee1.jpg
ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Julian Hansen
The problem is the toppanel has a width of 100% so the margin: 0 auto is going to do nothing.

What you need to do is to put the ul inside another div like so
<div style="width: 740px; margin: 0 auto">
		<ul class="login">
	    	<li class="left">&nbsp;</li>
	        <li>Hello Guest!</li>
			<li class="sep">|</li>
			<li id="toggle">
				<a id="open" class="open" href="#">Log In | Register</a>
				<a id="close" style="display: none;" class="close" href="#">Close Panel</a>			
			</li>
	    	<li class="right">&nbsp;</li>
		</ul> 
</div>

Open in new window

And then change the styling of your ul to be
   ...
   right: 0px; // Instead of 150.

That should do it.
Avatar of Fezi

ASKER

I've requested that this question be deleted for the following reason:

cant be done
Why can't it be done - can you provide more information?
Should have seen it coming ... 25% deletions

I guess " I recommend you re-think your design, " does not count.


Cd&
http:#a38179446  proposes a solution, but it will not work in isolation.  It requires a re-working of the page design.  My recommendation to re-think the design reflects this and indicates that the desired behavior is not possible without some compromises in the design specification.

However Fezi has not indicated any desire to modify the design or try anything different; and so they are right. It can't be done within the constraints of the current design; which is what I indicated.


Cd&
Avatar of Fezi

ASKER

Hi, Sorry for the long delay, this can not be done, because of design of this sliding panel. As mentioned by @COBOLdinosaur, it needs to be rethinked about how this is going to be done. I've emailed the developer for this sliding panel, and he did mention about redesigning this to work like this.
Did you try the code I posted? I did not see a reply that you had? You have not answered my question on why my posted solution does not work.
I am not interested in the points I would like to know if my solution works and if not why not.
Avatar of Fezi

ASKER

Hi, I tried your code, that didn't seem to do anything. Did you test the code? Did it work for you
Yes, used the in page editor in Chrome to add this div around your ul class="login" element.
Just did it again now and it works.
<div class="tab">
  <div style="width: 740px; margin: 0 auto">   <!-- ADD THIS -->
    <ul class="login">
     ...
    </ul>
  </div>  <!-- AND THIS -->
</div> 

Open in new window

If you think it does not work - add the above to your site and lets have a look at it.