I presume you are reffering to IE6 - I don't have a copy of that so I
can't test it, but it works fine in IE8
I suspect the problem is that IE6 doesn't like the "block"
definitiion.
Lets try an alternative solution.....
1. Remove the last changes you made.
2. Add this new class:
.hidden{display:none;}
3. Add this class to your v-menu element like this:
<ul id="v-menu2" class="v-menu hidden">
4. Add the following line to the mootools javascript to now remove
this class:
$('v-menu2').removeClass('hidden');
Rather a long-winded method but if you really "must" have IE6
compatability..... this might work :)
Chris
On Aug 20, 11:55 am, Deepali <[email protected]> wrote:
> Chris, You are simply genius :)
>
> Its working!!!!!
>
> But its not working with IE, I mean its not showing the effect. what
> do you think what could be the cause?
>
> On Aug 20, 2:35 pm, cbolson <[email protected]> wrote:
>
> > I really don't see why you need the e = new Event(e);
> > But still..... moving on...
>
> > The login block is shown as the page loads because you are only hiding
> > it when the document has finished loading. In the meantime it is
> > going to be shown. The more content you have on the page, the longer
> > it will take to load so the longer the block will be shown.
> > You could hide the block via css like this:
> > .v-menu{
> > border:solid 1px #7F9FBF;
> > width:200px;
> > clear:both;
> > display:none; /* hide the block - display via mootools*/}
>
> > Then add this line to change this css style and display (though then
> > hidden by the slide) before you define the side in the javascript:
>
> > $('v-menu2').setStyle('display','block');
>
> > Chris
>
> > On Aug 20, 11:12 am, Deepali <[email protected]> wrote:
>
> > > Chris, its working now. what i did is
> > > i just replace this to
> > > e.stop();
> > > mySlide.toggle();
>
> > > this.
> > > e = new Event(e);
> > > mySlide.toggle();
> > > e.stop();
>
> > > And its working. and i have checked it on where actually i wanted to
> > > impliment it. Thnaks a lot.
>
> > > but still one problem is remaining while loading the js it show me the
> > > hidden part(two text box or the content) and after the page gets load.
> > > it works fine. why is it so?
>
> > > Anyways thaks a lot.
>
> > > On Aug 20, 1:56 pm, Deepali <[email protected]> wrote:
>
> > > > i have added thr following
>
> > > > <script type="text/javascript" src="mootools-1.2.3.1-more.js"></
> > > > script>
> > > > <script type="text/javascript" src="mootools-1.2.3-core.js"></script>
>
> > > > or
>
> > > > <script type="text/javascript" src="mootools-1.2.3.1-more.js"></
> > > > script>
> > > > <script type="text/javascript" src="mootools-1.2.3-core.js"></script>
> > > > <script type="text/javascript" src="mootools.svn.js"></script>
>
> > > > but its not working. is it working on your m/c without mooshells?
>
> > > > On Aug 20, 1:25 pm, cbolson <[email protected]> wrote:
>
> > > > > Hi,
> > > > > You haven't included the mootools core file.
> > > > > You need both the "core" and the "more" files.
>
> > > > > Chris
>
> > > > > On Aug 20, 10:19 am, Deepali <[email protected]> wrote:
>
> > > > > > I have downloaded new version. But still no difference. I have two
> > > > > > pages(trail pages)
> > > > > > mootoolslogin.php
> > > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> > > > > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> > > > > > <html xmlns="http://www.w3.org/1999/xhtml";>
> > > > > > <head>
> > > > > > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
> > > > > > />
> > > > > > <title>Untitled Document</title>
> > > > > > <script type="text/javascript" src="mootools-1.2.3.1-more.js"></
> > > > > > script>
>
> > > > > > <style type="text/css">
> > > > > > body{font-family:Arial, Helvetica, sans-serif; font-size:13px;}
> > > > > > /* -------------------------------------------------------- */
> > > > > > /*
> > > > > > BUTTON
> > > > > > */
> > > > > > .button{
> > > > > > background:url(img/button.png) -32px right no-repeat;
> > > > > > color:#FFFFFF;
> > > > > > clear:both;
> > > > > > display:block;
> > > > > > float:left;
> > > > > > font-size:13px;
> > > > > > font-weight:bold;
> > > > > > height:31px;
> > > > > > line-height:31px;
> > > > > > width:auto;
> > > > > > margin-right:30px;
>
> > > > > > }
>
> > > > > > a.button {
> > > > > > text-decoration:none;
> > > > > > }
> > > > > > .button span {
> > > > > > background:url(img/button.png) left top no-repeat;
> > > > > > display:block;
> > > > > > height:31px;
> > > > > > line-height:31px;
> > > > > > padding-left:10px;
> > > > > > padding-right:8px;
> > > > > > margin-right:20px;
> > > > > > }
> > > > > > /* -------------------------------------------------------- */
> > > > > > /*
> > > > > > MENU
> > > > > > */
> > > > > > .v-menu{
> > > > > > border:solid 1px #7F9FBF;
> > > > > > width:200px;
> > > > > > clear:both;
>
> > > > > > }
>
> > > > > > ul.v-menu, .v-menu li{
> > > > > > padding:0;
> > > > > > margin:0;
> > > > > > list-style:none;
> > > > > > }
> > > > > > ul.v-menu{
> > > > > > clear:both;
> > > > > > margin-top:6px;
> > > > > > padding:6px 10px;
> > > > > > }
> > > > > > .v-menu li a{
> > > > > > color:#555555;
> > > > > > font-weight:bold;
> > > > > > display:block;
> > > > > > border-top:solid 1px #DEDEDE;
> > > > > > padding:4px;
> > > > > > text-decoration:none;
> > > > > > }
> > > > > > .v-menu li a:hover{
> > > > > > color:#999999;
> > > > > > }
> > > > > > </style>
> > > > > > <script>
> > > > > > window.addEvent('domready', function(){
> > > > > > var mySlide = new Fx.Slide('v-menu2').hide();
> > > > > > $('toggle').addEvent('click', function(e){
> > > > > > e.stop();
> > > > > > mySlide.toggle();
> > > > > > });
>
> > > > > > });
>
> > > > > > </script>
>
> > > > > > </head>
> > > > > > <body>
>
> > > > > > <form action='<?$PHP_SELF;?>' name="messageFrm" method="post">
> > > > > > <table width="600" border="0" align="center" cellpadding="0"
> > > > > > cellspacing="0">
> > > > > > <tr>
> > > > > > <td width="50%"><h2>Login</h2></td>
> > > > > > </tr>
> > > > > > <tr>
> > > > > > <td width="50%" valign="top">
> > > > > > <a href="loginpagehere.php" id="toggle"><span>Show Panel</span></a>
> > > > > > <div style="clear:both">
> > > > > > <ul id="v-menu2" class="v-menu">
> > > > > > <li>
> > > > > > <label for="username">Username or email</label>
> > > > > > <input id="username" name="username" value="" title="username"
> > > > > > tabindex="4" type="text">
> > > > > > </li>
> > > > > > <br/>
> > > > > > <li>
> > > > > > <label for="password">Password</label>
> > > > > > <input id="password" name="password" value="" title="password"
> > > > > > tabindex="5" type="password">
> > > > > > </li>
> > > > > > <br/>
> > > > > > <li>
> > > > > > <input id="signin_submit" value="Sign in" tabindex="6"
> > > > > > type="submit">
> > > > > > </li>
> > > > > > <li>
> > > > > > <input id="remember" name="remember_me" value="1" tabindex="7"
> > > > > > type="checkbox">
> > > > > > <label for="remember">Remember me</label>
> > > > > > </li>
> > > > > > <li>
> > > > > > </li>
> > > > > > </ul>
> > > > > > </div></td>
> > > > > > </tr>
> > > > > > </table>
> > > > > > </form>
> > > > > > </body>
> > > > > > loginpagehere.php
>
> > > > > > <table width="600" border="0" align="center" cellpadding="0"
> > > > > > cellspacing="0">
> > > > > > <tr>
> > > > > > <td width="50%"><h2>Login</h2></td>
> > > > > > </tr>
> > > > > > <tr>
> > > > > > <td width="50%" valign="top">
> > > > > > <a href="loginpagehere.php" id="toggle"><span>Show Panel</span></a>
> > > > > > <div style="clear:both">
> > > > > > <ul id="v-menu2" class="v-menu">
> > > > > > <li>
> > > > > > <label for="username">Username or email</label>
> > > > > > <input id="username" name="username" value="" title="username"
> > > > > > tabindex="4" type="text">
> > > > > > </li>
> > > > > > <br/>
> > > > > > <li>
> > > > > > <label for="password">Password</label>
> > > > > > <input id="password" name="password" value="" title="password"
> > > > > > tabindex="5" type="password">
> > > > > > </li>
> > > > > > <br/>
> > > > > > <li>
> > > > > > <input id="signin_submit" value="Sign in" tabindex="6"
> > > > > > type="submit">
> > > > > > </li>
> > > > > > <li>
> > > > > > <input id="remember" name="remember_me" value="1" tabindex="7"
> > > > > > type="checkbox">
> > > > > > <label for="remember">Remember me</label>
> > > > > > </li>
>
> > > > > > </ul>
> > > > > > </div></td>
> > > > > > </tr>
> > > > > > </table>
> > > > > > As you can see there is nothing that can crack the js. now the
> > > > > > status
> > > > > > is as soon as i click on the Show Panel link it goes to
> > > > > > loginpagehere
> > > > > > page. It means the effect is not yet working.On your m/c, is it
> > > > > > working without using mooshells?
>
> > > > > > On Aug 20, 12:52 pm, cbolson <[email protected]> wrote:
>
> > > > > > > It looks like you are now includug the same flle (more or less)
> > > > > > > several times.
>
> > > > > > > Go to motools.net and download the mootools.1.2.3.js latest
> > > > > > > version
> > > > > > > here:http://mootools.net/download
>
> > > > > > > Then you need to get the Fx.Slide from the "more" builder
> > > > > > > here:http://mootools.net/more
> > > > > > > On that page, you need to mark the Fx.Slide option from within the
> > > > > > > "FX" category (and any others you think that you might need -
> > > > > > > personally I always add all the fx effects and the drag effects)
>
> > > > > > > This basically extends the mootools library.
>
> > > > > > > You don't need the other js files that you currently have.
>
> > > > > > > I have just followed this process - ie redownloaded mootools core,
>
> ...
>
> read more »
