Avatar of Fezi
Fezi
Flag 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?
CSSjQueryWeb Development

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
COBOLdinosaur

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&
Fezi

ASKER
I tried it but that does not work
COBOLdinosaur

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&
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
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
COBOLdinosaur

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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.
Fezi

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

cant be done
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Julian Hansen

Why can't it be done - can you provide more information?
COBOLdinosaur

Should have seen it coming ... 25% deletions

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


Cd&
COBOLdinosaur

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&
Your help has saved me hundreds of hours of internet surfing.
fblack61
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.
Julian Hansen

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.
Fezi

ASKER
Hi, I tried your code, that didn't seem to do anything. Did you test the code? Did it work for you
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Julian Hansen

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.