I have managed to get this to work - although probably not the best solution,
by placing the panel and panel reveal link in a wrapper div, and placing
them off screen. Your positioning was all a bit messed up - only the panel
needs to have absolute positioning. The animate function slides the anel on
and off screen by checking first whether the panel is shown or not. Here is
the code I'm using:
JS
$(document).ready(function(){
$(".btn-slide").click(function(){
var targetX = $("#panelwrapper").css("left") == "0px"? '-340px':
'0px';
$("#panelwrapper").animate({"left": targetX, "opacity": 0.8}, {
duration: "slow" });
return false;
});
});
CSS:
body {
margin: 0;
padding: 0;
width: 670px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
#panelwrapper {
position:absolute;
top:0;
left:-340px;
height:600px;
width:400px;
z-index:1;
}
#panel {
float:left;
margin:0;
padding:20px;
background:yellow;
height:600px;
width:300px;
}
#content {
position:relative;
margin-left:50px;
}
.slide {
float:left;
width:1em;
height:520px;
margin:0;
padding:40px 0;
border-left:4px solid #422410;
}
.btn-slide {
font:bold 160%/2em Arial, Helvetica, sans-serif;
color:orange;
text-decoration:none;
}
HTML:
<body>
<div id="panelwrapper">
<div id="panel">
<p>
Phasellus ut libero. Nulla in libero non enim
tristique sollicitudin.
Ut tempor. Phasellus pellentesque augue eget ante. Mauris malesuada. Donec
sit amet diam sit amet dolor placerat blandit. Morbi enim purus, imperdiet
in, molestie sit amet, pellentesque eu, mauris. In vel erat vel ipsum
bibendum commodo. Curabitur accumsan. Nam sed metus. Etiam tristique
bibendum justo.
</p>
</div>
<p class="slide"> # S L I D E P A N E L </p>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. In commodo
lorem sed nisl. Aliquam commodo urna non lacus. Cras auctor sapien sodales
massa. Integer et sem. Pellentesque dolor sapien, lacinia sit amet,
imperdiet at, pretium in, neque. Nullam euismod commodo orci. Aliquam est
dolor, scelerisque non, sodales nec, tempor sit amet, lacus. Nullam ut nisl.
Donec congue neque in metus. Proin et nisi. Praesent porttitor semper purus.
Nam velit nulla, vulputate a, porta quis, dapibus a, purus. Aenean vitae
erat a urna bibendum tincidunt. Nullam tincidunt fermentum elit. Fusce diam.
Ut tempor. Sed sed est sit amet tortor hendrerit pulvinar. Aenean eu pede id
lorem ornare blandit. Duis justo lorem, laoreet quis, ullamcorper ut,
hendrerit non, augue. Morbi malesuada nisi non tortor pulvinar vulputate.
</p>
</div>
</body>
two7s_clash wrote:
>
>
> Hi all,
>
> I am working on slide panel:
> http://f1shw1ck.com/activity_viewer/slider.html#
>
> Problem: The panel which slides across pushes all the div' s in the
> page to the right when viewed in IE.
>
> Expected: The panel should act as an overlay on the current page
> without pushing any div's.
>
> Things tried:
>
> I wrapped the panel and button in a div with absolute positioning, but
> now the "slide panel" button doesn't move from place.
>
> Both URLs work as desired in Firefox.
>
> Thanks for any help you can provide.
>
>
--
View this message in context:
http://www.nabble.com/simple-horizontal-slide-panel---IE7-DOM%2C-Jquery-tp17766819s27240p17773253.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
