slideright
100 views
Skip to first unread message
kidbrax
Feb 2, 2009, 8:14:54 PM2/2/09
to Prototype & script.aculo.us
Anyone know of a way to do a SlideRight/SlideLeft? I have seen the
BlindRight method but don't want my text squished down during the
transition.
BlindRight method but don't want my text squished down during the
transition.
david
Feb 4, 2009, 6:44:12 AM2/4/09
to Prototype & script.aculo.us
Hi kidbrax,
try this code:
<body>
<div id="1" style="width:100px;height:100px;background-
color:red;overflow:hidden;border:2px solid blue;">
<div id="2" style="width:100px;height:100px;position:relative;left:
0px;top:0px;background-color:red;">
this is my text - this is my text - this is my text - this is my
text - this is my text
</div>
</div>
<br /><br />
<button onclick="$('2').setStyle({left:'0px',top:'0px'});">reset</
button>
<br />
<button onclick="new Effect.Morph('2',{style:{left:'100px'}});">slide
right</button>
<br />
<button onclick="new Effect.Morph('2',{style:{left:'-100px'}});">slide
left</button>
<br />
<button onclick="new Effect.Morph('2',{style:{top:'100px'}});">slide
bottom</button>
<br />
<button onclick="new Effect.Morph('2',{style:{top:'-100px'}});">slide
top</button>
<script type="text/javascript">
function doFire(elem){
elem=$(elem);
var newEvt = '';
elem.fireEvent("click", newEvt);
alert('event fire ok');
}
<br />
$('2').observe('click',function(){ alert('click received by DIV
id="2"'); });
</script>
</body>
I hope you will find what you need?
--
david
try this code:
<body>
<div id="1" style="width:100px;height:100px;background-
color:red;overflow:hidden;border:2px solid blue;">
<div id="2" style="width:100px;height:100px;position:relative;left:
0px;top:0px;background-color:red;">
this is my text - this is my text - this is my text - this is my
text - this is my text
</div>
</div>
<br /><br />
<button onclick="$('2').setStyle({left:'0px',top:'0px'});">reset</
button>
<br />
<button onclick="new Effect.Morph('2',{style:{left:'100px'}});">slide
right</button>
<br />
<button onclick="new Effect.Morph('2',{style:{left:'-100px'}});">slide
left</button>
<br />
<button onclick="new Effect.Morph('2',{style:{top:'100px'}});">slide
bottom</button>
<br />
<button onclick="new Effect.Morph('2',{style:{top:'-100px'}});">slide
top</button>
<script type="text/javascript">
function doFire(elem){
elem=$(elem);
var newEvt = '';
elem.fireEvent("click", newEvt);
alert('event fire ok');
}
<br />
$('2').observe('click',function(){ alert('click received by DIV
id="2"'); });
</script>
</body>
I hope you will find what you need?
--
david
Reply all
Reply to author
Forward
0 new messages